<!-- 新增或详情弹窗 -->
<script lang="ts" setup name="add">
import { ElMessage, ElMessageBox, dayjs } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import type { EquipmentListRow, IdeviceList, IdeviceListQuery } from './status-interface'
// import addRow from './addRow.vue'
import SelectDeviceDialog from './selectDeviceDialog.vue'
import approveAction from './approvalActionDialog.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 { addApply, deleteApply, detailApply, editApply, submitApply } from '@/api/device/borrow'
import { addStatus, detailStatus, updateStatus } from '@/api/device/stateManage'
import type { borrowDeviceType } from '@/views/device/borrow/borrow'
import useUserStore from '@/store/modules/user'
import { SCHEDULE } from '@/utils/scheduleDict'
import type { TableColumn } from '@/components/NormalTable/table_interface'

const userInfo = useUserStore()
const $router = useRouter()
const $route = useRoute()
const ruleFormRef1 = ref() // from组件
const ruleFormRef2 = ref() // from组件
const title = ref('')
const name = ref('')
const isMulti = ref(false) // 是否批量添加(允许多选)
const dialogSelectDiviceVisible = ref(false) // 控制选择设备对话框显隐
const selectIndex = ref() // 点击选择的index--点击第几行
const borrowList = ref<IdeviceList[]>([])
const processId = ref('')
// 状态管理
const ruleForm1 = ref({
  applyType: $route.query.applyType, // 申请类型
  remark: '', // 申请说明
  time: '', // 时间
  fileList: [] as any[], //	说明书
  applyUnit: '', // 申请单位
  applyPerson: '', // 申请人
  equipmentNo: '', // 设备编号
  equipmentName: '', // 设备名称
  modelNo: '', // 型号
  equipmentSpecifications: '', // 设备规格
  manufacturingNo: '', // 出厂编号
  manufacturer: '', // 生产厂家
  equipmentId: '',
  equipmentList: [] as EquipmentListRow[],
  id: '',
})
// 设备借用表单
const ruleForm2 = ref({
  applyUnit: '', // 申请单位
  applyPerson: '', // 申请人
  time: '', // 借用时间
  applyDesc: '', // 申请说明
  applyType: '', // 申请类型
  applyName: '', // 申请名称
  createUser: userInfo.$state.id,
  createTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
  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: `${name.value.substring(2, 4)}时间不能为空`, trigger: 'blur' }],
  applyName: [{ required: true, message: '申请名称不能为空', trigger: 'blur' }],
})
watch(() => ruleForm1.value, (newVal) => {
  if (name.value === '详情') {
    if (newVal.applyUnit) {
      ruleFormRef1.value.validateField('applyUnit')
    }
    if (newVal.applyPerson) {
      ruleFormRef1.value.validateField('applyPerson')
    }
  }
}, {
  deep: true,
  immediate: true,
})
const rules2 = ref<FormRules>({
  applyUnit: [{ required: true, message: '申请单位不能为空', trigger: 'blur' }],
  applyPerson: [{ required: true, message: '申请人不能为空', trigger: 'blur' }],
  time: [{ required: true, message: '借用时间不能为空', trigger: 'blur' }],
  applyName: [{ required: true, message: '申请名称不能为空', trigger: 'blur' }],
})
const ruleArr = ['applyUnit', 'applyPerson', 'time', 'applyName']
watch(() => ruleForm2.value, (newVal: { [key: string]: string }, oldVal) => {
  if (name.value === '详情') {
    for (const key in newVal) {
      if (newVal[key]) {
        ruleArr.includes(key) ? ruleFormRef2.value.validateField(key) : ''
      }
    }
  }
}, {
  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 isWhether = ref<selectType[]>([
  {
    name: '是',
    id: 'shi',
    value: '1',
  },
  {
    name: '否',
    id: 'fou',
    value: '0',
  },
])
const deptProps = reactive({
  parent: 'pid', value: 'id', label: 'name', children: 'children',
})
// 获取下拉框数
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 isDevice = computed(() => {
  if (name.value == '设备借用申请' || name.value == '设备借用处理') {
    return true
  }
  else {
    return false
  }
})
// 弹窗初始化
const initDialog = (row: any) => {
  fetchData()
  title.value = row.title
  name.value = row.name
  // 设备借用
  if (isDevice.value) {
    if (title.value !== '新建') {
      console.log(row.id)
      detailApply({ id: row.id }).then((res) => {
        processId.value = res.data.processId // 流程id存在的时候赋值
        ruleForm2.value = res.data
        borrowList.value = res.data.equipmentInfoList
      })
    }
  }
  else {
    // 状态管理
    if ($route.query.title !== '新建') {
      detailStatus({ id: $route.params.id }).then((res) => {
        processId.value = res.data.processId // 流程id存在的时候赋值
        ruleForm1.value = res.data
        ruleForm1.value.applyUnit = res.data.applyUnit
        ruleForm1.value.equipmentNo = res.data.applyNo
        ruleForm1.value.equipmentName = res.data.equipmentName
        ruleForm1.value.time = res.data.time
      })
    }
  }
}
onMounted(() => {
  initDialog($route.query)
})

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

// 保存
const saveForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) { return }
  await formEl.validate((valid, fields) => {
    if (valid) {
      if (borrowList.value.length > 0) {
        // 整理数据
        // delete ruleForm2.value.equipmentInfoList // 去除显示的列表
        ruleForm2.value.applyType = '2'
        const params = {
          ...ruleForm2.value,
          equipmentList: borrowList.value.map(item => ({
            equipmentId: item.id,
          })),
        }
        if (title.value === '新建') {
          addApply(params).then((res) => {
            if (res.code === 200) {
              ruleForm2.value.id = res.data
              ElMessage.success('保存成功')
            }
          })
        }
        else {
          editApply(params).then((res) => {
            if (res.code === 200) {
              // 成功
              ruleForm2.value.id = res.data
              ElMessage.success('操作成功')
              $router.go(-1)
            }
          })
        }
      }
      else {
        ElMessage.warning('请选择借用设备列表!')
      }
    }
    else {
      console.log('表单校验不通过')
    }
  })
}

