<template>
    <div>
        <div class="divborder leftDiv">
            <Tree class="treeDiv" :data="treeList" ref="tree" @on-select-change="getList()"></Tree>
        </div>
        <div class="rightDiv">
          <div class="divborder newSearchDiv">
            <div class="filter">
                <label> {{$t('900908')}}：</label>
                <DatePicker
                    type="daterange"
                    format="yyyy-MM-dd"
                    :clearable="false"
                    v-model="index_time"
                    class="searchInput middleWidth"
                ></DatePicker>
            </div>
            <div class="filter">
                <label>{{$t('500088')}}：</label>
                <Select v-model="searchObj.type1" class="searchSelect">
                    <Option :value="'1'" v-text="$t('700140')" :label="$t('700140')">程序上传至NC次数 </Option>
                    <Option :value="'2'" v-text="$t('700141')" :label="$t('700141')">NC端程序修改次数 </Option>
                </Select>
            </div>
            <div class="filter">
                <label> {{$t('1129')}}：</label>
                <Select v-model="searchObj.type2"  @on-change="typechange"   class="searchSelect" style="margin-right:10px;">
                    <Option :value="'1'" v-text="$t('500122')" :label="$t('500122')">时间周期 </Option>
                    <Option :value="'2'" v-text="$t('500132')" :label="$t('500132')">产线区域 </Option>
                    <Option :value="'3'" v-text="$t('100046')" :label="$t('100046')">人员 </Option>
                    <Option :value="'4'" v-text="$t('100088')" :label="$t('100088')">产品名称 </Option>
                </Select>
                <Select v-if="searchObj.type2==='1'" v-model="searchObj.type3" class="searchSelect">
                    <Option v-for="(item,key) in type3list1" :key="key" :value="item.value" v-text="item.label" :label="item.label"></Option>
                </Select>
                <Select v-else-if="searchObj.type2==='2'" v-model="searchObj.type3" v-show="searchObj.type2==='2'&&type3list2.length>0" class="searchSelect">
                    <Option v-for="(item,key) in type3list2" :key="key" :value="item.value" v-text="item.label" :label="item.label"></Option>
                </Select>
                <Select v-else-if="searchObj.type2==='3'" v-model="searchObj.type3" class="searchSelect">
                    <Option v-for="(item,key) in type3list3" :key="key" :value="item.value" v-text="item.label" :label="item.label"></Option>
                </Select>
            </div>
            <div class="searchBtn">
            <Button type="primary" class="twoWord" icon="ios-search" @click="search()">查询</Button>
            </div>
          </div>
          <div class="divborder newEchartStyle">
            <div class="echartsId" id="echarts_div">

            </div>
            <Table class="echartsTable" :max-height="300" highlight-row :data="tableData1" :columns="tableColumns1"></Table>
        </div>
        </div>
    </div>
</template>

<script>
import moment from 'moment'
import echarts from 'echarts'

