<!-- 现场检测审批详情 -->
<script lang="ts" setup name="FieldTestRecordDetail">
import { ref } from 'vue'
import dayjs from 'dayjs'
import { ElLoading, ElMessage } from 'element-plus'
import selectApproveList from '../components/selectApproveList.vue'
import type { IForm } from './record-interface'
import { getStaffList } from '@/api/measure/person'
import useUserStore from '@/store/modules/user'
import { getDetail } from '@/api/business/fieldTest/apply'
import { getUsersDept } from '@/api/device/standard'
import { getPhotoUrl } from '@/api/system/tool'
import { printPdf } from '@/utils/printUtils'
import type { IOptions } from '@/views/device/standardEquipment/standard_interface'
import { addFieldTestRecordList, getRecordDetail, updateFieldTestRecord } from '@/api/business/fieldTest/record'
const user = useUserStore() // 用户信息
const textMap: { [key: string]: string } = {
  edit: '编辑',
  add: '新建',
  detail: '详情',
}// 字典
const $router = useRouter() // 关闭页面使用
const $route = useRoute() // 路由参数
const pageType = ref('add') // 页面类型: add, edit, detail
const infoId = ref('') // 列表id
const ruleFormRef = ref() // 表单ref
const staffPersonList = ref([]) as any// 记录人列表（用户）
const staffPersonOptions = ref([]) as any// 记录人列表（用户）--模糊搜索数据
const applyPersonLoading = ref(false) // 申请人模糊搜索框loading
const form = ref<IForm>({
  logNo: '', // 记录单编号
  logName: '', // 记录单名称
  recorder: '', // 创建人
  recorderName: '', // 创建人名称
  laboratoryId: '', // 实验室id
  laboratoryName: '', // 实验室名称
  recordTime: '', // 记录时间
  siteExecutiveId: '', // 现场检测id
  siteExecutiveNo: '', // 现场检测编号
  customerName: '', // 委托方名称
  customerAddress: '', // 委托方地址
  phone: '', // 委托方电话
  deliverer: '', // 送检人
  delivererTel: '', // 送样人联系方式
  executiveAddress: '', // 现场工作地点
  outputVoltage: '', // 输出电压
  zeroGroundVoltage: '', // 零地电压
  temperature: '', // 温度
  humidity: '', // 湿度
  remark: '', // 备注
  siteExecutiveEquipmentRelationList: [] as any,
  printFileName: '', // 打印文件名
})
const list = ref([]) // 记录结果表
// 校验规则
const formRules = ref({
  laboratoryId: [{ required: true, message: '实验室必填', trigger: ['blur', 'change'] }],
  siteExecutiveNo: [{ required: true, message: '现场检测编号必填', trigger: ['blur', 'change'] }],
  executiveAddress: [{ required: true, message: '现场工作地点必填', trigger: ['blur', 'change'] }],
  outputVoltage: [{ required: true, message: '供电电压必填', trigger: ['blur', 'change'] },
    { pattern: /(^-?\d\d*\.\d*$)|(^-?\d\d*$)|(^-?\.\d\d*$)/, message: '供电电压只能为数字', trigger: ['blur', 'change'] }],
  zeroGroundVoltage: [{ required: true, message: '零地电压必填', trigger: ['blur', 'change'] },
    { pattern: /(^-?\d\d*\.\d*$)|(^-?\d\d*$)|(^-?\.\d\d*$)/, message: '零地电压只能为数字', trigger: ['blur', 'change'] }],
  temperature: [{ required: true, message: '温度必填', trigger: ['blur', 'change'] },
    { pattern: /(^-?\d\d*\.\d*$)|(^-?\d\d*$)|(^-?\.\d\d*$)/, message: '温度只能为数字', trigger: ['blur', 'change'] }],
  humidity: [{ required: true, message: '相对湿度必填', trigger: ['blur', 'change'] },
    { pattern: /(^-?\d\d*\.\d*$)|(^-?\d\d*$)|(^-?\.\d\d*$)/, message: '相对湿度只能为数字', trigger: ['blur', 'change'] }],
})
// ----------------------------------路由参数--------------------------------------------
if ($route.params && $route.params.type) {
  pageType.value = $route.params.type as string
  console.log(pageType.value)

  if ($route.params.id) {
    infoId.value = $route.params.id as string
  }
}
// ------------------------------------选择现场检测-------------------------------------------------
const approveListRef = ref()
const choose = () => {
  approveListRef.value.initDialog()
}
// 选择好了现场检测
const confirmSelectApproveList = (val: any) => {
  getDetail({ id: val[0].id }).then((res) => {
    form.value.siteExecutiveNo = res.data.siteExecutiveNo// 现场检测编号
    form.value.siteExecutiveId = res.data.id// 现场检测id
    form.value.customerName = res.data.customerName // 委托方名称
    form.value.customerAddress = res.data.customerAddress // 委托方地址
    form.value.phone = res.data.phone // 委托方电话
    form.value.deliverer = res.data.deliverer // 送检人
    form.value.delivererTel = res.data.delivererTel // 送样人联系方式
    list.value = res.data.equipmentInfoList.map((item: any) => {
      return {
        ...item,
        equipmentId: item.id,
        siteExecutiveId: res.data.id,
        equipmentModel: item.modelNo,
      }
    })
    console.log('pppppp', list.value)
  })
}
// -------------------------------------------------------------------------------------

