<script lang="ts" setup name="Detail">
import { onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import type { Ref } from 'vue'
import type { IdeviceListQuery, Iform } from '../receive'
const props = defineProps({
  typeValue: String,
})

const $route = useRoute()

const { proxy } = getCurrentInstance() as any
const total = ref(20)// 总数
const deviceName = ref()

// 表单数据
const form = ref({
  company: '申请单位', // 申请单位
  person: '申请人1', // 申请人
  time: '1', // 领用时间
  state: '说明1', // 申请说明
})
const list = ref([{
  name: '测试1', // 仪器名称
  number: '测试1', // 设备编号
  version: '测试1', // 型号
  scope: '测试1', // 测量范围
  dep: '测试1', // 使用部门
  person: '测试1', // 使用人
  status: '测试1', // 管理状态
  date: '测试1', // 有效日期
}, {
  name: '测试2', // 仪器名称
  number: '测试2', // 设备编号
  version: '测试2', // 型号
  scope: '测试2', // 测量范围
  dep: '测试2', // 使用部门
  person: '测试2', // 使用人
  status: '测试2', // 管理状态
  date: '测试2', // 有效日期
}])// 表格数据
// 查询条件
const listQuery: Ref<IdeviceListQuery> = ref({
  name: '', // 仪器名称
  number: '', // 设备编号
  version: '', // 型号
  scope: '', // 测量范围
  dep: '', // 使用部门
  person: '', // 使用人
  status: '', // 管理状态
  date: '', // 有效日期
  offset: 1,
  limit: 10,
})
const columns = [
  {
    text: '仪器名称',
    value: 'name',
  },
  {
    text: '设备编号',
    value: 'number',
  },
  {
    text: '型号',
    value: 'version',
  },
  {
    text: '测量范围',
    value: 'scope',
  },
  {
    text: '使用部门',
    value: 'dep',
  },
  {
    text: '使用人',
    value: 'person',
  },
  {
    text: '管理状态',
    value: 'status',
  },
  {
    text: '有效日期',
    value: 'date',
  },
]

// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
const changePage = (val: { size?: number; page?: number }) => {
  if (val && val.size) {
    listQuery.value.limit = val.size
  }
  if (val && val.page) {
    listQuery.value.offset = val.page
  }
  // fetchData(true)
}
// 点击关闭
const $router = useRouter()
const close = () => {
  $router.push('/receive/solveList')
}
// 打印
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(() => {
  deviceName.value = $route.query.deviceName
})
</script>

<template>
  <app-container>
    <detail-page :title="deviceName ? `${deviceName}-详情` : '设备领用处理-详情'">
      <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.company" clearable disabled />
                  </el-form-item>
                  <el-form-item label="申请人">
                    <el-input v-model="form.person" clearable disabled />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="领用时间">
                    <el-date-picker
                      v-model="form.time"
                      type="datetime"
                      placeholder="请选择领用时间"
                      disabled
                    />
                  </el-form-item>
                  <el-form-item label="申请说明">
                    <el-input v-model="form.state" type="textarea" clearable disabled />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </detail-block>
      </div>
      <detail-block title="设备领用列表">
        <normal-table
          :data="list" :total="total" :columns="columns" :query="listQuery"
          @change="changePage"
        >
          <template #preColumns>
            <el-table-column label="序号" width="55" align="center">
              <template #default="scope">
                {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
              </template>
            </el-table-column>
          </template>
        </normal-table>
      </detail-block>

      <detail-block 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>
// 样式
.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>