<template>
    <el-dialog :title="titleMap[mode]" v-model="visible" :width="800" destroy-on-close @closed="$emit('closed')">
        <div style="margin-bottom: 10px;">
            <el-button type="primary" @click="addCategory">新增品类</el-button>
        </div>
        <div style="height: 500px;">
            <scTable ref="table" :data="categoryData" @selectionChange="selectionChange" row-key="id" hidePagination default-expand-all>
                <el-table-column label="品类名称" width="200" fixed="left" prop="name"></el-table-column>
                <el-table-column label="品类ID" prop="category_id" width="200"></el-table-column>
                <el-table-column label="开通商品类型" prop="category_id" width="200">
                    <template #default="scope">
                        <div class="flex-types" v-if="scope.row.types">
                            <el-tag v-for="(item,indx) in scope.row.types" :key="indx">{{ item.name }}</el-tag>
                        </div>
                        <div v-else>-</div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="120" align="left" fixed="right">
                    <template #default="scope">
                        <el-button-group>
                            <el-button type="danger" size="small" @click="table_del(scope.row)" v-if="scope.row.level == 3">删除</el-button>
                            <el-button text type="danger" size="small" v-else>-</el-button>
                        </el-button-group>
                    </template>
                </el-table-column>
            </scTable>
        </div>
    </el-dialog>
    <categoryAdd ref="categoryAdd" @success="getCate"></categoryAdd>
</template>

<script>
import categoryAdd from './categoryAdd';
export default {
    components: {
        categoryAdd
    },
    data(){
        return {
            loading: false,
            isSaveing: false,
            mode:"add",
            titleMap:{
                add:"开通品类"
            },
            visible:false,
            categoryData:[]
        }
    },
    methods:{
        open(mode = 'add'){
            this.mode = mode;
            this.visible = true;
            return this
        },
        //表单注入数据
        setData(data){
            this.formData = JSON.parse(JSON.stringify(data));
            this.getCate()
        },
        addCategory(){
            this.$nextTick(() => {
                this.$refs.categoryAdd.open("add").setData(this.formData)
            })
        },
        table_del(data){
            this.$confirm(`确定删除【${data.name} 】项吗？删除后可重新添加！`, '提示', {
                type: 'warning'
            }).then(async () => {
                var resp = await this.$API.store.cateDel.post({"id":data.category_id,"poi_id":this.formData.poi_id});
                if (resp.code == 0) {
                    return this.$message.error(resp.msg);
                }
                this.$message.success(resp.msg);
                this.getCate();
            }).catch(() => {

            })
        },
        async getCate(){
            var resp = await this.$API.storeCate.list.get({"poi":this.formData.poi_id})
            if (resp.code == 0) {
                this.$message.error(resp.msg)
                this.visible = false;
                return ;
            }
            this.categoryData = resp.data;
        }
    }
}
</script>
<style>
.flex-types{display: flex;gap: 10px;}
</style>