/*
 * @Author: your name
 * @Date: 2021-04-01 10:18:41
 * @LastEditTime: 2021-04-12 16:56:13
 * @LastEditors: your name
 * @Description: In User Settings Edit
 * @FilePath: \exclusive-cloud-admin\common\src\components\custom-list\custom-list.ts
 */
import {Component, Prop, Vue, Emit, Watch} from 'vue-property-decorator';
// import {Component, Prop, Vue, Emit, Watch} from '../../../../resource/node_modules/vue-property-decorator'; // 仅调试时使用
import CustomOptionstInterface from './custom-list-interface';
import Common from '../../assets/js/common';
@Component({
})
export default class CustomList extends Vue {
    @Prop() listName!: string;
    @Prop() options!: {[key: string]: CustomOptionstInterface};     // 改成对象的形式了
    @Emit('change') change(options: {[key: string]: CustomOptionstInterface}) {}

    private optionsList: {[key: string]: CustomOptionstInterface} = {};
    private status: any = {
        popoverStatus: {},  // 弹窗状态
        storageKey: '', // 本地缓存的key
    }


    private mounted() {
        /**有时能拿到this.options的值，有时拿不到，加个nextTick */
        this.$nextTick(()=> {
            this.optionsList = this.options ? this.deepClone(this.options) : this.optionsList;
            this.initList();
        })
    }

    /**弹出框回调 */
    private popoverChange($event: any) {
        this.status.popoverStatus = $event;     
        this.optionsList = $event.show ? this.deepClone(this.options) : this.optionsList;
    }

    /**过滤数据 */
    private initList() {
        /**先清除之前保存的那些值(后续删掉) */
        localStorage.removeItem('userID123123' + this.listName)

        let userID = Common.getUserID('ecp');   
        this.status.storageKey = userID + this.listName;

        // 检查是否具有本地缓存，有就赋值复选框状态
        let localListOpt: any = localStorage.getItem(this.status.storageKey);
        if (localListOpt) {
            let list: {[key: string]: CustomOptionstInterface} = JSON.parse(localListOpt);
            for (let key in list) {
                if (this.optionsList[key]) {
                    this.optionsList[key] = list[key];
                }
            }
            this.change(this.deepClone(this.optionsList));
        }

    }

    /**复选框选择 */
    private selectCheckbox(item: any,index: number) {
        item.selected = !item.selected;
        this.$set(this.optionsList, index, item)
    }

    /**确定 */
    private confirm() {
        localStorage.setItem(this.status.storageKey, JSON.stringify(this.optionsList));
        this.change(this.deepClone(this.optionsList));
        this.cancel();
    }

    /**关闭弹窗 */
    private cancel() {
        this.status.popoverStatus.show = false;
    }

    /**克隆 */
    private deepClone(object: any) {
        return JSON.parse(JSON.stringify(object));
    }
}