<script lang="ts" setup name="Detail">
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 '../receive'
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 total = ref(20)// 总数
// 表单数据
const form = ref({
  id: '',
  processId: '', // 流程id--查询审批记录使用
  applyUnit: '', // 申请单位
  applyPerson: '', // 申请人
  time: '', // 领用时间
  applyDesc: '', // 申请说明
})
const list = ref<IdeviceList[]>([])// 表格数据
// 查询条件
const listQuery: Ref<IdeviceListQuery> = ref({
  equipmentName: '', // 仪器名称
  equipmentNo: '', // 设备编号
  modelNo: '', // 型号
  mesureRange: '', // 测量范围
  useDeptName: '', // 使用部门
  usePersonName: '', // 使用人
  managerStateName: '', // 管理状态
  validDate: '', // 有效日期
  offset: 1,
  limit: 20,
})
// 表头
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.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('/measure/measureSource/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="8">
                  <el-form-item label="申请单位" prop="applyUnit">
                    <dept-select
                      v-model="form.applyUnit"
                      :data="useDeptList"
                      disabled
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <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="8">
                  <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="16">
                  <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 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"
          />
        </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;

    .title-button {
      display: flex;
      align-items: center;

      &::before {
        content: "";
        flex: 1;
      }

      .button-group {
        flex: 1;
        display: flex;
        justify-content: flex-end;
      }
    }

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

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