/*
 * @Author: your name
 * @Date: 2021-04-16 14:44:10
 * @LastEditTime: 2021-04-30 15:14:10
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \exclusive-cloud-admin\common\src\components\time-search\time-search.ts
 */

import {Component, Prop, Vue, Emit, Watch} from 'vue-property-decorator';
import Common from '../../assets/js/common';
import TimeCommon from '../../assets/js/timeCommon';
import Service from '../../assets/service/service';
const moment = require('../../assets/moment/moment.js');
declare var $: any;


@Component
export default class TimeSearch extends Vue {
    @Prop({default: () => ({
        timeType: 'today',
        groupByDate: 'month',
        timeArr: ['today', 'nearlyWeek', 'thisMonth', 'lastMonth', 'nearlyTwoMonth', 'thisYear', 'custom'],
    })}) private paramData!:any;
    @Emit('change') change(time:any){}; 

    public $layer: any;
    private status:any = {
        timeType: '',
        groupByDate: '',
        timeArr: [],
        startTime:'',
        endTime:'',
    }

    private allTime:any = {};
    private setIntervalEvent:any;

    /**时间分类查询回调 */
    private changeTime(type: any){
        this.status.timeType = type;
        $('#time-search-statistics-start-js').val('');
        $('#time-search-statistics-end-js').val('');
        if(type !== 'custom'){
            this.status.startTime = this.allTime[type].startTime;
            this.status.endTime = type === 'lastMonth' ? this.allTime[type].endTime : this.allTime['thisMonth'].endTime;
            this.getData();
        }else{
            this.initDatepickerTime();
        }
    }

    /**获取服务器时间 */
    private getServerTime() {
        let params='';
        Service.request('/common/getServerTime', params, 'token').then((res:any) => {
            let time = res.data;
            this.initTimeAndDrawChart(time);
        }).catch(error => {
            this.$layer.msg('获取服务器时间异常，已切换至本机时间！', {type: 'error'})
            this.initTimeAndDrawChart();
        })  
    }


    private created() {
        this.status.timeType = this.paramData.timeType;
        this.status.groupByDate = this.paramData.groupByDate;
        this.status.timeArr = this.paramData.timeArr;
        this.getServerTime();
    }

    private initTimeAndDrawChart(time?:any) {
        let unixTime = time ? Math.floor(Common.datetimeToUnix(time)) : Math.floor(new Date().getTime() / 1000);
        this.setIntervalEvent = setInterval(() => {
            unixTime = unixTime + 2;
            // 转换成日期
            let nowDate = Common.unixToDatetime(unixTime);
            this.allTime = TimeCommon.getAllTime(nowDate);
        }, 2000);
        
        this.allTime = TimeCommon.getAllTime(time ? time : '');
        this.changeTime(this.status.timeType);
    }

    
    private selectType(type:any) {
        this.status.groupByDate = type;
        // 重新拿一下时间
        if (this.status.timeType !== 'custom') {
            let time = this.status.timeType;
            this.status.startTime = this.allTime[time].startTime;
            this.status.endTime = time === 'lastMonth' ? this.allTime[time].endTime : this.allTime['thisMonth'].endTime;
        }
        this.getData();
    }

    private getData() {
        let time = {
            timeType: this.status.timeType,
            groupByDate: this.status.groupByDate,
            startTime: this.status.startTime,
            endTime: this.status.endTime,
        };
        this.change(time);
    }

    private initDatepickerTime() {
        setTimeout(() => {
            let that = this;
            $('#time-search-statistics-start-js').datetimepicker({
                dateFormat: 'yy-mm-dd',
                timFormat: 'hh:mm',
                showSecond: false,
                onSelect: function (dateText:any,inst:any) {
                    if(!dateText){
                        return;
                    }
                    that.status.startTime = $(this).val();
                    $(this).focusout();
                }
                })

            $('#time-search-statistics-end-js').datetimepicker({
                dateFormat: 'yy-mm-dd',
                timFormat: 'hh:mm',
                showSecond: false,
                onSelect: function (dateText:any,inst:any) {
                    if(!dateText){
                        return;
                    }
                    that.status.endTime = $(this).val();
                    $(this).focusout();
                }
                })
        }, 0);
    }

}