<template>
  <basic-container>
    <div v-loading="loading">
      <el-row>
        <el-col :sm="24" :md="{ span: 12, offset: 6 }">
          <img class="basic-info-container-stamp" src="/manage/img/stamp.png" />
          <div class="basic-info-container">
            <el-form
              :model="form"
              ref="form"
              class="content"
              label-position="right"
              label-width="180px"
            >
              <el-form-item label="法人姓名：">
                <span>{{ form.masterName }}</span>
              </el-form-item>
              <el-form-item label="法人身份证号：">
                <span>{{ form.masterIdentity }}</span>
              </el-form-item>
              <el-form-item label="用工单位：">
                <span>{{ form.companyName }}</span>
              </el-form-item>
              <el-form-item label="统一社会信用代码：">
                <span>{{ form.companyTid }}</span>
              </el-form-item>
              <el-form-item label="所在地区：">
                <span>{{ cityId[0] }}/{{ cityId[1] }}/{{ cityId[2] }}</span>
              </el-form-item>
              <el-form-item label="详细地址：">
                <span>{{ form.companyAddress }}</span>
              </el-form-item>
              <el-form-item label="所属行业：">
                <span>{{ tradeId }}</span>
              </el-form-item>
              <el-form-item label="企业营业执照：">
                <!--:src="props.row.cImg"-->
                <img :src="form.authUrlId" class="avatarImg" />
              </el-form-item>
            </el-form>
          </div>
        </el-col>
      </el-row>
    </div>
  </basic-container>
</template>
<script>
import { getTradeDic } from "@/api/manage/trade";
import { getBaseDetail } from "@/api/tenant/company";

export default {
  props: {},
  data() {
    return {
      form: {},
      loading: false,
      tradeDic: [],
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      getBaseDetail().then((res) => {
        this.form = res.data.data;
      });
      getTradeDic(true).then((res) => {
        this.tradeDic = res.data.data;
      });
    },
  },
  computed: {
    tradeId() {
      let name = "";
      this.tradeDic.forEach((item) => {
        if (item.id === this.form.tradeId) {
          name = item.name;
          return;
        }
      });
      return name;
    },
    cityId() {
      const result = ["", "", ""];
      if (this.form.cityId) {
        const city = this.$store.getters.getAreaParents(this.form.cityId);
        for (let i = 0; i < city.length; i++) {
          const element = city[i];
          result[i] = element.label;
        }
      }
      return result;
    },
  },
};
</script>
<style scoped>
.avatarImg {
  width: 160px;
  height: 100px;
}
.basic-info-container {
  position: relative;
  z-index: 1;
}
.basic-info-container-stamp {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 40%;
}
</style>