// ---------------------------------------------记录人-----------------------------------
// 选择器模糊查询
const remoteMethod = (query: string) => {
  if (query) {
    applyPersonLoading.value = true
    setTimeout(() => {
      applyPersonLoading.value = false
      staffPersonOptions.value = staffPersonList.value.filter((item: { name: string }) => {
        return item.name.toLowerCase().includes(query.toLowerCase())
      })
    }, 200)
  }
  else {
    staffPersonOptions.value = staffPersonList.value
  }
}
// 查询条件
const staffListQuery = ref({
  staffNo: '', // 人员编号
  name: '', // 姓名
  deptId: '', // 所在部门
  limit: 20,
  offset: 1,
})
// 获取计量人员列表(增加模糊查询)
const fetchStaffList = () => {
  getStaffList(staffListQuery.value).then((res: any) => {
    staffPersonList.value = res.data.records
    staffPersonOptions.value = res.data.records
  })
}

// 关闭新增页面的回调
const close = () => {
  $router.back()
}

// 获取部门信息参数
const DeptParams = ref({
  createEndTime: '',
  createstartTime: '',
  director: '',
  meterMajor: '',
  organizeName: '',
  organizeNo: '',
  organizeType: '3', // 3科室
  pdeptId: null,
  offset: 1,
  limit: 999999,
})
// 获取部门信息
// 标准所在部门下拉框
const laboratoryMap = ref<IOptions[]>([])
const fetchUsersDept = () => {
  getUsersDept(DeptParams.value).then((res) => {
    laboratoryMap.value = res.data.rows
  })
}

// 获取详情信息
const getInfo = () => {
  const loading = ElLoading.service({
    lock: true,
    background: 'rgba(255, 255, 255, 0.8)',
  })
  getRecordDetail({ id: infoId.value }).then((res) => {
    form.value = res.data
    list.value = res.data.siteExecutiveEquipmentRelationList
    form.value.recorder = user.id// 创建人
    form.value.recorderName = user.name // 创建人名称
    form.value.logName = '现场检测记录单' // 记录单名称
    loading.close()
  })
}

// 检查表格第几行信息未完善
const checkEquipmentList = () => {
  const index = list.value.findIndex((item: any) => !item.beforeWorkCheck || !item.beforeWorkResult || !item.afterWorkCheck || !item.afterWorkResult
  || !item.afterWorkRecorderDate || !item.afterWorkRecorderId || !item.beforeWorkRecorderDate || !item.beforeWorkRecorderId)
  if (index !== -1) {
    return index + 1
  }
  else {
    return 'pass'
  }
}
// 保存
const save = () => {
  // 检查表格是否存在增加行信息没有完善的情况
  const result = checkEquipmentList()
  if (result !== 'pass') {
    ElMessage.warning(`表格第${result}行信息未完善`)
    return
  }
  ruleFormRef.value!.validate((valid: boolean) => {
    if (valid) {
      const loading = ElLoading.service({
        lock: true,
        background: 'rgba(255, 255, 255, 0.8)',
      })
      // 新建
      form.value.siteExecutiveEquipmentRelationList = list.value
      if (pageType.value === 'add') { // 新建
        addFieldTestRecordList(form.value).then((res) => {
          ElMessage.success('保存成功')
          close()
          loading.close()
        }).catch(() => {
          loading.close()
        })
      }
      // 保存
      else if (pageType.value === 'edit') { // 编辑
        updateFieldTestRecord(form.value).then((res) => {
          ElMessage.success('保存成功')
          close()
          loading.close()
        }).catch(() => {
          loading.close()
        })
      }
    }
    else {
      console.log('表单校验不通过')
    }
  })
}
// 打印
const print = () => {
  getPhotoUrl(form.value.printFileName as string).then((res) => {
    printPdf(res.data)
  })
}
onMounted(async () => {
  await fetchUsersDept()
  await fetchStaffList()
  form.value.recorder = user.id// 记录人
  form.value.recorderName = user.name // 记录人名字
  form.value.logName = '现场检测记录单' // 记录单名称
  form.value.recordTime = dayjs().format('YYYY-MM-DD HH-mm:ss')// 申请时间
  if (pageType.value !== 'add') {
    getInfo()
  }
})
</script>

