<template>
  <div class="testdiv">
    <div class="divborder newSearchDiv" style="margin:0px;">
      <!-- 产线 -->
      <div class="filter">
        <label>{{this.$t('1025')}}：</label>
        <Cascader
          :data="datalevel"
          :value="leveldata"
          trigger="click"
          change-on-select
          class="searchSelect"
          @on-change="handlelevelchange"
        ></Cascader>
      </div>
      <!-- 异常类别 -->
          <div class="filter">
            <label>{{$t('960418')}}：</label>
            <Cascader
              :data="expectionLevel"
              :value="expectionLeveldata"
              trigger="click"
              change-on-select
              class="searchSelect"
              @on-change="handleExpectionlevelchange"
            ></Cascader>
          </div>
      <!-- 时间范围 -->
      <div class="filter">
        <label>{{$t("900910")}}</label>
        <Select
          v-model="datetype"
          label-in-value
          clearable
          class="searchSelect"
          @on-change="timechange"
        >
          <Option :value="1" id="今天">{{$t("900911")}}</Option>
          <Option :value="2" id="昨天">{{$t("900390")}}</Option>
          <Option :value="3" id="本周">{{$t("900912")}}</Option>
          <Option :value="4" id="上周">{{$t("900913")}}</Option>
          <Option :value="5" id="本月">{{$t("900914")}}</Option>
          <Option :value="6" id="上月">{{$t("900915")}}</Option>
          <Option :value="7" id="本年">{{$t("900916")}}</Option>
          <Option :value="8" id="上年">{{$t("900917")}}</Option>
        </Select>
      </div>
      <div class="filter">
        <label>{{$t('1035')}}</label>
        <DatePicker
          type="daterange"
          format="yyyy-MM-dd HH:mm:ss"
          v-model="index_time"
          placeholder="Select date"
          class="searchInput MaxWidth  "
        ></DatePicker>
      </div>

      <!-- 次级搜索条件--隐藏 -->
      <div v-show="!morecondition">
        <div>
          <!-- 换型产品 -->
          <div class="filter">
            <label>
              {{$t('1950482')}}：
            </label>
            <Select v-model="product_code" label-in-value clearable  class="searchSelect">
              <Option
                v-for="item in product_code_list"
                :value="item.code"
                :key="item.id"
              >{{item.name}}</Option>
            </Select>
          </div>
          <div class="filter">
            <label>
             {{$t('900337')}}：
            </label>
            <Input  class="searchInput" type="text" v-model="work_order" />
          </div>
        </div>
      </div>
      <!-- 按钮 -->
      <div class="searchBtn">
        <Button type="primary" class="twoWord intervalRight" icon="ios-search" @click="search">{{$t('1001')}}</Button>
        <Button type="primary" class="fourWord intervalRight" icon="ios-close" @click="del">{{$t('950467')}}</Button>
        <Button type="primary" class="sixWord" icon="ios-eye-outline" @click="finddetail">{{$t('8000018')}}</Button>
      </div>
      <!-- 更多条件 按钮 -->
      <MoreConbtn @getCon="morecondition = !morecondition" :morecondition="morecondition"></MoreConbtn>
    </div>

    <!-- 表格 -->
    <div class="divborder newTableDiv">
      <Table
         class="tableClass"
        width="100%"
        highlight-row
        :data="tableData"
        :columns="tableColumns"
        @on-current-change="handleRowChange"
      ></Table>
      <div class="pageDiv">
        <div class="pageDirection">
          <Page
            :total="total"
            :current="page"
            @on-change="changePage"
            show-elevator
            show-sizer
            show-total
            @on-page-size-change="handlePageSize"
            :page-size-opts="[10,20,30,40,100]"
          ></Page>
        </div>
      </div>
    </div>
    <!-- 详情模态框 -->
    <Modal class="newModalClass" :title="$t('950253')" v-model="detail_modal" :styles="{width:'500px'}">
      <div class="modal_body">
        <div>
          <div class="filter">
            <label>
              <span v-text="$t('960411')">一级异常类型</span>：
            </label>
            <span v-text="currentObj.expection1"></span>
          </div>
        </div>
        <div>
          <div class="filter">
            <label>
              <span v-text="$t('960412')">二级异常类型</span>：
            </label>
            <span v-text="currentObj.expection2"></span>
          </div>
        </div>
        <div>
          <div class="filter">
            <label>
              <span v-text="$t('960413')">三级异常类型</span>：
            </label>
            <span v-text="currentObj.expection3"></span>
          </div>
        </div>
        <div>
          <div class="filter">
            <label>
              <span v-text="$t('8000019')">异常触发时间</span>：
            </label>
            <span v-text="currentObj.create_time"></span>
          </div>
        </div>
        <div>
          <div class="filter">
            <label>
              <span v-text="$t('90000085')">异常签到时间</span>：
            </label>
            <span v-text="currentObj.handle_time"></span>
          </div>
        </div>
        <div>
          <div class="filter">
            <label>
              <span v-text="$t('960406')">异常解除时间</span>：
            </label>
            <span v-text="currentObj.complete_time"></span>
          </div>
        </div>
        <div>
          <div class="filter">
            <label>
              <span v-text="$t('960405')">异常持续时间</span>：
            </label>
            <span v-text="currentObj.andon_cost_time"></span>
          </div>
        </div>
      </div>
      <div slot="footer">
        <Button type="primary" size="large" @click="detail_modal=false" v-text="$t('1011')">保存</Button>
      </div>
    </Modal>
    <!-- 添加模态框结束 -->
  </div>
