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

const ruleForm = ref({
}) // 表单
const radio = ref('基本信息')
console.log($route, 'route')
// 表单1验证规则
const rules1 = ref<FormRules>({

})
const rules2 = ref<FormRules>({

})
const rules3 = ref<FormRules>({

})
// 获取下拉框数据
const useStatusList = ref<{ id: string; value: string; name: string }[]>() // 使用状态
const levelList = ref<{ id: string; value: string; name: string }[]>() // 设备重要等级
const deviceTypeList = ref<{ id: string; value: string; name: string }[]>() // 设备分类
const inUseList = ref<{ id: string; value: string; name: string }[]>() // 设备在用信息
const fetchSelectData = () => {
  // 设备使用状态
  const fetchStatusList = () => {
    getDictByCode('eqptDeviceUseStatus').then((res) => {
      useStatusList.value = res.data
    })
  }
  // 设备重要等级
  const fetchLevelList = () => {
    getDictByCode('eqptDeviceLevel').then((res) => {
      levelList.value = res.data
    })
  }
  // 设备分类
  const fetchDeviceType = () => {
    getDictByCode('eqptDeviceType').then((res) => {
      deviceTypeList.value = res.data
    })
  }
  // 设备在用信息
  const fetchInUse = () => {
    getDictByCode('eqptDeviceInUse').then((res) => {
      inUseList.value = res.data
    })
  }
  fetchStatusList()
  fetchLevelList()
  fetchDeviceType()
  fetchInUse()
}
fetchSelectData()
// 加载组织机构树形下拉
const deptTreeList = ref()
const fetchDeptTree = () => {
  getDeptTreeList().then((res) => {
    if (res.data) { // 将列表转树结构
      deptTreeList.value = toTreeList(res.data, '0', true)
    }
  })
}

fetchDeptTree()
// 弹窗初始化
const initDialog = () => {
  dialogStatus.value = $route.params.type as string || 'detail'
  ruleFormRef.value?.resetFields()
  ruleFormRef1.value?.resetFields()
  ruleFormRef2.value?.resetFields()
  console.log(userStore)
  if ($route.params.type === 'create') {
    // ruleForm.value.createTime = dayjs().format('YYYY-MM-DD HH:mm:ss') // 创建时间
    // ruleForm.value.approvalType = '1'
    // ruleForm.value.approvalTypeName = '新建设备'
    // ruleForm.value.createUserId = userStore.id
    // ruleForm.value.createUserName = userStore.name
    // 获取当前用户所在单位
    // getUserDept().then((res) => {
    //   console.log(res.data, '用户所在单位')
    //   // fullName
    //   ruleForm.value.companyId = res.data.id
    //   ruleForm.value.companyName = res.data.fullName
    // })
  }
}
onMounted(() => {
  initDialog()
})
// 关闭弹窗
const close = () => {
  $router.back()
}
const annexRef = ref()
// 保存
const saveForm = async (formEl: FormInstance | undefined, formEl1: FormInstance | undefined, formEl2: FormInstance | undefined) => {
  console.log(formEl, formEl1)
  if (!formEl || !formEl1 || !formEl2) { return }
  Promise.all([formEl.validate(), formEl1.validate(), formEl2.validate()]).then(() => {
    // 验证表格
    if (tableRef.value.checkCertificateList() && technologyRef.value.checkCertificateList()) {
      ElMessageBox.confirm(
        '确认保存吗？',
        '提示',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        },
      ).then((res) => {
        // ruleForm.value.attachments = tableRef.value.list
        // ruleForm.value.technicalTargetList = technologyRef.value.list
        // if (!ruleForm.value.groupInfos.length) {
        //   ruleForm.value.groupInfos = null
        // }
        // if ($route.path.includes('speciallist')) {
        //   //  特种设备
        //   // ruleForm.value.certificateList = certificateRef.value.list
        // }
        // editInfo(ruleForm.value).then((res) => {
        //   submitId.value = res.data
        //   if (statusName === '已取消' || statusName === '未通过') {
        //     submitInfo({ id: submitId.value, formId: SCHEDULE.DEVICE_INFO_APPROVAL }).then((res) => {
        //       ElMessage.success('已提交')
        //       close()
        //     })
        //   }
        //   else {
        //     ElMessage.success('保存成功')
        //   }
        // })
      })
    }
  })
}
// 提交
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 editForm = () => {
  // $route.params.type = dialogStatus.value
  // mainPage.reload()
  // $router.push({
  //   path: `/dinfo/${dialogStatus.value}`,
  //   query: {
  //     row: $route.query.row,
  //     statusName,
  //   },
  // })
  // document.getElementById('reload-btn')?.click()
  $router.push({
    // params: { ...$route.params, type: 'update' },
    path: `/${$route.query.equipmentType === '1' ? 'dinfo' : 'speciallist'}/update`,
    query: { ...$route.query },
  })
  initDialog()
  // document.getElementById('reload-btn')?.click()
}
// 删除
const delForm = () => {
  ElMessageBox.confirm(
    '确认删除设备信息吗?',
    '确认',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    },
  ).then(() => {
    deleteInfo({ id: ruleForm.value.id }).then((res) => {
      ElMessage.success('操作成功')
      close()
    })
  })
}
// 取消
const cancelForm = () => {
  ElMessageBox.confirm(
    '确认取消吗?',
    '确认',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    },
  ).then(() => {
    cancelInfo({ id: ruleForm.value.id, processInstanceId: ruleForm.value.processId, comments: '' }).then((res) => {
      ElMessage.success('操作成功')
      close()
    })
  })
}
// 审批
const approvalDialogRef = ref()
const apply = (type: string) => {
  const data = JSON.parse($route.query.row as string)
  approvalDialogRef.value.initDialog(type, data.taskId, data.processId, ruleForm.value.id)
}
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.value.instructionsFile = ruleForm.value.instructionsFile ? `${ruleForm.value.instructionsFile},${res.data[0]}` : res.data[0]
        console.log(ruleForm.value.instructionsFile, 'ruleForm.value.instructionsFile')
        // 重置当前验证
        ruleFormRef.value?.clearValidate('minioFileName')
        ElMessage.success('文件上传成功')
        loading.close()
      }
      else {
        ElMessage.error(res.message)
        loading.close()
      }
    })
  }
}
const upload = () => {
  fileRef.value.click()
}
const print = () => {

}
defineExpose({ ruleForm, apply, editForm, submitForm, saveForm, delForm, print, cancelForm })
</script>

