<template>
  <div id="list-1">
    <el-row>
      <el-col :span="24" class="main">
        <el-col :span="24" class="one">
          <el-col
            :span="24"
            class="list"
            :style="{ width: baoan_cert_size.p0.width + 'px', height: baoan_cert_size.p0.height + 'px' }"
            v-for="(item, index) in list"
            :key="index"
          >
            <el-col :span="24" class="p1"
              ><span
                class="p1_txt1"
                :style="{
                  top: baoan_cert_size.p1.top + 'px',
                  right: baoan_cert_size.p1.right + 'px',
                  bottom: baoan_cert_size.p1.bottom + 'px',
                  left: baoan_cert_size.p1.left + 'px',
                }"
                >{{ item.name }}</span
              ></el-col
            >
            <el-col :span="24" class="p1"
              ><span
                class="p1_txt2"
                :style="{
                  top: baoan_cert_size.p2.top + 'px',
                  right: baoan_cert_size.p2.right + 'px',
                  bottom: baoan_cert_size.p2.bottom + 'px',
                  left: baoan_cert_size.p2.left + 'px',
                }"
                >{{ item.exam_grade }}</span
              ></el-col
            >
            <el-col :span="24" class="p1">
              <p
                class="p1_txt3"
                :style="{
                  top: baoan_cert_size.p3.top + 'px',
                  right: baoan_cert_size.p3.right + 'px',
                  bottom: baoan_cert_size.p3.bottom + 'px',
                  left: baoan_cert_size.p3.left + 'px',
                }"
              >
                <span>{{ item.year }}</span>
                <span>{{ item.month }}</span>
              </p>
            </el-col>
            <el-col :span="24" class="p1">
              <span
                class="p1_txt4"
                :style="{
                  top: baoan_cert_size.p4.top + 'px',
                  right: baoan_cert_size.p4.right + 'px',
                  bottom: baoan_cert_size.p4.bottom + 'px',
                  left: baoan_cert_size.p4.left + 'px',
                }"
                >{{ item.baoan_num }}</span
              >
            </el-col>
            <el-col :span="24" class="p1">
              <span
                class="p1_txt5"
                :style="{
                  top: baoan_cert_size.p5.top + 'px',
                  right: baoan_cert_size.p5.right + 'px',
                  bottom: baoan_cert_size.p5.bottom + 'px',
                  left: baoan_cert_size.p5.left + 'px',
                }"
                >{{ item.name }}</span
              >
            </el-col>
            <el-col :span="24" class="p1">
              <span
                class="p1_txt6"
                :style="{
                  top: baoan_cert_size.p6.top + 'px',
                  right: baoan_cert_size.p6.right + 'px',
                  bottom: baoan_cert_size.p6.bottom + 'px',
                  left: baoan_cert_size.p6.left + 'px',
                }"
                >{{ item.birth }}</span
              >
            </el-col>
            <el-col :span="24" class="p1">
              <span
                class="p1_txt7"
                :style="{
                  'font-size': getSize(item.house_onaddress),
                  top: baoan_cert_size.p7.top + 'px',
                  right: baoan_cert_size.p7.right + 'px',
                  bottom: baoan_cert_size.p7.bottom + 'px',
                  left: baoan_cert_size.p7.left + 'px',
                }"
                >{{ item.house_onaddress }}</span
              >
            </el-col>
            <el-col :span="24" class="p1">
              <span
                class="p1_txt8"
                :style="{
                  top: baoan_cert_size.p8.top + 'px',
                  right: baoan_cert_size.p8.right + 'px',
                  bottom: baoan_cert_size.p8.bottom + 'px',
                  left: baoan_cert_size.p8.left + 'px',
                }"
                >{{ item.card }}</span
              >
            </el-col>
          </el-col>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  name: 'list-1',
  props: { list: { type: Array }, baoan_cert_size: { type: Object } },
  components: {},
  data: function () {
    return {};
  },
  created() {},
  methods: {
    // 計算住址大小
    getSize(address) {
      if (address) {
        let length = address.length;
        if (length <= 32) {
          return '20px';
        } else if (length > 32) {
          return '12px';
        }
      }
    },
  },
  computed: {
    ...mapState(['user']),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  .one {
    .list {
      border: 1px solid #ff0000;
      .p1 {
        position: relative;
        .p1_txt1 {
          position: absolute;
          font-family: monospace;
          font-size: 20px;
          font-weight: bold;
        }
        .p1_txt2 {
          position: absolute;
          font-family: monospace;
          font-size: 20px;
          font-weight: bold;
        }
        .p1_txt3 {
          position: absolute;
          font-family: monospace;
          font-size: 20px;
          font-weight: bold;

          span {
            display: inline-block;
            margin: 0 0 0 50px;
          }
        }
        .p1_txt4 {
          position: absolute;
          font-family: monospace;
          font-size: 20px;
          font-weight: bold;
        }
        .p1_txt5 {
          position: absolute;
          font-family: monospace;
          font-size: 20px;
          font-weight: bold;
        }
        .p1_txt6 {
          position: absolute;
          font-family: monospace;
          font-size: 20px;
          font-weight: bold;
        }
        .p1_txt7 {
          position: absolute;
          font-family: monospace;
          font-weight: bold;
        }
        .p1_txt8 {
          position: absolute;
          font-family: monospace;
          font-size: 20px;
          font-weight: bold;
        }
      }
    }
  }
}
</style>
