<template>
  <div class="testdiv">
    <div class="divborder newSearchDiv">
      <div class="filter">
        <label>{{$t(200065)}}：</label>
        <Select v-model="search_type" class="searchSelect" style="margin-right:10px;">
          <Option :value="1">按年查询</Option>
          <Option :value="2">按月查询</Option>
        </Select>
        <DatePicker
          v-show="search_type===1"
          type="year"
          :clearable="false"
          v-model="index_time"
          placeholder="Select year"
          class="searchInput"
        ></DatePicker>
        <DatePicker
          v-show="search_type===2"
          type="month"
          :clearable="false"
          v-model="index_time1"
          placeholder="Select month"
         class="searchInput"
        ></DatePicker>
      </div>
      <div class="searchBtn">
        <Button type="primary" class="twoWord intervalRight" icon="ios-search" @click="search()">{{$t('1001')}}</Button>
        <Button type="success" class="fourWord" icon="md-close-circle" @click="clearFilter()">{{$t(1039)}}</Button>
        <Button type="primary" class="fourWord" icon="md-download" @click="toExcel()">{{$t(1007)}}</Button>
      </div>
    </div>
    <div class="divborder" style="width:100%;">
      <div id="echarts_years" v-show="echart_type" style="width:100%;height:350px;overflow-x:auto;"></div>
      <div
        id="echarts_month2"
        v-show="echart_type2"
        style="width:1400px;height:400px;overflow-x:auto;"
      ></div>
      <Table
        v-show="table_show"
        style="margin-top:10px"
        highlight-row
        :data="tableData1"
        :max-height="300"
        :columns="tableColumns1"
      ></Table>
    </div>
  </div>
