<template>
    <SysDialog class="zoning-export-template" :visible="dialog.visible" v-bind="getBindValue" @onClose="hanleOnClose"
        @onConfirm="confirm">
        <template #content>
            <el-form ref="exportTemplateFormRef" :model="exportTemplateForm">
                <el-form-item prop="modelName" :rules="!exportTemplateForm.id ? exportTemplateFormRules.modelName : exportTemplateFormRules.isValidate">
                    <el-input v-model="exportTemplateForm.modelName" placeholder="请输入导出模版名称" />
                </el-form-item>
                <div v-if="loadId">
                    <el-radio-group v-model="exportTemplateForm.id" class="ml-4" @change="hanleChangeId">
                        <el-radio :label="loadId">覆盖当前模版</el-radio>
                        <el-radio :label="undefined">创建新模版</el-radio>
                    </el-radio-group>
                </div>
            </el-form>
        </template>
    </SysDialog>
</template>
<script lang="ts" setup>
import { ref, reactive, computed } 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 { PartitionList } from '@/api/customerfee/CustomerFeeSetModel';
import { getPartitionExportApi } from '@/api/partition/partition';
import { useReturnData } from '@/utils/useReturnData';

import { zoningStore } from '@/store/zoning';
import { PartitionModelDto } from '@/api/partition/partitionModel';

const zoningstore = zoningStore()
//弹框属性
const { dialog, onClose, onShow } = useDialog();
// 弹框一些配置
const getBindValue = reactive({
    title: "分区模版导出",
    width: 330,
    height: 0
});
// 基础数据
const exportTemplateFormRef = ref<FormInstance>()
const exportTemplateForm: PartitionModelDto = reactive({
    feeId: undefined,
    id: undefined,
    modelName: '',
    partitionList: []
})
const exportTemplateFormRules = reactive({
    modelName: [{ required: true, message: '请输入导出模版名称', trigger: 'blur' }],
    isValidate: [{ required: false }]
})
const loadId = computed(() => {
    exportTemplateForm.id = zoningstore.getLoadId
    return zoningstore.getLoadId
})

// 校验表单
const { formValidate,resetForm } = useEleFormValidate();
const { resData } = useReturnData()

// 显示
const show = (data: PartitionList[]) => {
    exportTemplateForm.partitionList = data
    onShow()
}
// 触发单选框
const hanleChangeId = (val: string) => {
    if(val) resetForm(exportTemplateFormRef.value)
}

// 取消
const hanleOnClose = () => {
    resetForm(exportTemplateFormRef.value)
    onClose()
}

// 确定
const confirm = async () => {
    const isValidate = await formValidate(exportTemplateFormRef.value)
    if (!isValidate) return
    exportTemplateForm.feeId = zoningstore.feeId//费用编号
    // console.log(exportTemplateForm,":exportTemplateForm");
    const res = await getPartitionExportApi(exportTemplateForm)
    const resCode = resData(res)
    if(resCode !== 500) {
        hanleOnClose()
    }
}

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