<!-- 标准装置详情表单 -->
<script lang="ts" setup name="BaseInfo">
import { reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance, FormRules, UploadProps, UploadUserFile } from 'element-plus'
import dayjs from 'dayjs'
import laboratoryDialog from '@/views/device/standardEquipment/components/standardList/laboratoryDialog.vue'
import type { IOptions, IStandardList } from '@/views/device/standardEquipment/standard_interface'
import { getStaffList } from '@/api/measure/person'
import { getTypeSelect } from '@/api/system/price'
import { getStandardListDetail, getUsersDept } from '@/api/device/standard'
import { UploadFile } from '@/api/measure/file'
import showPhoto from '@/views/system/tool/showPhoto.vue'
import personListDialog from '@/views/measure/person/components/personListDialog.vue'
const props = defineProps({
  infoId: { // 详情id
    type: String,
    default: '0',
  },
  buttonType: { // 从列表的哪个按钮进入的
    type: String,
    default: '',
  },
})
const emit = defineEmits(['close', 'setData']) // 关闭
const ruleFormRef = ref<FormInstance>()
// 表单
const formInline = ref({
  assessDate: '', // 考核日期
  assessmentUnit: '', // 考核单位
  category: '', // 类别
  categoryName: '', // 类别名称
  constructionStandardProject: '', // 建标项目
  constructionStandardUnitName: '', // 建标单位名称
  contactInfo: '', // 联系方式
  createTime: '', // 创建时间
  createUser: '', // 创建人
  id: '', // 主键
  isDel: '', // 删除标记
  laboratoryOwner: '', // 实验室负责人
  laboratoryOwnerContact: '', // 联系方式
  laboratoryOwnerName: '', // 实验室负责人名字
  managerState: '', // 管理状态
  managerStateName: '', // 管理状态名称
  measureMajor: '', // 计量专业
  fileList: [] as any, // 文件列表
  measureMajorName: '', // 计量专业名称
  mesureRange: '', // 测量范围
  organizeNo: '', // 组织机构代码
  preparationDate: '', // 筹建日期
  projectNo: '', // 项目编号
  remark: '', // 备注
  standardHumidity: '', // 标准湿度
  standardLaboratory: '', // 标准所在实验室
  standardLaboratoryName: '', // 标准所在实验室名称
  standardLevel: '', // 标准等级
  standardLevelName: '', // 标准等级名称
  standardName: '', // 标准名称
  standardNo: '', // 标准代码
  standardOwner: '', // 标准负责人
  standardOwnerName: '', // 标准负责人名称
  standardTemperature: '', // 标准温度
  totalInvestment: '', // 投资总额
  transmitRange: '', // 传递范围
  transmitRangeName: '', // 传递范围名称
  uncertainty: '', // 不确定度
  updateTime: '', // 更新时间
  version: '', // 版本号
  minioFileName: [], // 附件
})
const checkTypeOptions = ref<IOptions[]>([])
const standardOwnerOptions = ref<IOptions[]>([]) // 标准负责人
const fileList = ref<UploadUserFile[]>([]) // 文件对象数组
const measureMajorList = ref<IOptions[]>([]) // 计量专业下拉框
const standardManagerStateList = ref<IOptions[]>([]) // 管理状态下拉框
const standardLevelList = ref<IOptions[]>([]) // 标准等级下拉框
const transmitRangeList = ref<IOptions[]>([]) // 传递范围下拉框
// 标准所在部门下拉框
const standardUsersDeptList = ref<IOptions[]>([])
// 获取下拉框
const getSelectList = (code: string) => {
  getTypeSelect(code).then((res) => {
    if (code === 'measureMajor') {
      measureMajorList.value = res.data
    }
    else if (code === 'standardManagerState') {
      standardManagerStateList.value = res.data
    }
    else if (code === 'standardLevel') {
      standardLevelList.value = res.data
    }
    else if (code === 'transmitRange') {
      transmitRangeList.value = res.data
    }
    else if (code === 'standardCategory') {
      checkTypeOptions.value = res.data
    }
  })
}
getSelectList('measureMajor') // 获取计量专业下拉框
getSelectList('standardManagerState') // 获取管理状态下拉框
getSelectList('standardLevel') // 获取标准等级下拉框
getSelectList('transmitRange') // 获取传递范围下拉框
getSelectList('standardCategory') // 获取类别下拉框
// 获取部门信息参数
const DeptParams = ref({
  createEndTime: '',
  createstartTime: '',
  director: '',
  meterMajor: '',
  organizeName: '',
  organizeNo: '',
  organizeType: '2',
  pdeptId: null,
  offset: 1,
  limit: 999999,
})
// 获取部门信息
getUsersDept(DeptParams.value).then((res) => {
  standardUsersDeptList.value = res.data.rows
})
// 获取到标准负责人数组
const getStandardOwnerOptions = () => {
  const params = {
    staffNo: '', // 人员编号
    name: '', // 姓名
    deptId: '', // 工作部门
    major: '', // 计量专业
    verifierCertificateNo: '', // 证书号
    certificateStatus: '', // 证书状态
    limit: 100000,
    offset: 1,
  }
  getStaffList(params).then((res) => {
    standardOwnerOptions.value = res.data.records
  })
}
getStandardOwnerOptions()

