<!-- 新增或详情弹窗 设备借用处理新增编辑 -->
<script lang="ts" setup name="TemplateAdd">
import { ElMessage, ElMessageBox, dayjs } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import type { EquipmentListRow } from './status-interface'
// import addRow from './addRow.vue'
import SelectDeviceDialog from './selectDeviceDialog.vue'
import type { deptType, selectType } from '@/views/device/standingBook/standingBook-interface'
import showPhoto from '@/views/system/tool/showPhoto.vue'
import { UploadFile } from '@/api/measure/file'
import { getDictByCode } from '@/api/system/dict'
import { getUserList } from '@/api/system/user'
import { getDeptTreeList } from '@/api/system/dept'
import { toTreeList } from '@/utils/structure'
import type { userType } from '@/views/system/user/user-interface'
import { addStatus, detailStatus, submitStatus, updateRejectStatus, updateStatus } from '@/api/device/stateManage'
import useUserStore from '@/store/modules/user'
import { SCHEDULE } from '@/utils/scheduleDict'
import { cancelApproval, fetchApproval } from '@/api/approval'

const user = useUserStore() // 用户信息
const $route = useRoute()
const userInfo = useUserStore()
const $router = useRouter()
const ruleFormRef1 = ref() // from组件
const ruleFormRef2 = ref() // from组件
const title = ref('')
const name = ref('')
const isMulti = ref(false) // 是否批量添加(允许多选)
const dialogSelectDiviceVisible = ref(false) // 控制选择设备对话框显隐
const processId = ref('')
const _approvalStatusName = $route.query.approvalStatusName
const _title = $route.query.title
// 状态管理
const ruleForm = ref({
  applyType: $route.query.applyType, // 申请类型
  remark: '', // 申请说明
  time: '', // 时间
  fileList: [] as any[], //	说明书
  applyUnit: '', // 申请单位
  applyPerson: '', // 申请人
  applyPersonName: '', // 申请人名称
  applyUnitName: '', // 申请单位名称
  applyNo: '', // 申请单编号
  applyName: '', // 申请单名称
  assetOriginValue: '', // 资产原值
  financialValue: '', // 财务净值
  equipmentNo: '', // 设备编号
  equipmentName: '', // 设备名称
  modelNo: '', // 型号
  equipmentSpecifications: '', // 设备规格
  manufacturingNo: '', // 出厂编号
  manufacturer: '', // 生产厂家
  equipmentId: '',
  equipmentList: [] as EquipmentListRow[],
  id: '',
})

