<template>
  <div class="testdiv">
    <div class="divborder newSearchDiv" style="margin:0px;">
      <div>
        <div class="filter">
          <label >{{$t('1950491')}}：</label>
          <Cascader :data="datalevel" :value="leveldata"  trigger="click" @on-change="handlelevelchange" change-on-select class="searchSelect"></Cascader>
        </div>
        <div class="filter">
          <label >{{$t('100307')}}：</label>
          <Select v-model="productid" label-in-value clearable filterable class="searchSelect">
              <Option v-for="item in products" :value="item.id" :key="item.id">{{ item.name+"【"+ item.code +"】" }}</Option>
          </Select>
        </div>
        <div class="filter">
              <label>{{$t('1046')}}：</label>
              <DatePicker
                id="日期"
                type="datetimerange"
                v-model="daterange"
                confirm
                placeholder=""
                class="searchInput MaxWidth"
                format="yyyy-MM-dd HH:mm:ss"
                @on-change="selectdate"
              ></DatePicker>
          </div>

      </div>
      <div class="searchBtn">
        <Button type="primary" class="twoWord intervalRight" icon="ios-search" @click="search()">{{$t('1001')}}</Button>
        <Button type="primary" class="foueWord" icon="ios-cloud-download" @click="downexcel()">{{$t('1007')}}</Button>
      </div>
    </div>
    <div class="divborder newEchartStyle">
      <div class="echartsId" id="div_echarts">

      </div>
      <div class="echartsId" id="div_echartsTwo">

      </div>
      <Table
        class="echartsTable"
        @on-current-change="handleRowChange"
        highlight-row
        :data="tableData1"
        :columns="tableColumns1"
      ></Table>
    </div>
  </div>
</template>

