<!-- 设备基本信息 -->
<script lang="ts" setup name="addNotice">
import type { FormInstance, FormRules, UploadUserFile } from 'element-plus'
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import { editInfo, submitInfo } from '@/api/eqpt/device/info'
import { SCHEDULE } from '@/utils/scheduleDict'
import dayjs from 'dayjs'
import tableList from './table.vue'
import technology from './technology.vue'
import showPhoto from './showPhoto.vue'
import { uploadApi } from '@/api/system/notice'
import useUserStore from '@/store/modules/user'
const $route = useRoute()
const $router = useRouter()
const userStore = useUserStore()
const submitId = ref('') // 提交id-保存接口获取
const ruleFormRef = ref<FormInstance>() // from组件
const title = ref('')
// 显示标题
const textMap: { [key: string]: string } = {
  update: '编辑',
  create: '新增',
  detail: '详情',
}
// 对话框类型：create,update
const dialogStatus = ref('create')

const ruleForm = reactive({
  approvalStatus: '', // 审批状态
  approvalType: '', // 申请审批类型(1新增2编辑3删除)
  approvalTypeName: '', // 申请审批类型名称
  attachments: [], // 主附件信息列表
  category: '', // 设备分类(字典code)
  certificateValid: '', // 证书有效期
  checkCycle: '', // 检定周期(月)
  checkDate: '', // 检定日期
  checkOrganization: '', // 检定机构
  companyId: '', // 所在单位id
  createTime: '', // 创建时间
  createUserId: '', // 创建人id
  createUserName: '', // 创建人名字
  deptId: '', // 使用部门id
  directorName: '', // 负责人
  equipmentId: '', // 设备id
  equipmentName: '', // 设备名称
  equipmentNo: '', // 设备编号
  equipmentType: '', // 设备类型(1受检设备;2特种设备)
  id: '', //
  installLocation: '', // 安装位置(选择)
  installLocationExt: '', // 安装位置(自定义编写)
  instructionsFile: '', // 说明书(minio存储文件名)（多个用,拼接）
  level: '', // 等级(字典code)
  manufactureNo: '', // 出厂编号
  manufacturer: '', // 生产厂家
  meterIdentify: '', // 计量标识
  model: '', // 型号规格
  processId: '', // 流程实例id
  productCountry: '', // 生产国家
  productDate: '', // 生产日期
  purchaseDate: '', // 购进日期
  qualityCondition: '', // 质量状况
  remark: '', // 备注
  remarkExt: '', // 备注(扩展)
  rfid: '', // RFID标签绑定
  technicalTargetList: [], // 技术指标列表
  testTask: '', // 安装位置(多个用,拼接)
  unitPrice: '', // 单价(万元)
  updateTime: '', // 更新时间
  usageStatus: '', // 使用状态(字典code)
  usePosition: '', // 使用岗位
  useSign: '', // 在用信息(字典code)
}) // 表单
const rules = ref<FormRules>({
  fileName: [{ required: true, message: '名称必填', trigger: 'blur' }],
}) // 表单验证规则

// 弹窗初始化
const initDialog = () => {
  dialogStatus.value = $route.params.type as string
  ruleFormRef.value?.resetFields()
}
onMounted(() => {
  initDialog()
})
// 关闭弹窗
const close = () => {
  $router.back()
}
const tableRef = ref()
const technologyRef = ref()
// 保存
const saveForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) { return }
  await formEl.validate((valid, fields) => {
    if (valid) {
      ElMessageBox.confirm(
        '确认保存吗？',
        '提示',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        },
      ).then((res) => {
        ruleForm.attachments = tableRef.value.list
        ruleForm.technicalTargetList = technologyRef.value.list
        editInfo(ruleForm).then(res => {
          submitId.value = res.data.data
        })
      })
    }
  })
}
// 提交
const submitForm = () => {
  if (!submitId.value) {
    ElMessage.warning('请先保存')
    return false
  }
  ElMessageBox.confirm(
    '确认提交吗？',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    },
  ).then((res) => {
    submitInfo({ id: submitId.value, formId: SCHEDULE.DEVICE_INFO_APPROVAL }).then((res) => {
      ElMessage.success('已提交')
      close()
    })
  })
}
// 取消
const resetForm = (formEl: FormInstance | undefined) => {
  formEl?.resetFields()
  close()
}

