!<template>
  <div class="board">
    <div class="divborder newSearchDiv" style="margin:0px;">
      <div class="filter">
        <label id="生产线">{{this.$t(1025)}}：</label>
        <Select v-model="searchobj.line" clearable class="searchSelect">
          <Option v-for="item in lines" :value="item.id" :key="item.id">{{ item.title }}</Option>
        </Select>
      </div>
      <div class="filter">
        <label id="产品编号">{{this.$t(100089)}}：</label>
        <Select v-model="searchobj.product" clearable class="searchSelect">
          <Option v-for="item in products" :value="item.code" :key="item.code">{{ item.name }}</Option>
        </Select>
      </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="datetimerange"
                format="yyyy-MM-dd HH:mm:ss"
                v-model="index_time"
                placeholder=""
                class="searchInput MaxWidth"
              ></DatePicker>
            </div>

      <div class="searchBtn">
        <Button type="primary" class="twoWord intervalRight" icon="ios-search" @click="search">{{$t('1001')}}</Button>
        <Button type="primary" class="fourWord" icon="md-download" @click="loadexcel">{{$t('1007')}}</Button>
      </div>

    </div>
    <Row>
      <Col span="12">
        <div class="divborder newTableDiv">
          <Table
            highlight-row
            :data="tableData"
            :columns="tableColumns"
            height="765"
            @on-current-change="handleRowChange"
            class="tableClass"
          ></Table>
        </div>
      </Col>
      <Col span="12" style="height:760px;padding-left:10px;">
        <div class="divborder" id="echart" style="height:765px"></div>
      </Col>
    </Row>
    <Drawer :closable="false" width="640" v-model="isShowDrawwer">
      <div class="demo-drawer-profile">
        <Row>
          <Col span="24">
            <div class="buttonall">
              <label>{{this.obj.line_value+'/'+this.obj.station_value+'/'+this.obj.productid}}</label>
              <Button type="primary" icon="md-download" @click="loadDetailExcel">{{$t('1007')}}</Button>
            </div>
          </Col>
        </Row>
      </div>
      <Divider />
      <div class="demo-drawer-profile">
        <Row>
          <Col span="24">
            <Table
              style="margin-top:10px"
              highlight-row
              :data="tableDetailData"
              :columns="tableDetailColumns"
            ></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>
          </Col>
        </Row>
      </div>
    </Drawer>
  </div>
