<template>
    <div class="app-container">
        <div class="add_button">
            <!-- <el-button
                type="primary"
                @click.stop="
                    state.centerDialogVisible = !state.centerDialogVisible
                "
            >
                添加配置
            </el-button> -->
        </div>
        <el-table border :data="lableList">
            <el-table-column align="center" label="id" prop="id" />
            <el-table-column align="center" label="中文" prop="configNameCn" />
            <el-table-column align="center" label="英文" prop="configNameEn" />
            <el-table-column align="center" label="内容" prop="configContent" />
            <el-table-column align="center" label="操作" prop="enName">
                <template #default="scope">
                    <el-button type="success" @click.stop="update(scope.row)"
                        >修改</el-button
                    >

                    <!-- <el-button type="danger" @click.stop="remove(scope.row)"
                        >删除</el-button
                    > -->
                </template>
            </el-table-column>
        </el-table>
        <!-- <pagination
            v-if="state.total > 0"
            :total="state.total"
            v-model:page="state.queryParams.pageNo"
            v-model:limit="state.queryParams.pageSize"
            @pagination="handleQuery"
        /> -->
        <el-dialog v-model="centerDialogVisible" width="30%" align-center>
            <el-form
                ref="ruleFormRef"
                :model="state.lableParams"
                label-width="120px"
                class="demo-ruleForm"
                status-icon
            >
                <el-form-item label="配置中文:" prop="region">
                    <el-input
                        type="text"
                        v-model="lableParams.configNameCn"
                        placeholder="请输入配置中文名称"
                    />
                </el-form-item>
                <el-form-item label="配置英文:" prop="region">
                    <el-input
                        type="text"
                        v-model="lableParams.configNameEn"
                        placeholder="请输入配置英文名称"
                    />
                </el-form-item>
                <el-form-item label="配置内容:" prop="region">
                    <el-input
                        type="text"
                        v-model="lableParams.configContent"
                        placeholder="请输入配置内容"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="success" @click="submitForm(lableParams)">
                        添加
                    </el-button>
                    <el-button @click="resetForm(lableParams)" type="danger"
                        >取消</el-button
                    >
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog v-model="state.dialog" width="30%" align-center>
            <el-form
                ref="ruleFormRef"
                :model="state.updatalableParams"
                label-width="120px"
                class="demo-ruleForm"
                status-icon
            >
                <el-form-item label="配置ID:" prop="id">
                    <el-input
                        type="text"
                        v-model="updatalableParams.id"
                        disabled
                    />
                </el-form-item>
                <el-form-item label="标签中文:" prop="configNameCn">
                    <el-input
                        type="text"
                        v-model="updatalableParams.configNameCn"
                        placeholder="请输入配置中文名称"
                    />
                </el-form-item>
                <el-form-item label="标签英文:" prop="configNameEn">
                    <el-input
                        type="text"
                        v-model="updatalableParams.configNameEn"
                        placeholder="请输入配置英文名称"
                    />
                </el-form-item>
                <el-form-item label="标签英文:" prop="configContent">
                    <el-input
                        type="text"
                        v-model="updatalableParams.configContent"
                        placeholder="请输入配置内容"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button
                        type="success"
                        @click="submitForm(updatalableParams)"
                    >
                        确认
                    </el-button>
                    <el-button
                        @click="resetForm(updatalableParams)"
                        type="danger"
                        >取消</el-button
                    >
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script lang="ts">
name: "labelManagement";
</script>
<script lang="ts" setup>
import {
    tagList,
    addlabel,
    tagEdit,
    removelabel,
} from "@/api/documentary/index";
import {
    labelManagementItem,
    addlabelParam,
    updatalabelParam,
} from "@/types/api/documentary/index";
import { ElMessage } from "element-plus";

import { onMounted, ref, reactive, toRefs } from "vue";
const state = reactive({
    lableList: [] as labelManagementItem[],
    total: 0,
    queryParams: {
        pageNo: 1,
        pageSize: 15,
    },
    lableParams: {
        configContent: "",
        configNameCn: "",
        configNameEn: "",
    },
    updatalableParams: {
        configContent: "",
        configNameCn: "",
        configNameEn: "",
        id: 0,
    },
    centerDialogVisible: false,
    dialog: false,
});
const {
    lableList,
    total,
    lableParams,
    centerDialogVisible,
    dialog,
    updatalableParams,
} = toRefs(state);
const handleQuery = () => {
    tagList().then((res: any) => {
        if (res.code == 0) {
            state.lableList = res.data;
            state.total = res.data.length;
        }
    });
};

// 确认添加
const submitForm = (row: any) => {
    if (Object.keys(row).length == 2) {
        addlabel(state.lableParams).then((res: any) => {
            if (res.code == 0) {
                ElMessage.success("添加成功");
                resetForm(state.lableParams);
                handleQuery();
            }
        });
    } else {
        tagEdit(state.updatalableParams).then((res: any) => {
            if (res.code == 0) {
                ElMessage.success("修改成功");
                state.dialog = false;
                handleQuery();
            }
        });
    }
};
// 取消添加
const resetForm = (row: any) => {
    if (Object.keys(row).length == 2) {
        state.lableParams.configContent = "";
        state.lableParams.configNameEn = "";
        state.lableParams.configNameCn = "";
        state.centerDialogVisible = false;
    } else {
        state.dialog = false;
    }
};
// 修改配置内容

const update = (row: any) => {
    state.dialog = true;
    state.updatalableParams.id = row.id;
    state.updatalableParams.configNameCn = row.configNameCn;
    state.updatalableParams.configNameEn = row.configNameEn;
    state.updatalableParams.configContent = row.configContent;
};

// 删除配置
const remove = (row: any) => {
    removelabel(row.id).then((res: any) => {
        if (res.code == 0) {
            ElMessage.success("删除成功");
            handleQuery();
        }
    });
};
onMounted(() => handleQuery());
</script>

<style lang="scss" scoped>
.add_button {
    margin-bottom: 10px;
}
</style>
