<template>
    <!-- 标签列表 -->
    <div class="right-table-card">
        <TableModel :formLabel="formLabel" :showOperation="true" :showRightTools="false" ref="labelTableRef"
            :columnsList="columnsList" :request-api="labelListAPI" :sendParams="sendParams" :autoLoad="false">
            <template slot="tableTitle">
                <h3>数据列表</h3>
            </template>
            <template slot="tableActions">
                <el-button @click="handleAdd" :disabled="disabled" v-hasPermi="['data:label:add']" class="add-btn"><i
                        class="el-icon-plus"></i> 新增</el-button>
            </template>
            <template slot="handle" slot-scope="{ data }">
                <el-button type="text" v-hasPermi="['data:label:edit']" class="action-btn" style="color: #EAA819;"
                    @click="handleUpdate(data)">
                    编辑
                </el-button>
                <el-button type="text" v-hasPermi="['data:label:del']" class="action-btn" style="color: #DB3E29;"
                    @click="handleDelete(data)">
                    删除
                </el-button>
            </template>
        </TableModel>
        <LabelForm ref="labelForm" v-if="isflag" :isAdd="isAdd" :rowData="rowData" @handleQuery="handleQuery"
            :title="title" :disabled="disabled" @closeDialog="closeDialog" :width="600" />
    </div>
</template>

<script>
import TableModel from '@/components/TableModel2'
import { columnsList, formLabel } from './config'
import { labelListAPI, delDataAPI } from '@/api/data/label'
import LabelForm from './LabelForm.vue'

export default {
    name: 'RightTableLabel',
    components: {
        TableModel,
        LabelForm
    },
    props: {
        value: {
            type: [String, Number],
            default: null
        },
        activeCategoryName: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            formLabel,
            columnsList,
            labelListAPI,
            isflag: false,
            fileData: {},
            rowData: {},
            title: '',
            isAdd: '',
        }
    },
    watch: {
        value: {
            handler(newVal) {
                if (newVal) {
                    this.$nextTick(() => {
                        this.handleQuery();
                    })
                }
            },
            immediate: true
        }
    },
    computed: {
        disabled() {
            return !this.value;
        },
        sendParams() {
            return {
                labelGroupId: this.value
            }
        }
    },
    created() {
    },

    methods: {

        /** 新增按钮操作 */
        handleAdd() {
            this.rowData = {
                labelGroupName: this.activeCategoryName,
                labelGroupId: this.value
            }
            this.title = '新增标签'
            this.isAdd = 'add'
            this.isflag = true
        },

        /** 修改操作 */
        handleUpdate(row) {
            this.rowData = {
              ...row,
                labelGroupName: this.activeCategoryName

            }
            this.title = '编辑标签'
            this.isAdd = 'edit'
            this.isflag = true
        },
        /* 搜索操作 */
        handleQuery() {
            this.$refs.labelTableRef.getTableList()
        },

        closeDialog() {
            this.isflag = false;
        },

        /** 删除操作 */
        handleDelete(raw) {
            this.$confirm(`确定要删除标签名称"${raw.labelName}"吗？删除后将无法恢复！`, '操作提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                dangerouslyUseHTMLString: true,
                customClass: 'delete-confirm-dialog'
            }).then(() => {
                delDataAPI(
                    {
                        labelId: raw.labelId
                    }
                ).then(res => {
                    if (res.code === 200) {
                        this.$message.success('删除成功');
                        this.activeCategory = null;
                        this.handleQuery();
                    } else {
                        this.$message.error(res.msg || '删除失败');
                    }
                }).catch(error => {
                    console.error('删除失败:', error);
                });
            })
        },
    },
}
</script>
<style scoped lang="scss">
.app-container {
    padding: 20px 20px 20px 0;
}

.right-table-card {
    height: calc(100vh - 125px);
    overflow-y: hidden;
    transition: overflow-y 0.3s ease;

    &:hover {
        overflow-y: auto;
    }
}

.add-btn {
    width: 121px;
    height: 36px;
    background: #1F72EA;
    box-shadow: 0px 4px 8px 0px rgba(51, 135, 255, 0.5);
    border-radius: 4px 4px 4px 4px;
    color: #fff;
    border: none;
    font-size: 14px;
    transition: all 0.3s;

    &:hover {
        background: #4A8BFF;
        box-shadow: 0px 6px 12px 0px rgba(51, 135, 255, 0.6);
    }
}

.action-btn {
    margin-right: 8px;

    &:last-child {
        margin-right: 0;
    }
}

::v-deep .table-card {
    height: calc(100vh - 230px) !important;
}
</style>
