<!-- 故障维修新建修改页面 -->
<script lang="ts" setup name="MainTainEdit">
import type { FormInstance, FormRules, UploadUserFile } from 'element-plus'
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import dayjs from 'dayjs'
import selectDevice from '@/views/tested/device/group/components/selectDevice.vue'
import { addMaintain, detailMaintain, updateMaintain } from '@/api/eqpt/status/maintain'
import useUserStore from '@/store/modules/user'
import { getInfoDetail } from '@/api/eqpt/device/info'
import annexList from '@/views/tested/status/delay/components/annexList.vue'
const $route = useRoute()
const $router = useRouter()
const userStore = useUserStore()
const ruleFormRef = ref<FormInstance>() // from组件
// 显示标题
const dialogStatus = ref('create')
const textMap: { [key: string]: string } = {
  update: '编辑',
  create: '新增',
  detail: '详情',
}
const ruleForm = ref({
  attachments: [],
  companyId: '',
  companyName: '',
  createTime: '',
  createUserId: '',
  createUserName: '',
  deptId: '',
  deptName: '',
  equipmentId: '',
  equipmentName: '',
  equipmentNo: '',
  faultDescription: '',
  id: '',
  maintainContent: '',
  manufactureNo: '',
  model: '',
  remark: '',
  updateTime: '',
  usePosition: '',
  usePositionId: '',
  manufacturer: '',
})
// 表单1验证规则
const rules = ref<FormRules>({
  equipmentNo: [{ required: true, message: '设备必选', trigger: ['blur', 'change'] }],
  faultDescription: [{ required: true, message: '故障描述必填', trigger: ['blur', 'change'] }],
  maintainContent: [{ required: true, message: '维修内容必填', trigger: ['blur', 'change'] }],
})
const initDialog = () => {
  dialogStatus.value = $route.params.type as string
  if (!$route.path.includes('create')) {
    detailMaintain({ id: $route.query.id as string }).then((res) => {
      ruleForm.value = res.data
    })
  }
  else {
    ruleForm.value.createUserId = userStore.id
    ruleForm.value.createUserName = userStore.name
    ruleForm.value.createTime = dayjs().format('YYYY-MM-DD HH:mm:ss') // 创建时间
  }
}
onMounted(() => {
  initDialog()
})
// 关闭弹窗
const close = () => {
  $router.back()
}
// 新建
const createRow = () => {
  addMaintain(ruleForm.value).then(() => {
    ElMessage.success('添加成功')
    close()
  })
}
// 编辑
const updateRow = () => {
  updateMaintain(ruleForm.value).then(() => {
    ElMessage.success('添加成功')
    close()
  })
}
// 保存
const saveForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) { return }
  Promise.all([Promise.all([formEl.validate()])]).then(() => {
    // 验证表格
    ElMessageBox.confirm(
      '确认保存吗？',
      '提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      },
    ).then((res) => {
      if (dialogStatus.value === 'create') {
        createRow()
      }
      else {
        updateRow()
      }
    })
  })
}
// 选择设备
const deviceRef = ref()
const selectDeviceFun = () => {
  deviceRef.value.initDialog()
}
const confirm = (row: any) => {
  const data = row
  console.log(row, 'rowrowrow')
  ruleForm.value.equipmentNo = data.equipmentNo
  ruleForm.value.equipmentName = data.equipmentName
  ruleForm.value.equipmentId = data.id
  ruleForm.value.model = data.model
  ruleForm.value.companyName = data.companyName
  ruleForm.value.companyId = data.companyId
  // ruleForm.value.productCountry = data.productCountry
  ruleForm.value.manufacturer = data.manufacturer
  ruleForm.value.manufactureNo = data.manufactureNo
  // ruleForm.value.productDate = data.productDate
  // ruleForm.value.productDate = data.productDate
  ruleForm.value.manufactureNo = data.manufactureNo
  ruleForm.value.deptId = data.deptId
  ruleForm.value.deptName = data.deptName
  ruleForm.value.companyName = data.companyName
  ruleForm.value.usePosition = data.usePosition
  ruleForm.value.usePositionId = data.usePositionId
  // 获取设备 技术指标信息
  getInfoDetail({ equipmentId: row.id }).then((res) => {
    ruleForm.value.attachments = res.data.attachments
  })
}
</script>

<template>
  <app-container style="overflow: hidden;">
    <!-- 选择设备弹窗 -->
    <select-device ref="deviceRef" :limit="10" :need-status="true" status-type="custom" @add="confirm" />
    <detail-page class="base-info-device" :title="`故障维修-${textMap[dialogStatus]}`">
      <template #btns>
        <el-button v-if="!$route.path.includes('detail')" type="primary" @click="saveForm(ruleFormRef)">
          保存
        </el-button>
        <el-button type="info" @click="close()">
          关闭
        </el-button>
      </template>
    </detail-page>
    <el-form
      ref="ruleFormRef" :model="ruleForm" :rules="rules" label-position="right" label-width="110px" class="form"
      :class="[$route.path.includes('detail') ? 'isDetail' : '']" :disabled="$route.path.includes('detail')"
    >
      <detail-block-com>
        <el-row :gutter="24" class="marg">
          <el-col :span="6">
            <el-form-item label="统一编号" prop="equipmentNo">
              <el-input v-model.trim="ruleForm.equipmentNo" placeholder="" @focus="selectDeviceFun">
                <template v-if="!$route.path.includes('detail')" #append>
                  <span @click="selectDeviceFun">选择</span>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="设备名称" prop="equipmentName">
              <el-input v-model.trim="ruleForm.equipmentName" :placeholder="$route.path.includes('create') ? '设备名称' : ''" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="规格型号" prop="model">
              <el-input v-model.trim="ruleForm.model" :placeholder="$route.path.includes('create') ? '规格型号' : ''" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="出厂编号" prop="manufactureNo">
              <el-input v-model.trim="ruleForm.manufactureNo" :placeholder="$route.path.includes('create') ? '出厂编号' : ''" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="marg">
          <el-col :span="6">
            <el-form-item label="生产厂家" prop="manufacturer">
              <el-input v-model.trim="ruleForm.manufacturer" :placeholder="$route.path.includes('create') ? '生产厂家' : ''" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="所在单位">
              <el-input v-model.trim="ruleForm.companyName" :placeholder="$route.path.includes('create') ? '所在单位' : ''" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="使用部门">
              <el-input v-model.trim="ruleForm.deptName" :placeholder="$route.path.includes('create') ? '使用部门' : ''" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="使用岗位">
              <el-input v-model.trim="ruleForm.usePosition" :placeholder="$route.path.includes('create') ? '使用岗位' : ''" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="marg">
          <el-col :span="24">
            <el-form-item label="维修内容" prop="maintainContent">
              <el-input v-model="ruleForm.maintainContent" :placeholder="$route.path.includes('create') ? '维修内容' : ''" :rows="1" type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="marg">
          <el-col :span="24">
            <el-form-item label="故障描述" prop="faultDescription">
              <el-input v-model="ruleForm.faultDescription" :placeholder="$route.path.includes('create') ? '故障描述' : ''" :rows="3" type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>
      </detail-block-com>
      <detail-block-com v-if="ruleForm.attachments.length">
        <annex-list ref="annexRef" :data="ruleForm.attachments" :status="$route.params.type as string" />
      </detail-block-com>
    </el-form>
  </app-container>
</template>