// 提交
const submitForm = async (formEl1: FormInstance | undefined, formEl2: FormInstance | undefined) => {
  if (isDevice.value) {
    //  设备借用
    if (!formEl2) { return }
    if (ruleForm2.value.id) {
      await formEl2.validate((valid, fields) => {
        if (valid) {
          ElMessageBox.confirm(
            '确认提交吗?',
            '提示',
            {
              confirmButtonText: '确认',
              cancelButtonText: '取消',
              type: 'warning',
            },
          ).then(() => {
            const params = {
              id: ruleForm2.value.id,
              formId: SCHEDULE.DEVICE_BORROW_APPROVAL, // 表单id
            }
            submitApply(params).then(() => {
              ElMessage.success('操作成功!')
              $router.go(-1)
            })
          })
        }
      })
    }
    else {
      ElMessage.info('请先保存再提交！')
    }
  }
  else {
  // 状态管理
    if (!formEl1) { return }
    await formEl1.validate((valid, fields) => {
      if (valid) {
        console.log(ruleForm1.value.equipmentList)
        ElMessageBox.confirm(
          '确认提交吗？',
          '提示',
          {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
          },
        ).then((res) => {
          if (title.value == '编辑') {
            if (ruleForm1.value.equipmentList && ruleForm1.value.equipmentList[0]) {
              ruleForm1.value.equipmentId = ruleForm1.value.equipmentList[0].equipmentId
              // delete ruleForm1.value.equipmentList
            }
            updateStatus(ruleForm1.value).then((res) => {
              if (res.code === 200) {
                ElMessage.success('操作成功!')
                $router.go(-1)
              }
              else {
                ElMessage.warning(res.message)
              }
            })
          }
          else {
            addStatus(ruleForm1.value).then((res) => {
              if (res.code === 200) {
                ElMessage.success('操作成功!')
                $router.go(-1)
              }
              else {
                ElMessage.warning(res.message)
              }
            })
          }
        })
      }
    })
  }
}
// 取消
const resetForm = () => {
  close()
}
const approveRef = ref()
// 审批操作
const approval = (row: { id: string;type: string }) => {
  let radio = ''
  switch (row.type) {
    case 'agree':
      radio = '1'
      break
    case 'refuse':
      radio = '2'
      break
    case 'reject':
      radio = '3'
      break
  }
  approveRef.value.initDialog({
    radio,
  })
}
// 删除当前
const deleteForm = () => {
  ElMessageBox.confirm(
    `确认删除${ruleForm2.value.applyName}吗？`,
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    },
  )
    .then(() => {
      deleteApply({ id: ruleForm2.value.id as string }).then((res) => {
        if (res.code === 200) {
          ElMessage({
            type: 'success',
            message: '删除成功',
          })
          resetForm()
        }
      })
    })
}
// 编辑当前
const editForm = () => {
  // 并且隐藏编辑按钮
  title.value = '编辑'
}
const fileRef = ref() // 文件上传input
const onFileChange = (event: any) => {
  // 原生上传
  // console.log(event.target.files)
  if (event.target.files?.length !== 0) {
    // 创建formdata对象
    const fd = new FormData()
    fd.append('multipartFile', event.target.files[0])
    UploadFile(fd).then((res) => {
      if (res.code === 200) {
        console.log(res.data[0])
        // 重置当前验证
        ruleForm1.value.fileList = []
        ruleForm1.value.fileList.push({
          assetId: '',
          fileName: res.data[0],
          minioFileName: res.data[0],
          // id: '',
        })
        ruleFormRef1.value?.clearValidate('minioFileName')
        ElMessage.success('文件上传成功')
      }
      else {
        ElMessage.error(res.message)
      }
    })
  }
}
const upload = () => {
  fileRef.value.click()
}
const columns = ref<TableColumn[]>([
  {
    text: '设备名称',
    value: 'equipmentName',
    align: 'center',
  },
  {
    text: '设备编号',
    value: 'equipmentNo',
    align: 'center',
  },
  {
    text: '型号',
    value: 'modelNo',
    align: 'center',
  },
  {
    text: '测量范围',
    value: 'mesureRange',
    align: 'center',
  },
  // {
  //   text: '使用部门',
  //   value: 'useDept',
  //   align: 'center',
  //   required: true,
  // },
  // {
  //   text: '使用人',
  //   value: 'usePerson',
  //   align: 'center',
  //   required: true,
  // },
  {
    text: '使用部门',
    value: 'useDeptName',
    align: 'center',
  },
  {
    text: '使用人',
    value: 'usePersonName',
    align: 'center',
  },
  {
    text: '管理状态',
    value: 'managerStateName',
    align: 'center',
  },
  {
    text: '有效日期',
    value: 'validDate',
    align: 'center',
  },
])
const SelectionList = ref()
// 表格选中
const handleSelectionChange = (e: any) => {
  SelectionList.value = e
}

