<template>
  <div class="descriptions-table">
    <div class="title-wrap">
      <div class="letf">
        <span>{{ firstName }}</span>
      </div>
      <div class="right">
        <div class="top">
          <h2 class="name">{{ enterpriseObj.enterpriseName }}</h2>
          <span class="status">存续</span>
        </div>
        <p class="code">
          统一社会信用代码：{{ enterpriseObj.unifiedSocialCreditCode }}
        </p>
      </div>
    </div>
    <!-- 重要提示 -->
    <div class="tips">
      <div class="tips-title">重要提示：</div>
      <div class="tips-content">
        本平台信用信息来源于基本信息、信用承诺、资质信息、人员信息、业绩信息和其他信息等由企事业单位自行申报，其真实性、有效性由企事业单位负责，企事业单位对所填报的信息客任负责，不得含有虚假或违规内容。
      </div>
    </div>

    <div class="table-wrap">
      <div class="table-title">
        <span
          :class="currentItem === '1' ? 'act' : ''"
          @click="currentItem = '1'"
        >
          基本信息
        </span>

        <span
          :class="currentItem === '2' ? 'act' : ''"
          @click="currentItem = '2'"
        >
          信用承若
        </span>
      </div>
      <template v-if="currentItem === '1'">
        <el-descriptions
          class="margin-top"
          :column="2"
          border
          :content-style="rowCenter"
          :label-style="labelRowCenter"
        >
          <el-descriptions-item
            :label="item.label"
            v-for="(item, index) in descrData"
            :key="(item, index)"
          >
            {{ item.val }}
          </el-descriptions-item>
          <el-descriptions-item label="单位类别" span="2">
            {{ typeFormat(enterpriseType) }}
          </el-descriptions-item>
          <el-descriptions-item label="注册地址" span="2">
            {{ registeredAddress }}
          </el-descriptions-item>
          <el-descriptions-item label="经营范围" span="2">
            {{ businessScope }}
          </el-descriptions-item>
        </el-descriptions>
      </template>
      <template v-else>
        <el-descriptions
          class="margin-top"
          :column="2"
          border
          :content-style="rowCenter"
          :label-style="labelRowCenter"
        >
          <el-descriptions-item label="企业承若书" span="2">
            <div style="display: flex;flex-direction: column;">
              <span
                v-if="enterpriseObj.certificateInformation"
                style="cursor: pointer;color: #0072ff;"
                @click="
                  downloadEnterprisePromise(
                    enterpriseObj.certificateInformation
                  )
                "
                >下载承若书</span
              ><span style="color: #8b8b8b;" v-else>暂无文件</span>
              <span
                style="font-size: 14px;
    color: #777777;"
                >注:企业承诺书模版已更新，已使用原模板上传的仍然有效。</span
              >
            </div>
          </el-descriptions-item>
        </el-descriptions>
      </template>
    </div>
  </div>
</template>
<script>
import { enterpriseInfo } from "@/api/enterpriseInformation";
import { getGuangDong } from "@/api/creditStatistics";
import { getFileStream } from "@/api/common";