const rules = reactive<FormRules>({
  standardName: [{ required: true, message: '标准名称必填', trigger: ['blur', 'change'] }],
  projectNo: [{ required: true, message: '项目编号必填', trigger: ['blur', 'change'] }],
  constructionStandardProject: [{ required: true, message: '建标项目必填', trigger: ['blur', 'change'] }],
  organizeNo: [{ required: true, message: '组织机构代码必填', trigger: ['blur', 'change'] }],
  constructionStandardUnitName: [{ required: true, message: '建标单位名称必填', trigger: ['blur', 'change'] }],
  standardOwnerName: [{ required: true, message: '标准负责人必填', trigger: ['blur', 'change'] }],
  contactInfo: [{ required: true, message: '联系方式必填', trigger: ['blur', 'change'] }],
  category: [{ required: true, message: '类别必填', trigger: ['blur', 'change'] }],
  standardLevel: [{ required: true, message: '标准等级必填', trigger: ['blur', 'change'] }],
  transmitRange: [{ required: true, message: '传递范围必填', trigger: ['blur', 'change'] }],
  preparationDate: [{ required: true, message: '筹建日期必填', trigger: ['blur', 'change'] }],
  managerState: [{ required: true, message: '管理状态必填', trigger: ['blur', 'change'] }],
  measureMajor: [{ required: true, message: '计量专业必填', trigger: ['blur', 'change'] }],
  assessmentUnit: [{ required: true, message: '考核单位必填', trigger: ['blur', 'change'] }],
  assessDate: [{ required: true, message: '考核日期必填', trigger: ['blur', 'change'] }],
  uncertainty: [{ required: true, message: '不确定度必填', trigger: ['blur', 'change'] }],
  mesureRange: [{ required: true, message: '测量范围必填', trigger: ['blur', 'change'] }],
  standardTemperature: [{ required: true, message: '标准温度必填', trigger: ['blur', 'change'] },
    { pattern: /(^-?\d\d*\.\d*$)|(^-?\d\d*$)|(^-?\.\d\d*$)/, message: '标准温度只能为数字', trigger: ['blur', 'change'] }],
  standardHumidity: [{ required: true, message: '标准湿度必填', trigger: ['blur', 'change'] },
    { pattern: /(^-?\d\d*\.\d*$)|(^-?\d\d*$)|(^-?\.\d\d*$)/, message: '标准湿度只能为数字', trigger: ['blur', 'change'] }],
  totalInvestment: [{ required: false, message: '', trigger: ['blur', 'change'] },
    { pattern: /(^-?\d\d*\.\d*$)|(^-?\d\d*$)|(^-?\.\d\d*$)/, message: '投资总额只能为数字', trigger: ['blur', 'change'] }],
}) // 表单验证规则

// 标准实验室发生改变row类型
interface rowReturn {
  phone: string
  director: string
  name: string
  organizeName: string
  id: string
  deptId: string
}
// 实验室ref
const laboratorydialog = ref()
// 标准实验室点击
const changeDeptList = () => {
  laboratorydialog.value.initDialog()
}
// 标准实验室清空时
const clearDeptList = () => {
  formInline.value.laboratoryOwnerContact = ''
  formInline.value.laboratoryOwner = ''
}
// 获取detail信息
const getInfo = () => {
  getStandardListDetail({ id: props.infoId }).then((res) => {
    Object.keys(res.data).map((item) => {
      if (typeof (res.data[item]) === 'number') {
        res.data[item] = res.data[item].toString()
      }
    })
    formInline.value = res.data
    const tempArr = [] as any
    if (res.data.fileList && res.data.fileList.length) {
      res.data.fileList.forEach((item: { minioFileName: string }) => {
        tempArr.push(item.minioFileName)
      })
    }
    formInline.value.minioFileName = tempArr
  })
}