</template>
<script>
import echarts from 'echarts'
import axios from '@/libs/api.request'
import moment from 'moment'
export default {
    data () {
        return {
            total: 0,
            page: 1,
            pagesize: 10,
            obj: {},
            searchobj: {},
            morecondition: false,
            products: [],
            lines: [],
            isShowTwoFloor: true,
            index_time: [],
            datetype: 0,
            tableData: [],
            tableDetailData: [],
            tableColumns: [
                {
                    type: 'index2',
                    title: this.$t('1008'),
                    key: 'xuhao',
                    render: (h, params) => {
                        return h('span', params.index)
                    },
                    width: '60px'
                },
                {
                    title: this.$t(100089),
                    key: 'productid'
                },
                {
                    title: this.$t(1025),
                    key: 'line_value'
                },
                {
                    title: this.$t(900881),
                    key: 'station_value'
                },
                {
                    title: this.$t(930028),
                    key: 'okcol'
                },
                {
                    title: this.$t(930029),
                    key: 'nocol'
                },
                {
                    title: this.$t(950350),
                    key: 'total'
                },
                {
                    title: this.$t(930030),
                    key: 'rate'
                }
            ],
            tableDetailColumns: [
                {
                    type: 'index2',
                    title: this.$t('1008'),
                    key: 'xuhao',
                    render: (h, params) => {
                        return h(
                            'span',
                            params.index + (this.page - 1) * this.pagesize + 1
                        )
                    },
                    width: '60px'
                },
                {
                    title: 'SN',
                    key: 'sn'
                },
                {
                    title: this.$t('900053'),
                    key: 'wo'
                },
                {
                    title: this.$t('900933'),
                    key: 'pn'
                },
                {
                    title: this.$t('900881'),
                    key: 'station'
                },
                {
                    title: this.$t('800195'),
                    key: 'result'
                },
                {
                    title: this.$t('1020'),
                    key: 'updateDateTime'
                }
            ],
            chartdataX: [],
            chartdataY: [],
            isShowDrawwer: false
        }
    },
    created () {
        this.getLine()
        this.fillOption()
        this.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'
        ]
    },
    mounted () {
        this.initechart()
    },
    methods: {
        initechart () {
            var myChart = echarts.init(document.getElementById('echart'))
            var yMax = 100
            var dataShadow = []
            for (var i = 0; i < this.chartdataX.length; i++) {
                dataShadow.push(yMax)
            }

            var option = {
                title: {
                    text: this.$t('901059'),
                    left: 'center'
                },
                yAxis: {
                    data: this.chartdataY,
                    axisLabel: {
                        inside: true,
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    z: 10
                },
                dataZoom: [
                    {
                        id: 'dataZoomY',
                        type: 'inside',
                        yAxisIndex: [0],
                        filterMode: 'empty',
                        start: 0,
                        end: 100
                    }
                ],
                xAxis: {
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#999'
                        }
                    }
                },
                series: [
                    {
                        // For shadow
                        type: 'bar',
                        itemStyle: {
                            color: 'rgba(0,0,0,0.05)'
                        },
                        barGap: '-100%',
                        barCategoryGap: '40%',
                        data: dataShadow,
                        animation: false
                    },
                    {
                        type: 'bar',
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#83bff6' },
                                { offset: 0.5, color: '#188df0' },
                                { offset: 1, color: '#188df0' }
                            ])
                        },
                        emphasis: {
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    { offset: 0, color: '#2378f7' },
                                    { offset: 0.7, color: '#2378f7' },
                                    { offset: 1, color: '#83bff6' }
                                ])
                            }
                        },
                        data: this.chartdataX
                    }
                ]
            }
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option)
        },
        getLine () {
            axios
                .request({
                    url: '/config/Position/GetLine',
                    method: 'get'
                })
                .then(res => {
                    this.lines = res.data.data
                })
        },
        fillOption () {
            let data = { tb: 'siger_project_product', icol: 'code', vcol: 'name' }
            axios
                .request({
                    url: '/config/Dict/FillOption',
                    data,
                    method: 'post'
                })
                .then(res => {
                    this.products = res.data.data
                })
        },
        search () {
            let params = {
                productid: this.searchobj.product,
                line: this.searchobj.line,
                dtStart: this.index_time[0],
                dtEnd: this.index_time[1]
            }
            this.chartdataY = []
            this.chartdataX = []
            axios
                .request({
                    url: '/acc/Yield/getList',
                    params,
                    method: 'get'
                })
                .then(res => {
                    let data = []
                    data = res.data.data
                    data.forEach(element => {
                        element.rate = (element.yeild * 100).toFixed(2) + '%'
                        this.chartdataY.push(element.station_value)
                        this.chartdataX.push((element.yeild * 100).toFixed(2))
                    })
                    this.tableData = data
                    this.initechart()
                })
        },
        loadexcel () {
            if (this.index_time.length < 2) {
                this.$Message.error(this.$t(1143))

                return false
            }
            let params = {
                productid: this.searchobj.product,
                line: this.searchobj.line,
                dtStart: this.index_time[0],
                dtEnd: this.index_time[1]
            }
            axios
                .request({
                    url: '/acc/Yield/exportAll',
                    params,
                    method: 'get'
                })
                .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))
                    }
                })
        },
        loadDetailExcel () {
            var data = {
                productid: this.obj.productid,
                line: this.obj.line,
                station: this.obj.station,
                dtStart: this.index_time[0],
                dtEnd: this.index_time[1],
                page: this.page,
                pagesize: this.pagesize
            }
            axios
                .request({
                    url: '/acc/Defective/exportAll',
                    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))
                    }
                })
        },
        handleRowChange (currentRow, oldCurrentRow) {
            this.obj = currentRow
            this.page = 1
            this.searchDetail()
        },
        timechange () {
            this.index_time = this.$time.changetime(this.datetype)
        },
        handlePageSize (value) {
            this.pagesize = value
            this.searchDetail()
        },
        changePage (value) {
            this.page = value
            this.searchDetail()
        },
        searchDetail () {
            var data = {
                productid: this.obj.productid,
                line: this.obj.line,
                station: this.obj.station,
                dtStart: this.index_time[0],
                dtEnd: this.index_time[1],
                page: this.page,
                pagesize: this.pagesize
            }
            axios
                .request({
                    url: '/acc/Defective/GetList',
                    data,
                    method: 'post'
                })
                .then(res => {
                    if (res.data.ret === 1) {
                        this.tableDetailData = res.data.data
                        if (res.data.total > 0) {
                            this.total = res.data.total
                            this.isShowDrawwer = true
                        }
                    } else {
                        this.$Message.error(this.$t(930026) + this.$t(res.data.msg))
                        this.isShowDrawwer = false
                    }
                })
        }
    }
}
</script>
<style lang="less">
.board {
  width: 100%;
  height: 100%;
}
.filter {
  height: 40px;
  label {
    display: inline-block;
    width: 100px;
  }
}
.demo-drawer-profile {
  font-size: 14px;
}
.demo-drawer-profile .ivu-col {
  margin-bottom: 12px;
}
</style>