export default {
  data() {
    return {
      currentItem: "1",
      rowCenter: {
        borderColor: "#DADCE3"
      },
      labelRowCenter: {
        borderColor: "#DADCE3"
      },
      enterpriseId: "",
      enterpriseObj: {},
      firstName: "",
      descrData: [
        // {
        //   label: "企业名称",
        //   code: "enterpriseName",
        //   val: ""
        // },
        // {
        //   label: "投资组成",
        //   code: "investmentComposition",
        //   val: ""
        // },
        // {
        //   label: "法定代表人",
        //   code: "legalRepresentative",
        //   val: ""
        // },
        {
          label: "成立日期",
          code: "establishmentDate",
          val: ""
        },
        // {
        //   label: "统一社会信用代码",
        //   code: "unifiedSocialCreditCode",
        //   val: ""
        // },
        // {
        //   label: "登记机关",
        //   code: "creditCodeIssuingAuthority",
        //   val: ""
        // },
        {
          label: "注册地区",
          code: "adcd",
          val: ""
        },
        // {
        //   label: "注册地址",
        //   code: "registeredAddress",
        //   val: ""
        // },
        // {
        //   label: "注册资本（万元）",
        //   code: "registeredCapital",
        //   val: ""
        // },
        // {
        //   label: "实缴注册资本（万元）",
        //   code: "paidRegisteredCapital",
        //   val: ""
        // }
        {
          label: "单位性质",
          code: "investmentComposition",
          val: ""
        }
        // {
        //   label: "单位类别",
        //   code: "enterpriseType",
        //   val: ""
        // }
      ],
      updateTime: "",
      businessScope: "",
      areaList: [],
      registeredAddress: "",
      enterpriseType: "",
      categoryList: []
    };
  },
  mounted() {
    this.getDicts("qualification_type").then(res => {
      this.categoryList = res.data.data;
    });
    this.enterpriseId = this.$route.query.enterpriseId;
    this.getArea();
  },
  methods: {
    downloadEnterprisePromise(file) {
      console.log(file);
      getFileStream({ fileName: file.fileName }).then(res => {
        const blob = new Blob([res], {
          // type类型后端返回来的数据中会有，根据自己实际进行修改
          // 表格下载为 application/xlsx，压缩包为 application/zip等，
          type: "application/xlsx"
        }); //excel,pdf等
        const href = URL.createObjectURL(blob); //创建新的URL表示指定的blob对象
        const a = document.createElement("a"); //创建a标签
        a.style.display = "none";
        a.href = href; // 指定下载链接
        a.download = file.name; //指定下载文件名
        a.click(); //触发下载
        URL.revokeObjectURL(a.href); //释放URL对象
      });
    },
    typeFormat(row, column) {
      return this.selectDictLabel(this.categoryList, row);
    },
    getDetail() {
      enterpriseInfo(this.enterpriseId).then(res => {
        this.enterpriseObj = res.data.data;
        this.firstName = this.enterpriseObj.enterpriseName.trim().split("")[0];
        for (let key in this.enterpriseObj) {
          this.descrData.forEach(item => {
            if (key == item.code && item.code == "adcd") {
              item.val = this.getadcd(this.enterpriseObj[key]) || "-";
            } else if (key == item.code) {
              item.val = this.enterpriseObj[key] || "-";
            }
          });
        }
        this.updateTime = this.enterpriseObj.updateTime || "-";
        this.registeredAddress = this.enterpriseObj.registeredAddress || "-";
        this.enterpriseType = this.enterpriseObj.enterpriseType || "0";
        this.businessScope = this.enterpriseObj.businessScope || "-";
      });
    },
    getArea() {
      getGuangDong().then(res => {
        this.areaList = res.data.data;
        this.getDetail();
      });
    },
    getadcd(row) {
      let adcdText = "";
      let adcdCode = row.slice(0, 4) + "00";
      this.areaList.forEach(item => {
        if (item.xzqhdm == adcdCode) {
          adcdText = item.name;
        }
      });
      if (adcdText == "") {
        adcdText = "省外";
      }
      return adcdText;
    }
  }
};
</script>
<style lang="less" scoped>
.descriptions-table {
  padding: 20px;
  background-color: #ffffff;
  border-radius: 8px;
  .title-wrap {
    display: flex;

    .letf {
      margin-right: 20px;
      span {
        display: block;
        width: 70px;
        height: 70px;
        background: #f4faff;
        border-radius: 8px;
        border: 1px solid rgba(0, 94, 183, 0.3);
        text-align: center;
        line-height: 70px;

        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 34px;
        color: #005eb7;
        font-style: normal;
      }
    }

    .right {
      padding: 10px 0;
      .top {
        display: flex;
        h2 {
          font-family: PingFangSC, PingFang SC;
          font-weight: 600;
          font-size: 24px;
          color: #333333;
          line-height: 24px;
          text-align: left;
          font-style: normal;
          margin-bottom: 12px;
        }

        .status {
          margin-left: 10px;
          width: 40px;
          height: 24px;
          background: #f3fff9;
          border-radius: 4px;
          border: 1px solid rgba(0, 197, 96, 0.5);
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #00c560;
          text-align: center;
          line-height: 24px;
          font-style: normal;
        }
      }

      .code {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #666666;
        line-height: 14px;
        text-align: left;
        font-style: normal;
      }
    }
  }

  .tips {
    margin-top: 20px;
    padding: 20px;
    background: #f8fbfe;
    border: 1px solid #eff5fb;

    .tips-title {
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      font-size: 16px;
      color: #005eb7;
      line-height: 16px;
      text-align: left;
      font-style: normal;
    }

    .tips-content {
      margin-top: 10px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #666666;
      line-height: 20px;
      text-align: left;
      font-style: normal;
    }
  }
  .table-wrap {
    margin-top: 20px;

    .table-title {
      height: 47px;
      line-height: 47px;
      background-color: #f6f6f6;

      &::before {
        content: "";
        display: inline-block;
        width: 3px;
        height: 16px;
        background: #005eb7;
        margin-right: 10px;
        vertical-align: middle;
      }

      span {
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 16px;
        color: #333333;
        font-style: normal;
        margin-right: 10px;
        cursor: pointer;

        &.act {
          color: #005eb7;
        }
      }
    }
  }

  /deep/.el-descriptions {
    .el-descriptions-item__cell {
      padding: 11px 10px;
      font-size: 16px;
    }

    .el-descriptions-item__label {
      background: #ebf4fe;
      width: 240px;
      font-weight: 600;
      color: #005eb7;
      padding-left: 21px;
    }
  }
}
</style>