// 计量人员组件
const personListdialog = ref()
// 点击选择负责人函数
const personClick = () => {
  personListdialog.value.initDialog()
}
// 测试数据
const simulateObject = {
  data: dayjs(`${new Date()}`).format('YYYY-MM-DD'), // 有效日期
  certificateNo: '199926465422', // 证书编号
  authorityOfIssue: 'xxx公司', // 发证单位
  authorityOfDate: dayjs(`${new Date()}`).format('YYYY-MM-DD'), // 发证日期
}
// 选择负责人回调函数
const personListAdd = (data: rowReturn) => {
  formInline.value.standardOwner = data.id
  formInline.value.standardOwnerName = data.name
}
// 选择完科室的回调函数
const laboratoryListAdd = (data: rowReturn) => {
  formInline.value.standardLaboratory = data.deptId
  formInline.value.standardLaboratoryName = data.organizeName
  formInline.value.laboratoryOwner = data.director
  formInline.value.laboratoryOwnerContact = data.phone
}

// 删除附件
const del = (index: any) => {
  formInline.value.fileList.splice(index, 1)
  formInline.value.minioFileName = formInline.value.fileList.map((item: any) => {
    return item.minioFileName
  })
}

const fileRef = ref() // 文件上传input
const onFileChange = (event: any) => {
  // 原生上传
  console.log(event.target.files)
  const files = event.target.files
  if (files.length !== 0) {
    // 创建formdata对象
    const fd = new FormData()
    for (var i = 0; i < files.length; i++) {
      fd.append('multipartFile', files[i])
    }
    UploadFile(fd).then((res) => {
      if (res.code === 200) {
        res.data.forEach((item: string) => {
          formInline.value.fileList.push({
            minioFileName: item,
          })
        })
        formInline.value.minioFileName = formInline.value.fileList.map((item: any) => {
          return item.minioFileName
        })
        ElMessage.success('文件上传成功')
      }
      else {
        ElMessage.error(res.message)
      }
    })
  }
}
const upload = () => {
  fileRef.value.click()
}

watch(() => formInline.value, (newVal) => {
// 变化后存储
  emit('setData', newVal)
},
{ deep: true, immediate: true })
// 提交
const submitForm = () => {
  return ruleFormRef.value
}
defineExpose({ submitForm, formInline })
onMounted(() => {
  if (props.buttonType !== 'add') { // 编辑和详情获取详情信息
    getInfo()
  }
})
</script>

