<template>
    <div>
        <slot name="add"></slot>
        <div class="table-box">
            <div class="classname">
                <tableLayout :layout="tablecols1" @rowClick="rowClick" :data="classList1" :custom="true"
                    height="calc(100vh - 174px)">
                    <template v-slot:customcol="scope">
                        <div v-if="scope.column.columnname == 'isenable'">
                            <slot name="release" :data="scope"></slot>
                        </div>
                        <p v-else>{{ scope.column.data[scope.column.columnname] }}</p>
                    </template>

                    <template v-slot:opreation="scope">
                        <slot name="edit" :data="scope"></slot>
                        <slot name="insert" :data="scope"></slot>
                        <slot name="del" :data="scope"></slot>
                    </template>
                </tableLayout>
            </div>
            <div style="width:16px;"></div>
            <div class="classname">
                <tableLayout :layout="tablecols2" :data="classList2" :custom="true" height="calc(100vh - 174px)">
                    <template v-slot:customcol="scope">
                        <div v-if="scope.column.columnname === 'status'">
                            <span :style="scope.column.data.status === '审核' ? 'color:#52C41A' : ''">{{
                                    scope.column.data.status == '审核' ? '发布' : scope.column.data.status
                            }}</span>
                        </div>
                        <p v-else>{{ scope.column.data[scope.column.columnname] }}</p>
                    </template>

                    <template v-slot:opreation="scope">
                        <slot name="edit" :data="scope"></slot>
                        <slot name="del" :data="scope"></slot>
                    </template>
                </tableLayout>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            tablecols1: [],
            tablecols2: [],
            classList1: [],
            classList2: [],
            optionIndex: 0
        }
    },
    created() {
        this.tablecols1 = this.tool.tabelCol(this.$route.name)['classname1'].tablecols;
        this.tablecols2 = this.tool.tabelCol(this.$route.name)['classname2'].tablecols;
        this.selectList();
    },
    methods: {
        rowClick(data) {
            this.classList2 = data.children;
            this.optionIndex = data.index;
        },
        changeData(e) {
            console.log(e)
        },
        selectList() {
            this.$api.requested({
                "classname": "webmanage.saletool.sharematerial.sharematerialClass",
                "method": "select",
                "content": {
                    "parentid": 0
                }
            }).then(res => {
                console.log("分类", res)
                this.classList1 = res.data;
                this.classList2 = res.data[this.optionIndex].children;
                console.log(this.classList2)
            })
        }
    }
}
</script>

<style scoped>
.table-box {
    display: flex;
    width: 100%;
}

.classname {
    flex: 1;
    background: #fff;
}
</style>