const fileRef = ref() // 文件上传input
const onFileChange = (event: any) => {
  if (event.target.files?.length !== 0) {
    // 创建formdata对象
    const fd = new FormData()
    const loading = ElLoading.service({
      lock: true,
      background: 'rgba(255, 255, 255, 0.8)',
    })
    fd.append('multipartFile', event.target.files[0])
    uploadApi(fd).then((res) => {
      if (res.code === 200) {
        ruleForm.instructionsFile = ruleForm.instructionsFile ? `${ruleForm.instructionsFile},${res.data[0]}` : res.data[0]
        // 重置当前验证
        ruleFormRef.value?.clearValidate('minioFileName')
        ElMessage.success('文件上传成功')
        loading.close()
      }
      else {
        ElMessage.error(res.message)
        loading.close()
      }
    })
  }
}
const upload = () => {
  fileRef.value.click()
}
onMounted(() => {
  console.log(userStore)
  if ($route.params.type === 'create') {
    ruleForm.createTime = dayjs().format('YYYY-MM-DD HH:mm:ss') // 创建时间
    ruleForm.approvalType = '1'
    ruleForm.approvalTypeName = '新建设备'
    ruleForm.createUserId = userStore.id
    ruleForm.createUserName = userStore.name
  }
})
</script>

<template>
  <app-container style="overflow: hidden;">
    <detail-page :title="`设备信息管理-${textMap[dialogStatus]}`">
      <template #btns>
        <el-button v-if="title !== '详情'" type="primary" @click="submitForm()">
          提交
        </el-button>
        <el-button v-if="title !== '详情'" type="primary" @click="saveForm(ruleFormRef)">
          保存
        </el-button>
        <el-button type="info" @click="resetForm(ruleFormRef)">
          关闭
        </el-button>
      </template>
    </detail-page>
    <detail-block-com>
      <el-form label-position="right" label-width="110px" class="form">
        <el-row :gutter="24" class="marg">
          <el-col :span="6">
            <el-form-item label="审批类型">
              <el-input v-model.trim="ruleForm.approvalTypeName" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="创建人">
              <el-input v-model.trim="ruleForm.createUserName" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="创建时间">
              <el-input v-model.trim="ruleForm.createTime" disabled />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </detail-block-com>
    <detail-block-com>
      <el-form
        ref="ruleFormRef" :model="ruleForm" :rules="rules" label-position="right" label-width="110px" class="form"
        :class="[dialogStatus === 'detail' ? 'isDetail' : '']" :disabled="dialogStatus === 'detail'"
      >
        <el-row :gutter="24" class="marg">
          <el-col :span="6">
            <el-form-item label="统一编号">
              <el-input v-model.trim="ruleForm.equipmentNo" placeholder="系统自动生成" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="设备名称" prop="equipmentName">
              <el-input v-model.trim="ruleForm.equipmentName" placeholder="设备名称" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="使用状态" prop="usageStatus">
              <el-input v-model.trim="ruleForm.usageStatus" placeholder="文件号" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="重要等级">
              <el-input v-model.trim="ruleForm.level" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="marg">
          <el-col :span="6">
            <el-form-item label="生产国家">
              <el-input v-model.trim="ruleForm.productCountry" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="生产厂家">
              <el-input v-model.trim="ruleForm.manufacturer" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="出厂编号">
              <el-input v-model.trim="ruleForm.manufactureNo" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="生产日期" prop="productDate">
              <el-date-picker
                v-model="ruleForm.productDate" type="date" format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择生产日期" class="normal-date"
                style="width: 100%;"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="marg">
          <el-col :span="6">
            <el-form-item label="设备单价" prop="unitPrice">
              <el-input v-model.trim="ruleForm.unitPrice">
                <template #append>
                  万元
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="购进日期" prop="purchaseDate">
              <el-date-picker
                v-model="ruleForm.purchaseDate" type="date" format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择购进日期" class="normal-date"
                style="width: 100%;"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="型号规格">
              <el-input v-model.trim="ruleForm.model" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="质量状况">
              <el-input v-model.trim="ruleForm.qualityCondition" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="marg">
          <el-col :span="6">
            <el-form-item label="所在单位">
              <el-input v-model.trim="ruleForm.companyId" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="使用部门">
              <el-input v-model.trim="ruleForm.deptId" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="设备分类">
              <el-input v-model.trim="ruleForm.equipmentType" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="检定周期">
              <el-input v-model.trim="ruleForm.checkCycle">
                <template #append>
                  月
                </template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="marg">
          <el-col :span="12">
            <el-form-item label="备注" prop="remark">
              <el-input v-model.trim="ruleForm.remark" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="marg">
          <el-col :span="12">
            <el-form-item label="附件" prop="instructionsFile">
              <show-photo :minio-file-name="ruleForm.instructionsFile" />
              <input ref="fileRef" style="display: none;" type="file" @change="onFileChange">
              <el-button type="primary" @click="upload">
                上传
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </detail-block-com>
    <detail-block-com>
      <el-form label-position="right" label-width="110px" class="form">
        <el-row :gutter="24" class="marg">
          <el-col :span="6">
            <el-form-item label="检定(校准)机构" prop="checkOrganization">
              <el-input v-model.trim="ruleForm.checkOrganization" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="检定(校准)日期" prop="checkDate">
              <el-date-picker
                v-model="ruleForm.checkDate" type="date" format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择检定(校准)日期" class="normal-date"
                style="width: 100%;"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="证书有效期" prop="certificateValid">
              <el-date-picker
                v-model="ruleForm.certificateValid" type="date" format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"  placeholder="请选择证书有效期" class="normal-date"
                style="width: 100%;"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="计量标识" prop="meterIdentify">
              <el-input v-model.trim="ruleForm.meterIdentify" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </detail-block-com>
    <detail-block-com>
      <technology ref="technologyRef" :data="[]" :status="$route.params.type as string" />
    </detail-block-com>
    <detail-block-com>
      <el-form label-position="right" label-width="110px" class="form">
        <el-row :gutter="24" class="marg">
          <el-col :span="6">
            <el-form-item label="使用岗位" prop="usePosition">
              <el-input v-model.trim="ruleForm.usePosition" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="负责人" prop="directorName">
              <el-input v-model.trim="ruleForm.directorName" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="RFID标签绑定" prop="rfid">
              <el-input v-model.trim="ruleForm.rfid">
                <template #append>
                  <el-button>扫描</el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="在用信息" prop="useSign">
              <el-input v-model.trim="ruleForm.useSign" />
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-row :gutter="24" class="marg">
          <el-col :span="4.5">
            <el-form-item label="组别信息" prop="groupName">
              <el-input v-model.trim="ruleForm.groupName" />
            </el-form-item>
          </el-col>
          <el-col :span="2.5">
            <el-input v-model.trim="ruleForm.fileNo" disabled />
          </el-col>
          <el-col :span="2.5">
            <el-input v-model.trim="ruleForm.fileNo" disabled />
          </el-col>
          <el-col :span="2.5">
            <el-input v-model.trim="ruleForm.fileNo" disabled />
          </el-col>
        </el-row> -->
        <el-row :gutter="24" class="marg">
          <el-col :span="6">
            <el-form-item label="安装位置" prop="installLocation">
              <el-input v-model.trim="ruleForm.installLocation" />
            </el-form-item>
          </el-col>
          <el-col :span="5">
              <el-input v-model.trim="ruleForm.installLocationExt" />
          </el-col>
        </el-row>
        <!-- <el-row :gutter="24" class="marg">
          <el-col :span="6">
            <el-form-item label="参试任务" prop="fileNo">
              <el-input v-model.trim="ruleForm.fileNo"/>
            </el-form-item>
          </el-col>
          <el-col :span="5">
              <el-input v-model.trim="ruleForm.fileNo" />
          </el-col>
          <el-col :span="1" v-if="dialogStatus !== 'detail'">
            <icon-button icon="icon-add" title="" />
          </el-col>
        </el-row> -->
        <el-row :gutter="24" class="marg">
          <el-col :span="12">
            <el-form-item label="备注" prop="remarkExt">
              <el-input v-model.trim="ruleForm.remarkExt" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </detail-block-com>
    <detail-block-com>
      <table-list ref="tableRef" :data="[]" :status="$route.params.type as string" />
    </detail-block-com>
  </app-container>
</template>

<style lang="scss" scoped>
// 样式
</style>