const rules1 = ref<FormRules>({
  // applyUnit: [{ required: true, message: '申请单位必填', trigger: 'blur' }],
  // applyPerson: [{ required: true, message: '申请人必填', trigger: 'blur' }],
  equipmentNo: [{ required: true, message: '设备编号必填', trigger: 'blur' }],
  time: [{ required: true, message: '时间必填', trigger: 'blur' }],
  // applyName: [{ required: true, message: '申请单名称必填', trigger: 'blur' }],
  assetOriginValue: [{ required: true, message: '资产原值必填', trigger: 'blur' },
    { pattern: /(^[0-9](\d+)?(\.\d{1,2})?$)|(^\d\.\d{1,2}$)/, message: '要求不小于0，且最多保留两位小数', trigger: ['blur', 'change'] }],
  financialValue: [{ required: true, message: '财务净值必填', trigger: 'blur' },
    { pattern: /(^[0-9](\d+)?(\.\d{1,2})?$)|(^\d\.\d{1,2}$)/, message: '要求不小于0，且最多保留两位小数', trigger: ['blur', 'change'] }],
})
watch(() => ruleForm.value, (newVal) => {
  if (name.value === '详情') {
    if (newVal.applyUnit) {
      ruleFormRef1.value.validateField('applyUnit')
    }
    if (newVal.applyPerson) {
      ruleFormRef1.value.validateField('applyPerson')
    }
  }
}, {
  deep: true,
  immediate: true,
})
const assetTypeList = ref<selectType[]>([]) // 资产类型
const ABCList = ref<selectType[]>([]) // ABC
const mesureTypeList = ref<selectType[]>([]) // 检定方式
const majorCategoryList = ref<selectType[]>([]) // 专业分类
const equipmentCategoryList = ref<selectType[]>([]) // 设备类别
const mesureResultList = ref<selectType[]>([]) //  检定结果
const equipmentTypeList = ref<selectType[]>([]) // 设备类型
const managerLevelList = ref<selectType[]>([]) // 管理级别
const depreciationMethodList = ref<selectType[]>([]) // 折旧方法
const managerStateList = ref<selectType[]>([]) // 管理状态
const capitalSourceList = ref<selectType[]>([]) // 资本来源
const usePersonList = ref<userType[]>([]) // 使用人列表
const useDeptList = ref<deptType[]>([]) // 使用部门列表
const useDeptListNoTree = ref([]) // 使用部门列表非树结构
// 获取字典
const fetchData = () => {
// 获取资产类型
  getDictByCode('assetType').then((response) => {
    assetTypeList.value = response.data
  })
  // 获取ABC
  getDictByCode('ABC').then((response) => {
    ABCList.value = response.data
  })
  // 获取检定方式
  getDictByCode('mesureType').then((response) => {
    mesureTypeList.value = response.data
  })
  // 获取专业分类
  getDictByCode('majorCategory').then((response) => {
    majorCategoryList.value = response.data
  })
  // 获取检定结果
  getDictByCode('mesureResult').then((response) => {
    mesureResultList.value = response.data
  })
  // 获取设备类别
  getDictByCode('equipmentCategory').then((response) => {
    equipmentCategoryList.value = response.data
  })
  // 获取设备类型
  getDictByCode('equipmentType').then((response) => {
    equipmentTypeList.value = response.data
  })
  // 获取管理级别
  getDictByCode('managerLevel').then((response) => {
    managerLevelList.value = response.data
  })
  // 获取折旧方法
  getDictByCode('depreciationMethod').then((response) => {
    depreciationMethodList.value = response.data
  })
  // 获取管理状态
  getDictByCode('managerState').then((response) => {
    managerStateList.value = response.data
  })
  // 获取资本来源
  getDictByCode('capitalSource').then((response) => {
    capitalSourceList.value = response.data
  })
  // 获取用户列表
  getUserList({ offset: 1, limit: 99999 }).then((res) => {
    usePersonList.value = res.data.rows
  })
  // 获取部门列表
  getDeptTreeList().then((res) => {
    // 转成树结构
    useDeptList.value = toTreeList(res.data, '0', true)
    useDeptListNoTree.value = res.data
  })
}

// 弹窗初始化
const initDialog = (row: any) => {
  title.value = row.title
  name.value = row.name
  fetchData()
  // 状态管理
  if ($route.query.title !== '新建') {
    detailStatus({ id: $route.params.id }).then((res) => {
      processId.value = res.data.processId // 流程id存在的时候赋值
      ruleForm.value = res.data
      ruleForm.value.applyUnit = res.data.applyUnit
      ruleForm.value.equipmentNo = res.data.applyNo
      ruleForm.value.equipmentName = res.data.equipmentName
      ruleForm.value.time = res.data.time
      if (res.data.approvalStatusName !== '草稿箱') {
        getApprovalRecord(res.data.processId) // 查询审批记录
      }
    })
  }
}
const approvalRecordData = ref([]) // 审批流程数据
// 查询审批记录
function getApprovalRecord(processId: string) {
  if (title.value !== '新建') {
    if (processId) {
      fetchApproval(processId).then((res) => {
        approvalRecordData.value = res.data
      })
    }
    else {
      ElMessage.warning('流程实例id为空')
    }
  }
}

// 关闭弹窗
const close = () => {
  $router.back()
}

// 状态管理编辑
const statusManageEdit = () => {
  if (title.value == '编辑') {
    if (ruleForm.value.equipmentList && ruleForm.value.equipmentList[0]) {
      ruleForm.value.equipmentId = ruleForm.value.equipmentList[0].equipmentId
      // delete ruleForm.value.equipmentList
    }
    updateStatus(ruleForm.value).then((res) => {
      if (res.code === 200) {
        ElMessage.success('操作成功!')
        $router.back()
      }
      else {
        ElMessage.warning(res.message)
      }
    })
  }
}

