<template>
  <div class="testdiv">
    <!-- 查询条件 -->
    <div class="divborder" style="margin:0px;">
      <div class="filter">
        <label>{{this.$t('1025')}}:</label>
        <Cascader
          :data="datalevel"
          :value="leveldata"
          trigger="click"
          change-on-select
          style="display:inline-block;width:280px;"
          @on-change="handlelevelchange"
        ></Cascader>
      </div>
      <div class="filter">
        <label>{{$t("900910")}}</label>
        <Select
          v-model="datetype"
          label-in-value
          clearable
          style="width:160px;"
          @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="datetimerange"
          format="yyyy-MM-dd HH:mm:ss"
          v-model="index_time"
          placeholder="请选择时间"
          style="width: 280px"
        ></DatePicker>
      </div>

      <!-- 二级隐藏 -->
      <div v-show="!morecondition">
        <div>
          <div class="filter">
            <label>{{$t('950249')}}:</label>
            <input class="publicinput" style="width:280px;" type="text" v-model="searchobj.sn" />
          </div>
          <div class="filter">
            <label id="产品编号">{{this.$t(100089)}}:</label>
            <Select
              v-model="searchobj.productid"
              filterable
              clearable
              style="width:160px;"
              @on-query-change="getProductsByCode"
            >
              <Option v-for="item in products" :value="item.code" :key="item.code">{{ item.name }}</Option>
            </Select>
          </div>
          <div class="filter">
            <label id="工单">{{this.$t(900053)}}:</label>
            <Select
              v-model="searchobj.orderNumber"
              clearable
              filterable
              style="width:160px;"
              @on-query-change="getWorkOrderData"
            >
              <Option v-for="item in orders" :value="item" :key="item">{{ item }}</Option>
            </Select>
          </div>
        </div>
        <div>
            <div class="filter">
              <label id="操作人员">{{this.$t(600531)}}:</label>
              <Select v-model="searchobj.uid" clearable style="width:280px;">
                <Option v-for="item in users" :value="item.id" :key="item.id">{{ item.name }}</Option>
              </Select>
            </div>
            <div class="filter">
              <label id="结果">{{this.$t(800195)}}:</label>
              <Select v-model="searchobj.result" clearable style="width:160px;">
                <Option v-for="item in results" :value="item.descr" :key="item.descr">{{ item.descr }}</Option>
              </Select>
            </div>
            <div class="filter">
              <label>{{$t('950251')}}:</label>
              <input class="publicinput" style="width:160px;" type="text" v-model="searchobj.box" />
            </div>
          </div>
      </div>
      <!-- 按钮 -->
      <div class="buttonall">
        <Button type="primary" icon="ios-search" @click="handlesearch">{{$t('1001')}}</Button>
        <Button type="primary" icon="md-download" @click="loadexcel">{{$t('1007')}}</Button>
      </div>
      <!-- 收起按钮 -->
      <div class="conditionblock">
        <div class="conditionborder" @click="changecondition">
          <div class="box">
            <div class="skew">
              <div class="skew-main">
                <div v-show="morecondition">
                  <span>
                    {{$t(950400)}}
                    <Icon type="ios-arrow-down" />
                  </span>
                </div>
                <div v-show="!morecondition">
                  <span>
                    {{$t(950401)}}
                    <Icon type="ios-arrow-up" />
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="divborder" style="height:500px;">
      <Table
        style="margin-top:10px"
        highlight-row
        :row-class-name="rowClassName"
        :data="tableData"
        :columns="tableColumns"
        @on-current-change="handleRowChange"
      ></Table>
      <div style="margin: 10px;overflow: hidden">
        <div style="float: right;">
          <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>
    <div class="divborder" v-show="isShowTrace">
      <Table
        style="margin-top:10px"
        highlight-row
        :row-class-name="rowClassName"
        :data="traceData"
        :columns="traceColumns"
        @on-current-change="handleTraceRowChange"
      ></Table>
    </div>
    <div class="divborder" v-show="isShowTraceDetail">
      <Table
        style="margin-top:10px"
        highlight-row
        :row-class-name="rowClassName"
        :data="traceDetailData"
        :columns="traceDetailColumns"
      ></Table>
    </div>
  </div>
</template>
<script>
import axios from '@/libs/api.request'
import moment from 'moment'