<template>
  <app-container class="fieldtest-record-detail">
    <detail-page :title="`现场检测记录-${textMap[pageType]}`">
      <template #btns>
        <el-button v-if="pageType !== 'detail'" type="primary" @click="save">
          保存
        </el-button>
        <!-- <el-button v-if="pageType === 'detail'" type="primary" @click="print">
          打印
        </el-button> -->
        <el-button type="info" @click="close">
          关闭
        </el-button>
      </template>
      <el-form
        ref="ruleFormRef"
        :model="form"
        label-width="120"
        label-position="right"
        :rules="formRules"
      >
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="记录单编号:" prop="logNo">
              <el-input v-model="form.logNo" class="full-width-input" disabled placeholder="系统自动生成" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="记录单名称:" prop="logName">
              <el-input v-model="form.logName" class="full-width-input" disabled placeholder="请输入记录单名称" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="创建人:" prop="recorderName">
              <el-input
                v-model="form.recorderName"
                class="full-width-input"
                :placeholder="pageType === 'detail' ? '' : '请输入记录人'"
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="创建时间:" prop="recordTime">
              <el-date-picker
                v-model="form.recordTime"
                type="datetime"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
                class="full-width-input"
                disabled
              />
            </el-form-item>
          </el-col>
          <!-- <el-col :span="8">
            <el-form-item label="实验室:" prop="laboratoryId">
              <el-select
                v-model.trim="form.laboratoryId"
                clearable
                placeholder="请选择实验室"
                class="full-width-input"
                size="default"
                :disabled="pageType === 'detail'"
              >
                <el-option
                  v-for="item in laboratoryMap"
                  :key="item.deptId"
                  :label="item.organizeName"
                  :value="item.deptId!"
                />
              </el-select>
            </el-form-item>
          </el-col> -->
          <el-col :span="8">
            <el-form-item label="现场检测编号:" prop="siteExecutiveNo">
              <el-input v-model="form.siteExecutiveNo" class="full-width-input" disabled placeholder="请选择">
                <template v-if="pageType !== 'detail'" #append>
                  <el-button size="small" @click="choose">
                    选择
                  </el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="委托方名称:" prop="customerName">
              <el-input
                v-model="form.customerName"
                class="full-width-input"
                :placeholder="pageType === 'detail' ? '' : '请输入委托方名称'"
                :class="{ 'detail-input': pageType === 'detail' }"
                disabled
              />
            </el-form-item>
          </el-col>
          <!-- <el-col :span="8">
            <el-form-item label="委托方电话" prop="phone">
              <el-input
                class="full-width-input"
                v-model="form.phone"
                :placeholder="pageType === 'detail' ? '' : '请输入委托方电话'"
                :class="{ 'detail-input': pageType === 'detail' }"
                disabled
              />
            </el-form-item>
          </el-col> -->
          <el-col :span="8">
            <el-form-item label="联系人" prop="deliverer">
              <el-input
                v-model="form.deliverer"
                class="full-width-input"
                :placeholder="pageType === 'detail' ? '' : '请输入联系人'"
                :class="{ 'detail-input': pageType === 'detail' }"
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系方式" prop="delivererTel">
              <el-input
                v-model="form.delivererTel"
                class="full-width-input"
                :placeholder="pageType === 'detail' ? '' : '请输入联系方式'"
                :class="{ 'detail-input': pageType === 'detail' }"
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="委托方地址:" prop="customerAddress">
              <el-input
                v-model="form.customerAddress"
                class="full-width-input"
                type="textarea"
                autosize
                :placeholder="pageType === 'detail' ? '' : '请输入委托方地址'"
                :class="{ 'detail-input': pageType === 'detail' }"
                disabled
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="现场工作地点" prop="executiveAddress">
              <el-input
                v-model="form.executiveAddress"
                class="full-width-input"
                placeholder="请输入现场工作地点"
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="供电电压(V)" prop="outputVoltage">
              <el-input
                v-model="form.outputVoltage"
                class="full-width-input"
                placeholder="请输入供电电压"
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="零地电压(V)" prop="zeroGroundVoltage">
              <el-input
                v-model="form.zeroGroundVoltage"
                class="full-width-input"
                placeholder="请输入零地电压"
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="温度(℃)" prop="temperature">
              <el-input
                v-model="form.temperature"
                class="full-width-input"
                placeholder="请输入温度"
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="相对湿度(%)" prop="humidity">
              <el-input
                v-model="form.humidity"
                class="full-width-input"
                placeholder="请输入相对湿度"
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="16">
            <el-form-item label="备注:" prop="remark">
              <el-input
                v-model="form.remark"
                class="full-width-input"
                autosize
                type="textarea"
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </detail-page>
    <detail-block title="测量设备工作状态">
      <el-table
        :data="list"
        style="width: 100%;"
      >
        <el-table-column align="center" label="序号" width="80" type="index" />
        <el-table-column
          prop="equipmentName"
          label="设备名称"
          align="center"
        />
        <el-table-column
          prop="equipmentNo"
          label="设备编号"
          width="160"
          align="center"
        />
        <el-table-column
          prop="equipmentModel"
          label="型号"
          align="center"
        />
        <el-table-column label="工作开始前" align="center">
          <el-table-column
            prop="beforeWorkCheck"
            label="外观及功能检查"
            align="center"
            min-width="180"
          >
            <template #header>
              <span style="color: red;">*</span><span>外观及功能检查</span>
            </template>
            <template #default="scope">
              <el-input v-model="scope.row.beforeWorkCheck" type="textarea" autosize :disabled="pageType === 'detail'" placeholder="请输入" class="input" />
            </template>
          </el-table-column>
          <el-table-column
            prop="beforeWorkResult"
            label="指标测试结果"
            align="center"
            min-width="180"
          >
            <template #header>
              <span style="color: red;">*</span><span>指标测试结果</span>
            </template>
            <template #default="scope">
              <el-input v-model="scope.row.beforeWorkResult" type="textarea" autosize :disabled="pageType === 'detail'" placeholder="请输入" class="input" />
            </template>
          </el-table-column>
          <el-table-column
            prop="beforeWorkRecorderId"
            label="记录人"
            align="center"
            width="180"
          >
            <template #header>
              <span style="color: red;">*</span><span>记录人</span>
            </template>
            <template #default="scope">
              <el-select
                v-model="scope.row.beforeWorkRecorderId"
                placeholder="请选择记录人"
                class="full-width-input"
                :disabled="pageType === 'detail'"
                filterable
                remote
                remote-show-suffix
                :remote-method="remoteMethod"
                :loading="applyPersonLoading"
              >
                <el-option v-for="item in staffPersonOptions" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            prop="beforeWorkRecorderDate"
            label="记录时间"
            align="center"
            width="180"
          >
            <template #header>
              <span style="color: red;">*</span><span>记录时间</span>
            </template>
            <template #default="scope">
              <el-date-picker
                v-model="scope.row.beforeWorkRecorderDate"
                type="datetime"
                format="YYYY-MM-DD HH:mm"
                value-format="YYYY-MM-DD HH:mm"
                class="full-width-input"
                :disabled="pageType === 'detail'"
              />
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="工作开始后" align="center">
          <el-table-column
            prop="afterWorkCheck"
            label="外观及功能检查"
            align="center"
            min-width="180"
          >
            <template #header>
              <span style="color: red;">*</span><span>外观及功能检查</span>
            </template>
            <template #default="scope">
              <el-input v-model="scope.row.afterWorkCheck" type="textarea" autosize :disabled="pageType === 'detail'" placeholder="请输入" class="input" />
            </template>
          </el-table-column>
          <el-table-column
            prop="afterWorkResult"
            label="指标测试结果"
            align="center"
            min-width="180"
          >
            <template #header>
              <span style="color: red;">*</span><span>指标测试结果</span>
            </template>
            <template #default="scope">
              <el-input v-model="scope.row.afterWorkResult" type="textarea" autosize :disabled="pageType === 'detail'" placeholder="请输入工作开始后外观及功能检查" class="input" />
            </template>
          </el-table-column>
          <el-table-column
            prop="afterWorkRecorderId"
            label="记录人"
            align="center"
            width="180"
          >
            <template #header>
              <span style="color: red;">*</span><span>记录人</span>
            </template>
            <template #default="scope">
              <el-select
                v-model="scope.row.afterWorkRecorderId"
                placeholder="请选择记录人"
                class="full-width-input"
                :disabled="pageType === 'detail'"
                filterable
                remote
                remote-show-suffix
                :remote-method="remoteMethod"
                :loading="applyPersonLoading"
              >
                <el-option v-for="item in staffPersonOptions" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            prop="afterWorkRecorderDate"
            label="记录时间"
            align="center"
            width="180"
          >
            <template #header>
              <span style="color: red;">*</span><span>记录时间</span>
            </template>
            <template #default="scope">
              <el-date-picker
                v-model="scope.row.afterWorkRecorderDate"
                type="datetime"
                format="YYYY-MM-DD HH:mm"
                value-format="YYYY-MM-DD HH:mm"
                class="full-width-input"
                :disabled="pageType === 'detail'"
              />
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
    </detail-block>
    <!-- 选择现场检测编号 -->
    <select-approve-list ref="approveListRef" @add="confirmSelectApproveList" />
  </app-container>
</template>

<style lang="scss">
.fieldtest-record-detail {
  .el-table thead.is-group th.el-table__cell {
    background: #f2f6ff;
  }
}
</style>