<template>
  <layout-card>
    <el-divider content-position="left">清单信息</el-divider>
    <el-descriptions :column="2" border>
      <el-descriptions-item label="清单名称" :span="2">
        {{ info.NAME }}
      </el-descriptions-item>
      <el-descriptions-item label="所属部门">
        {{ info.DEPARTMENT_NAME }}
      </el-descriptions-item>
      <el-descriptions-item label="所属岗位">
        {{ info.POST_NAME }}
      </el-descriptions-item>
      <el-descriptions-item label="排查周期">
        {{ info.PERIODNAME }}
      </el-descriptions-item>
      <el-descriptions-item label="清单类型">
        {{ info.TYPENAME }}
      </el-descriptions-item>
    </el-descriptions>
    <el-divider content-position="left">检查内容</el-divider>
    <layout-table :data="list" :show-pagination="false">
      <el-table-column type="index" label="序号" width="55" />
      <el-table-column label="风险点（单元）" prop="RISKUNITNAME" />
      <el-table-column label="辨识部位" prop="PARTSNAME" />
      <el-table-column label="二维码">
        <template #default="{ row }">
          <el-button type="primary" text link @click="fnPartQrCode(row)">
            部位二维码
          </el-button>
        </template>
      </el-table-column>
    </layout-table>
    <div v-if="list.length > 0" class="tc mt-10">
      <el-button
        type="primary"
        @click="
          router.push({
            path: '/hazard_investigation/inventory_management/part_qr_code/batch_printing',
            query: {
              IDS: list.map((item) => item.IDENTIFICATIONPARTS_ID).join(','),
            },
          })
        "
      >
        批量打印
      </el-button>
    </div>
    <part-qr-code-dialog
      v-model:visible="data.partQrCodeDialog.visible"
      :info="data.partQrCodeDialog.info"
    />
  </layout-card>
</template>

<script setup>
import { getInventoryManagementView } from "@/request/hazard_investigation.js";
import { useRoute, useRouter } from "vue-router";
import { reactive, ref } from "vue";
import PartQrCodeDialog from "./components/part_qr_code_dialog.vue";
import useListData from "@/assets/js/useListData.js";

const route = useRoute();
const router = useRouter();
const { LISTMANAGER_ID } = route.query;
const info = ref({});
const data = reactive({
  partQrCodeDialog: {
    visible: false,
    info: {},
  },
});
const { list } = useListData(getInventoryManagementView, {
  otherParams: { LISTMANAGER_ID },
  usePagination: false,
  callbackFn: (list, resData) => {
    info.value = resData.pd;
  },
});
const fnPartQrCode = (row) => {
  data.partQrCodeDialog.visible = true;
  data.partQrCodeDialog.info = row;
};
</script>

<style scoped lang="scss"></style>
