<template>
   <!-- 基础信息弹出框 -->
 <el-dialog :model-value="visible" :title="dialogTitle" v-bind="dialogSmall"  @close="handleCancel"  width="500" draggable>
    <div>
      <el-form :model="formData" ref='formRuleRef' :rules='rules'>
        <el-form-item label="名称" prop="name" :label-width="100">
          <el-input v-model="formData.name"  placeholder="请输入名称" autocomplete="off" :disabled="isReadOnly"/>
        </el-form-item>
        <el-form-item label="父计划" prop="father_Plan_Id" :label-width="100">
          <el-select v-model="formData.father_Plan_Id" placeholder="请选择父计划" autocomplete="off"  :disabled="isReadOnly" @change="fatherPlanChange">
            <el-option 
                      v-for="plan in testFatherPlanList"
                      :key="plan.id"
                      :label="plan.label"
                      :value="plan.id">
            </el-option>
          </el-select>
        </el-form-item> 
         <el-form-item label="数据源" prop="dataSource_Id" :label-width="100">
          <el-select v-model="formData.dataSource_Id" placeholder="请选择数据源" autocomplete="off" :disabled="isReadOnly"> 
            <el-option
                      v-for="plan in testSoureDataList"
                      :key="plan.id"
                      :label="plan.label"
                      :value="plan.id">
            </el-option>
          </el-select>
        </el-form-item>
          <el-form-item label="检测脚本" prop="script_Id" :label-width="100">
          <el-select v-model="formData.script_Id" placeholder="请选择检测脚本" autocomplete="off" :disabled="isReadOnly">
            <el-option
                      v-for="plan in testScriptDataList"
                      :key="plan.id"
                      :label="plan.label"
                      :value="plan.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="误差体系" prop="error_Sys_Id" :label-width="100">
          <el-select v-model="formData.error_Sys_Id" placeholder="请选择误差体系" autocomplete="off" :disabled="isReadOnly">
            <el-option
                      v-for="plan in testErrSystDataList"
                      :key="plan.id"
                      :label="plan.label"
                      :value="plan.id">
            </el-option>
          </el-select>
        </el-form-item>
        
      </el-form>
    </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleCancel">取 消</el-button>
          <el-button type="primary" @click="handleSubmit" :disabled="isReadOnly">确 定</el-button>
        </div>
      </template>
    </el-dialog>
</template>

<script setup lang="ts">
  import{ElMessage, FormInstance,FormItemRule}from'element-plus'
  import { defineProps, defineEmits, reactive,watch,ref, Ref } from 'vue';
  import { dialogSmall} from '@/utils/elementBind'
  import {dictPattern,dictTestState,dictReportState,dictResult,testPlanDataList,testSoureDataList,testScriptDataList,testErrSystDataList,planData,testFatherPlanList} from '@/api/plan/planData'

  const props = defineProps<{
    visible: boolean;
    dialogTitle: string;
    isReadOnly: boolean,
    formData: {
        id:string;
        name: string;
        pattern: string; //模式，字典表（数字、模拟、比对）
        father_Plan_Id: string;   //父计划ID
        dataSource_Id: string;   //数据源ID
        script_Id: string;   //检测脚本ID
        error_Sys_Id: string;//误差体系ID
        test_State: string; //检测状态
        report_State: string;   //报告生成状态
        result: string;//检测结果
        state: number; //状态
        
    };
  }>();

  const fatherPlanList = [
  { label: '/', value: 'type0' },
  { label: '检测计划1', value: 'type1' },
  { label: '检测计划2', value: 'type2' },
  { label: '检测计划3', value: 'type3' },
  { label: '检测计划4', value: 'type4' },
];

const sourceList = [
  { label: '分钟统计数据最大值', value: 'type0' },
  { label: '分钟统计数据最大值', value: 'type1' },
  { label: '分钟统计数据CP95值', value: 'type2' },
];

const scriptList = [
  { label: '/', value: 'type0' },
  { label: '国网入网检测脚本（单影响量-模拟式）', value: 'type1' },
  { label: '国网入网检测脚本（Q/GDW 10650.4 - 2021) 数字式', value: 'type1' },
];

const errorList = [
  { label: 'Q/GDW 1650.2- 2016', value: 'type0' },
  { label: 'Q/GDW 10650.2 - 2021', value: 'type1' },
];


const emit = defineEmits<{
    (e: 'update:visible', value: boolean): void;
    (e: 'submit', data: any): void;
  }>();
  
// 定义规则
const formRuleRef = ref<FormInstance>()
const rules: Ref<Record<string, Array<FormItemRule>>> = ref({
    name: [{ required: true, message: '检测计划名称必填！', trigger: 'blur' }],
    dataSource_Id: [{ required: true, message: '数据源必选！', trigger: 'blur' }],
    script_Id: [{ required: true, message: '检测脚本必选！', trigger: 'blur' }],
    error_Sys_Id: [{ required: true, message: '误差体系必选！', trigger: 'blur' }],
    // name: [{ required: true, message: '检测计划名称必填！', trigger: 'blur' }],
    // father_Plan_Id: [{ required: true, message: '参照标准名称必填！', trigger: 'change' }],
   
});

  const handleCancel = () => {
    //重置表单内容
    //取消表单校验状态
    formRuleRef.value && formRuleRef.value.resetFields()
    emit('update:visible', false); // 关闭对话框
  };
  
  const handleSubmit = () => {

    try {
    formRuleRef.value?.validate((valid: boolean) => {
    if (valid) 
    {
        // 将表单数据转为json,发送到后端
        let confirmFormData = JSON.parse(JSON.stringify(props.formData));
        //console.log(confirmFormData)
        emit('submit', props.formData); // 提交表单数据
        emit('update:visible', false); // 提交后关闭对话框             
    } 
    else 
    {
        ElMessage.error('请填选必填项！')
    }
    })
    } catch (error) {
        console.error('验证过程中发生错误', error)
    }
  };
  
  // 当 props.visible 改变时，更新 formData
  watch(() => props.visible, (newVal) => {
    if (!newVal) {
      // 这里可以重置表单数据，如果需要的话
     
    }
  });
</script>

<style scoped>

</style>