<template>
    <div class="hc-project-list-adjust-excel-set-default">
        <el-form
            ref="formRef"
            :model="formModel"
            :rules="formRules"
            label-position="left"
            label-width="auto"
        >
            <el-form-item label="元素坐标：" prop="colName">
                <el-input
                    v-model="formModel.colName"
                    placeholder="请点击左侧表单"
                    disabled
                />
            </el-form-item>
            <el-form-item label="默认信息：" prop="textId">
                <el-input
                    v-model="formModel.textId"
                    :autosize="{ minRows: 5, maxRows: 5 }"
                    type="textarea"
                    placeholder="请填写默认信息"
                />
            </el-form-item>
        </el-form>
        <div class="action-btn-box mb-40px mt-10px text-center">
            <el-button
                type="success"
                :loading="submitLoading"
                @click="dialogSubmit"
                >保存数据</el-button
            >
            <el-button
                type="info"
                style="margin-left: 50px"
                @click="resetFormClick"
                >重置</el-button
            >
        </div>
        <hc-card-item title="已配数据：">
            <hc-table
                :column="tableColumn"
                :datas="tableData"
                :is-current-row="false"
                :is-index="false"
            >
                <template #action="{ row }">
                    <el-link type="danger" @click="rowDelClick(row)"
                        >删除</el-link
                    >
                </template>
            </hc-table>
        </hc-card-item>
    </div>
</template>

<script setup>
import { onMounted, ref, watch } from "vue";
import { HcDelMsg } from "hc-vue3-ui";
import { formValidate, getArrValue, getObjValue } from "js-fast-way";
import mainApi from "~api/project/tree";

const props = defineProps({
    info: {
        type: Object,
        default: () => ({}),
    },
    type: {
        type: [String, Number],
        default: "", //默认没有，独立表单库类型为2
    },
});

//事件
const emit = defineEmits(["finish"]);

//监听数据
const dataInfo = ref(props.info);
const type = ref(props.type);
watch(
    () => [props.info, props.type],
    ([data, tpe]) => {
        dataInfo.value = getObjValue(data);

        type.value = tpe;
    },
    { immediate: true, deep: true }
);

//渲染完成
onMounted(() => {
    formModel.value = {};
    getSigList();
});

//基础表单
const formRef = ref(null);
const formModel = ref({});
const formRules = {
    colName: { required: true, trigger: "change", message: "请先获取元素坐标" },
    textId: { required: true, trigger: "change", message: "请填写默认信息" },
};

//数据表格
const tableColumn = [
    { key: "colName", name: "元素位置" },
    { key: "sigRoleName", name: "默认值" },
    { key: "action", name: "操作", align: "center", width: 100 },
];
const tableData = ref([]);
//获取数据
const getSigList = async () => {
    const { pkeyId, primaryKeyId } = dataInfo.value;
    const { data } = await mainApi.getSigList({
        current: 0,
        size: 99999,
        type: 5,
        tabId: type.value == 2 ? primaryKeyId : pkeyId,
    });
    tableData.value = getArrValue(data?.records);
};

//删除数据
const rowDelClick = (row) => {
    HcDelMsg(async (resolve) => {
        const { pkeyId, primaryKeyId } = dataInfo.value;
        const { isRes } = await mainApi.remove(
            row.id,
            type.value == 2 ? primaryKeyId : pkeyId
        );
        resolve(); //关闭弹窗的回调
        if (!isRes) return;
        getSigList().then();
    });
};

//提交
const submitLoading = ref(false);
const dialogSubmit = async () => {
    const isForm = await formValidate(formRef.value);
    if (!isForm) return false;
    submitLoading.value = true;
    const { isRes } = await mainApi.saveDdefual(formModel.value);
    submitLoading.value = false;
    if (!isRes) return;
    window.$message.success("操作成功");
    emit("finish");
    getSigList().then();
};

//重置表单
const resetFormClick = () => {
    formModel.value = { type: "5" };
};

//设置dom数据
const setDomData = (item) => {
    const { pkeyId, primaryKeyId } = dataInfo.value;
    formModel.value = {
        type: "5",
        colName: item.text,
        colKey: item.key,
        tableId: type.value == 2 ? primaryKeyId : pkeyId,
        trIndex: item.tr,
        tdIndex: item.td,
        textId: item.tip || "",
    };
};

//导出函数
defineExpose({
    setDomData,
});
</script>

<style scoped lang="scss">
.hc-project-list-adjust-excel-set-default :deep(.hc-card-item-box) {
    padding: 6px 14px 14px;
    .hc-card-item-header {
        color: #101010;
        font-size: 14px;
        font-weight: unset;
    }
}
</style>