export default {
    data () {
        return {
            index_time: [
                moment(new Date().getTime() - 3600 * 1000 * 24 * 6).format(
                    'YYYY-MM-DD '
                ),
                moment(new Date().getTime()).format('YYYY-MM-DD ')
            ],
            searchObj: {
                type1: '1',
                type2: '1',
                type3: 'day'
            },
            type3list1: [{
                value: 'day',
                label: this.$t('1101')
            }, {
                value: 'week',
                label: this.$t('1136')
            }, {
                value: 'month',
                label: this.$t('1138')
            }],
            type3list2: [],
            type3list3: [{
                value: '1',
                label: this.$t('100040')
            }, {
                value: '2',
                label: this.$t('700100')
            }],
            tableData1: [],
            tableColumns1: []
        }
    },
    computed: {
        treeList () {
            return this.$store.state.app.tree;
        }
    },
    created () {
    // 获取树形图数据
        this.$store.dispatch('getTree');
    },
    mounted () {
        this.searchObj.type3 = 'day'
        this.search();
    },
    methods: {
        typechange () {
            this.searchObj.type3 = ''
            if (this.searchObj.type2 === '2') {
                this.getLevels()
            }

            // if (this.searchObj.type2 === '1') {
            //   this.type3list = [{
            //     value: 'day',
            //     label: this.$t('1101')
            //   }, {
            //     value: 'week',
            //     label: this.$t('1136')
            //   }, {
            //     value: 'month',
            //     label: this.$t('1138')
            //   }]
            //   this.searchObj.type3 = 'day'
            // } else if (this.searchObj.type2 === '2') {
            //   this.getLevels()
            // } else if (this.searchObj.type2 === '3') {
            //   this.type3list = [{
            //     value: '1',
            //     label: this.$t('100040')
            //   },{
            //     value: '2',
            //     label: this.$t('700100')
            //   }]
            //   this.searchObj.type3 = '1'
            // } else if (this.searchObj.type2 === '4') {
            //   this.type3list = []
            // }
        },
        // 获取id
        getList () {
            let node = this.$refs.tree.getSelectedNodes();

            if (node) {
                if (node.length > 0) {
                    this.treenode = node;
                    this.getLevels()
                }
            }
        },
        getLevels () {
            var params = {
                sectionId: this.treenode ? this.treenode[0].value : 0
            }
            this.axios.request({
                url: '/config/ProjectLevelSection/GetLevelidsBySection',
                params,
                method: 'get'
            }).then(res => {
                // 产线层级
                if (res.data.ret === 1) {
                    this.type3list2 = []
                    // 最后一层查本身
                    res.data.data = res.data.data.slice(1)
                    if (res.data.data.length !== 0) {
                        var arr = []
                        res.data.data.forEach(item => {
                            arr.push({ value: item.id, label: item.title })
                        })
                        this.type3list2 = arr
                        if (arr.length === 0) {
                            this.searchObj.type3 = ''
                        }
                        // this.searchObj.type3 = this.type3list[0].value
                    } else {
                        this.searchObj.type3 = ''
                        // this.showStr = false
                    }
                }
            })
        },
        search () {
            if (this.searchObj.type2 === '1' || this.searchObj.type2 === '3') {
                if (this.searchObj.type3 === '' || this.searchObj.type3 === undefined) {
                    this.$Message.error(this.$t('500133'))
                    return false;
                }
            } else if (this.searchObj.type2 === '2' && this.type3list2.length > 0) {
                if (this.searchObj.type3 === '' || this.searchObj.type3 === undefined) {
                    this.$Message.error(this.$t('500133'))
                    return false;
                }
            }
            this.searchObj.sectionId = this.treenode ? this.treenode[0].value : 0;
            this.searchObj.starttime = moment(this.index_time[0]).format('YYYY-MM-DD ')
            this.searchObj.endtime = moment(this.index_time[1]).format('YYYY-MM-DD ')
            var params = this.searchObj
            this.axios.request({
                url: '/dnc/DncContrast/GetPgStatisticlists',
                params,
                method: 'get'
            }).then(res => {
                if (res.data.ret === 1) {
                    var title = ''
                    if (this.searchObj.type1 === '1') {
                        title = this.$t('700140')
                    } else {
                        title = this.$t('700141')
                    }
                    if (this.searchObj.type2 === '1') {
                        if (JSON.stringify(res.data.data) != '{}') {
                            this.baseEcharts(res.data.data.data, title);
                            this.appendTr(res.data.data.arr, this.searchObj.type1);
                        }
                    } else {
                        if (JSON.stringify(res.data.data) != '{}') {
                            this.baseEchartstwo(res.data.data.data, title);
                            this.appendTrtwo(res.data.data.arr, this.searchObj.type2, this.searchObj.type1);
                        }
                    }
                } else {
                    this.$Message.error(this.$t(res.data.msg))
                }
            })
        },
        baseEcharts (data, title) {
            var yname = this.$t('700142') // 次数
            var myChart = echarts.init(document.getElementById('echarts_div'));
            myChart.clear()
            var option = {
                title: {
                    text: title,
                    textStyle: {
                        fontSize: 18
                    },
                    subtextStyle: {
                        fontSize: 14
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: data.datetime,
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis: [
                    {
                        name: yname,
                        type: 'value',
                        minInterval: 1
                    }
                ],
                series: [
                    {
                        name: title,
                        type: 'bar',
                        barMaxWidth: 70,
                        barWidth: '60%',
                        data: data.num
                    }
                ]
            };
            myChart.setOption(option);
        },
        appendTr (data, type) { // table
            var str = ''
            if (type === '1') {
                str = '上传次数'
            } else {
                str = '变更次数'
            }
            this.tableColumns1 = [{ // 列表字段属性集合
                type: 'index2',
                title: this.$t(1008),
                key: 'xuhao',
                render: (h, params) => {
                    return h('span', params.index + 1)
                },
                width: 80
            },
            {
                title: '日期',
                key: 'datetime',
                align: 'center'
            },

            {
                title: '区域',
                key: 'region',
                align: 'center'
            },
            {
                title: str,
                key: 'num',
                align: 'center'
            }
            ]
            this.tableData1 = data
        },
        baseEchartstwo (res, title) {
            var yname = this.$t('700142')
            var myChartone = echarts.init(document.getElementById('echarts_div'));
            myChartone.clear()
            var option = {
                title: {
                    text: title,
                    textStyle: {
                        fontSize: 18
                    },
                    subtextStyle: {
                        fontSize: 14
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                xAxis: [
                    {
                        type: 'category',
                        data: res.title,
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis: [
                    {
                        name: yname,
                        type: 'value',
                        data: ''
                    },
                    {
                        name: '',
                        type: 'value',
                        axisLabel: {
                            formatter: '{value}%'
                        }
                    }
                ],
                series: [
                    {
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true
                                }
                            }
                        },
                        // yAxisIndex: 1,
                        name: title,
                        barMaxWidth: 70,
                        type: 'bar',
                        barWidth: '60%',
                        data: res.num1
                    },
                    {
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true
                                }
                            }
                        },
                        yAxisIndex: 1,
                        name: this.$t('700143'),
                        type: 'line',
                        barWidth: '60%',
                        data: res.num2
                    }
                ]
            };
            myChartone.setOption(option);
        },
        appendTrtwo (data, type2, type1) {
            var str = ''
            var str1 = ''
            if (type2 === '2') {
                str = this.$t('1131')
            } else if (type2 === '3') {
                str = this.$t('100046')
            } else if (type2 === '4') {
                str = this.$t('100088')
            }
            if (type1 === '1') {
                str1 = this.$t('700144')
            } else if (type1 === '2') {
                str1 = this.$t('700145')
            }
            this.tableColumns1 = [{ // 列表字段属性集合
                type: 'index2',
                title: this.$t(1008),
                key: 'xuhao',
                render: (h, params) => {
                    return h('span', params.index + 1)
                },
                width: 80
            },
            {
                title: str,
                key: 'title',
                align: 'center'
            },

            {
                title: str1,
                key: 'num',
                align: 'center'
            }
            ]
            this.tableData1 = data
        }
    }
};
</script>

<style lang="less" scoped>

</style>
