<template>
  <div>
    <div class="divborder newSearchDiv">
      <div class="filter">
        <label>指标：</label>
        <Select v-model="kpi" label-in-value clearable class="searchSelect">
          <Option :value="1">报废量</Option>
          <Option :value="2">修磨量</Option>
          <Option :value="3">使用量</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"
           class="searchInput MaxWidth  "
          @on-change="getDate"
        ></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: 1, // 指标
            index_time: [], // 时间范围
            name1: ''
            //   options:{
            //       shortcuts(value){

            //       }
            //   }
        };
    },
    created () {
        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 HH:mm:ss')
        ];
        this.search(1, 10);
    },
    methods: {
        getDate (value) {
            this.index_time = value;
        },
        search (page, pagesize) {
            let starttime = this.index_time[0];
            let endtime = this.index_time[1];

            let data = {
                stype: this.kpi,
                starttime: starttime,
                endtime: endtime,
                page: page,
                pagesize: pagesize
            };
            //   console.log(data);
            this.axios
                .request({
                    url: '/tlm/ToolReplaceReturn/GetToolAmount',
                    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);
                    }
                });
        },
        getCharts (x, y) {
            switch (this.kpi) {
            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.name1,
                        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>
