<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(900910)}}</label>
         <Select v-model="date1" label-in-value clearable @on-change="timechange" class="searchSelect">
             <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(900675)}}</label>
          <Select v-model="type2" class="searchSelect" @on-change="xTypechange" style="margin-right:10px;">
            <Option :value='1' v-text="$t('500065')">时间单位</Option>
            <Option :value='2' v-text="$t('1132')">产线层级</Option>
            <Option :value='3' v-text="$t('900918')">报工人员</Option>
            <Option :value='4' v-text="$t('100088')">产品名称</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 intervalRight" icon="ios-search" @click="search(0)">{{$t('1001')}}</Button>
        <Button type="primary" class="fourWord" icon="md-close-circle"  @click="clear()">{{$t('1039')}}</Button>
        <Button type="primary" class="fourWord" icon="ios-cloud-download"  @click="search(1)">{{$t('1007')}}</Button>
      </div>
    </div>
    <div class="divborder newEchartStyle">
      <div id="production" class="echartsId"></div>
     <Table
      class="echartsTable"
      highlight-row
      :data="tableData1"
      :columns="tableColumns1"
    ></Table>
    </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: '', // 统计指标select
            type2: 1, // 横坐标select
            type3: 1, // 横坐标子select
            xTypeList: [], // select 集合
            showStr: true, // 下拉框显示或隐藏
            page: 1,
            pagesize: 10,
            total: 0,
            obj: {},
            treedata1: [],
            datalevel: [],
            allsections: [],
            myChart: '',
            date1: 1,
            tableColumns1: [
                {
                    type: 'index2',
                    title: this.$t('1008'),
                    key: 'xuhao',
                    render: (h, params) => {
                        return h('span', params.index + 1)
                    },
                    width: 60
                },
                {
                    title: this.$t('1129'),
                    key: 'title'
                },
                {
                    title: this.$t('920067'),
                    key: 'number'
                }
            ]
        }
    },
    created () {
        this.inittime()// 初始化
        this.initlevel()
        this.inidatetype()
        this.inisectionIds()
        this.search(0)
    },
    methods: {
        timechange () {
            var time = this.$time.changetime(this.date1).split(' - ')
            this.dateTime = [time[0], time[1]]
        },
        inidatetype () {
            this.xTypeList = [{ value: 1, label: this.$t(900864) }, { value: 2, label: this.$t(1136) }, { value: 3, label: this.$t(1138) }]
        },
        inittime () {
            // 时间赋值
            var date = new Date()
            var start = this.$time.timestampToTime(date.getTime() - 3600 * 1000 * 24)
            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 (data) {
            this.leveldata = data
            this.getLevels()
        },
        // 横坐标选择
        xTypechange () {
            this.showStr = true
            if (this.type2 === 1) {
                this.xTypeList = [{ value: 1, label: this.$t(900864) }, { value: 2, label: this.$t(1136) }, { value: 3, label: this.$t(1138) }]
                this.type3 = 0
            } else if (this.type2 === 2) {
                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 === 2) {
                    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
                    }
                }
            })
        },
        inisectionIds () {
            axios.request({
                url: '/config/ProjectLevelSection/GetSectionSelect?reverselevel=1',
                method: 'get'
            }).then(res => {
                // 产线层级
                if (res.data.ret === 1) {
                    if (res.data.data.length !== 0) {
                        res.data.data.forEach(item => {
                            this.allsections.push({ id: item.id, name: item.name })
                        })
                    }
                }
            })
        },
        search (toexcel) {
            if (this.dateTime === undefined || this.dateTime === '') {
                this.$Message.error(this.$t('800154'))
                return false
            }
            if (this.type3 === undefined || this.type3 === '') {
                this.$Message.error(this.$t('1037'))
                return false
            }
            var params = {
                dateTime: moment(this.dateTime[0]).format('YYYY-MM-DD') + ' - ' + moment(this.dateTime[1]).format('YYYY-MM-DD'),
                type: this.type2,
                typeValue: this.type3,
                sectionId: this.leveldata[this.leveldata.length - 1],
                toexcel: toexcel
            }
            axios.request({
                url: '/cnc/ProductReport/GetProduceSummary',
                params,
                method: 'get'
            }).then(res => {
                if (toexcel === 0) {
                    this.getALLData(res.data.data)
                } else {
                    if (res.data.ret === 1) {
                        document.location.href = axios.publicPath + '' + res.data.data
                    } else {
                        this.$Message.error(this.$t('1000039'))
                    }
                }
            })
        },
        getALLData (allData) {
            this.getecharts(allData)
            // 处理表格数据
            this.mockTableData1(allData)
        },
        // 画图
        getecharts (data) {
            var arr1 = []
            var arr2 = []
            data.forEach(ele => {
                arr1.push(ele.title)
                arr2.push(ele.number)
            })

            var myChart1 = echarts.init(document.getElementById('production'))
            var option = {
                title: {
                    textStyle: {
                        fontSize: 18
                    },
                    subtextStyle: {
                        fontSize: 14
                    }
                },
                color: ['#3398DB'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: arr1,
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis: [
                    {
                        name: this.$t('900919'),
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: this.$t('900919'),
                        barMaxWidth: 70,
                        type: 'bar',
                        barWidth: '60%',
                        data: arr2
                    }
                ]
            }

            myChart1.setOption(option)
        },
        mockTableData1 (tablelist) {
            let data = []
            tablelist.forEach(item => {
                if (item) {
                    data.push({
                        title: item.title,
                        number: item.number
                    })
                }
            })
            this.tableData1 = data
        },
        clear () {
            this.inittime()
            this.type2 = 1
            this.type3 = 1
            this.inidatetype()
            this.search(0)
        }
    }
}
</script>
<style lang="less">

</style>
