<template>
    <hc-dialog
        v-model="isShow"
        is-footer-center
        title="编辑元素表单信息"
        @close="dialogClose"
        @save="saveElementHandle"
        widths="56rem"
        :loading="submitLoading"
    >
        <hc-table :column="tableColumn" :datas="tableData">
            <template #tableType="{ row }">
                <el-select v-model="row.tableType" placeholder="请选择">
                    <el-option
                        v-for="item in tableTypelist"
                        :key="item.id"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </template>
            <template #tableOwner="{ row }">
                <el-select v-model="row.tableOwner" placeholder="请选择">
                    <el-option
                        v-for="item in ownerTypeList"
                        :key="item.id"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </template>
            <template #fillRate="{ row }">
                <el-input
                    v-model="row.fillRate"
                    placeholder="请输入填报率吧"
                    clearable
                >
                </el-input>
            </template>
        </hc-table>
    </hc-dialog>
</template>
<script setup>
import { ref, watch } from "vue";
import mainApi from "~api/wbs/wbsforelement";
import treeApi from "~api/wbs/tree";

const props = defineProps({
    ownerTypeList: {
        type: Array,
        default: () => [],
    },
    tableTypelist: {
        type: Array,
        default: () => [],
    },
    tab: {
        type: Array,
        default: () => [],
    },
    editType: {
        type: Number,
        default: -1, //元素库的类型为1
    },
});
//事件
const emit = defineEmits(["close"]);
//双向绑定
// eslint-disable-next-line no-undef
const isShow = defineModel("modelValue", {
    default: false,
});
//监听显示
watch(isShow, (val) => {
    if (val) {
        // getDataTypelist();

        if (editType.value != 1) {
            tableColumn.value = [
                { key: "tableName", name: "表名" },
                { key: "tableType", name: "表类型" },
                { key: "tableOwner", name: "所属方" },
                { key: "fillRate", name: "填报率" },
            ];
        } else {
            tableColumn.value = [
                { key: "nodeName", name: "表名" },
                { key: "tableType", name: "表类型" },
                { key: "tableOwner", name: "所属方" },
                { key: "fillRate", name: "填报率" },
            ];
        }
    } else {
        emit("close");
    }
});
const ownerTypeList = ref(props.ownerTypeList);
const tableTypelist = ref(props.tableTypelist);
const tableData = ref(props.tab);
const editType = ref(props.editType);
//监听数据
watch(
    () => [props.ownerTypeList, props.tableTypelist, props.tab, props.editType],
    ([own, table, tabdata, edtype]) => {
        ownerTypeList.value = own;
        tableTypelist.value = table;
        tableData.value = tabdata;
        editType.value = edtype;
        tableData.value.forEach((ele) => {
            ele.tableType = Number(ele.tableType);
            ele.tableOwner = Number(ele.tableOwner);
        });
    },
    { deep: true }
);
//关闭弹窗
const dialogClose = () => {
    isShow.value = false;
    emit("close");
};
const submitLoading = ref(false);
const saveElementHandle = async () => {
    if (editType.value == 1) {
        submitLoading.value = true;
        const { error, code } = await treeApi.updateBatchNodeTableInfoElement(
            tableData.value
        );
        submitLoading.value = false;
        if (!error && code === 200) {
            window?.$message?.success("操作成功");
            dialogClose();
        }
    } else {
        submitLoading.value = true;
        const { error, code } = await mainApi.upateBatchNodeTableInfo(
            tableData.value
        );
        submitLoading.value = false;
        if (!error && code === 200) {
            window?.$message?.success("操作成功");
            dialogClose();
        }
    }
};
const tableColumn = ref([]);
</script>