<template>
  <app-container>
    <div class="info-content">
      <el-form
        id="form"
        ref="ruleFormRef"
        :model="formInline"
        label-position="right"
        label-width="auto"
        :rules="rules"
      >
        <el-row :gutter="24" class="marg">
          <el-col :span="6">
            <el-form-item label="标准代码:">
              <el-input
                v-model.trim="formInline.standardNo"
                :placeholder="buttonType === 'detail' ? '' : '系统自动生成'"
                disabled
                class="full-width-input"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标准名称:" prop="standardName">
              <el-input
                v-model.trim="formInline.standardName"
                :placeholder="buttonType === 'detail' ? '' : '请输入标准名称'"
                :disabled="buttonType === 'detail'"
                class="full-width-input"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="项目编号:" prop="projectNo">
              <el-input
                v-model.trim="formInline.projectNo"
                :placeholder="buttonType === 'detail' ? '' : '请输入项目编号'"
                :disabled="buttonType === 'detail'"
                class="full-width-input"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="建标项目:" prop="constructionStandardProject">
              <el-input
                v-model.trim="formInline.constructionStandardProject"
                :placeholder="buttonType === 'detail' ? '' : '请输入建标项目'"
                :disabled="buttonType === 'detail'"
                class="full-width-input"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="marg">
          <el-col :span="6">
            <el-form-item label="组织机构代码:" prop="organizeNo">
              <el-input
                v-model.trim="formInline.organizeNo"
                :placeholder="buttonType === 'detail' ? '' : '请输入组织机构代码'"
                :disabled="buttonType === 'detail'"
                class="full-width-input"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="建标单位名称:"
              prop="constructionStandardUnitName"
            >
              <el-input
                v-model.trim="formInline.constructionStandardUnitName"
                :placeholder="buttonType === 'detail' ? '' : '请输入建标单位名称'"
                :disabled="buttonType === 'detail'"
                class="full-width-input"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标准负责人:" prop="standardOwnerName">
              <el-input
                v-model.trim="formInline.standardOwnerName"
                :placeholder="buttonType === 'detail' ? '' : '请选择标准负责人'"
                disabled
                class="full-width-input"
                clearable
              >
                <template v-if="buttonType !== 'detail'" #append>
                  <el-button
                    size="small"
                    @click="personClick"
                  >
                    选择
                  </el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系方式:" prop="contactInfo">
              <el-input
                v-model.trim="formInline.contactInfo"
                :placeholder="buttonType === 'detail' ? '' : '请输入联系方式'"
                :disabled="buttonType === 'detail'"
                class="full-width-input"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="marg">
          <el-col :span="6">
            <el-form-item label="类 别:" prop="category">
              <el-select
                v-model="formInline.category"
                clearable
                :placeholder="buttonType === 'detail' ? '' : '请选择类别'"
                size="default"
                :disabled="buttonType === 'detail'"
                style="width: 100%;"
              >
                <el-option
                  v-for="item in checkTypeOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.value"
                  clearable
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标准等级:" prop="standardLevel">
              <el-select
                v-model.trim="formInline.standardLevel"
                clearable
                :placeholder="buttonType === 'detail' ? '' : '请选择标准等级'"
                size="default"
                :disabled="buttonType === 'detail'"
                style="width: 100%;"
              >
                <el-option
                  v-for="item in standardLevelList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.value"
                  clearable
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="传递范围:" prop="transmitRange">
              <el-select
                v-model.trim="formInline.transmitRange"
                clearable
                :placeholder="buttonType === 'detail' ? '' : '请选择传递范围'"
                size="default"
                :disabled="buttonType === 'detail'"
                style="width: 100%;"
              >
                <el-option
                  v-for="item in transmitRangeList"
                  :key="item.id"
                  :label="item.name"
                  clearable
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="投资总额(元):" prop="totalInvestment">
              <el-input
                v-model.trim="formInline.totalInvestment"
                :placeholder="buttonType === 'detail' ? '' : '请输入投资总额'"
                :disabled="buttonType === 'detail'"
                class="full-width-input"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="marg">
          <el-col :span="6">
            <el-form-item label="筹建日期:" prop="preparationDate">
              <el-date-picker
                v-model="formInline.preparationDate"
                type="date"
                :placeholder="buttonType === 'detail' ? '' : '请选择筹建日期'"
                style="width: 100%;"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                :disabled="buttonType === 'detail'"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标准科室:">
              <el-input
                v-model.trim="formInline.standardLaboratoryName"
                :placeholder="buttonType === 'detail' ? '' : '请选择标准科室'"
                disabled
                class="full-width-input"
                clearable
              >
                <template v-if="buttonType !== 'detail'" #append>
                  <el-button
                    size="small"
                    @click="changeDeptList"
                  >
                    选择
                  </el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="科室负责人:">
              <el-input
                v-model.trim="formInline.laboratoryOwner"
                :placeholder="buttonType === 'detail' ? '' : '请输入科室负责人'"
                disabled
                class="full-width-input"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系方式:">
              <el-input
                v-model.trim="formInline.laboratoryOwnerContact"
                :placeholder="buttonType === 'detail' ? '' : '请输入联系方式'"
                :disabled="buttonType === 'detail'"
                class="full-width-input"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="marg">
          <el-col :span="6">
            <el-form-item label="管理状态:" prop="managerState">
              <el-select
                v-model.trim="formInline.managerState"
                clearable
                :placeholder="buttonType === 'detail' ? '' : '请选择管理状态'"
                size="default"
                :disabled="buttonType === 'detail'"
                style="width: 100%;"
              >
                <el-option
                  v-for="item in standardManagerStateList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.value"
                  clearable
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="计量专业:" prop="measureMajor">
              <el-select
                v-model.trim="formInline.measureMajor"
                clearable
                :placeholder="buttonType === 'detail' ? '' : '请选择计量专业'"
                size="default"
                :disabled="buttonType === 'detail'"
                style="width: 100%;"
              >
                <el-option
                  v-for="item in measureMajorList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.value"
                  clearable
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="考核单位:" prop="assessmentUnit">
              <el-input
                v-model.trim="formInline.assessmentUnit"
                :placeholder="buttonType === 'detail' ? '' : '请输入考核单位'"
                :disabled="buttonType === 'detail'"
                class="full-width-input"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="考核日期:" prop="assessDate">
              <el-date-picker
                v-model="formInline.assessDate"
                type="date"
                style="width: 100%;"
                :placeholder="buttonType === 'detail' ? '' : '请选择考核日期'"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                :disabled="buttonType === 'detail'"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="marg">
          <el-col :span="12">
            <el-form-item label="不确定度:" prop="uncertainty">
              <el-input
                v-model.trim="formInline.uncertainty"
                type="textarea"
                autosize
                :placeholder="buttonType === 'detail' ? '' : '请输入不确定度'"
                :disabled="buttonType === 'detail'"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="marg">
          <el-col :span="12">
            <el-form-item label="测量范围:" prop="mesureRange">
              <el-input
                v-model.trim="formInline.mesureRange"
                type="textarea"
                autosize
                :placeholder="buttonType === 'detail' ? '' : '请输入测量范围'"
                :disabled="buttonType === 'detail'"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="marg">
          <el-col :span="2">
            <el-form-item label="环境条件" />
          </el-col>
          <el-col :span="6">
            <el-form-item label="标准温度(℃):" prop="standardTemperature">
              <el-input
                v-model.trim="formInline.standardTemperature"
                :placeholder="buttonType === 'detail' ? '' : '请输入标准温度'"
                :disabled="buttonType === 'detail'"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标准湿度(%):" prop="standardHumidity">
              <el-input
                v-model.trim="formInline.standardHumidity"
                clearable
                :placeholder="buttonType === 'detail' ? '' : '请输入标准湿度'"
                :disabled="buttonType === 'detail'"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-row :gutter="24" class="marg">
          <el-col :span="6">
            <el-form-item label="有效日期:">
              <el-date-picker
                v-model="simulateObject.data"
                type="date"
                style="width: 100%;"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="证书编号:">
              <el-input
                v-model.trim="simulateObject.certificateNo"
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="发证单位:">
              <el-input
                v-model.trim="simulateObject.authorityOfIssue"
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="发证日期:">
              <el-date-picker
                v-model="simulateObject.authorityOfDate"
                type="date"
                style="width: 100%;"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                disabled
              />
            </el-form-item>
          </el-col>
        </el-row> -->
        <el-row :gutter="24" class="marg">
          <el-col :span="12">
            <el-form-item label="备注:">
              <el-input
                v-model.trim="formInline.remark"
                type="textarea"
                autosize
                :placeholder="buttonType === 'detail' ? '' : '请输入备注'"
                :disabled="buttonType === 'detail'"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="marg">
          <el-col :span="24">
            <el-form-item label="文件:">
              <el-button v-if="buttonType !== 'detail'" id="file" type="primary" :disabled="buttonType === 'detail'" :style="{ 'margin-right': '20px' }" @click="upload">
                {{ !formInline.minioFileName.length ? '上传' : '上传' }}
              </el-button>
              <div v-for="(item, index) in formInline.minioFileName" :key="index" style="display: flex;">
                <show-photo :minio-file-name="item">
                  <span v-if="buttonType !== 'detail'" class="photo-close" @click="del(index)">×</span>
                </show-photo>
              </div>
              <span v-if="buttonType === 'detail' && !formInline.minioFileName.length">无</span>
              <input v-show="buttonType === ''" ref="fileRef" type="file" name="upload" multiple @change="onFileChange">
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </app-container>
  <person-list-dialog ref="personListdialog" @add="personListAdd" />
  <laboratory-dialog ref="laboratorydialog" @add="laboratoryListAdd" />
</template>

<style lang="scss" scoped>
// 样式
.top-info {
  width: 100%;
  height: 50px;
  padding-right: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 10px;
  background-color: #fff;

  .title {
    width: 75%;
    text-align: center;
  }
}

.info-content {
  padding: 15px;
  border-radius: 10px;
  background-color: #fff;
}
</style>