// 添加行
const addRowButton = () => {
  const index = borrowList.value.findIndex(item => !item.equipmentNo)
  if (index !== -1) {
    ElMessage.warning('请完善上一条设备信息')
    return
  }
  borrowList.value.push({
    equipmentName: '', // 设备名称
    equipmentNo: '', // 设备编号
    modelNo: '', // 型号
    mesureRange: '', // 测量范围
    useDeptName: '', // 使用部门
    usePersonName: '', // 使用人
    managerStateName: '', // 管理状态
    validDate: '', // 有效日期
    equipmentId: '', // 设备ID
  })
}

const delRowButton = () => {
  if (SelectionList.value.length <= 0) {
    ElMessage({
      message: '请选中要删除的行',
      type: 'warning',
    })
  }
  else {
    SelectionList.value.forEach((item: IdeviceListQuery) => {
      borrowList.value.forEach((element, index) => {
        if (element.equipmentNo === item.equipmentNo) {
          borrowList.value.splice(index, 1)
        }
      })
    })
  }
}

// 删除行
const removeRowBtn = () => {
  borrowList.value = borrowList.value.filter((item) => {
    return !SelectionList.value.includes(item)
  })
}

// 详情页面中是否可审批
const isApproval = computed(() => {
  //  根据状态判断
  //  全部 待审批 审批中 可审批
  const arr = ['0', '2', '3']
  const status = ['待审批', '审批中']
  return arr.includes($route.query?.approvalStatus as string) && status.includes($route.query?.approvalStatusName as string)
})
// 详情页是否展示打印按钮
const isPrint = computed(() => {
  //  根据状态判断
  // 未通过 已通过
  const arr = ['4', '5', '0']
  const status = ['未通过', '已通过']
  return arr.includes($route.query?.approvalStatus as string) && status.includes($route.query?.approvalStatusName as string)
})
// 已取消状态
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 handleSelect = (index: number, row: borrowDeviceType) => {
  dialogSelectDiviceVisible.value = true // 选择设备对话框显隐
  isMulti.value = false // 是否单选, false单选、true表格多选
  selectIndex.value = index
}