// 驳回编辑
const statusManageRejectEdit = () => {
  if (title.value == '编辑') {
    if (ruleForm.value.equipmentList && ruleForm.value.equipmentList[0]) {
      ruleForm.value.equipmentId = ruleForm.value.equipmentList[0].equipmentId
      // delete ruleForm.value.equipmentList
    }
    updateRejectStatus(ruleForm.value).then((res) => {
      if (res.code === 200) {
        ElMessage.success('操作成功!')
        $router.back()
      }
      else {
        ElMessage.warning(res.message)
      }
    })
  }
}
// 新建 状态管理保存
const statusManageSave = async (formEl1: FormInstance | undefined) => {
  if (!formEl1) { return }
  await formEl1.validate((valid, fields) => {
    if (valid) {
      ElMessageBox.confirm(
        '确认保存吗？',
        '提示',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        },
      ).then((res) => {
        ruleForm.value.equipmentList[0].assetOriginValue = ruleForm.value.assetOriginValue
        ruleForm.value.equipmentList[0].financialValue = ruleForm.value.financialValue
        addStatus(ruleForm.value).then((res) => {
          if (res.code === 200) {
            ElMessage.success('操作成功!')
            ruleForm.value.id = res.data
          }
          else {
            ElMessage.warning(res.message)
          }
        })
      })
    }
  })
}

// 新建 状态管理提交
const statusManageSubmit = async (formEl1: FormInstance | undefined) => {
  if (ruleForm.value.id === '') {
    ElMessage.warning('请保存之后再提交!')
    return
  }
  if (!formEl1) { return }
  await formEl1.validate((valid, fields) => {
    if (valid) {
      ElMessageBox.confirm(
        '确认提交吗？',
        '提示',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        },
      ).then((res) => {
        submitStatus({
          formId: $route.query.formId as string,
          id: ruleForm.value.id,
          processId: '',
        }).then((res) => {
          if (res.code === 200) {
            ElMessage.success('操作成功!')
            $router.back()
          }
          else {
            ElMessage.warning(res.message)
          }
        })
      })
    }
  })
}
// 取消
const resetForm = () => {
  close()
}
// 编辑当前
const editForm = () => {
  // 并且隐藏编辑按钮
  title.value = '编辑'
}
const fileRef = ref() // 文件上传input
const onFileChange = (event: any) => {
  // 原生上传
  // console.log(event.target.files)
  const files = event.target.files
  if (files.length !== 0) {
    // 创建formdata对象
    const fd = new FormData()
    for (var i = 0; i < files.length; i++) {
      fd.append('multipartFile', files[i])
    }
    UploadFile(fd).then((res) => {
      console.log(res)
      if (res.code === 200 && res.data.length >= 1) {
        for (const item of res.data) {
          ruleForm.value.fileList.push({
            assetId: '',
            fileName: item,
            minioFileName: item,
          // id: '',
          })
        }
        ruleFormRef1.value?.clearValidate('minioFileName')
        // 重置当前验证
        ElMessage.success('文件上传成功')
      }
      else {
        ElMessage.error(res.message)
      }
    })
  }
}

const del = (index: any) => {
  ruleForm.value.fileList.splice(index, 1)
}
const upload = () => {
  fileRef.value.click()
}

// 已取消状态
const isCancel = computed(() => {
  if ($route.query?.approvalStatus === '6' || $route.query?.approvalStatusName === '已取消') {
    return true
  }
  else {
    return false
  }
})

// 设备状态管理
const addRowBtn = () => {
  dialogSelectDiviceVisible.value = true // 选择设备对话框显隐
  isMulti.value = false // 是否单选, false单选、true表格多选
}

// 选择设备对话框关闭
const closeDialog = () => {
  dialogSelectDiviceVisible.value = false
}

// 选择好设备了, 添加选好的设备到表格中
const updateDeviceConfirm = (val: any) => {
  // // 如果是状态管理
  const device = val[0]
  ruleForm.value.equipmentNo = device.equipmentNo // 设备编号
  ruleForm.value.equipmentName = device.equipmentName // 设备名称
  ruleForm.value.modelNo = device.modelNo // 型号
  ruleForm.value.equipmentSpecifications = device.equipmentSpecifications as string
  ruleForm.value.manufacturingNo = device.manufacturingNo as string
  ruleForm.value.manufacturer = device.manufacturer as string
  ruleFormRef1.value.clearValidate('equipmentNo')
  // 赋值
  ruleForm.value.equipmentList = [{
    equipmentId: device.id as string,
  }]
  return false
}

