<template>
    <hc-dialog
        v-model="isShow"
        is-footer-center
        title=" 元素公式(WBS级)"
        @close="dialogClose"
        @save="saveElementHandle"
        widths="56rem"
        :loading="submitLoading"
        :footer="false"
    >
        <hc-search-input
            v-model="queryValue"
            @search="getEditEleList"
            class="w-100 mb-4"
        />
        <hc-table
            :column="tableColumn"
            :datas="editEleList"
            :loading="tableLoading"
        >
            <template #action="{ row, index }">
                <el-link type="warning">全局公式</el-link>

                <el-link type="primary">节点公式</el-link>
            </template>
        </hc-table>
    </hc-dialog>
</template>
<script setup>
import { ref, watch } from "vue";
import mainApi from "~api/wbs/wbsforelement";
import { getArrValue } from "js-fast-way";
const props = defineProps({
    tableId: {
        type: String,
        default: "",
    },
});
//事件
const emit = defineEmits(["close"]);
//双向绑定
// eslint-disable-next-line no-undef
const isShow = defineModel("modelValue", {
    default: false,
});
//监听显示
watch(isShow, (val) => {
    if (val) {
        getEditEleList();
    } else {
        emit("close");
    }
});
const tableId = ref(props.tableId);
//监听数据
watch(
    () => [props.tableId],
    ([tid]) => {
        tableId.value = tid;
    },
    { deep: true }
);
//关闭弹窗
const dialogClose = () => {
    isShow.value = false;
    emit("close");
};
const submitLoading = ref(false);
const saveElementHandle = async () => {};
const tableColumn = [
    { key: "eName", name: "元素名称" },
    { key: "action", name: "操作", width: 150, align: "center" },
];
const tableLoading = ref(false);
const editEleList = ref([]);
const queryValue = ref("");

const getEditEleList = async () => {
    tableLoading.value = true;
    const { data } = await mainApi.getTableElements({
        id: tableId.value,
        search: queryValue.value,
        type: 1,
    });
    tableLoading.value = false;
    editEleList.value = getArrValue(data);
};
</script>