// 点击批量添加
const multiAdd = () => {
  dialogSelectDiviceVisible.value = true
  isMulti.value = true
}

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

// 选择好设备了, 添加选好的设备到表格中
const updateDeviceConfirm = (val: Array<IdeviceList>) => {
  console.log(isDevice.value)
  // // 如果是状态管理
  if (isDevice.value === false) {
    const device = val[0]
    ruleForm1.value.equipmentNo = device.equipmentNo
    ruleForm1.value.equipmentName = device.equipmentName
    ruleForm1.value.modelNo = device.modelNo
    ruleForm1.value.equipmentSpecifications = device.equipmentSpecifications as string
    ruleForm1.value.manufacturingNo = device.manufacturingNo as string
    ruleForm1.value.manufacturer = device.manufacturer as string
    ruleFormRef1.value.clearValidate('equipmentNo')
    // 赋值
    ruleForm1.value.equipmentList = [{
      equipmentId: device.id as string,
    }]
    return false
  }
  if (isMulti.value) { // 批量增加时push
    val.forEach((item: IdeviceList) => {
    // 只添加列表里不存在的
      const index = borrowList.value.findIndex((i: IdeviceList) => item.equipmentNo === i.equipmentNo)
      if (index === -1) {
        borrowList.value.push(item)
      }
    })
  }
  else { // 单选替换
    const index = borrowList.value.findIndex((i: IdeviceList) => val[0].equipmentNo === i.equipmentNo)
    if (index !== -1) {
      ElMessage.warning('此设备已添加过')
      return
    }

    borrowList.value.splice(selectIndex.value, 1, val[0])
  }
}
</script>