<script>
import axios from '@/libs/api.request'
import echarts from 'echarts'
import moment from 'moment'
export default{
    data () {
        return {
            sectionid: 0,
            leveldata: [],
            datalevel: [],
            productid: 0,
            products: [],
            tableData1: [],
            daterange: [],
            tableColumns1: [
                {
                    type: 'index',
                    title: this.$t('1008'),
                    key: 'xuhao',
                    width: 70
                },
                {
                    title: this.$t(5000009),
                    key: 'sectionname'
                },
                {
                    title: this.$t(1950627),
                    key: 'num'
                },
                {
                    title: this.$t(1950629),
                    key: 'batch'
                }
            ],
            loading: false
        }
    },
    created () {

    },
    mounted () {
        var nowtime = Date.parse(new Date()) / 1000
        var oldtime = nowtime - 86400 * 7
        this.daterange = [this.datetrans(oldtime) + '00:00:00', this.datetrans(nowtime) + '23:59:59']
        this.selectdate(this.daterange)
        this.initlevel()
        this.initproducts()
        this.search()
    },
    methods: {
        datetrans (date) {
            if (date === '' || date === undefined || date === 0 || date === null) {
                return ''
            }
            date = new Date(date * 1000)
            var Y = date.getFullYear() + '-'
            var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
            var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' '
            return Y + M + D
        },
        handlelevelchange (data) {
            this.leveldata = data
            if (data && data.length > 0) {
                this.sectionid = data[data.length - 1]
                this.initproducts()
            }
        },
        initlevel () {
            axios.request({
                url: '/qms/SendTestCollection/GetInspectionSectionTree?inspectiontype=0&iscompelete=1',
                method: 'get'
            }).then(res => {
                var arr = []
                this.datalevel = res.data.data
                if(Array.isArray(res.data.data)&&res.data.data.length){
                    arr.push(res.data.data[0].value)
                }
                this.leveldata = arr
            })
        },
        selectdate (e) {
            this.dtStart = e[0]
            this.dtEnd = e[1]
            let last_str = this.dtEnd.split(' ')[1]
            if (last_str === '00:00:00') {
                this.dtEnd = moment(this.dtEnd).format('YYYY-MM-DD') + ' 23:59:59'
                this.daterange = [this.dtStart, this.dtEnd]
            }
        },
        initproducts () {
            axios.request({
                url: '/qms/SendTestCollection/GetInspectionProducts?sectionid=' + this.sectionid + '&iscompelete=1',
                method: 'get'
            }).then(res => {
                if (res.data.ret === 1 && res.data.data.length > 0) {
                    this.products = res.data.data
                }
            })
        },
        search () {
            var params = {
                productid: this.productid,
                sectionid: this.sectionid,
                starttime: this.dtStart,
                endtime: this.dtEnd
            }
            axios.request({
                url: '/qms/Statistical/GetDeviationReleaseQuantity',
                data: params,
                method: 'post'
            }).then(res => {
                if (res.data.ret === 1) {
                    var data = res.data.data
                    // 画图-数量
                    this.getEcharts(data.x1, data.y1, data.z1)

                    // 画图-批次
                    this.getEchartsTwo(data.x2, data.y2, data.z2)
                    this.mockTableData1(data.datalist)
                }
            })
        },
        mockTableData1 (tablelist) {
            let data = []
            tablelist.forEach(item => {
                if (item) {
                    data.push({
                        sectionname: item.channel,
                        num: item.quantity,
                        batch: item.batch_quantity,
                        numRate: item.quantity_rate + '%',
                        batchRate: item.batch_quantity_rate + '%'
                    })
                }
            })
            this.tableData1 = data
        },
        getEcharts (x1, y1, z1) {
            this.initEcharts('div_echarts', this.$t(600647), x1, y1, z1)
        },
        getEchartsTwo (x2, y2, z2) {
            this.initEcharts('div_echartsTwo', this.$t(1950514), x2, y2, z2)
        },
        initEcharts (id, name, x, y, z) {
            var myChart = echarts.init(document.getElementById(id))
            var option = {
                title: {
                    text: this.$t(5500007) + '-' + name,
                    left: '5%',
                    subtext: '',
                    textStyle: {
                        fontSize: 18
                    },
                    subtextStyle: {
                        fontSize: 14
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                color: ['blue', 'green'],
                legend: {
                    data: [name, this.$t(950016)]
                },
                xAxis: [
                    {
                        type: 'category',
                        data: x,
                        axisPointer: {
                            type: 'shadow'
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: name,
                        min: 0,
                        // max: 250,
                        interval: 200,
                        axisLabel: {
                            formatter: '{value}'
                        }
                    },
                    {
                        type: 'value',
                        name: this.$t(700143),
                        min: 0,
                        max: 100,
                        interval: 20,
                        axisLabel: {
                            formatter: '{value} %'
                        }
                    }
                ],
                series: [
                    {
                        name: name,
                        type: 'bar',
                        data: y,
                        barMaxWidth: 70, // 柱子最大宽度
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true, // 开启显示
                                    position: 'top', // 在上方显示
                                    textStyle: { // 数值样式
                                        color: 'black'
                                        // fontSize: 12
                                    }
                                }
                            }
                        }
                    },

                    {
                        name: this.$t(950016),
                        type: 'line',
                        yAxisIndex: 1,
                        data: z,
                        smooth: true,
                        itemStyle: {
                            normal: {
                                label: {
                                    formatter: function (data) {
                                        return data.value + '%'
                                    },
                                    show: false, // 开启显示
                                    position: 'top', // 在上方显示
                                    textStyle: { // 数值样式
                                        color: 'green'
                                        // fontSize: 12
                                    }
                                }
                            }
                        }
                    }
                ]
            };
            myChart.setOption(option)
            window.onresize = function () {
                myChart.resize()
            }
        },
        downexcel () {
            var params = {
                productid: this.productid,
                sectionid: this.sectionid,
                starttime: this.dtStart,
                endtime: this.dtEnd,
                toexcel: 1
            }
            axios.request({
                url: '/qms/Statistical/GetDeviationReleaseQuantity',
                data: params,
                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) {

        }
    }
}

</script>
<style lang="less" scoped>

</style>
