<script lang="ts" setup name="Detail">
import { onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import type { Ref } from 'vue'
import type { IdeviceList, IdeviceListQuery } from '../receive'
import type { TableColumn } from '@/components/NormalTable/table_interface'
import {
  getReceiveApplyListDetail,
} from '@/api/device/receive'

const $route = useRoute()
const { proxy } = getCurrentInstance() as any
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 = () => {
  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
  })
}

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

// 打印
const printObj = ref({
  id: 'lysq', // 需要打印元素的id
  popTitle: '领用申请', // 打印配置页上方的标题
  extraHead: '', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
  preview: false, // 是否启动预览模式，默认是false
  // 触发打印预览打开前回调
  previewBeforeOpenCallback() { console.log('正在加载预览窗口！') },
  // 触发打开打印预览回调
  previewOpenCallback() { console.log('已经加载完预览窗口，预览打开了！') },
  // 触发打印工具打开前回调
  beforeOpenCallback() { console.log('开始打印之前！') },
  // 触发打开打印工具回调
  openCallback() { console.log('执行打印了！') },
  // 触发关闭打印工具回调
  closeCallback() { console.log('关闭了打印工具！') },
  // 触发点击打印回调
  clickMounted() { console.log('点击v-print绑定的按钮了！') },
  // url: 'http://localhost:8080/', // 打印指定的URL，确保同源策略相同
  // asyncUrl (reslove) {
  //   setTimeout(() => {
  //     reslove('http://localhost:8080/')
  //   }, 2000)
  // },
  standard: '',
  extarCss: '',
})

onMounted(() => {
  form.value.id = $route.query.id as string // id
  form.value.processId = $route.query.processId as string // 任务id
  // 编辑、详情获取详情页信息
  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="20">
                <el-col :span="12">
                  <el-form-item label="申请单位">
                    <el-input v-model="form.applyUnit" disabled />
                  </el-form-item>
                  <el-form-item label="申请人">
                    <el-input v-model="form.applyPerson" disabled />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="领用时间">
                    <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-form-item label="申请说明">
                    <el-input v-model="form.applyDesc" type="textarea" disabled />
                  </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>