</template>
<script>
import axios from '@/libs/api.request';
import moment from 'moment';

export default {
    data () {
        return {
            datalevel: [], // 产线层级数据
            leveldata: [], // 产线层级value
            index_time: [], // 时间范围
            datetype: 1,
            expectionLevel: [], // 异常级别
            expectionLeveldata: [], // 产线层级value
            product_code: '', // 换型产品
            product_code_list: [], // 换型产品list
            detail_modal: false, // 详情modal
            work_order: '',
            // 表格使用字段
            total: 0,
            page: 1,
            morecondition: false,
            pagesize: 10,
            tableData: [],
            tableColumns: [
                {
                    type: 'index2',
                    title: this.$t(1008),
                    key: 'xuhao',
                    render: (h, params) => {
                        return h(
                            'span',
                            params.index + (this.page - 1) * this.pagesize + 1
                        );
                    },
                    width: 60
                },
                {
                    title: this.$t('1026'),
                    key: 'station_name',
                    align: 'center',
                    width: 140
                },
                {
                    title: this.$t('900337'),
                    key: 'work_order',
                    align: 'center',
                    width: 140
                },
                {
                    title: this.$t('960411'),
                    key: 'expection1',
                    align: 'center',
                    width: 140
                },
                {
                    title: this.$t('960412'),
                    key: 'expection2',
                    align: 'center',
                    width: 140
                },
                {
                    title: this.$t('960413'),
                    key: 'expection3',
                    align: 'center',
                    width: 140
                },
                {
                    title: this.$t('960409'),
                    key: 'create_time',
                    width: 140,
                    align: 'center'
                },
                {
                    title: this.$t('960408'),
                    key: 'creator_name',
                    align: 'center',
                    width: 140
                },
                {
                    title: this.$t('960407'),
                    key: 'handle_time',
                    width: 140,
                    align: 'center'
                },
                {
                    title: this.$t('200049'), // 签到人员
                    key: 'handler_name',
                    align: 'center',
                    width: 140
                },
                {
                    title: this.$t('960406'), // 异常解除时间
                    key: 'complete_time',
                    width: 140,
                    align: 'center'
                },
                {
                    title: this.$t('8000020'), // 异常解除人员
                    key: 'completer_name',
                    width: 140,
                    align: 'center'
                },
                {
                    title: this.$t('8000015'), // 复线时间
                    key: 'approve_time',
                    width: 140,
                    align: 'center'
                },
                {
                    title: this.$t('8000016'), // 复线人员
                    key: 'approver_name',
                    align: 'center',
                    width: 140
                },
                {
                    title: this.$t('960405'),
                    key: 'andon_cost_time', // 异常持续时间
                    width: 140,
                    align: 'center'
                },
                {
                    title: this.$t('1950482'), // 换型产品
                    key: 'product_name',
                    align: 'center',
                    width: 140
                },
                {
                    title: this.$t('1030'), // 备注
                    key: 'remark',
                    align: 'center',
                    width: 140
                }
            ],
            currentObj: {}
        };
    },
    created () {
        this.initlevel();
        this.initexpectionType();
        this.initproduct_code();
        this.index_time = [
            moment(new Date().getTime() - 3600 * 1000 * 24 * 1).format(
                'YYYY-MM-DD HH:mm:ss'
            ),
            moment(new Date().getTime() + 3600 * 1000 * 24 * 1).format(
                'YYYY-MM-DD HH:mm:ss'
            )
        ];
        // 格式化表格样式
        this.tableColumns = this.$time.initTableTitle(this.tableColumns)
    },
    mounted () {
        var workorder = this.$route.query.work_order;
        if (workorder) {
            this.work_order = workorder;
        }
        this.search();
    },
    methods: {
        search () {
            var section = this.leveldata;
            var expection = this.expectionLeveldata;
            this.starttime = moment(this.index_time[0]) / 1000;
            this.endtime = moment(this.index_time[1]) / 1000;
            if (this.work_order != '') {
                this.starttime = 0;
                this.endtime = 0;
            }

            var data = {
                page: this.page,
                pagesize: this.pagesize,
                section: section[section.length - 1],
                expection: expection[expection.length - 1],
                product_code: this.product_code,
                starttime: this.starttime,
                endtime: this.endtime,
                work_order: this.work_order
            };

            axios
                .request({
                    url: 'tpm/andon/GetAndonInfo',
                    data,
                    method: 'post'
                })
                .then(res => {
                    if (res.data.ret === 1) {
                        var data = res.data.data;
                        data.forEach(element => {
                            element.create_time = this.caltime(element.create_time);
                            element.handle_time = this.caltime(element.handle_time);
                            element.approve_time =
                element.approve_time == 0
                    ? ''
                    : this.caltime(element.approve_time);
                            element.complete_time = this.caltime(element.complete_time);
                        });
                        this.tableData = data;
                        this.total = res.data.total;
                    } else {
                        this.$Message.error(this.$t(res.data.msg));
                    }
                });
        },
        del () {
            if (!this.currentObj.id) {
                this.$Message.error(this.$t('1043'));
            } else {
                var params = { id: this.currentObj.id };
                axios
                    .request({
                        url: 'tpm/andon/DeleteAndon',
                        params,
                        method: 'get'
                    })
                    .then(res => {
                        if (res.data.ret == 1) {
                            this.$Message.success(this.$t(1058));
                            this.search();
                        } else {
                            this.$Message.error(this.$t(res.data.msg));
                        }
                    });
            }
        },
        initproduct_code () {
            // 初始化换型产品
            this.axios
                .request({
                    url: '/config/ProjectProduct/GetProducts',
                    method: 'get'
                })
                .then(res => {
                    if (res.data.ret === 1) {
                        this.product_code_list = res.data.data;
                    } else {
                        this.$Message.error(this.$t(res.data.msg));
                    }
                });
        },
        caltime (timestamp) {
            if (timestamp !== 0) {
                return moment(timestamp * 1000).format('YYYY-MM-DD HH:mm ');
            }
            return '';
        },
        handleRowChange (currentRow, oldCurrentRow) {
            this.currentObj = currentRow;
        },
        handlePageSize (value) {
            this.pagesize = value;
            this.tableData = this.search();
        },
        changePage (value) {
            this.page = value;
            this.tableData = this.search();
        },
        // 初始化产线层级
        initlevel () {
            axios
                .request({
                    url: 'config/ProjectLevelSection/GetSectionTree',
                    method: 'get'
                })
                .then(res => {
                    if (res.data.ret === 1) {
                        const arr = [];
                        this.datalevel = res.data.data;
                        arr.push(res.data.data[0].value);
                        this.leveldata = arr;
                    } else {
                        this.$Message.error(this.$t(res.data.msg));
                    }
                });
        },
        initexpectionType () {
            axios
                .request({
                    url: '/tpm/AndonBaseSetting/GetExpectionTypeTree',
                    method: 'get'
                })
                .then(res => {
                    this.expectionLevel = res.data.data;
                });
        },
        finddetail () {
            if (!this.currentObj.id) {
                this.$Message.error(this.$t('1043'));
                return false;
            }
            this.detail_modal = true;
        },
        timechange () {
            this.index_time = this.$time.changetime(this.datetype);
        },
        handlelevelchange (value, selectedData) {
            this.leveldata = value;
        },
        handleExpectionlevelchange (value, selectedData) {
            this.expectionLeveldata = value;
        }
    }
};
</script>
<style lang="less" scoped>

</style>
