<template>
  <el-dialog v-model="visible" title="二维码">
    <div id="printContent">
      <div v-for="item in list" :key="item.RISKUNIT_ID" class="page_break">
        <el-divider content-position="left">风险点（单元）信息</el-divider>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="风险点（单元）">
            {{ item.RISKUNITNAME }}
          </el-descriptions-item>
          <el-descriptions-item label="管控部门">
            {{ item.DEPT_NAME }}
          </el-descriptions-item>
          <el-descriptions-item label="所属公司">
            {{ item.CORP_NAME }}
          </el-descriptions-item>
          <el-descriptions-item label="管控负责人">
            {{ item.HEADMAN }}
          </el-descriptions-item>
        </el-descriptions>
        <!--      TODO-->
        <layout-qr-code :src="item.RISKUNIT_ID" />
      </div>
    </div>
    <template #footer>
      <el-button @click="visible = false">关闭</el-button>
      <el-button type="primary" v-print="'#printContent'">打印</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { useVModel } from "@vueuse/core";
import LayoutQrCode from "@/components/qr_code/index.vue";

const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
    default: false,
  },
  list: {
    type: Array,
    required: true,
    default: () => [],
  },
});
const emits = defineEmits(["update:visible"]);
const visible = useVModel(props, "visible", emits);
</script>

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