export default {
    created () {
        this.initlevel()
        this.getProductsByCode('')
        this.getWorkOrderData('')
        this.getResultData()
        this.getUsers()
    },
    data () {
        return {
            index_time: [
                moment(new Date().getTime() - 3600 * 1000 * 24 * 1).format(
                    'YYYY-MM-DD '
                ) + '00:00:00',
                moment(new Date().getTime()).format('YYYY-MM-DD ') + '23:59:59'
            ],
            morecondition: false,
            products: [], // 产品
            orders: [], // 工单
            results: [],
            users: [],
            datetype: 0,
            datalevel: [], // 产线层级数据
            leveldata: [], // 产线层级value
            total: 0,
            page: 1,
            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: 90
                },
                {
                    title: this.$t('950249'),
                    key: 'sn'
                },
                {
                    title: this.$t('100089'),
                    key: 'procutName'
                },
                {
                    title: this.$t('900053'),
                    key: 'wo'
                },
                {
                    title: this.$t('1025'),
                    key: 'line'
                },
                {
                    title: this.$t('1026'),
                    key: 'station'
                },
                {
                    title: this.$t('800195'),
                    key: 'result'
                },
                {
                    title: this.$t('950230'),
                    key: 'inputDateTime'
                },
                {
                    title: this.$t('900410'),
                    key: 'updateTime'
                }
            ],
            morecondition: false,
            searchobj: {},
            isShowTrace: false,
            isShowTraceDetail: false,
            traceData: [],
            traceDetailData: [],
            traceColumns: [
                {
                    type: 'index',
                    title: this.$t(1008),
                    key: 'xuhao',
                    render: (h, params) => {
                        return h('span', params.index + 1)
                    },
                    width: 90
                },
                {
                    title: this.$t('950249'),
                    key: 'sn'
                },
                {
                    title: this.$t('1025'),
                    key: 'line'
                },
                {
                    title: this.$t('1026'),
                    key: 'station'
                },
                {
                    title: this.$t('800195'),
                    key: 'result'
                },
                {
                    title: this.$t('900993'),
                    key: 'user'
                },
                {
                    title: this.$t('1046'),
                    key: 'transDateTime'
                }
            ],
            traceDetailColumns: [
                {
                    type: 'index',
                    title: this.$t(1008),
                    key: 'xuhao',
                    render: (h, params) => {
                        return h('span', params.index + 1)
                    },
                    width: 90
                },
                {
                    title: this.$t('950249'),
                    key: 'sn'
                },
                {
                    title: this.$t('1115'),
                    key: 'item'
                },
                {
                    title: this.$t('920168'),
                    key: 'value'
                },
                {
                    title: this.$t('800195'),
                    key: 'result'
                },
                {
                    title: this.$t('1046'),
                    key: 'transDateTime'
                }
            ]
        }
    },
    methods: {
        rowClassName (row, index) {
            // console.log(row)
            if (row.result !== 'OK') {
                return 'demo-table-error-row'
            }
        },
        getResultData () {
            axios
                .request({
                    url: '/acc/Routing/GetResultData',
                    method: 'get'
                })
                .then(res => {
                    this.results = res.data.data
                })
        },
        getUsers (val) {
            var params = { page: '1', pagesize: '1000' }
            axios
                .request({
                    url: '/config/user/GetUsers?page=1&pagesize=999999',
                    params,
                    method: 'get'
                })
                .then(res => {
                    this.users = res.data.data
                })
        },
        getProductsByCode (val) {
            var params = { code: '', name: val, count: '50' }
            axios
                .request({
                    url: '/config/ProjectProduct/GetProductsByCode',
                    params,
                    method: 'get'
                })
                .then(res => {
                    this.products = res.data.data
                })
        },
        getWorkOrderData (val) {
            var params = { col: 2, ordernumber: val }
            axios
                .request({
                    url: '/acc/ReportWorking/GetWorkOrderData',
                    params,
                    method: 'get'
                })
                .then(res => {
                    var data = []
                    var ret = []
                    data = res.data.data
                    data.forEach(element => {
                        if (ret.indexOf(element.orderNumber) === -1) {
                            ret.push(element.orderNumber)
                        }
                    })
                    this.orders = ret
                })
        },
        timechange () {
            this.index_time = this.$time.changetime(this.datetype)
        },
        // 初始化产线层级
        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))
                    }
                })
        },
        handlesearch () {
            this.page = 1
            this.isShowTrace = false
            this.isShowTraceDetail = false
            this.search()
        },
        search () {
            var level = this.leveldata
            var line = 0
            var station = 0
            if (level.length === 2) {
                line = level[1]
            }
            if (level.length === 3) {
                line = level[1]
                station = level[2]
            }
            var data = {
                productid: this.searchobj.productid,
                line: line,
                station: station,
                orderNumber: this.searchobj.ordernumber,
                sn: this.searchobj.sn,
                uid: this.searchobj.uid,
                result: this.searchobj.result,
                box: this.searchobj.box,
                starttime: this.index_time[0],
                endtime: this.index_time[1],
                page: this.page,
                pagesize: this.pagesize
            }
            axios
                .request({
                    url: '/acc/SN/GetsnData',
                    data,
                    method: 'post'
                })
                .then(res => {
                    if (res.data.ret === 1) {
                        this.total = res.data.total
                        this.tableData = res.data.data
                    } else {
                        this.tableData = []
                        this.$Message.error(this.$t(res.data.msg))
                    }
                })
        },
        loadexcel () {
            var level = this.leveldata
            var line = 0
            var station = 0
            if (level.length === 2) {
                line = level[1]
            }
            if (level.length === 3) {
                line = level[1]
                station = level[2]
            }
            var data = {
                productCode: this.searchobj.productid,
                line: line,
                station: station,
                orderNumber: this.searchobj.ordernumber,
                sn: this.searchobj.sn,
                uid: this.searchobj.uid,
                result: this.searchobj.result,
                box: this.searchobj.box,
                starttime: this.index_time[0],
                endtime: this.index_time[1],
                page: this.page,
                pagesize: this.pagesize
            }
            axios
                .request({
                    url: '/acc/SN/ExportData',
                    data,
                    method: 'post'
                })
                .then(res => {
                    if (res.data.ret === 1) {
                        window.location.href = axios.publicPath + '' + res.data.data
                    } else {
                        this.$Message.error(this.$t(930026) + this.$t(res.data.msg))
                    }
                })
        },
        getTraceDataAsync () {
            var data = { sn: this.obj.sn }
            axios
                .request({
                    url: '/acc/SN/GetTraceDataAsync',
                    data,
                    method: 'post'
                })
                .then(res => {
                    this.isShowTrace = true
                    this.traceData = res.data.data
                })
        },
        getTraceDetail (obj) {
            var params = { seqid: obj.seqID }
            axios
                .request({
                    url: '/acc/SN/GetTraceDetail',
                    params,
                    method: 'get'
                })
                .then(res => {
                    this.isShowTraceDetail = true
                    this.traceDetailData = res.data.data
                })
        },
        changecondition () {
            this.morecondition = !this.morecondition
        },
        handlelevelchange (value, selectedData) {
            this.leveldata = value
        },
        handleRowChange (currentRow, oldCurrentRow) {
            this.obj = currentRow
            this.traceDetailData = []
            this.traceData = []
            this.getTraceDataAsync()
        },
        handleTraceRowChange (currentRow, oldCurrentRow) {
            this.getTraceDetail(currentRow)
        },
        handlePageSize (value) {
            this.pagesize = value
            this.tableData = this.search()
        },
        changePage (value) {
            this.page = value
            this.tableData = this.search()
        }
    }
}
</script>
<style lang="less" scoped>
.ivu-table .demo-table-error-row td {
  background-color: #ff6600;
  color: #fff;
}
.testdiv {
  width: 100%;
  height: 100%;
}

