<template>
  <div class="h-full grid grid-cols-4 gap-x-3">
    <n-card>
      <n-list>
        <template #header>
          <h2>校准证书</h2>
        </template>
        <n-scrollbar
          :style="{ maxHeight: `${height - 400}px`, paddingRight: '20px' }"
          trigger="none"
        >
          <template v-for="item of dataList" :key="item">
            <n-list-item>
              <template #suffix>
                <n-button type="primary" @click="handleView(item)"
                  >查看</n-button
                >
              </template>
              <n-card
                embedded
                :bordered="false"
                :content-style="{ padding: '5px', textAlign: 'center' }"
              >
                【{{ item.T_id }}】{{ item.T_sn }}
              </n-card>
            </n-list-item>
          </template>
        </n-scrollbar>
      </n-list>
    </n-card>
    <n-card class="col-span-3">
      <div class="flex justify-end">
        <n-button text style="font-size: 24px" @click="onPrint">
          <n-icon>
            <printer-icon />
          </n-icon>
        </n-button>
      </div>
      <n-scrollbar :style="{ maxHeight: `${height - 400}px` }" trigger="none">
        <vue-pdf-embed ref="pdfRef" :source="source" />
      </n-scrollbar>
    </n-card>
  </div>
</template>

<script setup>
import VuePdfEmbed from 'vue-pdf-embed';
import { PrinterOutlined as PrinterIcon } from '@vicons/antd';
import { getDeviceClassListList } from '@/api';

const props = defineProps({
  task: {
    required: true,
    default: {},
  },
  height: {
    required: true,
    default: {},
  },
});

// 查询参数
const queryData = reactive({
  T_sn: '',
  T_class: props.task.T_class,
});

// pdf源
const source = ref('');

// 列表
const dataList = ref([]);

// pdf组件ref
const pdfRef = ref(null);

// 查看
const handleView = (row) => {
  source.value = row.T_pdf;
};

// 打印pdf
const onPrint = () => {
  pdfRef.value.print();
};

// 获取列表
const getDataList = async () => {
  try {
    const { data: res } = await getDeviceClassListList(queryData);
    dataList.value = res.Data.List || [];
  } catch (e) {
    console.log(e);
  }
};

getDataList();
</script>

<style lang="scss" scoped>
:deep(.n-list__header) {
  padding: 0;
}
</style>
