<template>
  <div class="testdiv">
    <div class="divborder newSearchDiv" style="margin:0px;">
      <div class="filter">
          <label >{{$t('1132')}}：</label>
          <Cascader :data="datalevel" :value="leveldata" trigger="click" change-on-select class="searchSelect" @on-change="getlevel"></Cascader>
      </div>
      <div class="filter">
          <label >{{$t('900908')}}：</label>
          <DatePicker type="daterange" :value="dateTime" placeholder="" class="searchInput middleWidth" @on-change="selectdate"></DatePicker>
      </div>
      <div class="filter">
          <label>{{$t(900675)}}</label>
          <Select v-model="type2" class="searchSelect" @on-change="xTypechange" style="margin-right:10px;">
            <Option value='time' v-text="$t('500122')">时间周期</Option>
            <Option value='product_name' v-text="$t('100088')">产品名称</Option>
            <Option value='machine' v-text="$t('500132')">产线区域</Option>
            <Option value='worker_name' v-text="$t('200053')">执行人</Option>
          </Select>
          <Select v-model="type3" clearable class="searchSelect" v-show="showStr">
            <Option v-for="(item,key) in xTypeList" :value="item.value" :key="key">{{ item.label }}</Option>
          </Select>
      </div>
      <div class="searchBtn">
        <Button type="primary" class="twoWord" icon="ios-search" @click="search(0)">{{$t('1001')}}</Button>
      </div>
    </div>
    <div class="divborder newEchartStyle">
       <div id="main" class="echartsId"> </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import echarts from 'echarts'
