<!-- 新增或详情弹窗 -->
<script lang="ts" setup name="add">
import { ElMessage, ElMessageBox, dayjs } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import addRow from './addRow.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 } from '@/api/device/borrow'
import { addStatus, detailStatus, updateStatus } from '@/api/device/stateManage'
import type { borrowDeviceType } from '@/views/device/borrow/borrow-interface'
import useUserStore from '@/store/modules/user'

const userInfo = useUserStore()
const $router = useRouter()
const $route = useRoute()
const ruleFormRef1 = ref() // from组件
const ruleFormRef2 = ref() // from组件
const title = ref('')
const name = ref('')
const borrowList = ref<borrowDeviceType[]>([])
interface EquipmentListRow {
  equipmentId: string
}
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: '', // 申请说明
  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()
  // ruleFormRef.value?.resetFields()
  title.value = row.title
  name.value = row.name
  if (isDevice.value) {
    // 设备借用
    if (title.value !== '新建') {
      console.log(row.id)
      detailApply({ id: row.id }).then((res) => {
        ruleForm2.value = res.data
        // borrowList.value = res.data.equipmentList 接口返回数据为空
        borrowList.value = res.data.equipmentInfoList
      })
    }
  }
  else {
    // 状态管理
    if ($route.query.title !== '新建') {
      detailStatus({ id: $route.params.id }).then((res) => {
        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 submitForm = async (formEl1: FormInstance | undefined, formEl2: FormInstance | undefined) => {
  if (isDevice.value) {
    //  设备借用
    if (!formEl2) { return }
    await formEl2.validate((valid, fields) => {
      if (valid) {
        ElMessageBox.confirm(
          '确认提交吗？',
          '提示',
          {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
          },
        ).then(() => {
          if (borrowList.value.length) {
            // 整理数据
            delete ruleForm2.value.equipmentInfoList // 去除显示的列表
            const params = {
              ...ruleForm2.value,
              equipmentList: borrowList.value.map(item => ({
                id: ruleForm2.value.id,
                equipmentId: item.id,
              })),
              applyType: '1',
            }
            // title.value === '新建'

            // ? addApply(params) : editApply(params)
            //   .then((res) => {
            //     console.log(res)
            //     if (res.code === 200) {
            //       // 成功
            //       ElMessage.success('操作成功')
            //       $router.go(-1)
            //     }
            //   })
            if (title.value === '新建') {
              addApply(params).then((res) => {
                if (res.code === 200) {
                  // 成功
                  ElMessage.success('操作成功')
                  $router.go(-1)
                }
              })
            }
            else {
              editApply(params).then((res) => {
                if (res.code === 200) {
                  // 成功
                  ElMessage.success('操作成功')
                  $router.go(-1)
                }
              })
            }
          }
          else {
            ElMessage.warning('请先添加借用设备')
          }
        })
      }
    })
  }
  else {
  // 状态管理
    if (!formEl1) { return }
    await formEl1.validate((valid, fields) => {
      if (valid) {
        ElMessageBox.confirm(
          '确认提交吗？',
          '提示',
          {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
          },
        ).then((res) => {
          if (title.value == '编辑') {
            ruleForm1.value.applyPerson = ruleForm1.value.id
            ruleForm1.value.applyUnit = ruleForm1.value.id
            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([
  {
    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 addRowRef = ref()
// 添加行
const addRowBtn = () => {
  // if (checkPersonList()) {
  //   setAllRowReadable()
  //   console.log(borrowList.value)
  //   borrowList.value.push({
  //     equipmentName: '', // 设备名称
  //     createUser: userInfo.$state.id, // 当前用户id   1
  //     equipmentId: '', // 设备id 1
  //     equipmentNo: '', // 设备编号
  //     modelNo: '', // 型号
  //     measureRange: '', // 测量范围 1
  //     useDept: '', // 使用部门 1
  //     usePerson: '', // 使用人 1
  //     validDate: '', // 有效日期
  //     edit: true,
  //   })
  // }
  addRowRef.value.initDialog({ title: '' })
}
const SelectionList = ref()
// 表格选中
const handleSelectionChange = (e) => {
  SelectionList.value = e
}
// 删除行
// const removeRowBtn = () => {
//   const removeArr = borrowList.value.filter(item => item.remove !== '')
//   if (removeArr.length) {
//     ElMessageBox.confirm(
//       '确认删除选中的数据吗？',
//       '提示',
//       {
//         confirmButtonText: '确认',
//         cancelButtonText: '取消',
//         type: 'warning',
//       },
//     ).then(() => {
//       borrowList.value = borrowList.value.filter(item => item.remove === '')
//       ElMessage.success('删除成功')
//     })
//   }
//   else {
//     ElMessage.warning('请先选择需要删除的数据')
//   }
// }
// 删除行
const removeRowBtn = () => {
  borrowList.value = borrowList.value.filter((item) => {
    return !SelectionList.value.includes(item)
  })
}
// 借用设备列表添加
const addRowMethods = (row) => {
  if (isDevice.value) {
    // 设备借用
    borrowList.value = [...borrowList.value, ...row]
  }
  else {
  // 设备状态
    if (row.length > 1) {
      ElMessage.warning('只能选择一个设备')
    }
    else {
      console.log(row[0], '选中的设备')
      const device = row[0]
      ruleForm1.value.equipmentNo = device.equipmentNo
      ruleForm1.value.equipmentName = device.equipmentName
      ruleForm1.value.modelNo = device.modelNo
      ruleForm1.value.equipmentSpecifications = device.equipmentSpecifications
      ruleForm1.value.manufacturingNo = device.manufacturingNo
      ruleForm1.value.manufacturer = device.manufacturer
      ruleFormRef1.value.clearValidate('equipmentNo')
      // 赋值
      ruleForm1.value.equipmentList = [{
        equipmentId: row[0].id,
      }]
    }
  }
  // row.forEach((element) => {
  //   borrowList.value.push({
  //     equipmentName: element.equipmentName, // 设备名称
  //     createUser: '', // 当前用户id   1
  //     equipmentId: element.id, // 设备id 1
  //     equipmentNo: element.equipmentNo, // 设备编号
  //     modelNo: element.modelNo, // 型号
  //     measureRange: '', // 测量范围 1
  //     useDept: '', // 使用部门 1
  //     usePerson: '', // 使用人 1
  //     validDate: element.validDate, // 有效日期
  //     edit: true,
  //   })
  // })
}
// 详情页面中是否可审批
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
  }
})
</script>

<template>
  <app-container style="overflow: hidden;">
    <!-- 借用设备列表 -->
    <add-row ref="addRowRef" @add="addRowMethods" />
    <!-- 审批操作 -->
    <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 === '详情' && 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="title === '详情' && isCancel" type="primary" @click="editForm">
          编辑
        </el-button>
        <el-button v-if="(title === '详情' && $route.query?.approvalStatus === '1') || (title === '详情' && $route.query?.approvalStatusName === '草稿箱')" type="primary" @click="editForm">
          编辑
        </el-button>
        <el-button v-if="(title === '详情' && isCancel) || (title === '详情' && $route.query?.approvalStatus === '1') || (title === '详情' && $route.query?.approvalStatusName === '草稿箱')" 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="addRowBtn">
            添加行
          </el-button>
          <el-button v-if="title !== '详情'" type="info" @click="removeRowBtn">
            删除行
          </el-button>
        </template>
        <el-table ref="multipleTableRef" :data="borrowList || []" style="width: 100%;" border @selection-change="handleSelectionChange">
          <el-table-column 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" align="center">
            <template #header>
              <span>{{ item.text }}</span>
            </template>
            <template #default="scope">
              <span>{{ scope.row[item.value]
              }}</span>
            </template>
          </el-table-column>
        </el-table>
      </detail-block>
      <!-- <detail-block v-if="title !== '新建'" title="审批流程">
        <el-timeline>
          <el-timeline-item timestamp="2018/4/12" placement="top">
            <el-card>
              <h4>Update Github template</h4>
              <p>Tom committed 2018/4/12 20:46</p>
            </el-card>
          </el-timeline-item>
          <el-timeline-item timestamp="2018/4/3" placement="top">
            <el-card>
              <h4>Update Github template</h4>
              <p>Tom committed 2018/4/3 20:46</p>
            </el-card>
          </el-timeline-item>
          <el-timeline-item timestamp="2018/4/2" placement="top">
            <el-card>
              <h4>Update Github template</h4>
              <p>Tom committed 2018/4/2 20:46</p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </detail-block> -->
    </div>
  </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>