<!-- 现场检测审批详情 -->
<script lang="ts" setup name="FieldTestRecordDetail">
import { ref } from 'vue'
import dayjs from 'dayjs'
import type { IForm } from './record-interface'
import useUserStore from '@/store/modules/user'
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 form = ref<IForm>({
  logNo: '', // 记录单编号
  recorder: '', // 记录人
  recorderName: '', // 记录人名称
  recordTime: '', // 记录时间
  siteExecutiveId: '', // 现场检测id
  siteExecutiveNo: '', // 现场检测编号
  customerName: '', // 委托方名称
  customerAddress: '', // 委托方地址
  phone: '', // 委托方电话
  deliverer: '', // 送检人
  delivererTel: '', // 送样人联系方式
  executiveAddress: '', // 现场工作地点
  outputVoltage: '', // 输出电压
  zeroGroundVoltage: '', // 零地电压
  temperature: '', // 温度
  humidity: '', // 湿度
  remark: '', // 备注
})
// 校验规则
const formRules = ref({
  siteExecutiveNo: [{ required: true, message: '要求现场检测编号不能为空', trigger: ['blur', 'change'] }],
  executiveAddress: [{ required: true, message: '要求现场工作地点不能为空', trigger: ['blur', 'change'] }],
  outputVoltage: [{ required: true, message: '要求供电电压不能为空', trigger: ['blur', 'change'] }],
  zeroGroundVoltage: [{ required: true, message: '要求零地电压不能为空', trigger: ['blur', 'change'] }],
  temperature: [{ required: true, message: '要求温度不能为空', trigger: ['blur', 'change'] }],
  humidity: [{ required: true, 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 choose = () => {

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

}

onMounted(() => {
  form.value.recorder = user.id// 记录人
  form.value.recorderName = user.name // 记录人名字
  form.value.recordTime = dayjs().format('YYYY-MM-DD HH-mm:ss')// 申请时间
})
</script>

<template>
  <app-container>
    <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">
          打印
        </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="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="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="供电电压" 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="零地电压" 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>
  </app-container>
</template>