<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: company_cert_size.p0.width + 'px', height: company_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: company_cert_size.p1.top + 'px',
                  right: company_cert_size.p1.right + 'px',
                  bottom: company_cert_size.p1.bottom + 'px',
                  left: company_cert_size.p1.left + 'px',
                }"
                >{{ item.licence_num }}</span
              >
            </el-col>
            <el-col :span="24" class="p1">
              <span
                class="p1_txt2"
                :style="{
                  top: company_cert_size.p2.top + 'px',
                  right: company_cert_size.p2.right + 'px',
                  bottom: company_cert_size.p2.bottom + 'px',
                  left: company_cert_size.p2.left + 'px',
                }"
                >{{ item.company }}</span
              >
            </el-col>
            <el-col :span="24" class="p1">
              <span
                class="p1_txt3"
                :style="{
                  top: company_cert_size.p3.top + 'px',
                  right: company_cert_size.p3.right + 'px',
                  bottom: company_cert_size.p3.bottom + 'px',
                  left: company_cert_size.p3.left + 'px',
                }"
                >{{ item.addres }}</span
              >
            </el-col>
            <el-col :span="24" class="p1">
              <span
                class="p1_txt4"
                :style="{
                  top: company_cert_size.p4.top + 'px',
                  right: company_cert_size.p4.right + 'px',
                  bottom: company_cert_size.p4.bottom + 'px',
                  left: company_cert_size.p4.left + 'px',
                }"
                >{{ item.legal_personal }}</span
              >
            </el-col>
            <el-col :span="24" class="p1">
              <span
                class="p1_txt5"
                :style="{
                  top: company_cert_size.p5.top + 'px',
                  right: company_cert_size.p5.right + 'px',
                  bottom: company_cert_size.p5.bottom + 'px',
                  left: company_cert_size.p5.left + 'px',
                }"
                >{{ item.baoan_sevicetype }}</span
              >
            </el-col>
            <el-col :span="24" class="p1">
              <span
                class="p1_txt6"
                :style="{
                  top: company_cert_size.p6.top + 'px',
                  right: company_cert_size.p6.right + 'px',
                  bottom: company_cert_size.p6.bottom + 'px',
                  left: company_cert_size.p6.left + 'px',
                }"
                >{{ item.register_money }}</span
              >
            </el-col>
            <el-col :span="24" class="p1">
              <span
                class="p1_txt7"
                :style="{
                  top: company_cert_size.p7.top + 'px',
                  right: company_cert_size.p7.right + 'px',
                  bottom: company_cert_size.p7.bottom + 'px',
                  left: company_cert_size.p7.left + 'px',
                }"
                >{{ item.approval_num }}</span
              >
            </el-col>
            <el-col :span="24" class="p1">
              <el-col
                :span="12"
                class="p1_txt8"
                :style="{
                  top: company_cert_size.p8.top + 'px',
                  right: company_cert_size.p8.right + 'px',
                  bottom: company_cert_size.p8.bottom + 'px',
                  left: company_cert_size.p8.left + 'px',
                }"
              >
                <p>温馨提示：此证有效期至{{ item.effective_date }}。</p>
                <p>到期年检合格后，予以换证。</p>
              </el-col>
              <el-col
                :span="6"
                class="p1_txt9"
                :style="{
                  top: company_cert_size.p9.top + 'px',
                  right: company_cert_size.p9.right + 'px',
                  bottom: company_cert_size.p9.bottom + 'px',
                  left: company_cert_size.p9.left + 'px',
                }"
              >
                <span>{{ item.year }}</span>
                <span>{{ item.month }}</span>
                <span>{{ item.day }}</span>
              </el-col>
            </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 }, company_cert_size: { type: Object } },
  components: {},
  data: function () {
    return {};
  },
  created() {},
  methods: {},
  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;
        }
        .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-size: 20px;
          font-weight: bold;
        }
        .p1_txt8 {
          position: absolute;
          top: 625px;
          right: 0;
          bottom: 0;
          left: 165px;
          font-family: monospace;
          font-size: 12px;
          font-weight: bold;
          text-align: center;
          p {
            margin: 0 0 5px 0;
          }
        }
        .p1_txt9 {
          position: relative;

          font-family: monospace;
          font-size: 20px;
          font-weight: bold;
          span {
            display: inline-block;
            margin: 0 0 0 50px;
          }
        }
      }
    }
  }
}
</style>
