<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="messageTypeCn"
            />
            <!-- <el-table-column align="center" label="英文" prop="messageTypeEn" /> -->
            <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.messageTypeCn"
                        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="region">
                    <el-input
                        type="text"
                        v-model="updatalableParams.id"
                        disabled
                    />
                </el-form-item>
                <el-form-item label="消息类型:" prop="region">
                    <el-input
                        type="text"
                        v-model="updatalableParams.messageTypeCn"
                        placeholder="请输入消息类型"
                    />
                </el-form-item>

                <el-form-item>
                    <el-button
                        type="success"
                        @click="updata(updatalableParams)"
                    >
                        确认
                    </el-button>
                    <el-button @click="cancel()" type="danger">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script lang="ts">
name: "labelManagement";
</script>
<script lang="ts" setup>
import {
    messageType,
    addlabel,
    updatalabel,
    removeType,
} from "@/api/messageCenter/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: {
        messageTypeEn: "",
        messageTypeCn: "",
    },
    updatalableParams: {
        messageTypeCn: "",
        id: "",
    },
    centerDialogVisible: false,
    dialog: false,
});
const {
    lableList,
    total,
    lableParams,
    centerDialogVisible,
    dialog,
    updatalableParams,
} = toRefs(state);
const handleQuery = () => {
    messageType().then((res: any) => {
        if (res.code == 0) {
            state.lableList = res.data;
            state.total = res.data.length;
        }
    });
};

// 确认添加
const submitForm = (row: any) => {
    addlabel(state.lableParams).then((res: any) => {
        if (res.code == 0) {
            ElMessage.success("添加成功");
            resetForm(lableParams);
            handleQuery();
        }
    });
};

const updata = (row: any) => {
    updatalabel(state.updatalableParams).then((res: any) => {
        if (res.code == 0) {
            ElMessage.success("修改成功");
            state.dialog = false;
            handleQuery();
        }
    });
};

// 取消添加
const resetForm = (row: any) => {
    state.lableParams.messageTypeCn = "";
    state.centerDialogVisible = false;
};

// 取消修改

const cancel = () => {
    state.dialog = false;
};

// 修改标签内容

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

// 删除消息类型
const remove = (row: any) => {
    removeType(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>
