<template>
    <SysDialog class="zoning-load-template" :visible="dialog.visible" v-bind="getBindValue" @onClose="onClose"
        @onConfirm="confirm">
        <template #content>
            <el-form ref="loadTemplateFormRef" :model="loadTemplateForm" :rules="loadTemplateFormRules">
                <el-form-item prop="id">
                    <el-select v-model="loadTemplateForm.id" placeholder="请选择分区模版加载" style="width: 100%;">
                        <el-option v-for="item in loadTemplateForm.partitionModelList" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </el-form-item>
            </el-form>
        </template>
    </SysDialog>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue';
import SysDialog from "@/components/SysDialog.vue";
import useDialog from "@/hooks/useDialog";
import type { FormInstance } from 'element-plus';
import { useEleFormValidate } from '@/hooks/useEleFormValidate';
import { getPartitionModelListApi, getPartitionModelLoadApi } from '@/api/partition/partition';
import { useReturnData } from '@/utils/useReturnData';
import { ListIitem } from '@/api/base/BaseDataModel';
import { zoningStore } from '@/store/zoning';
import { useErrorConfirm } from '@/utils/useErrorConfirm';

const { report } = useErrorConfirm()
const zoningstore = zoningStore()
//弹框属性
const { dialog, onClose, onShow } = useDialog();
// 弹框一些配置
const getBindValue = reactive({
    title: "分区模版加载",
    width: 330,
    height: 0
});
const emit = defineEmits(['saveLoadPartition'])
// 基础数据
const loadTemplateFormRef = ref<FormInstance>()
const loadTemplateForm = reactive({
    id: undefined as unknown as string,
    partitionModelList: [] as ListIitem[]
})
const loadTemplateFormRules = reactive({
    id: [{ required: true, message: '请选择加载的模版', trigger: 'change' }]
})
// 校验表单
const { formValidate, resetForm } = useEleFormValidate();
const { resData } = useReturnData()

// 显示
const show = async () => {
    onShow()
    const res = await getPartitionModelListApi()
    const list = resData(res)
    loadTemplateForm.partitionModelList = list
}

// 确定
const confirm = async () => {
    const isValidate = await formValidate(loadTemplateFormRef.value)
    if (!isValidate) return
    try {
        const res = await getPartitionModelLoadApi(loadTemplateForm.id)
        const list = resData(res)
        zoningstore.addLoadId(loadTemplateForm.id)
        emit("saveLoadPartition", list)
        onClose()
    } catch (error) {
        report(error)
    } finally {
        resetForm(loadTemplateFormRef.value)
    }
}

//父组件调用子组件显示弹框
//暴露出去给外部使用
defineExpose({
    show,
});
</script>