.showdetail {
  width: 720px;
  height: 180px;
  // background-color: #515a6e;
  margin-top: 10px;
  border: 0.3px solid #ccc;
  div {
    float: left;
    width: 25%;
    height: 100%;
    border: 0.3px solid #ccc;
    // background-color: blue;
    margin: -0.3px;
    img {
      width: 100%;
      height: 100%;
    }
    div {
      width: 100%;
      height: 30px;
      margin: 0 !important;
      div {
        display: inline-block;
        width: 50%;
        height: 100%;
        border: 0.3px solid #ccc;
        text-align: center;
        line-height: 30px;
        margin: -0.3px;
      }
      .specialdiv {
        width: 100%;
        height: 30px;
        text-align: center;
        line-height: 30px;
      }
    }
  }
}
.filter {
  height: 40px;
  label {
    display: inline-block;
    width: 100px;
  }
}
.edit {
  .filter {
    height: 40px;
    label {
      display: inline-block;
      width: 80px;
    }
    .publicinput {
      width: 150px;
    }
  }
}
.uploadexcel {
  display: inline-block;
  margin-right: 15px;
  // padding-top: 10px;
}
.file {
  width: 80px;
  height: 32px;
  position: relative;
  color: #fff;
  display: inline-block;
  margin-bottom: 0;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  white-space: nowrap;
  line-height: 1.5;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 5px 15px 6px;
  font-size: 12px;
  border-radius: 4px;
  background-color: #2d8cf0;
  margin-right: 15px;
  // border-color: #2d8cf0;
  -webkit-appearance: button;
  // border-color: #57a3f3;
}
.file input {
  position: absolute;
  // font-size: 100px;
  left: 0;
  top: 0;
  opacity: 0;
  width: 80px;
  height: 30px;
  // border: 1px solid #000;
  // z-index: 99999;
}
.editload,
.addload {
  position: relative;
  img {
    vertical-align: top;
    width: 150px;
    height: 128px;
    margin: 10px 0px;
  }
  input {
    position: absolute;
    // font-size: 100px;
    left: 80px;
    top: 10px;
    opacity: 0;
    width: 128px;
    height: 128px;
  }
}
.DeviceQRblock {
  width: 150px;
  height: 200px;
  float: left;
  margin-right: 10px;
  .DeviceQRblockqr {
    width: 150px;
    height: 150px;
  }
  div {
    text-align: center;
  }
}
</style>
