<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('900862')}}</label>
          <Select v-model="type1" class="searchSelect">
             <Option :value='0' v-text="$t('1014')"></Option>
             <Option :value='3' v-text="$t('500043')">空闲</Option><!--空闲-->
             <Option :value='4' v-text="$t('500044')">报警</Option><!--报警-->
             <Option :value='2' v-text="$t('500042')">手动/调试</Option><!--手动/调试-->
          </Select>
      </div>
      <div class="filter">
          <label >{{$t('1129')}}：</label>
          <Select v-model="type2" class="searchSelect" @on-change="xTypechange" style="margin-right:10px;">
            <Option :value='1' v-text="$t('500122')">时间周期</Option>
            <Option :value='2' v-text="$t('500132')">产线层级</Option>
            <Option :value='3' v-text="$t('900863')">录入人员</Option>
            <Option :value='4' v-text="$t('800264')">工作模式</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 class="echartsId" id="echarts"></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: '0', // 统计指标select
            type2: 1, // 横坐标select
            type3: 1, // 横坐标子select
            xTypeList: [], // select 集合
            showStr: true, // 下拉框显示或隐藏
            page: 1,
            pagesize: 10,
            total: 0,
            obj: {},
            treedata1: [],
            datalevel: [],
            myChart: '',
            xname: '',
            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('901014'),
                    key: 'free'
                },
                {
                    title: this.$t('901015'),
                    key: 'dubugging'
                },
                {
                    title: this.$t('901016'),
                    key: 'fault'
                },
                {
                    title: this.$t('901017'),
                    key: 'total'
                }
            ]
        }
    },
    created () {
        this.inittime()// 初始化
        this.initlevel()
        this.inidatetype()
        this.search(0)
    },
    methods: {
        inidatetype () {
            this.xTypeList = [{ value: 1, label: '日' }, { value: 2, label: '周' }, { value: 3, label: '月' }]
        },
        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 => {
                this.levelid = res.data.data[0].value
                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.getLevels()
        },
        // 横坐标选择
        xTypechange () {
            this.showStr = true
            if (this.type2 === 1) {
                this.xTypeList = [{ value: 1, label: '日' }, { value: 2, label: '周' }, { value: 3, label: '月' }]
                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 (this.type2 === 1) {
                    this.xTypeList = [{ value: 1, label: '日' }, { value: 2, label: '周' }, { value: 3, label: '月' }]
                }
                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
                    }
                }
            })
        },
        search (toexcel) {
            if (this.dateTime === undefined || this.dateTime === '') {
                this.$Message.error(this.$t('800154'))
                return false
            }
            var data = {
                datetime: moment(this.dateTime[0]).format('YYYY-MM-DD') + ' - ' + moment(this.dateTime[1]).format('YYYY-MM-DD'),
                errorType: this.type1,
                x_id: this.type2,
                levelId: this.type3,
                sectionId: this.levelid,
                toexcel: toexcel
            }
            axios.request({
                url: 'cnc/ProjectSectionMachine/MachineStatusErrorSummary',
                data,
                method: 'post'
            }).then(res => {
                if (toexcel === 0) {
                    this.xname = ''
                    if (this.type2 === 1) {
                        this.xname = this.$t('600532')
                    } else if (this.type2 === 2) {
                        this.xname = this.$t('500132')
                    } else if (this.type2 === 3) {
                        this.xname = this.$t('900863')
                    } else if (this.type2 === 4) {
                        this.xname = this.$t('800264')
                    }

                    this.tableColumns1.forEach((item, index) => {
                        if (item.key === 'title') {
                            item.title = this.xname
                        }
                    })

                    this.getALLData(res.data.data)
                } else {
                    if (res.data.ret === 0) {
                        this.$Message.error(this.$t('1053'))
                        return false
                    }
                    if (res.data.data.length > 0) {
                        if (res.data.ret === 0) {
                            this.$Message.error(this.$t('1053'))
                            return false
                        }
                        document.location.href = axios.publicPath + '' + res.data.data
                    } else {
                        this.$Message.error(this.$t('1053'))
                        return false
                    }
                }
            })
        },
        getALLData (allData) {
            var data = {}
            var total = 0
            allData.forEach(ele => {
                total += ele.total
            })
            var arr1 = []
            var arr2 = []
            var arr3 = []
            var arr4 = []
            var arr5 = []
            var arr6 = []
            var num = 0
            allData.forEach(ele => {
                arr1.push(ele.title)
                arr2.push(ele.total)
                num += ele.total
                arr3.push((num / total * 100).toFixed(2))
                arr4.push(ele.free)
                arr5.push(ele.fault)
                arr6.push(ele.dubugging)
            })
            data.text = arr1
            data.data = arr2
            data.free = arr4
            data.fault = arr5
            data.dubugging = arr6
            data.number = arr3
            // 时间周期
            if (this.type2 === 1) {
                // 柱状图
                this.pareto(data)
            } else if (this.type2 === 2) {
                // 柱状图
                this.pareto(data)
            } else if (this.type2 === 3) {
                // 柱状图
                this.pareto(data)
            } else if (this.type2 === 4) {
                // 柱状图
                this.pareto(data)
            }
            this.mockTableData1(allData)
        },
        pareto (res) {
            if (this.myChart !== null && this.myChart !== '' && this.myChart !== undefined) {
                this.myChart.dispose()
            }
            this.myChart = echarts.init(document.getElementById('echarts'))
            var option = {
                color: ['#f0ad4e', '#3574ad', '#d71518'],
                title: {
                    text: '',
                    left: 'center',
                    textStyle: {
                        fontSize: 18
                    },
                    subtextStyle: {
                        fontSize: 14
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                legend: {
                    data: [this.$t('500043'), this.$t('500042'), this.$t('500044')]
                },
                xAxis: [
                    {
                        type: 'category',
                        data: res.text,
                        axisLabel: {
                            // interval: 0,
                            rotate: 35
                        },
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis: [
                    {
                        name: this.$t(900865),
                        type: 'value',
                        data: '',
                        axisLabel: {
                            formatter: '{value}'
                        }
                    }
                ],
                series: [
                    {
                        name: this.$t('500043'),
                        type: 'bar',
                        barMaxWidth: 70,
                        stack: '广告',
                        data: res.free
                    },
                    {
                        name: this.$t('500042'),
                        type: 'bar',
                        barMaxWidth: 70,
                        stack: '广告',
                        data: res.dubugging
                    },
                    {
                        name: this.$t('500044'),
                        type: 'bar',
                        barMaxWidth: 70,
                        stack: '广告',
                        data: res.fault
                    }
                ]
            }
            this.myChart.setOption(option)
        },
        mockTableData1 (tablelist) {
            let data = []
            tablelist.forEach(item => {
                if (item) {
                    data.push({
                        title: item.title,
                        free: item.free,
                        dubugging: item.dubugging,
                        fault: item.fault,
                        total: item.total
                    })
                }
            })
            this.tableData1 = data
        },
        formattitle () {
            switch (this.type2) {
            case 1:
                return this.$t(600532)
            case 2:
                return this.$t(200003)
            case 3:
                return this.$t(900863)
            case 4:
                return this.$t(800264)
            default:
                return ''
            }
        },
        clear () {
            this.inittime()
            this.initlevel()
            this.type1 = 0
            this.type2 = 1
            this.type3 = 1
            this.inidatetype()
            this.sectionIdStr = ''
            this.search(0)
        }
    }
}
</script>
<style lang="less" scoped>
</style>
