import {Component, Prop, Vue, Emit, Watch} from 'vue-property-decorator';
import BatchInterface from './batch-interface';
import BatchFilter from '../../assets/filters/batch.filter';
import Service from '../../assets/service/service';

@Component({
    filters: {
        ...BatchFilter,
    },
})
export default class BatchOperation extends Vue {
    @Prop() batchOptData!: BatchInterface

    @Watch('batchOptData') changeData(value: BatchInterface) {
        value.show && this.open();
    }

    @Emit('change') change($event: any) {
    }


    /**进度 */
    private get progress() {
        return this.batchOptData.optResource ? (this.currIndex / this.batchOptData.optResource.length * 100).toFixed(0) : 0;
    }

    /**资源操作 */
    private get optResource() {
        return this.batchOptData.optResource ? this.batchOptData.optResource : [];
    }

    /**批量类型 */
    private get statusPipe() {
        return this.batchOptData.statusPipe ? this.batchOptData.statusPipe : '';
    }

    public $layer: any;
    private currIndex: number = 0;  // 当前执行
    private timer = {oldTime: 0, newTime: 0}; // 用于计算时间，时间为时间戳ms，xxms以内防止二次点击
    private isContinue: boolean = false;    // 暂停后或出现错误后是否继续执行
    private isStop: boolean = false;        // 是否终止执行

    private init() {
        this.isContinue = true;
        this.isStop = false;
        this.optResource.forEach(item => {
            item.showErrorMsg = false;
            item.status = '0';
        })
    }

    /**打开弹窗 */
    private open() {
        this.init();
        let layerIndex = this.$layer.open({
            id: 'batchOperation',
            title: this.batchOptData.title,
            icon: this.batchOptData.titleIcon,
            area: {width: '600px'},
            btn: {cancel: '关闭'},
            cancel: () => {
                if (this.currIndex !== this.optResource.length && this.isContinue) {
                    this.showStopLayer();
                } else if (!this.isStop) {
                    // this.$layer.close(layerIndex);
                    this.batchOptData.show = false;
                    this.change('update');
                    return true;
                }
                return false;
            }
        })

        this.start();
    }

    /**开始执行 */
    private start() {
        this.timer.oldTime = this.timer.newTime;
        this.timer.newTime = new Date().getTime();
        if (this.timer.newTime - this.timer.oldTime < 200) {
            return;
        }
        this.currIndex = 0;
        this.batchRuning();
    }

    /**运行任务请求 */
    private batchRuning() {
        this['optResource'] && (this['optResource'][this.currIndex].status = '1');
        let params = this['optResource'][this.currIndex].params;
        this.$set(this['optResource'], this.currIndex, this['optResource'][this.currIndex])
        // 开始执行请求
        Service.request(this.batchOptData.interfacePath, params, 'token').then((res: any) => {
            let delay = setTimeout(() => {
                if (+res.ret === 2) {
                    this.resolveCallback();
                } else {
                    this.rejectCallback(res);
                }
                clearTimeout(delay)
            }, 1000)
        }).catch(error => {
            this.rejectCallback(error);
        })
    }

    /**成功回调 */
    private resolveCallback() {
        this['optResource'][this.currIndex].status = '2';
        this.$set(this['optResource'], this.currIndex, this['optResource'][this.currIndex])
        this.currIndex++;
        if (this.isContinue) {
            this.batchOptLoop();
        }
    }

    /**失败回调 */
    private rejectCallback(error: any) {
        this['optResource'][this.currIndex].status = '-1';
        this['optResource'][this.currIndex].errorMsg = error.errorMsg || '未知错误';
        this['optResource'][this.currIndex].showErrorMsg = true;
        this.$set(this['optResource'], this.currIndex, this['optResource'][this.currIndex])
        this.currIndex++;
        if (!this.batchOptData.isBatchOptGoon && this.isContinue) {
            this.batchOptLoop();
        } else if (this.batchOptData.isBatchOptGoon) {
            // 停止运行
            this.isContinue = false;
        }
    }

    /**触发批量操作 */
    private batchOptLoop() {
        // this.currIndex++;
        if (this.currIndex < this.optResource.length) {
            this.batchRuning();
        }
    }

    /**显示/隐藏 错误信息 */
    private showErrorMsg(idx: number) {
        let item = this['optResource'][idx];
        item.showErrorMsg = !item.showErrorMsg;
        this.$set(this['optResource'], idx, item)
    }


    /**显示终止弹窗 */
    private showStopLayer() {
        this.isContinue = false;
        this.$layer.open({
            id: 'batchOptCancelResultOpen',
            title: '提示',
            icon: 'message',
            area: {},
            btn: {confirm: '确认', cancel: '取消'},
            confirm: () => {
                this.isContinue = false;
                this.isStop = true;
                this.batchOptData.show = false;
                this.$layer.closeAll();
                this.change('update');
            },
            cancel: () => {
                // 因为点击确认按钮时回关闭弹窗，而关闭弹窗会触发cancel方法，所以要加个变量判断
                if (!this.isStop) {
                    this.isContinue = true;
                    this.batchOptLoop()
                }
            }
        })
    }
}