onMounted(() => {
  initDialog($route.query)
  console.log(name.value, 'pppppp')
  const tempName = name.value.substring(2, 4)
  ruleForm.value.applyName = `设备${tempName}申请` // 申请名称固定
  ruleForm.value.applyUnit = user.deptId // 申请单位
  ruleForm.value.applyUnitName = user.deptName // 申请单位名称
  ruleForm.value.applyPerson = user.id // 申请人
  ruleForm.value.applyPersonName = user.name // 申请人名称
})
</script>

<template>
  <app-container style="overflow: hidden;">
    <detail-page :title="`${name}-${title}`">
      <template #btns>
        <!-- 状态管理 -->
        <template>
          <!-- 新建 -->
          <el-button v-if="title === '新建'" type="primary" @click="statusManageSubmit(ruleFormRef1)">
            提交
          </el-button>
          <el-button v-if="title === '新建'" type="primary" @click="statusManageSave(ruleFormRef1)">
            保存
          </el-button>
          <!-- 草稿箱 + 已取消 -->
          <el-button v-if="_approvalStatusName === '草稿箱' || _approvalStatusName === '已取消'" type="primary" @click="statusManageEdit">
            保存
          </el-button>
          <!-- 未通过-驳回 -->
          <el-button v-if="title === '编辑' && _approvalStatusName === '未通过-驳回'" type="primary" @click="statusManageRejectEdit">
            保存
          </el-button>
          <!-- 待审批 -->
          <!-- <el-button v-if="title === '详情' && _approvalStatusName === '待审批'" type="primary" @click="approval({ id: ruleForm2.id, type: 'agree' })">
            同意
          </el-button>
          <el-button v-if="title === '详情' && _approvalStatusName === '待审批'" type="primary" @click="approval({ id: ruleForm2.id, type: 'reject' })">
            驳回
          </el-button>
          <el-button v-if="title === '详情' && _approvalStatusName === '待审批'" type="primary" @click="approval({ id: ruleForm2.id, type: 'refuse' })">
            拒绝
          </el-button> -->
          <!-- </template> -->
        </template>
        <el-button v-if="(title === '详情' && $route.query?.approvalStatusName === '草稿箱' && isCancel)" type="primary" @click="editForm">
          编辑
        </el-button>
        <!-- <el-button v-if="isCancel" type="primary" @click="deleteForm">
          删除
        </el-button> -->
        <el-button type="info" @click="resetForm()">
          关闭
        </el-button>
      </template>
      <!-- 状态管理 -->
      <el-form ref="ruleFormRef1" :model="ruleForm" :rules="rules1" label-position="right" label-width="110px" class="form" :class="[title === '详情' ? 'isDetail' : '']">
        <el-row :gutter="24" class="marg">
          <el-col :span="6">
            <el-form-item label="申请单编号" prop="applyNo">
              <el-input v-model.trim="ruleForm.applyNo" :placeholder="title === '详情' ? '' : '系统自动生成'" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="申请单名称" prop="applyName">
              <el-input v-model.trim="ruleForm.applyName" disabled :placeholder="title === '详情' ? '' : '申请单名称'" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="申请人" prop="applyPerson">
              <el-select v-model="ruleForm.applyPerson" :placeholder="title === '详情' ? '' : '申请人'" disabled style="width: 100%;">
                <el-option v-for="item in usePersonList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="申请单位" prop="applyUnit">
              <dept-select v-model="ruleForm.applyUnit" :data="useDeptList" :placeholder="title === '详情' ? '' : '申请单位'" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="marg">
          <el-col :span="6">
            <el-form-item label="设备编号" prop="equipmentNo" class="equipmentNo">
              <el-input v-model.trim="ruleForm.equipmentNo" :placeholder="title === '详情' ? '' : '设备名称'" disabled>
                <template v-if="title !== '详情'" #append>
                  <el-button type="primary" size="small" @click="addRowBtn">
                    选择
                  </el-button>
                </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="title === '详情' ? '' : '设备名称'" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="型号" prop="modelNo">
              <el-input v-model.trim="ruleForm.modelNo" :placeholder="title === '详情' ? '' : '型号'" disabled />
            </el-form-item>
          </el-col>
          <!-- <el-col :span="6">
            <el-form-item label="设备规格" prop="equipmentSpecifications">
              <el-input v-model.trim="ruleForm.equipmentSpecifications" :placeholder="title === '详情' ? '' : '设备规格'" disabled />
            </el-form-item>
          </el-col> -->
          <el-col :span="6">
            <el-form-item label="出厂编号" prop="manufacturingNo">
              <el-input v-model.trim="ruleForm.manufacturingNo" :placeholder="title === '详情' ? '' : '出厂编号'" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="生产厂家" prop="manufacturer">
              <el-input v-model.trim="ruleForm.manufacturer" :placeholder="title === '详情' ? '' : '生产厂家'" disabled />
            </el-form-item>
          </el-col>
          <el-col v-if="name.substring(2, 4) !== '处置'" :span="6">
            <el-form-item :label="`${name.substring(2, 4)}开始时间`" prop="time">
              <el-date-picker
                v-model="ruleForm.time" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD hh:mm" :disabled="title === '详情'"
                :placeholder="title === '详情' ? '' : `${name.substring(2, 4)}开始时间`"
                style="width: 100%;"
              />
            </el-form-item>
          </el-col>
          <el-col v-else :span="6">
            <el-form-item label="报废时间" prop="time">
              <el-date-picker
                v-model="ruleForm.time" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD hh:mm" :disabled="title === '详情'"
                placeholder="报废时间"
                style="width: 100%;"
              />
            </el-form-item>
          </el-col>
          <el-col v-if="name.substring(2, 4) === '处置'" :span="6">
            <el-form-item label="资产原值(元)" prop="assetOriginValue">
              <el-input v-model.trim="ruleForm.assetOriginValue" :placeholder="title === '详情' ? '' : '资产原值'" :disabled="title === '详情'" />
            </el-form-item>
          </el-col>
          <el-col v-if="name.substring(2, 4) === '处置'" :span="6">
            <el-form-item label="财务净值(元)" prop="financialValue">
              <el-input v-model.trim="ruleForm.financialValue" :placeholder="title === '详情' ? '' : '财务净值'" :disabled="title === '详情'" />
            </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" type="textarea" autosize :placeholder="title === '详情' ? '' : '申请理由'" :disabled="title === '详情'" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="marg">
          <el-col :span="24">
            <el-form-item label="附件" prop="minioFileName">
              <el-button v-if="title !== '详情'" type="primary" :disabled="title === '详情'" @click="upload">
                上传
              </el-button>
              <div style="display: flex;">
                <show-photo v-for="(item, index) in ruleForm.fileList" :key="item" :index="index" :minio-file-name="item.minioFileName || ''" style="display: inline-block;margin: 10px;">
                  <span v-if="title !== '详情'" class="photo-close" @click="del(index)">×</span>
                </show-photo>
              </div>
              <input v-show="title === ''" ref="fileRef" multiple type="file" @change="onFileChange">
              <span v-if="title === '详情' && !ruleForm.fileList[0]?.minioFileName">无</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </detail-page>
    <detail-block v-if="title !== '新建' && _approvalStatusName !== '草稿箱'" title="审批流程">
      <!-- 审批流程 -->
      <approval-record ref="approvalRecord" :approval-record-data="approvalRecordData" />
    </detail-block>
    <select-device-dialog
      :dialog-select-divice-visible="dialogSelectDiviceVisible"
      :is-multi="isMulti"
      @close-dialog="closeDialog"
      @updateDeviceConfirm="updateDeviceConfirm"
    />
  </app-container>
</template>

<style lang="scss" scoped>
.equipmentNo {
  position: relative;

  .equipmentNo-item {
    position: absolute;
    top: 0;
    right: 0;
  }
}

:deep(.el-checkbox__label) {
  display: none;
}

.isDetail {
  ::v-deep {
    .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap > .el-form-item__label::before,
    .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label::before {
      display: none;
    }
  }
}
</style>