import axios from '@/libs/api.request'
export default {
    components: {

    },
    data () {
        return {
            leveldata: [], // 产线层级集合
            levelid: 0, // 产线层级id
            tableData1: [], // 列表数据
            dateTime: '', // 时间范围
            starttime: '', // 开始时间
            endtime: '', // 结束时间
            type1: '0', // 统计指标select
            type2: 'time', // 横坐标select
            type3: 'day', // 横坐标子select
            xTypeList: [], // select 集合
            showStr: true, // 下拉框显示或隐藏
            page: 1,
            pagesize: 10,
            total: 0,
            obj: {},
            treedata1: [],
            datalevel: [],
            myChart: ''
        }
    },
    created () {
        this.inittime()// 初始化
        this.initlevel()
        this.inidatetype()
        this.search()
    },
    methods: {
        inidatetype () {
            this.xTypeList = [{ value: 'day', label: this.$t(900864) }, { value: 'week', label: this.$t(1136) }, { value: 'mon', label: this.$t(1138) }]
        },
        inittime () {
            // 时间赋值
            var date = new Date()
            var start = this.$time.timestampToTime(date.getTime() - 3600 * 1000 * 24 * 30)
            var end = this.$time.timestampToTime(date.getTime() - 3600 * 1000 * 24)
            this.dateTime = [start, end]
        },
        selectdate (e) {
            this.dateTime = [e[0], e[1]]
        },
        // 产线层级
        initlevel () {
            axios.request({
                url: 'config/ProjectLevelSection/GetSectionTree',
                method: 'get'
            }).then(res => {
                const arr = []
                this.datalevel = res.data.data
                arr.push(res.data.data[0].value)
                this.leveldata = arr
            })
        },
        // 产线层级选择
        getlevel: function (data) {
            this.levelid = data[data.length - 1];
            this.leveldata = data
            this.getLevels()
        },
        // 横坐标选择
        xTypechange () {
            this.showStr = true
            if (this.type2 === 'time') {
                this.xTypeList = [{ value: 'day', label: this.$t(900864) }, { value: 'week', label: this.$t(1136) }, { value: 'mon', label: this.$t(1138) }]
                this.type3 = 0
            } else if (this.type2 === 'machine') {
                this.getLevels()
            } else {
                this.showStr = false
                this.xTypeList = []
            }
        },
        getLevels () {
            this.xTypeList = []
            axios.request({
                url: '/config/ProjectLevelSection/GetLevelsBySection?sectionId=' + this.levelid,
                method: 'get'
            }).then(res => {
                // 产线层级
                if (res.data.ret === 1 && this.type2 === 'machine') {
                    if (res.data.data.length !== 0) {
                        res.data.data.forEach(item => {
                            this.xTypeList.push({ value: item.id, label: item.title })
                        })
                        this.type3 = this.xTypeList[0].value
                    } else {
                        this.showStr = false
                    }
                }
            })
        },
        search () {
            var sectionId = this.leveldata.length === 0 ? 0 : this.leveldata[this.leveldata.length - 1]
            axios.request({
                url: '/config/UserLevel/listNCMachineIDArr?id=' + sectionId,
                method: 'get'
            }).then(res => {
                var machineids = res.data.data
                if (machineids.length > 0) {
                    this.getecharts(machineids)
                }
            })
        },
        getecharts (machineids) {
            if (this.dateTime === undefined || this.dateTime === '') {
                this.$Message.error(this.$t('800154'))
                return false
            }
            var data = {
                startTime: moment(this.dateTime[0]).format('YYYY-MM-DD'),
                endTime: moment(this.dateTime[1]).format('YYYY-MM-DD'),
                xtype: this.type2,
                machinearr: machineids,
                x_id: this.type3
            }
            axios.request({
                url: '/cnc/Product/Getproductreportalysis',
                data,
                method: 'post'
            }).then(res => {
                this.goechares(res.data.data)
            })
        },
        goechares (obj) {
            if (this.myChart !== null && this.myChart !== '' && this.myChart !== undefined) {
                this.myChart.dispose()
            }
            var xAxis = []
            var ok = []
            var nok = []
            var qualified = []
            if (obj.type === 'machine') {
                xAxis = obj.x
                obj.y.forEach((ele, i) => {
                    ok[i] = ele.actual_output
                    nok[i] = ele.nok_number
                    var qualifiednum = (ele.actual_output / (ele.nok_number + ele.actual_output)) * 100
                    qualified[i] = qualifiednum.toFixed(2)
                })
            } else {
                obj.forEach((ele, i) => {
                    xAxis[i] = ele.type
                    ok[i] = ele.actual_output
                    nok[i] = ele.nok_number
                    var qualifiednum = (ele.actual_output / (ele.nok_number + ele.actual_output)) * 100
                    qualified[i] = qualifiednum.toFixed(2)
                })
            }
            this.myChart = echarts.init(document.getElementById('main'))
            var option = {
                title: {
                    textStyle: {
                        fontSize: 18
                    },
                    subtextStyle: {
                        fontSize: 14
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                toolbox: {
                    feature: {
                        dataView: { show: true, readOnly: false },
                        magicType: { show: true, type: ['line', 'bar'] },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                legend: {
                    data: [this.$t('600588'), this.$t('600589'), this.$t('500123')]
                },
                xAxis: [
                    {
                        type: 'category',
                        data: xAxis,
                        axisPointer: {
                            type: 'shadow'
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: this.$t(300084),
                        axisLabel: {
                            formatter: '{value} ' + this.$t(800129)
                        }
                    },
                    {
                        type: 'value',
                        name: this.$t('500123'),
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            formatter: '{value} %'
                        }
                    }
                ],
                series: [
                    {
                        name: this.$t('600588'),
                        type: 'bar',
                        barMaxWidth: 70,
                        data: ok
                    },
                    {
                        name: this.$t('600589'),
                        type: 'bar',
                        barMaxWidth: 70,
                        data: nok
                    },
                    {
                        name: this.$t('500123'),
                        type: 'line',
                        yAxisIndex: 1,
                        data: qualified
                    }
                ]
            }
            this.myChart.setOption(option)
        }
    }
}
</script>
<style lang="less">

</style>
