!<template>
  <div class="board">
    <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("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
            class="tableClass"
            highlight-row
            :data="tableData"
            :columns="tableColumns"
            height="765"
            @on-current-change="handleRowChange"
          ></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}}</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 {
            datalevel: [], // 产线层级数据
            leveldata: [], // 产线层级value
            total: 0,
            page: 1,
            pagesize: 10,
            obj: {},
            searchobj: {},
            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 + (this.page - 1) * this.pagesize + 1
                        )
                    },
                    width: '60px'
                },
                {
                    title: this.$t('1025'),
                    key: 'line_value'
                },
                {
                    title: this.$t('900881'),
                    key: 'station_value'
                },
                {
                    title: this.$t('800195'),
                    key: 'result'
                },
                {
                    title: this.$t('300084'),
                    key: 'qty'
                }
            ],
            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.initlevel() // 初始化产线层级
        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: {
        handlelevelchange (value, selectedData) {
            this.leveldata = value
        },
        initechart () {
            var myChart = echarts.init(document.getElementById('echart'))
            var legendData = []
            var selected = []
            var seriesData = []
            this.tableData.forEach(item => {
                legendData.push(item.station_value)
                seriesData.push({ name: item.station_value, value: item.qty })
                var obj = {}
                obj[item.station_value] = true
                selected.push(obj)
            })
            var option = {
                title: {
                    text: 'WIP',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                legend: {
                    type: 'scroll',
                    orient: 'vertical',
                    right: 10,
                    top: 20,
                    bottom: 20,
                    data: legendData,

                    selected: selected
                },
                series: [
                    {
                        name: this.$t('900881'),
                        type: 'pie',
                        radius: '55%',
                        center: ['40%', '50%'],
                        data: seriesData,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            }
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option)
        },
        // 初始化产线层级
        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))
                    }
                })
        },
        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]
            }
            let params = {
                station: station,
                line: line,
                begin: this.index_time[0],
                end: this.index_time[1]
            }
            this.chartdataY = []
            this.chartdataX = []
            axios
                .request({
                    url: '/acc/Wip/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
            }
            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]
            }
            let params = {
                station: station,
                line: line,
                begin: this.index_time[0],
                end: this.index_time[1]
            }
            axios
                .request({
                    url: '/acc/Wip/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 = {
                line: this.obj.line,
                station: this.obj.station,
                page: this.page,
                pagesize: this.pagesize,
                Starttime: this.index_time[0],
                endtime: this.index_time[1]
            }
            axios
                .request({
                    url: '/acc/WipDetail/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(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 = {
                line: this.obj.line,
                station: this.obj.station,
                page: this.page,
                pagesize: this.pagesize,
                Starttime: this.index_time[0],
                endtime: this.index_time[1]
            }
            axios
                .request({
                    url: '/acc/WipDetail/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>