</template>
<script>
import moment from 'moment';
import echarts from 'echarts';
export default {
    data () {
        return {
            index_time: '',
            search_type: 1,
            index_time1: '',
            lunarData: [],
            yearsdata: [],
            table_show: false,
            echart_type: true,
            echart_type2: false,
            list: {
                1: this.$t(950331),
                2: this.$t(950332),
                3: this.$t(950333),
                4: this.$t(950334),
                5: this.$t(950335),
                6: this.$t(950336),
                10: this.$t(930077),
                11: this.$t(800074),
                12: this.$t(930078),
                13: this.$t(930079)
            },
            defendTypeList2: {
                1: 'AM',
                2: 'PM',
                3: 'CMP'
            },
            tableData1: [], // table数据
            tableColumns1: [
                // table表头
                {
                    // 列表字段属性集合
                    type: 'index',
                    title: this.$t(1008), // 序号
                    key: 'xuhao',
                    align: 'center',
                    width: 60
                },
                {
                    title: this.$t(200003), // 设备位置
                    key: 'station',
                    align: 'center',
                    width: 180
                },
                {
                    title: this.$t(900337), // 工单号
                    key: 'work_order',
                    align: 'center'
                },
                {
                    title: this.$t(800191), // 维护类型
                    key: 'mode',
                    align: 'center'
                },
                {
                    title: this.$t(200058), // 项目内容
                    key: 'content',
                    align: 'center'
                },
                {
                    title: this.$t(950330) + '(min)', // 项目分类
                    align: 'center',
                    key: 'severity_level'
                },
                {
                    title: this.$t(200063), // 计划用时(分钟)
                    align: 'center',
                    key: 'standard_time'
                },
                {
                    title: this.$t(200072), // 原计划执行日期
                    align: 'center',
                    key: 'instruction_time_str'
                },
                {
                    align: 'center',
                    title: this.$t(200073), // 原计划执行人
                    key: 'name'
                }
            ]
        };
    },
    created () {
        this.index_time = '' + new Date().getFullYear();
        this.index_time1 = moment(new Date().getTime()).format('YYYY-MM ');
    },
    mounted () {
        this.search();
    // setTimeout(()=>{
    //     this.initdata();
    // },1000)
    },
    methods: {
        search () {
            var params = {};
            if (this.search_type === 1) {
                params = {
                    type: 1,
                    date: moment(this.index_time).format('YYYY') + '-01-01'
                };
            } else if (this.search_type === 2) {
                params = {
                    type: 1,
                    date: moment(this.index_time1).format('YYYY') + '-01-01'
                };
            }
            this.axios
                .request({
                    url: 'tpm/plan/GetYearPlan',
                    params,
                    method: 'get'
                })
                .then(res => {
                    if (res.data.ret === 1) {
                        this.table_show = false;
                        this.tableData1 = [];
                        if (res.data.data.length > 0) {
                            this.yearsdata = [];
                            this.lunarData = [];
                            res.data.data.forEach(item => {
                                this.yearsdata.push([item.date, item.plancount]);
                            });
                            //    console.log(this.yearsdata,)
                            if (this.search_type === 1) {
                                this.echart_type = true;
                                this.echart_type2 = false;
                                this.initdata(
                                    this.yearsdata,
                                    moment(this.index_time).format('YYYY')
                                );
                            } else if (this.search_type === 2) {
                                this.echart_type = false;
                                this.echart_type2 = true;
                                for (var i = 0; i < this.yearsdata.length; i++) {
                                    this.lunarData.push([this.yearsdata[i][0], 1]);
                                }
                                this.initmonthdata(
                                    moment(this.index_time1).format('YYYY-MM'),
                                    this.yearsdata
                                );
                            }
                        }
                    } else {
                        this.$Message.error(this.$t(res.data.msg));
                    }
                });
            //  console.log(this.yearsdata)
            return this.yearsdata;
        },
        clearFilter () {
            this.search_type = 1;
            this.index_time = '' + new Date().getFullYear();
            this.index_time1 = moment(new Date().getTime()).format('YYYY-MM ');
            this.search();
        },
        toExcel () {
            var params = {};
            if (this.search_type === 1) {
                params = {
                    type: 1,
                    date: moment(this.index_time).format('YYYY') + '-01-01'
                };
            } else if (this.search_type === 2) {
                params = {
                    type: 2,
                    date: moment(this.index_time1).format('YYYY-MM') + '-01'
                };
            }
            this.axios
                .request({
                    url: '/tpm/Plan/ExportCalendarItem',
                    params,
                    method: 'get'
                })
                .then(res => {
                    if (res.data.ret === 1) {
                        window.location.href = this.axios.publicPath + '' + res.data.data;
                    } else {
                        this.$Message.error(res.data.msg);
                    }
                });
        },
        initdata (data, date) {
            var myChart = echarts.init(document.getElementById('echarts_years'));
            var colorBox = ['#0087FF', '#28B9FF', '#06D6FF', '#68FCFC', '#ffffff'];
            var option = {
                title: {
                    top: 30,
                    left: 'center',
                    text: moment(this.index_time).format('YYYY') + this.$t(930081),
                    textStyle: {
                        fontSize: 18
                    },
                    subtextStyle: {
                        fontSize: 14
                    }
                },
                tooltip: {},
                visualMap: {
                    min: 0,
                    max: 10000,
                    type: 'piecewise',
                    orient: 'horizontal',
                    left: 'center',
                    top: 65,
                    textStyle: {
                        color: '#000'
                    },
                    color: colorBox,
                    pieces: [
                        { gt: 14 }, // (400, +]
                        { gt: 8, lte: 14 }, // (300, 400]
                        { gt: 5, lte: 8 }, // (200, 300]
                        { gt: 0, lte: 5 }, // (100, 200]
                        { gte: 0, lte: 0 } // [0,100]
                    ]
                },
                calendar: {
                    top: 120,
                    left: 60,
                    right: 60,
                    cellSize: 23,
                    range: date,
                    itemStyle: {
                        borderWidth: 1,
                        borderColor: '#F5F7F9'
                    },
                    dayLabel: {
                        firstDay: 1,
                        nameMap: [
                            this.$t(900467),
                            this.$t(900461),
                            this.$t(900462),
                            this.$t(900463),
                            this.$t(900464),
                            this.$t(900465),
                            this.$t(900466)
                        ]
                    },
                    monthLabel: {
                        nameMap: [
                            this.$t(930082),
                            this.$t(930083),
                            this.$t(930084),
                            this.$t(930085),
                            this.$t(930086),
                            this.$t(930087),
                            this.$t(930088),
                            this.$t(930089),
                            this.$t(930090),
                            this.$t(930091),
                            this.$t(930092),
                            this.$t(930093)
                        ],
                        margin: 20
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#aaaaaa',
                            width: 1,
                            type: 'solid'
                        }
                    },
                    yearLabel: {
                        show: false,
                        nameMap: 'cn'
                    }
                },
                series: {
                    type: 'heatmap',
                    coordinateSystem: 'calendar',
                    data: data
                }
            };
            // console.log(this.search())
            myChart.setOption(option);
            myChart.on('click', this.lineClick); // 里面有两个参数 第一个参数是你要的事件是什么 第二参数是 点击事件
        },
        // getVirtulData1(year) {
        //     year = year || '2017';
        //     var date = +echarts.number.parseDate(year + '-01-01');
        //     var end = +echarts.number.parseDate((+year + 1) + '-01-01');
        //     var dayTime = 3600 * 24 * 1000;
        //     var data = [];
        //     for (var time = date; time < end; time += dayTime) {
        //         data.push([
        //             echarts.format.formatTime('yyyy-MM-dd', time),
        //             Math.floor(Math.random() * 20)
        //         ]);
        //     }
        //     this.yearsdata=data
        //     for (var i = 0; i < this.yearsdata.length; i++) {
        //         this.lunarData.push([
        //             this.yearsdata[i][0],
        //             1
        //         ]);
        //     }
        //     return data;
        // },
        initmonthdata (date, data) {
            var myChart1 = echarts.init(document.getElementById('echarts_month2'));
            var colorBox = ['#0087FF', '#28B9FF', '#06D6FF', '#68FCFC', '#ffffff'];
            var option = {
                title: {
                    textStyle: {
                        fontSize: 18
                    },
                    subtextStyle: {
                        fontSize: 14
                    }
                },
                tooltip: {
                    position: 'top'
                },
                dayLabel: {
                    firstDay: 1,
                    nameMap: [
                        this.$t(900467),
                        this.$t(900461),
                        this.$t(900462),
                        this.$t(900463),
                        this.$t(900464),
                        this.$t(900465),
                        this.$t(900466)
                    ]
                },
                visualMap: [
                    {
                        min: 0,
                        max: 1000,
                        type: 'piecewise',
                        calculable: true,
                        // seriesIndex: [2, 3, 4],
                        orient: 'horizontal',
                        left: '55%',
                        bottom: 20,
                        color: colorBox,
                        pieces: [
                            { gt: 15 }, // (400, +]
                            { gt: 8, lte: 14 }, // (300, 400]
                            { gt: 5, lte: 8 }, // (200, 300]
                            { gt: 0, lte: 5 }, // (100, 200]
                            { gte: 0, lte: 0 } // [0,100]
                        ]
                    }
                ],

                calendar: [
                    {
                        orient: 'vertical',
                        yearLabel: {
                            margin: 40
                        },

                        dayLabel: {
                            firstDay: 1,
                            nameMap: [
                                this.$t(900467),
                                this.$t(900461),
                                this.$t(900462),
                                this.$t(900463),
                                this.$t(900464),
                                this.$t(900465),
                                this.$t(900466)
                            ]
                        },
                        monthLabel: {
                            nameMap: 'cn',
                            margin: 20
                        },
                        cellSize: [180, 50],
                        top: 80,
                        left: 60,
                        range: date
                    }
                ],

                series: [
                    {
                        type: 'scatter',
                        coordinateSystem: 'calendar',
                        symbolSize: 1,
                        label: {
                            show: true,
                            formatter: function (params) {
                                var d = echarts.number.parseDate(params.value[0]);
                                return d.getDate();
                            },
                            color: '#000'
                        },
                        data: this.lunarData
                    },
                    {
                        type: 'heatmap',
                        coordinateSystem: 'calendar',
                        calendarIndex: 0,
                        data: data
                    }
                ]
            };
            myChart1.setOption(option);
            myChart1.on('click', this.lineClick);
        },
        lineClick (param) {
            this.table_show = true;
            var params = {
                date: param.data[0]
            };
            this.axios
                .request({
                    url: '/tpm/plan/GetDayCalendarItem',
                    params,
                    method: 'get'
                })
                .then(res => {
                    if (res.data.ret === 1) {
                        if (res.data.data.length > 0) {
                            var arr = [];
                            res.data.data.forEach(item => {
                                if (item) {
                                    arr.push({
                                        id: item.id,
                                        station: item.station,
                                        mode: this.defendTypeList2[item.mode],
                                        content: item.content,
                                        severity_level: this.list[item.severity_level],
                                        standard_time: item.standard_time,
                                        instruction_time_str: item.instruction_time_str,
                                        name: item.name,
                                        department: item.department,
                                        mid: item.mid,
                                        work_order: item.work_order
                                    });
                                }
                            });
                            this.tableData1 = arr;
                        } else {
                            this.tableData1 = [];
                        }
                    }
                });
        }
    }
};
</script>
<style lang="less" scoped>
</style>
