<template>
  <card title="用工单位信息">
    <div class="wel-cards-business">
      <img src="/manage/svg/pic_business.svg" alt />
      <div class="wel-cards-txt">
        <div :title="companyName">
          <span>{{companyName}}</span>
        </div>
        <div>
          企业资料审核状态：
          <span v-if="status === 0" class="wel-cards-business-status">已审核</span>
          <span v-else-if="status === 1" class="wel-cards-business-status">未审核</span>
        </div>
      </div>
    </div>
  </card>
</template>

<script>
import card from "./card";
import { getBaseDetail } from "@/api/tenant/company";

export default {
  components: { card },
  data () {
    return {
      companyName: "",
      status: -1
    };
  },
  mounted () {
    this.getData();
  },
  methods: {
    getData () {
      getBaseDetail().then(resp => {
        this.companyName = resp.data.data.companyName;
        this.status = resp.data.data.status;
      });
    }
  }
};
</script>

<style>
.wel-cards-business {
  width: 100%;
  height: calc(100% - 20px);
  position: relative;
  overflow: hidden;
}
.wel-cards-business img {
  position: absolute;
  top: 10px;
  left: 0px;
  right: 10px;
  margin: auto;
  width: auto;
  height: 160px;
}
.wel-cards-business .wel-cards-txt {
  position: absolute;
  bottom: 0px;
  left: 0px;
}
.wel-cards-business .wel-cards-txt div {
  font-size: 16px;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.wel-cards-business .wel-cards-txt div:not(:first-child) {
  margin-top: 12px;
}
.wel-cards-business-status {
  color: #80bf50;
}
</style>
