/*
 * @Author: your name
 * @Date: 2021-03-05 09:44:53
 * @LastEditTime: 2021-06-12 12:07:45
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \exclusive-cloud\manage\common\src\components\batch-handle\batch-handle.ts
 */
import {Component, Prop, Vue, Emit, Watch} from 'vue-property-decorator';
import BatchFilter from '../../assets/filters/batch.filter';
import BatchHandleInterface from './batch-handle-interface';
import BatchOptInterface from '../batch-operation/batch-interface';
// @ts-ignore
import BatchOperation from '../batch-operation/batch-operation.vue';

@Component({
    filters: {
        ...BatchFilter,
    },
    components: {
        BatchOperation,
    }
})
export default class BatchHandle extends Vue {
    @Prop() data!: BatchHandleInterface;
    @Watch('data') changeBatchData(value: BatchHandleInterface) {
        value.show && this.open();
    }
    @Emit('change') change($event: any) {}
    /**允许操作数据 */
    private get listAllow() {
        return this.data.listAllow ? this.data.listAllow : [];
    }
    /**不允许操作数据 */
    private get listNot() {
        return this.data.listNot ? this.data.listNot : [];
    }
    /**批量类型 */
    private get statusPipe() {
        return this.data.statusPipe ? this.data.statusPipe : '';
    }

    public $layer: any;
    private id: string = 'batch-handle-layer';
    private status: any = {
        layerIndex: 0,
        showListNot: false,
    }
    private batchOptData: BatchOptInterface = {
        show: false,        // 用来打开弹窗
        title: '',          // 标题
        titleIcon: '',      // 图标
        tips: '',           // 提示语
        interfacePath: '',  // 接口地址
        statusPipe: '',     // 过滤类型，操作+实例： createVm
        optResource: []     // 操作对象
    }

    /**open */
    private open() {
        this.status.layerIndex = this.$layer.open({
            title: this.data.title,
            id: this.id,
            icon: this.data.titleIcon,
            area: {
                width: this.data.width || '480px',
            },
            confirm: () => {
                this.confirm();
            },
            cancel: () => {
                this.data.show = false;
                this.status.showListNot = false;
            }
        })
    }

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

    /**确定 */
    private confirm() {
        if (this.data.listAllow.length === 0) {
            this.$layer.close(this.status.layerIndex);
            return;
        }
        this.batchOptData = {
            show: true,                         // 用来打开弹窗
            title: this.data.title,             // 标题
            titleIcon: this.data.titleIcon,     // 图标
            tips: this.data.tips,               // 提示语
            statusPipe: this.data.statusPipe,   // 过滤类型，操作+实例： createVm
            interfacePath: this.data.interfacePath,     // 接口地址
            optResource: this.data.listAllow    // 操作对象
        }
        this.$layer.close(this.status.layerIndex);
    }

    /**取消 */
    private close(){
        this.$layer.close(this.status.layerIndex);
        this.data.show = false;
        this.status.showListNot = false;
    }

    /**子组件回调 */
    private childEven($event: any) {
        this.change($event);
    }
}