<template>
  <div>
    <div class="divborder newSearchDiv">
      <div class="filter">
        <label>异常原因：</label>
        <Select v-model="abnormalReason" label-in-value clearable class="searchSelect">
          <Option :value="1">断刀</Option>
          <Option :value="2">崩刃</Option>
          <Option :value="3">磨损</Option>
        </Select>
      </div>
      <div class="filter">
        <label>指标：</label>
        <Select v-model="kpi" label-in-value clearable class="searchSelect">
          <Option :value="1">刀具名称</Option>
          <Option :value="2">供应商</Option>
        </Select>
      </div>
      <div class="filter">
        <label>{{$t(900908)}}：</label>
        <DatePicker
          type="datetimerange"
          format="yyyy-MM-dd HH:mm:ss"
          :clearable="false"
          v-model="index_time"
          @on-change="getTime"
          class="searchInput MaxWidth  "
        ></DatePicker>
      </div>
      <div class="searchBtn">
        <Button type="primary" class="twoWord" icon="ios-search" @click="search(1,10)">{{$t('1001')}}</Button>
      </div>
    </div>
    <div class="divborder newEchartStyle">
      <div class="echartsId" id="echarts_div">
		  </div>
    </div>
  </div>
</template>
<script>
import moment from 'moment';
import echarts from 'echarts';
export default {
    data () {
        return {
            abnormalReason: '', // 异常原因
            kpi: '', // 指标
            index_time: [], // 时间范围
            name1: '',
            name2: ''
        };
    },
    created () {
        // this.search(1, 10);
        this.index_time = [
            moment(new Date().getTime() - 3600 * 1000 * 24 * 7).format(
                'YYYY-MM-DD '
            ) + '00:00:00',
            moment(new Date().getTime()).format('YYYY-MM-DD ') + '23:59:59'
        ];
    },
    methods: {
        search (page, pagesize) {
            let starttime = this.index_time[0];
            let endtime = this.index_time[1];
            if(this.kpi == ''){
                this.$Message.error('请选择指标');
                return 
            }
            let data = {
                xtype: this.kpi,
                reason: this.abnormalReason,
                starttime: starttime,
                endtime: endtime,
                page: page,
                pagesize: pagesize
            };
            this.axios
                .request({
                    url: '/tlm/ToolInstall/GetUnusualImageData',
                    data,
                    method: 'post'
                })
                .then(res => {
                    if (res.data.ret == 1) {
                        let xArr = res.data.data.x;
                        let yArr = res.data.data.y;
                        this.getCharts(xArr, yArr);
                    }
                });
        },
        getTime (val) {
            this.index_time = val;
        },
        getCharts (x, y) {
            switch (this.kpi) {
            case 1:
                this.name2 = '刀具名称';
                break;
            case 2:
                this.name2 = this.$t(600011);
                break;
            }
            switch (this.abnormalReason) {
            case 1:
                this.name1 = '断刀';
                break;
            case 2:
                this.name1 = '崩刃';
                break;
            case 3:
                this.name1 = '磨损';
                break;
            }
            var main_test = echarts.init(document.getElementById('echarts_div'));
            let option_base = {
                title: {
                    textStyle: {
                        fontSize: 18
                    },
                    subtextStyle: {
                        fontSize: 14
                    }
                },
                color: ['#3398DB'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                legend: {
                    name: '',
                    top: '10px'
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '8%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: x,
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            interval: 0,
                            rotate: -20
                        }
                    }
                ],
                yAxis: [
                    {
                        name: this.name1,
                        nameTextStyle: { fontSize: 18 },
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: this.name2,
                        type: 'bar',
                        barMaxWidth: 70,
                        barWidth: '60%',
                        data: y
                    }
                ]
            };
            var main_test = echarts.init(document.getElementById('echarts_div'));
            main_test.clear();
            main_test.setOption(option_base);
        }
    }
};
</script>
<style lang="less" scoped>
</style>
