<template>
  <div id="list-2">
    <el-row>
      <el-col :span="24" class="main">
        <el-col :span="24" class="one">
          <el-col
            :span="24"
            class="list"
            :style="{ width: copy_company_cert_size.p0.width + 'px', height: copy_company_cert_size.p0.height + 'px' }"
            v-for="(item, index) in list"
            :key="index"
          >
            <el-col :span="12" class="left">
              <el-col :span="24" class="p1">
                <span
                  class="p1_txt1"
                  :style="{
                    top: copy_company_cert_size.p1.top + 'px',
                    right: copy_company_cert_size.p1.right + 'px',
                    bottom: copy_company_cert_size.p1.bottom + 'px',
                    left: copy_company_cert_size.p1.left + 'px',
                  }"
                  >{{ item.licence_num }}</span
                >
              </el-col>
              <el-col :span="24" class="p1">
                <span
                  class="p1_txt2"
                  :style="{
                    top: copy_company_cert_size.p2.top + 'px',
                    right: copy_company_cert_size.p2.right + 'px',
                    bottom: copy_company_cert_size.p2.bottom + 'px',
                    left: copy_company_cert_size.p2.left + 'px',
                  }"
                  >{{ item.company }}</span
                >
              </el-col>
              <el-col :span="24" class="p1">
                <span
                  class="p1_txt3"
                  :style="{
                    top: copy_company_cert_size.p3.top + 'px',
                    right: copy_company_cert_size.p3.right + 'px',
                    bottom: copy_company_cert_size.p3.bottom + 'px',
                    left: copy_company_cert_size.p3.left + 'px',
                  }"
                  >{{ item.addres }}</span
                >
              </el-col>
              <el-col :span="24" class="p1">
                <span
                  class="p1_txt4"
                  :style="{
                    top: copy_company_cert_size.p4.top + 'px',
                    right: copy_company_cert_size.p4.right + 'px',
                    bottom: copy_company_cert_size.p4.bottom + 'px',
                    left: copy_company_cert_size.p4.left + 'px',
                  }"
                  >{{ item.legal_personal }}</span
                >
              </el-col>
              <el-col :span="24" class="p1">
                <span
                  class="p1_txt5"
                  :style="{
                    top: copy_company_cert_size.p5.top + 'px',
                    right: copy_company_cert_size.p5.right + 'px',
                    bottom: copy_company_cert_size.p5.bottom + 'px',
                    left: copy_company_cert_size.p5.left + 'px',
                  }"
                  >{{ item.baoan_sevicetype }}</span
                >
              </el-col>
              <el-col :span="24" class="p1">
                <span
                  class="p1_txt6"
                  :style="{
                    top: copy_company_cert_size.p6.top + 'px',
                    right: copy_company_cert_size.p6.right + 'px',
                    bottom: copy_company_cert_size.p6.bottom + 'px',
                    left: copy_company_cert_size.p6.left + 'px',
                  }"
                  >{{ item.register_money }}</span
                >
              </el-col>
              <el-col :span="24" class="p1">
                <span
                  class="p1_txt7"
                  :style="{
                    top: copy_company_cert_size.p7.top + 'px',
                    right: copy_company_cert_size.p7.right + 'px',
                    bottom: copy_company_cert_size.p7.bottom + 'px',
                    left: copy_company_cert_size.p7.left + 'px',
                  }"
                  >{{ item.approval_num }}</span
                >
              </el-col>
              <el-col :span="24" class="p1">
                <el-col
                  :span="24"
                  class="p1_txt8"
                  :style="{
                    top: copy_company_cert_size.p8.top + 'px',
                    right: copy_company_cert_size.p8.right + 'px',
                    bottom: copy_company_cert_size.p8.bottom + 'px',
                    left: copy_company_cert_size.p8.left + 'px',
                  }"
                >
                  <span>{{ item.year }}</span>
                  <span>{{ item.month }}</span>
                  <span>{{ item.day }}</span>
                </el-col>
              </el-col>
            </el-col>
            <el-col :span="12" class="right"> </el-col>
          </el-col>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  name: 'list-2',
  props: { list: { type: Array }, copy_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;
      .left {
        .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;
            font-family: monospace;
            font-size: 20px;
            font-weight: bold;
            span {
              display: inline-block;
              margin: 0 0 0 30px;
            }
          }
        }
      }
    }
  }
}
</style>