<template>
  <app-container style="overflow: hidden;">
    <!-- 审批操作 -->
    <approve-action ref="approveRef" />
    <detail-page :title="`${name}-${title}`">
      <template #btns>
        <el-button v-if="title !== '详情'" type="primary" @click="submitForm(ruleFormRef1, ruleFormRef2)">
          提交
        </el-button>
        <el-button v-if="title !== '详情' && name.search('借用') !== -1" type="primary" @click="saveForm(ruleFormRef2)">
          保存
        </el-button>
        <!-- <el-button v-if="title === '详情' && isApproval" type="primary" @click="approval({ id: ruleForm2.id, type: 'agree' })">
          同意
        </el-button>
        <el-button v-if="title === '详情' && isApproval" type="primary" @click="approval({ id: ruleForm2.id, type: 'reject' })">
          驳回
        </el-button>
        <el-button v-if="title === '详情' && isApproval" type="primary" @click="approval({ id: ruleForm2.id, type: 'refuse' })">
          拒绝
        </el-button> -->
        <el-button v-if="title === '详情' && isPrint" type="primary">
          打印
        </el-button>
        <!-- <el-button v-if="title === '详情' && isCancel" type="primary" @click="submitForm(ruleFormRef1, ruleFormRef2)">
          提交
        </el-button> -->
        <!-- <el-button v-if="$route.query?.approvalStatus !== '草稿箱' && isCancel" type="primary" @click="editForm">
          编辑
        </el-button> -->
        <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 v-if="!isDevice" ref="ruleFormRef1" :model="ruleForm1" :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="applyUnit">
              <dept-select v-model="ruleForm1.applyUnit" :data="useDeptList" :placeholder="title === '详情' ? '' : '申请单位'" :disabled="title === '详情'" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="申请人" prop="applyPerson">
              <el-select v-model="ruleForm1.applyPerson" :placeholder="title === '详情' ? '' : '申请人'" :disabled="title === '详情'" 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="equipmentNo">
              <el-input v-model.trim="ruleForm1.equipmentNo" :placeholder="title === '详情' ? '' : '设备名称'" :disabled="title === '详情'">
                <template #append>
                  <el-button size="small" :disabled="title === '详情'" @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="ruleForm1.equipmentName" :placeholder="title === '详情' ? '' : '设备名称'" :disabled="title === '详情'" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="marg">
          <el-col :span="6">
            <el-form-item label="型号" prop="modelNo">
              <el-input v-model.trim="ruleForm1.modelNo" :placeholder="title === '详情' ? '' : '型号'" :disabled="title === '详情'" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="设备规格" prop="equipmentSpecifications">
              <el-input v-model.trim="ruleForm1.equipmentSpecifications" :placeholder="title === '详情' ? '' : '设备规格'" :disabled="title === '详情'" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="出厂编号" prop="manufacturingNo">
              <el-input v-model.trim="ruleForm1.manufacturingNo" :placeholder="title === '详情' ? '' : '出厂编号'" :disabled="title === '详情'" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="生产厂家" prop="manufacturer">
              <el-input v-model.trim="ruleForm1.manufacturer" :placeholder="title === '详情' ? '' : '生产厂家'" :disabled="title === '详情'" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="marg">
          <el-col :span="6">
            <el-form-item :label="name.substring(2, 4)" prop="time">
              <el-date-picker
                v-model="ruleForm1.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 :span="18">
            <el-form-item label="申请理由" prop="remark">
              <el-input v-model.trim="ruleForm1.remark" :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="minioFileName">
              <show-photo :minio-file-name="ruleForm1.fileList[0]?.minioFileName || ''" />
              <input v-show="title === ''" ref="fileRef" type="file" @change="onFileChange">
              <el-button v-if="title !== '详情'" type="primary" :disabled="title === '详情'" :style="{ 'margin-left': ruleForm1.fileList[0]?.minioFileName ? '20px' : '0px' }" @click="upload">
                {{ ruleForm1.fileList[0]?.minioFileName ? '更换' : '上传' }}
              </el-button>
              <span v-if="title === '详情' && !ruleForm1.fileList[0]?.minioFileName">暂无</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-form v-if="isDevice" ref="ruleFormRef2" :model="ruleForm2" :rules="rules2" 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="applyName">
              <el-input v-model.trim="ruleForm2.applyName" :placeholder="title === '详情' ? '' : '申请名称'" :disabled="title === '详情'" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="申请单位" prop="applyUnit">
              <dept-select v-model="ruleForm2.applyUnit" :data="useDeptList" :placeholder="title === '详情' ? '' : '申请单位'" :disabled="title === '详情'" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="申请人" prop="applyPerson">
              <el-select v-model="ruleForm2.applyPerson" :placeholder="title === '详情' ? '' : '申请人'" :disabled="title === '详情'" 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="time">
              <el-date-picker
                v-model="ruleForm2.time" type="datetime" format="YYYY-MM-DD HH:mm" value-format="YYYY-MM-DD HH:mm" :disabled="title === '详情'"
                :placeholder="title === '详情' ? '' : '借用时间'"
                style="width: 100%;"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="18">
            <el-form-item label="申请说明" prop="applyDesc">
              <el-input v-model.trim="ruleForm2.applyDesc" :placeholder="title === '详情' ? '' : '申请说明'" :disabled="title === '详情'" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </detail-page>
    <div>
      <!-- 表格 -->
      <detail-block v-if="isDevice" title="借用设备列表">
        <template #btns>
          <el-button v-if="title !== '详情'" type="primary" @click="multiAdd">
            批量添加
          </el-button>
          <el-button v-if="title !== '详情'" type="primary" @click="addRowButton">
            增加行
          </el-button>
          <el-button v-if="title !== '详情'" type="info" @click="delRowButton">
            删除行
          </el-button>
        </template>
        <el-table
          :data="borrowList || []"
          border
          style="width: 100%;"
          max-height="600"
          @selection-change="handleSelectionChange"
        >
          <el-table-column v-if="title !== '详情'" type="selection" width="38" />
          <el-table-column align="center" label="序号" width="80" type="index" />
          <el-table-column
            v-for="item in columns"
            :key="item.value"
            :prop="item.value"
            :label="item.text"
            :width="item.width"
            show-overflow-tooltip
            align="center"
          >
            <template v-if="item.value === 'equipmentNo' && (title !== '详情')" #default="scope">
              <el-input v-model="scope.row.equipmentNo" placeholder="请选择设备" class="input">
                <template #append>
                  <el-button size="small" @click="handleSelect(scope.$index, scope.row)">
                    选择
                  </el-button>
                </template>
              </el-input>
            </template>
          </el-table-column>
        </el-table>
      </detail-block>
      <detail-block v-if="title !== '新建'" title="审批流程">
        <approval-record :process-id="processId" />
      </detail-block>
    </div>
    <select-device-dialog
      :dialog-select-divice-visible="dialogSelectDiviceVisible"
      :is-multi="isMulti"
      @closeDialog="closeDialog"
      @updateDeviceConfirm="updateDeviceConfirm"
    />
  </app-container>
</template>

<style lang="scss" scoped>
.timeline {
  background-color: #fff;
}

: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>