<template>
  <div class="risk-inquiry" v-loading="loading">
    <div class="head card">
      <div>
        <i class="el-icon-chat-line-round" />
        <span>企业信息</span>
      </div>
      <div @click="updateInfo">
        <i class="el-icon-refresh" />
        <span>更新数据</span>
      </div>
    </div>
    <div class="card base-info" v-if="detailInfo && detailInfo.bizInfo">
      <div class="info">
        <div class="logo">
          <img :src="detailInfo.bizInfo.ImageUrl" alt="" />
        </div>
        <div class="content">
          <div class="title">
            <span class="name">{{ detailInfo.bizInfo.Name }}</span>
          </div>
          <div class="create-time">上次更新时间: {{ detailInfo.createTime }}</div>
        </div>
      </div>
    </div>
    <div class="card" v-if="detailInfo.bizInfo">
      <div class="card-info-content">
        <el-descriptions
          title="工商信息"
          :column="3"
          size="medium"
          border
          :labelStyle="{
            width: '150px',
            background: '#f2f9fc'
          }"
        >
          <el-descriptions-item label="统一社会信用代码">
            {{ detailInfo.bizInfo.CreditCode }}
          </el-descriptions-item>
          <el-descriptions-item label="企业名称" :span="2">
            {{ detailInfo.bizInfo.Name }}
          </el-descriptions-item>
          <el-descriptions-item label="法定代表人">
            {{ detailInfo.bizInfo.OperName }}
          </el-descriptions-item>
          <el-descriptions-item label="登记状态">
            {{ detailInfo.bizInfo.Status }}
          </el-descriptions-item>
          <el-descriptions-item label="省份">
            {{ detailInfo.bizInfo.Province }}
          </el-descriptions-item>
          <el-descriptions-item label="成立日期">
            {{ detailInfo.bizInfo.StartDate }}
          </el-descriptions-item>
          <el-descriptions-item label="吊销日期">
            {{ detailInfo.bizInfo.EndDate }}
          </el-descriptions-item>
          <el-descriptions-item label="更新日期">
            {{ detailInfo.bizInfo.UpdatedDate }}
          </el-descriptions-item>
          <el-descriptions-item label="注册资本">
            {{ detailInfo.bizInfo.RegistCapi }}
          </el-descriptions-item>
          <el-descriptions-item label="实缴资本">
            {{ detailInfo.bizInfo.RecCap }}
          </el-descriptions-item>

          <el-descriptions-item label="组织机构代码">
            {{ detailInfo.bizInfo.OrgNo }}
          </el-descriptions-item>
          <el-descriptions-item label="工商注册号">
            {{ detailInfo.bizInfo.No }}
          </el-descriptions-item>
          <el-descriptions-item label="纳税人识别号">
            {{ detailInfo.bizInfo.CreditCode }}
          </el-descriptions-item>
          <el-descriptions-item label="企业类型">
            {{ detailInfo.bizInfo.EconKind }}
          </el-descriptions-item>
          <el-descriptions-item label="企业规模">
            {{ detailInfo.scale }}
          </el-descriptions-item>
          <el-descriptions-item label="营业期限">
            <!-- 缺截止日期 -->
            {{ detailInfo.bizInfo.TermStart }} 至
            {{ detailInfo.bizInfo.TermEnd }}
          </el-descriptions-item>
          <el-descriptions-item label="纳税人资质"> </el-descriptions-item>
          <el-descriptions-item label="所属地区">
            {{ detailInfo.bizInfo.Address }}
          </el-descriptions-item>
          <el-descriptions-item label="登记机关">
            {{ detailInfo.bizInfo.BelongOrg }}
          </el-descriptions-item>
          <el-descriptions-item label="核准日期">
            {{ detailInfo.bizInfo.CheckDate }}
          </el-descriptions-item>
          <el-descriptions-item label="是否上市">
            {{ detailInfo.bizInfo.IsOnStock === '0' ? '是' : '否' }}
          </el-descriptions-item>
          <el-descriptions-item label="股票代码">
            {{ detailInfo.bizInfo.StockNumber }}
          </el-descriptions-item>
          <el-descriptions-item label="上市类型">
            {{ detailInfo.bizInfo.StockType }}
          </el-descriptions-item>
          <el-descriptions-item label="注册地址" :span="3">
            {{ detailInfo.bizInfo.Address }}
          </el-descriptions-item>
          <el-descriptions-item label="经营范围" :span="3">
            {{ detailInfo.bizInfo.Scope }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>

    <el-tabs type="border-card" class="tabs">
      <el-tab-pane label="曾用名">
        <!-- 曾用名 -->
        <div class="card">
          <div class="card-info-content">
            <div class="title">
              曾用名
            </div>
            <div class="table">
              <el-table :data="(detailInfo.bizInfo && detailInfo.bizInfo.OriginalName) || []" border style="width: 100%">
                <el-table-column prop="Name" label="曾用名" />
                <el-table-column prop="ChangeDate" label="变更日期" />
              </el-table>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="注销吊销信息">
        <!-- 注销吊销信息  -->
        <div class="card" v-if="detailInfo.revokeInfo">
          <div class="card-info-content">
            <el-descriptions
              title="注销吊销信息"
              :column="2"
              size="medium"
              border
              :labelStyle="{
                width: '150px',
                background: '#f2f9fc'
              }"
            >
              <el-descriptions-item label="注销原因">
                {{ detailInfo.revokeInfo && detailInfo.revokeInfo.CancelReason }}
              </el-descriptions-item>
              <el-descriptions-item label="注销日期">
                {{ detailInfo.revokeInfo && detailInfo.revokeInfo.CancelDate }}
              </el-descriptions-item>
              <el-descriptions-item label="吊销日期">
                {{ detailInfo.revokeInfo && detailInfo.revokeInfo.RevokeDate }}
              </el-descriptions-item>
              <el-descriptions-item label="吊销原因">
                {{ detailInfo.revokeInfo && detailInfo.revokeInfo.RevokeReason }}
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </div>
        <div v-else>
          <el-empty description="暂无数据信息" />
        </div>
      </el-tab-pane>
      <!-- 开票信息 -->
      <el-tab-pane label="开票信息">
        <!-- 开票信息  -->
        <div class="card" v-if="detailInfo.bankInfo">
          <div class="card-info-content">
            <el-descriptions
              title="开票信息"
              :column="3"
              size="medium"
              border
              :labelStyle="{
                width: '150px',
                background: '#f2f9fc'
              }"
            >
              <el-descriptions-item label="开户行">
                {{ detailInfo.bankInfo && detailInfo.bankInfo.Bank }}
              </el-descriptions-item>
              <el-descriptions-item label="开户行账号">
                {{ detailInfo.bankInfo && detailInfo.bankInfo.BankAccount }}
              </el-descriptions-item>
              <el-descriptions-item label="企业名称">
                {{ detailInfo.bankInfo && detailInfo.bankInfo.Name }}
              </el-descriptions-item>
              <el-descriptions-item label="企业税号">
                {{ detailInfo.bankInfo && detailInfo.bankInfo.CreditCode }}
              </el-descriptions-item>
              <el-descriptions-item label="企业地址">
                {{ detailInfo.bankInfo && detailInfo.bankInfo.Address }}
              </el-descriptions-item>
              <el-descriptions-item label="电话号码">
                {{ detailInfo.bankInfo && detailInfo.bankInfo.Tel }}
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </div>
        <div v-else>
          <el-empty description="暂无数据信息" />
        </div>
      </el-tab-pane>
      <el-tab-pane label="工商登记主要股东">
        <!-- 工商登记主要股东 -->
        <div class="card">
          <div class="card-info-content">
            <div class="title">
              工商登记股东
            </div>
            <div class="table">
              <el-table :data="detailInfo.partnerList || []" border style="width: 100%">
                <el-table-column prop="StockName" label="投资人" />
                <el-table-column prop="StockType" label="投资人类型" />
                <el-table-column prop="StockPercent" label="持股比例" />
                <el-table-column prop="FinalBenefitPercent" label="最终受益股份" />
              </el-table>
            </div>
          </div></div
      ></el-tab-pane>
      <el-tab-pane label="工商登记主要人员">
        <!-- 工商登记主要人员 -->
        <div class="card">
          <div class="card-info-content">
            <div class="title">
              工商登记主要人员
            </div>
            <div class="table">
              <el-table :data="detailInfo.employeeList || []" border style="width: 100%">
                <el-table-column prop="Name" label="名称" />
                <el-table-column prop="Job" label="职务" />
              </el-table>
            </div>
          </div></div
      ></el-tab-pane>
      <el-tab-pane label="变更信息">
        <!-- 变更信息 -->
        <div class="card">
          <div class="card-info-content">
            <div class="title">
              变更信息
            </div>
            <div class="table" v-if="detailInfo.changeList">
              <el-table :data="detailInfo.changeList" border style="width: 100%">
                <el-table-column prop="ProjectName" label="变更事项" />
                <el-table-column prop="ChangeDate" label="变更日期" />
                <el-table-column prop="BeforeContent" label="变更前" />
                <el-table-column prop="AfterContent" label="变更后" />
              </el-table>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="实际控制人">
        <!-- 实际控制人 -->
        <div class="card">
          <div class="card-info-content">
            <div class="title">
              实际控制人
            </div>
            <div class="table">
              <el-table :data="detailInfo.actualControllerList || []" border style="width: 100%">
                <el-table-column prop="Name" label="实际控制人名称" />
                <el-table-column prop="FinalBenefitPercentName" label="最终受益股份" />
                <el-table-column prop="ControlPercent" label="表决权" />
              </el-table>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="行政许可">
        <!-- 行政许可 -->
        <div class="card">
          <div class="card-info-content">
            <div class="title">
              行政许可
            </div>
            <div class="table" v-if="detailInfo.adminLicenseList">
              <el-table :data="detailInfo.adminLicenseList" border style="width: 100%">
                <el-table-column prop="DocumentNo" label="决定文书/许可编号" />
                <el-table-column prop="LicenseName" label="决定文书/许可证名称" />
                <el-table-column prop="ValidityFrom" label="有效期自" />
                <el-table-column prop="ValidityTo" label="有效期至" />
                <el-table-column prop="LicensOffice" label="许可机关" />
                <el-table-column prop="LicensContent" label="许可内容" />
                <el-table-column prop="Source" label="来源" />
              </el-table>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="纳税信用等级">
        <!-- 纳税信用等级 -->
        <div class="card">
          <div class="card-info-content">
            <div class="title">
              纳税信用等级
            </div>
            <div class="table" v-if="detailInfo.taxCreditList">
              <el-table :data="detailInfo.taxCreditList" border style="width: 100%">
                <el-table-column prop="No" label="纳税人识别号" />
                <el-table-column prop="Name" label="名称" />
                <el-table-column prop="Year" label="评价年度" />
                <el-table-column prop="Level" label="纳税信用等级" />
                <el-table-column prop="Org" label="评价单位" />
              </el-table>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>

    <el-tabs type="border-card">
      <el-tab-pane label="失信被执行人">
        <!-- 失信被执行人 -->
        <div class="card">
          <div class="card-info-content">
            <div class="title">
              失信被执行人
            </div>
            <div class="table" v-if="detailInfo.shiXin">
              <el-table :data="detailInfo.shiXin || []" border style="width: 100%">
                <el-table-column prop="Liandate" label="立案日期" />
                <el-table-column prop="Anno" label="案号" />
                <el-table-column prop="Executegov" label="执行法院" />
                <el-table-column prop="Executestatus" label="被执行人的履行情况" />
                <el-table-column prop="Publicdate" label="发布日期" />
                <el-table-column prop="Executeno" label="执行依据文号" />
                <el-table-column prop="ActionRemark" label="失信行为" />
                <el-table-column prop="Amount" label="涉案金额(元)" />
              </el-table>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="被执行人">
        <!-- 被执行人 -->
        <div class="card">
          <div class="card-info-content">
            <div class="title">
              被执行人
            </div>
            <div class="table" v-if="detailInfo.zhiXing">
              <el-table :data="detailInfo.zhiXing || []" border style="width: 100%">
                <el-table-column prop="Liandate" label="立案时间" />
                <el-table-column prop="Anno" label="立案号" />
                <el-table-column prop="ExecuteGov" label="执行法院" />
                <el-table-column prop="Biaodi" label="执行标的" />
                <el-table-column prop="SuspectedApplicant" label="疑似申请执行人" />
              </el-table>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="行政处罚">
        <!-- 行政处罚 -->
        <div class="card">
          <div class="card-info-content">
            <div class="title">
              行政处罚
            </div>
            <div class="table" v-if="detailInfo.adminPenalty">
              <el-table :data="detailInfo.adminPenalty" border style="width: 100%">
                <el-table-column prop="DocNo" label="决定文书号" />
                <el-table-column prop="PunishReason" label="违法事实" />
                <el-table-column prop="PunishResult" label="处罚结果" />
                <el-table-column prop="PunishAmt" label="处罚金额（元）" />
                <el-table-column prop="PunishOffice" label="处罚单位" />
                <el-table-column prop="PunishDate" label="处罚日期" />
              </el-table>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="经营异常">
        <!-- 经营异常 -->
        <div class="card">
          <div class="card-info-content">
            <div class="title">
              经营异常
            </div>
            <div class="table">
              <el-table :data="detailInfo.exp || []" border style="width: 100%">
                <el-table-column prop="AddReason" label="列入经营异常名录原因" />
                <el-table-column prop="AddDate" label="列入日期" />
                <el-table-column prop="RomoveReason" label="移出经营异常名录原因" />
                <el-table-column prop="RemoveDate" label="移出日期" />
                <el-table-column prop="DecisionOffice" label="作出决定机关" />
                <el-table-column prop="RemoveDecisionOffice" label="移出决定机关" />
              </el-table>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="动产抵押">
        <!-- 动产抵押 -->
        <div class="card">
          <div class="card-info-content">
            <div class="title">
              动产抵押
            </div>
            <div class="table">
              <el-table :data="detailInfo.chattelMortgage || []" border style="width: 100%">
                <el-table-column prop="RegisterNo" label="登记编号" />
                <el-table-column prop="RegisterDate" label="登记日期" />
                <el-table-column prop="DebtSecuredAmount" label="被担保债权数额" />
                <el-table-column prop="Status" label="状态" />
              </el-table>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="清算信息">
        <!-- 清算信息 -->
        <div class="card" v-if="detailInfo.liquidation">
          <div class="card-info-content">
            <el-descriptions
              title="清算信息"
              :column="2"
              size="medium"
              border
              :labelStyle="{
                width: '150px',
                background: '#f2f9fc'
              }"
            >
              <el-descriptions-item label="清算组负责人">
                {{ detailInfo.liquidation && detailInfo.liquidation.Leader }}
              </el-descriptions-item>
              <el-descriptions-item label="清算组成员">
                {{ detailInfo.liquidation && detailInfo.liquidation.Member }}
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </div>
        <div v-else>
          <el-empty description="暂无数据信息" />
        </div>
      </el-tab-pane>
      <el-tab-pane label="严重违法">
        <!-- 严重违法 -->
        <div class="card">
          <div class="card-info-content">
            <div class="title">
              严重违法
            </div>
            <div class="table">
              <el-table :data="detailInfo.seriousIllegal || []" border style="width: 100%">
                <el-table-column prop="AddDate" label="列入日期" />
                <el-table-column prop="AddOffice" label="作出决定机关(列入)" />
                <el-table-column prop="AddReason" label="列入严重违法失信企业名单原因" />
                <el-table-column prop="RemoveDate" label="移出日期" />
                <el-table-column prop="RemoveOffice" label="作出决定机关(移出)" />
                <el-table-column prop="RemoveReason" label="移出严重违法失信企业名单原因" />
              </el-table>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="破产重整">
        <!-- 破产重整 -->
        <div class="card">
          <div class="card-info-content">
            <div class="title">
              破产重整
            </div>
            <el-table :data="detailInfo.bankruptcy || []" border style="width: 100%">
              <el-table-column prop="CaseNo" label="案号" />
              <el-table-column prop="PublicDate" label="公开日期" />
              <el-table-column label="申请人信息">
                <template slot-scope="scope">
                  <div v-for="(item, index) in scope.row.ApplicantList" :key="index">
                    <span>{{ item.Name }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="被申请人信息">
                <template slot-scope="scope">
                  <div v-for="(item, index) in scope.row.RespondentList" :key="index">
                    <span>{{ item.Name }}</span>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="限制高消费">
        <!-- 限制高消费 -->
        <div class="card">
          <div class="card-info-content">
            <div class="title">
              限制高消费
            </div>
            <div class="table">
              <el-table :data="detailInfo.sumptuary || []" border style="width: 100%">
                <el-table-column prop="CaseNo" label="案号" />
                <el-table-column prop="CompanyName" label="限消令对象" />
                <el-table-column prop="PersonName" label="人员姓名" />
                <el-table-column prop="JudgeDate" label="立案日期" />
                <el-table-column prop="PublishDate" label="发布日期" />
                <el-table-column prop="Applicant" label="申请人" />
              </el-table>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="税收违法">
        <!-- 税收违法 -->
        <div class="card">
          <div class="card-info-content">
            <div class="title">
              税收违法
            </div>
            <div class="table">
              <el-table :data="detailInfo.taxIllegal || []" border style="width: 100%">
                <el-table-column prop="PublishDate" label="发布日期" />
                <el-table-column prop="CaseNature" label="案件性质" />
                <el-table-column prop="TaxGov" label="所属税务机关" />
                <el-table-column prop="IllegalContent" label="主要违法事实" />
                <el-table-column prop="PunishContent" label="法律依据及处理处罚情况" />
              </el-table>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="税务非正常户" v-if="false">
        <!-- 税收违法 -->
        <div class="card">
          <div class="card-info-content">
            <div class="title">
              税收违法
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {qccInfoDetails, qccInfoRefresh} from '@/api/qcc.js';

export default {
  data() {
    return {
      detailInfo: {},
      loading: false
    };
  },
  created() {
    this.getDetail();
  },
  methods: {
    async getDetail() {
      // 91110000100010062X
      const id = this.$route.query.id;
      // const id = '91110000100010062X';
      this.loading = true;
      const res = await qccInfoDetails(id);
      if (res.data.data) {
        this.detailInfo = res.data.data;
      } else {
        this.updateInfo();
      }
      console.log(' this.detailInfo ', this.detailInfo);
      this.loading = false;
    },
    updateInfo() {
      this.loading = true;
      qccInfoRefresh({
        regCode: this.$route.query.id
        // regCode: '91110000100010062X'
      })
        .then(res => {
          if (res.data.code === 0) {
            this.detailInfo = res.data.data.qccInfo;
          }
          this.loading = false;
        })
        .catch(err => {
          this.loading = false;
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.risk-inquiry {
  padding: 10px;
  padding-right: 20px;
  overflow: auto;
  height: calc(100vh - 130px);
  .card {
    background: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    margin-bottom: 10px;
    width: 100%;
  }
  .head {
    display: flex;
    justify-content: space-between;
    align-items: center;

    div {
      cursor: pointer;
      padding: 20px 25px;
      line-height: 16px;
      font-size: 14px;
      color: #666;
      span {
        margin-left: 6px;
      }
    }
  }
  .base-info {
    padding: 20px 30px;
    min-height: 80px;
    .info {
      display: flex;
      height: 60px;
      .logo {
        width: 60px;
        height: 60px;
        margin-right: 25px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .content {
        display: flex;
        align-items: center;
        .title {
          .name {
            font-size: 22px;
            font-weight: 500;
            line-height: 60px;
            margin-right: 10px;
            color: #1e2024;
          }
        }
        .create-time {
          color: #666;
        }
      }
    }
  }

  .card-info-content {
    padding: 30px;
    margin-top: 10px;

    .title {
      font-weight: 700;
      font-size: 16px;
      margin-bottom: 20px;
    }
  }
}
.tabs {
  margin-bottom: 30px;
}
</style>
