<template>
    <a-modal
        title="自定义列表"
        :visible="visible"
        dialog-class="custom-columns-modal"
        @ok="handleOk"
        @cancel="handleCancel"
    >
        <div class="custom-modal-content">
            <a-input-search class="input-search" placeholder="请输入指标名称" @change="onChange" />
            <div class="modal-content-table">
                <div class="select-class-left">
                    <div class="class-left-header">可添加的列</div>
                    <div class="class-left-main">
                        <div class="left-main-left">
                            <div
                                class="main-left-select"
                                v-for="(item, index) in selectLeftList"
                                :key="index"
                                :class="{active: cur === index}"
                                @click="handleSelectNum(index)"
                            >
                                {{item}}
                            </div>
                        </div>
                        <div class="left-main-right">
                            <div v-show="isConNumOne" class="main-right-class">
                                <p class="check-box-p">展示数据</p>
                                <div class="check-box-select-muster">
                                    <a-checkbox-group @change="handleChangeBox">
                                        <span
                                            class="check-box-class"
                                            v-for="(item, index) in selectCheckboxData"
                                            :key="index"
                                        >
                                            <a-checkbox :value="item">{{ item }}</a-checkbox>
                                        </span>
                                    </a-checkbox-group>
                                </div>
                            </div>
                            <div v-show="isConNumTwo" class="main-right-class">内容二</div>
                            <div v-show="isConNumThree" class="main-right-class">内容三</div>
                            <div v-show="isConNumFour" class="main-right-class">内容四</div>
                        </div>
                    </div>
                </div>
                <div class="select-class-right">
                    <div class="class-left-header">
                        <span>已选100个</span>
                        <span><a @click="handleClearAll">清空全部</a></span>
                    </div>
                    <div v-if="applyTypeOption.length" class="class-left-content">
                        <div class="apply-right-tree" v-for="(item, index) in applyTypeOption" :key="index">
                            <p class="left-content-p">
                                <a-tooltip placement="left">
                                    <template slot="title">
                                        <span>{{ item }}</span>
                                    </template>
                                    {{ item }}
                                </a-tooltip>
                            </p>
                            <a-icon type="delete" class="delete-type-class" @click="handleDelTree(item)" />
                        </div>
                    </div>
                    <div v-else class="no-data-class">暂无数据</div>
                </div>
            </div>
        </div>
    </a-modal>
</template>
<script>
export default {
    name: 'custom-columns',
    props: {
        visible: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            selectCheckboxData: ['花费', '封面曝光数', '行为数', '举报书', '拉黑数', '评论数'],
            selectLeftList: ['111', '222', '333', '444'],
            cur: 0,
            isConNumOne: true,
            isConNumTwo: true,
            isConNumThree: true,
            isConNumFour: true,
            applyTypeOption: []
        };
    },
    mounted() {

    },
    methods: {
        handleDelTree(item) {
            console.log(item, 'item');
            this.applyTypeOption = [];
        },
        handleChangeBox(val) {
            console.log(val, 'checkboc111');
            this.applyTypeOption = val;
        },
        handleSelectNum(index) {
            this.cur = index;
            if (index === 0) {
                this.isConNumOne = true;
                this.isConNumTwo = true;
                this.isConNumThree = true;
                this.isConNumFour = true;
            }
            else if (index === 1) {
                this.isConNumOne = false;
                this.isConNumTwo = true;
                this.isConNumThree = true;
                this.isConNumFour = true;
            }
            else if (index === 2) {
                this.isConNumOne = false;
                this.isConNumTwo = false;
                this.isConNumThree = true;
                this.isConNumFour = true;
            }
            else if (index === 3) {
                this.isConNumOne = false;
                this.isConNumTwo = false;
                this.isConNumThree = false;
                this.isConNumFour = true;
            }
        },
        handleOk() {
            console.log('这个是确定按钮');
        },
        handleCancel() {
            console.log('这个是取消按钮');
            this.$emit('cancelClick', false);
        },
        onChange(e) {
            console.log(e.target.value, '---------');
        },
        handleClearAll() {
            console.log('清空全部按钮事件');
        }
    }
};
</script>
<style lang="less" scoped>
    @import "custom-columns";
</style>
