<!-- 要求一览表 弹窗编辑 -->
<script name="ConditionDialog" lang="ts" setup>
import type { IConditionRequire } from '../require-confition-interface'
import type { IFileInfo } from '@/views/resource/technology/method/method-interface'
import type { IDictType } from '@/commonInterface/resource-interface'
import FilterTechnologyMethod from '@/views/resource/common/filterTechMethod.vue'

const emit = defineEmits(['recordSaved'])

const conditionFormRef = ref()
const methodFilterRef = ref()

// 字典值
const environmentAccordDict = ref<IDictType[]>([])

const conditionDetail = ref<IConditionRequire>({
  id: '',
  requireId: '',
  params: '',
  environmentRequire: '',
  environmentAccord: '',
  environmentAccordName: '',
  fileId: '',
  fileName: '',
  remark: '',
  createTime: '',
})

const checkMethodFile = (rule: any, value: any, callback: any) => {
  if (conditionDetail.value.environmentAccord === '1') {
    if (conditionDetail.value.fileId === '' || conditionDetail.value.fileId === undefined) {
      callback(new Error('现行技术规范文件不能为空，请选择'))
    }
    else {
      callback()
    }
  }
  else {
    callback()
  }
}

const conditionRules = ref({
  params: [{ required: true, message: '量传参数不能为空', trigger: 'blur' }],
  environmentRequire: [{ required: true, message: '环境条件要求不能为空', trigger: 'blur' }],
  environmentAccord: [{ required: true, message: '环境条件依据不能为空', trigger: ['blur', 'change'] }],
  fileId: [{ required: true, message: '现行技术规范不能为空', trigger: ['blur', 'change'] }, { trigger: ['blur', 'change'], validator: checkMethodFile }],
}) // 表单验证规则

const showDialog = ref(false)

// 逻辑
const getEnvironmentAccord = async () => {
  // 先从缓存中获取
  if (sessionStorage.getItem('bizEnvironmentAccord') !== null || sessionStorage.getItem('bizEnvironmentAccord') !== undefined) {
    environmentAccordDict.value = JSON.parse(sessionStorage.getItem('bizEnvironmentAccord')!)
  }
}

const showTechMethodFilter = () => {
  methodFilterRef.value.showOrHideFilterDialog(true)
}

const methodSelectedHandler = (method: IFileInfo) => {
  conditionDetail.value.fileId = method.id
  conditionDetail.value.fileName = method.fileName

  methodFilterRef.value.showOrHideFilterDialog(false)
}

const showRecordDialog = (show: boolean) => {
  showDialog.value = show

  getEnvironmentAccord()
  nextTick(() => {
    conditionFormRef.value.clearValidate()
  })

  if (show === true) {
    // 打开的时候清除表单
    conditionDetail.value = {
      id: '',
      requireId: '',
      params: '',
      environmentRequire: '',
      environmentAccord: '',
      environmentAccordName: '',
      fileId: '',
      fileName: '',
      remark: '',
      createTime: '',
      index: -1,
    }
  }
}

// 编辑时初始化表格
const initRecordData = (record: IConditionRequire, index: number) => {
  conditionDetail.value = {
    ...record,
    index,
  }
}

const submitForm = () => {
  conditionFormRef.value.validate((valid: boolean) => {
    if (valid === true) {
      emit('recordSaved', conditionDetail.value)

      showRecordDialog(false)
    }
  })
}

// 监听依据 显示中文 立即监听
watch(() => conditionDetail.value.environmentAccord, (newVal) => {
  const targetList = environmentAccordDict.value.filter(item => item.value === newVal)
  if (targetList.length > 0) {
    conditionDetail.value.environmentAccordName = targetList[0].name
  }
  else {
    conditionDetail.value.environmentAccordName = ''
  }
}, { immediate: true })

defineExpose({
  showRecordDialog,
  initRecordData,
})
</script>

<template>
  <el-dialog v-model="showDialog" title="工作间环境要求一览表" :append-to-body="true" :close-on-click-modal="false">
    <detail-block title="">
      <el-form ref="conditionFormRef" :model="conditionDetail" :rules="conditionRules" label-position="right" label-width="110px" border stripe>
        <el-row :gutter="24">
          <el-col :span="18" :offset="3">
            <el-form-item label="开展量传参数" prop="params">
              <el-input v-model="conditionDetail.params" placeholder="开展量传参数" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="18" :offset="3">
            <el-form-item label="环境条件要求" prop="environmentRequire">
              <el-input v-model="conditionDetail.environmentRequire" placeholder="请输入环境条件要求" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="18" :offset="3">
            <el-form-item label="环境条件依据" prop="environmentAccord">
              <el-select v-model="conditionDetail.environmentAccord" placeholder="请选择环境条件依据">
                <el-option v-for="opt in environmentAccordDict" :key="opt.id" :label="opt.name" :value="opt.value" />
              </el-select>
              <el-input v-model="conditionDetail.environmentAccordName" type="hidden" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row v-if="conditionDetail.environmentAccord === '1'" :gutter="24">
          <el-col :span="18" :offset="3">
            <el-form-item label="现行技术规范" prop="fileId">
              <el-input v-model="conditionDetail.fileId" type="hidden" />
              <el-input v-model="conditionDetail.fileName" placeholder="请选择现行技术规范" :disabled="true">
                <template #append>
                  <el-button size="small" @click="showTechMethodFilter">
                    选择
                  </el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="18" :offset="3">
            <el-form-item label="备注">
              <el-input v-model="conditionDetail.remark" placeholder="请输入备注信息" type="textarea" :rows="3" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </detail-block>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="showRecordDialog(false)">取消</el-button>
        <el-button type="primary" @click="submitForm">
          保存
        </el-button>
      </span>
    </template>

    <filter-technology-method ref="methodFilterRef" @record-selected="methodSelectedHandler" />
  </el-dialog>
</template>