<!-- 设备借用处理详情/编辑 -->
<script lang="ts" setup name="EditHandle">
import { onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElLoading } from 'element-plus'
import type { Ref } from 'vue'
import dayjs from 'dayjs'
import type { IdeviceList, IdeviceListQuery } from './borrow'
import type { TableColumn } from '@/components/NormalTable/table_interface'
import { getReceiveApplyListDetail } from '@/api/device/receive'
import type { userType } from '@/views/system/user/user-interface'
import { getUserList } from '@/api/system/user'
import type { deptType } from '@/views/device/standingBook/standingBook-interface'
import { getDeptTreeList } from '@/api/system/dept'
import { toTreeList } from '@/utils/structure'

const $route = useRoute()
const { proxy } = getCurrentInstance() as any
const useDeptList = ref<deptType[]>([]) // 部门列表
const usePersonList = ref<userType[]>([]) // 申请人列表（用户）
// 表单数据
const form = ref({
  id: '',
  processId: '', // 流程id--查询审批记录使用
  applyName: '', // 申请名称
  applyUnit: '', // 申请单位
  applyPerson: '', // 申请人
  time: '', // 借用时间
  backTime: '', // 归还时间
  applyDesc: '', // 申请说明
})
const list = ref<IdeviceList[]>([])// 表格数据

// 表头
const columns = ref<TableColumn[]>([
  { text: '设备编号', value: 'equipmentNo', align: 'center', width: '230' },
  { text: '设备名称', value: 'equipmentName', align: 'center' },
  { text: '型号', value: 'modelNo', align: 'center' },
  { text: '测量范围', value: 'mesureRange', align: 'center' },
  { text: '使用部门', value: 'useDeptName', align: 'center' },
  { text: '使用人', value: 'usePersonName', align: 'center' },
  { text: '管理状态', value: 'managerStateName', align: 'center' },
  { text: '有效日期', value: 'validDate', align: 'center' },
])

// 编辑、详情--获取详细信息
const fetchReceiveApplyListDetail = () => {
  const loading = ElLoading.service({
    lock: true,
    background: 'rgba(255, 255, 255, 0.8)',
  })
  getReceiveApplyListDetail({ id: form.value.id }).then((res) => {
    form.value.applyUnit = res.data.applyUnit // 部门
    form.value.applyName = res.data.applyName// 申请名称
    form.value.applyPerson = res.data.applyPerson// 申请人
    form.value.time = res.data.time // 借用时间
    form.value.applyDesc = res.data.applyDesc // 申请说明
    list.value = res.data.equipmentInfoList.map((item: IdeviceList) => {
      return {
        ...item,
        validDate: dayjs(item.validDate).format('YYYY-MM-DD'),
      }
    })
    loading.close()
  })
}

// 点击关闭
const $router = useRouter()
const close = () => {
  $router.back()
}

// 设备借用处理详情打印
const printObj = ref({
  id: 'lysq', // 需要打印元素的id
  popTitle: '设备借用处理', // 打印配置页上方的标题
  extraHead: '<div style="display: flex;flex-direction: column;text-align: center"><h3>设备借用处理详情</h3></div>', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
  preview: false, // 是否启动预览模式，默认是false
  standard: '',
  extarCss: '',
})

// 获取用户列表--（是否有不分页接口？）
const fetchUserList = () => {
  getUserList({ offset: 1, limit: 999999 }).then((res: any) => {
    usePersonList.value = res.data.rows
  })
}

// 获取使用部门
const fetchDeptTreeList = () => {
  getDeptTreeList().then((res: any) => {
    if (res.data) { // 将列表转树结构
      useDeptList.value = toTreeList(res.data, '0', true)
    }
  })
}

onMounted(async () => {
  form.value.id = $route.query.id as string // id
  form.value.processId = $route.query.processId as string // 任务id

  // 获取部门信息
  await fetchDeptTreeList()
  // 获取人员列表
  await fetchUserList()
  // 编辑、详情获取详情页信息
  fetchReceiveApplyListDetail() // 获取详细信息
})
</script>

<template>
  <app-container>
    <detail-page title="设备借用处理-详情">
      <template #btns>
        <el-button v-if="proxy.hasPerm('/device/borrow/borrowhandle/print')" v-print="printObj" type="primary">
          打印
        </el-button>
        <el-button type="info" @click="close">
          关闭
        </el-button>
      </template>
    </detail-page>
    <div id="lysq" class="lysq-create-check">
      <div class="top-info">
        <detail-block title="借用处理">
          <div class="form-area">
            <el-form
              ref="ruleFormRef"
              :model="form"
              label-width="120px"
            >
              <el-row :gutter="24">
                <el-col :span="6">
                  <el-form-item label="申请名称" prop="applyName">
                    <el-input v-model="form.applyName" disabled />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="申请单位" prop="applyUnit">
                    <dept-select
                      v-model="form.applyUnit"
                      :data="useDeptList"
                      disabled
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="申请人" prop="applyPerson">
                    <el-select v-model="form.applyPerson" 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="time">
                    <el-date-picker
                      v-model="form.time"
                      type="datetime"
                      format="YYYY-MM-DD hh:mm"
                      value-format="YYYY-MM-DD hh:mm"
                      disabled
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="归还时间" prop="backTime">
                    <el-date-picker
                      v-model="form.backTime"
                      type="datetime"
                      format="YYYY-MM-DD hh:mm"
                      value-format="YYYY-MM-DD hh:mm"
                      disabled
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="18">
                  <el-form-item label="申请说明" prop="applyDesc">
                    <el-input v-model="form.applyDesc" type="textarea" disabled autosize />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </detail-block>
      </div>
      <detail-block title="设备借用列表">
        <el-table
          :data="list"
          border
          style="width: 100%;"
          max-height="600"
        >
          <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"
          />
        </el-table>
      </detail-block>
      <detail-block title="审批流程">
        <approval-record :process-id="form.processId" />
      </detail-block>
    </div>
  </app-container>
</template>

<style lang="scss" scoped>
// 样式
.lysq-create-check {
  margin-top: 10px;

  .top-info {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-right: 10px;
    border-radius: 10px;
    background-color: #fff;
    // padding: 10px;

    .form-area {
      margin-top: 40px;
    }
  }
}
</style>

<style lang="scss">
.lysq-create-check {
  .el-form-item--default .el-form-item__label {
    color: #000;
  }
}
</style>