<template>
  <app-container style="overflow: hidden;">
    <approval-dialog ref="approvalDialogRef" @on-success="() => { $router.back() }" />
    <detail-page class="base-info-device" :title="`${'申请'}-${textMap[dialogStatus]}`">
      <template #btns>
        <!-- <el-button v-if="statusName === '待审批'" type="primary" @click="apply('agree')">
          同意
        </el-button>
        <el-button v-if="statusName === '待审批'" type="primary" @click="apply('refuse')">
          拒绝
        </el-button>
        <el-button v-if="editBtn(statusName, dialogStatus)" type="primary" @click="editForm()">
          编辑
        </el-button>
        <el-button v-if="submitBtn(statusName, dialogStatus) && statusName !== '已取消' && statusName !== '未通过'" type="primary" @click="submitForm()">
          提交
        </el-button>
        <el-button v-if="submitBtn(statusName, dialogStatus)" type="primary" @click="saveForm(ruleFormRef, ruleFormRef1, ruleFormRef2)">
          保存
        </el-button>
        <el-button v-if="statusName === '已通过'" type="primary" @click="print">
          打印
        </el-button>
        <el-button v-if="statusName === '已取消' || statusName === '审批'" type="info" @click="delForm()">
          删除
        </el-button>
        <el-button v-if="statusName === '审批中'" type="info" @click="cancelForm()">
          取消
        </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" :disable="$route.path.includes('detail')">
        <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.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="rules1" label-position="right" label-width="110px" class="form"
        :class="[dialogStatus === 'detail' ? 'isDetail' : '']" :disabled="$route.path.includes('detail')"
      >
        <el-row :gutter="24" class="marg">
          <el-col :span="6">
            <el-form-item label="统一编号">
              <el-input v-model.trim="ruleForm.equipmentNo" placeholder="">
                <template #append>
                  <span>选择</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="设备名称" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="型号规格" prop="usageStatus">
              <el-input v-model.trim="ruleForm.equipmentName" placeholder="型号规格" />
              <!-- <el-select v-model="ruleForm.usageStatus" placeholder="选择使用状态" style="width: 100%;">
                <el-option v-for="item in useStatusList" :key="item.id" :label="item.name" :value="item.value" />
              </el-select> -->
            </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-row>
        <el-row :gutter="24" class="marg">
          <el-col :span="6">
            <el-form-item label="生产国家" prop="productCountry">
              <el-input v-model.trim="ruleForm.productCountry" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="生产厂家" prop="manufacturer">
              <el-input v-model.trim="ruleForm.manufacturer" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="出厂编号" prop="manufactureNo">
              <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"
                value-format="YYYY-MM-DD" placeholder="请选择生产日期" class="normal-date" style="width: 100%;"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="marg">
          <el-col :span="8">
            <el-form-item label="技术指标" prop="unitPrice">
              <el-input v-model.trim="ruleForm.unitPrice">
                <template #append>
                  万元
                </template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </detail-block-com>
    <detail-block-com>
      <annex-list ref="annexRef" :data="[]" :status="$route.params.type as string" />
    </detail-block-com>
    <detail-block-com>
      <el-form label-position="right" label-width="110px" class="form" :disable="$route.path.includes('detail')">
        <el-row :gutter="24" class="marg">
          <el-col :span="8">
            <el-form-item label="设备性能状态">
              <el-input v-model.trim="ruleForm.approvalTypeName" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="marg">
          <el-col :span="8">
            <el-form-item label="封存原因">
              <el-input v-model.trim="ruleForm.approvalTypeName" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="marg">
          <el-col :span="8">
            <el-form-item label="封存地点">
              <el-input v-model.trim="ruleForm.approvalTypeName" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="marg">
          <el-col :span="8">
            <el-form-item label="封存时间">
              <el-input v-model.trim="ruleForm.approvalTypeName" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </detail-block-com>
  </app-container>
</template>

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