<template>
  <div class="app-container rela-container">
    <div class="common-title">关系企业</div>
    <el-tabs v-model="activeName" @tab-click="handleClick" class="tabpane selfTab">
      <el-tab-pane label="股东" name="first"></el-tab-pane>
      <el-tab-pane label="对外投资" :disabled="shipTotal<1" name="second"></el-tab-pane>
      <el-tab-pane label="分支机构" :disabled="affiliatesTotal<1" name="third"></el-tab-pane>
    </el-tabs>
    <skeleton style="margin-left:16px;" v-if="isSkeleton"></skeleton>
    <div class="table-item" v-else>
      <div class="rela-person" v-show="activeName=='first'">实际控制人：{{childFinancial&&childFinancial.actualController || '--'}}</div>
      <el-table :data="holderData" border style="width: 100%" v-show="activeName=='first'">
        <el-table-column label="序号" width="55" align="left" fixed>
          <template slot-scope="scope">{{ holderParams.pageNum * holderParams.pageSize - holderParams.pageSize + scope.$index + 1 }}</template>
        </el-table-column>
        <el-table-column min-width="140" label="股东名称">
          <template slot-scope="scope">
            <router-link :to="scope.row.uipId?`/enterprise/${encodeStr(scope.row.stockId)}`:`/company/${encodeStr(scope.row.stockId)}`" tag="a"
              class="a-link" v-if="scope.row.stockId&&scope.row.stockName" v-html="scope.row.stockName"></router-link>
            <div v-else v-html="scope.row.stockName  || '--'"></div>
          </template>
        </el-table-column>
        <el-table-column prop="shouldCapiConv" label="应缴金额"></el-table-column>
        <el-table-column prop="stockPercent" label="持股比例"></el-table-column>
        <el-table-column prop="" label="法定代表人">
          <template slot-scope="scope">
            <span>{{scope.row.corporatePerson || '--'}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="" label="成立日期">
          <template slot-scope="scope">
            <span>{{scope.row.registeredDate || '--'}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="" label="企业状态">
          <template slot-scope="scope">
            <span>{{scope.row.businessStatus || '--'}}</span>
          </template>
        </el-table-column>
      </el-table>
      <el-table v-if="shipData.length>0" :data="shipData" border style="width: 100%" v-show="activeName=='second'">
        <el-table-column label="序号" width="55" align="left" fixed>
          <template slot-scope="scope">{{ shipParams.pageNum * shipParams.pageSize - shipParams.pageSize + scope.$index + 1 }}</template>
        </el-table-column>
        <el-table-column min-width="140" label="被投资企业名称">
          <template slot-scope="scope">
            <router-link :to="scope.row.uipId?`/enterprise/${encodeStr(scope.row.id)}`:`/company/${encodeStr(scope.row.id)}`" tag="a" class="a-link"
              v-if="scope.row.id&&scope.row.investName" v-html="scope.row.investName"></router-link>
            <div v-else v-html="scope.row.investName  || '--'"></div>
            <div class="tags" v-if="scope.row.businessStatus || scope.row.biddingAnnouncement">
              <span class="tag" :class="labelArr.includes(scope.row.businessStatus)?'style2':'style1'"
                v-if="scope.row.businessStatus">{{scope.row.businessStatus}}</span>
              <span class="tag style1" v-if="scope.row.biddingCount">招标数{{scope.row.biddingCount}}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="investOperName" label="法定代表人"></el-table-column>
        <el-table-column label="注册资本">
          <template slot-scope="scope">
            <span>{{scope.row.investRegistCapi || '--'}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="investStartDate" label="成立日期"></el-table-column>
        <el-table-column prop="stockPercentage" label="股权占比"></el-table-column>
        <el-table-column prop="shouldCapi" label="认缴出资额（万元）">
          <template slot-scope="scope">
            <span>{{scope.row.shouldCapi>0?scope.row.shouldCapi:'--'}}</span>
          </template>
        </el-table-column>
      </el-table>
      <no-data v-if="activeName=='second'&&shipData.length<1" />
      <el-table :data="affiliatesData" border style="width: 100%" v-show="activeName=='third'">
        <el-table-column label="序号" width="55" align="left">
          <template
            slot-scope="scope">{{ affiliatesParams.pageNum * affiliatesParams.pageSize - affiliatesParams.pageSize + scope.$index + 1 }}</template>
        </el-table-column>
        <el-table-column min-width="140" label="被投资企业名称">
          <template slot-scope="scope">
            <router-link :to="scope.row.uipId?`/enterprise/${encodeStr(scope.row.id)}`:`/company/${encodeStr(scope.row.id)}`" tag="a" class="a-link"
              v-if="scope.row.id&&scope.row.name" v-html="scope.row.name"></router-link>
            <div v-else v-html="scope.row.name  || '--'"></div>
            <div class="tags" v-if="scope.row.status || scope.row.biddingCount|| scope.row.landInfoCount|| scope.row.proposedProjectCount">
              <span class="tag" :class="labelArr.includes(scope.row.status)?'style2':'style1'" v-if="scope.row.status">{{scope.row.status}}</span>
              <span class="tag style1" v-if="scope.row.proposedProjectCount">拟建{{scope.row.proposedProjectCount}}</span>
              <span class="tag style1" v-if="scope.row.landInfoCount">土地{{scope.row.landInfoCount}}</span>
              <span class="tag style1" v-if="scope.row.biddingCount">招标{{scope.row.biddingCount}}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="operName" label="负责人"></el-table-column>
        <el-table-column label="地区">
          <template slot-scope="scope">
            {{scope.row.provinceName}}
            <template v-if="scope.row.cityName">
              -
            </template>
            {{scope.row.cityName}}
            <template v-if="scope.row.districtName">
              -
            </template>
            {{scope.row.districtName}}
          </template>
        </el-table-column>
        <el-table-column prop="startDate" label="成立日期"></el-table-column>
      </el-table>
      <div class="rela-more" v-show="activeName=='second'&& shipTotal>shipParams.pageSize"><span class="a-link" @click="handlePath">查看更多数据 ></span>
      </div>
      <div class="rela-more" v-show="activeName=='third'&& affiliatesTotal>affiliatesParams.pageSize"><span class="a-link" @click="handlePath1">查看更多数据
          ></span></div>
    </div>
  </div>
</template>

<script>
import { encodeStr, changePath } from "@/assets/js/common";
import { bestStockPage, investment, affiliates } from '@/api/detail/party-a/overview';
import NoData from '../../component/noData';
import skeleton from '@/views/project/projectList/component/skeleton';
export default {
  name: 'Relationship',
  props: ['companyId', 'financial'],
  components: {
    NoData, skeleton
  },
  data() {
    return {
      isSkeleton: true,
      encodeStr,
      activeName: 'first',
      //表格数据
      holderData: [],
      holderParams: {
        cid: this.companyId,
        isHistory: 0,
        pageNum: 1,
        pageSize: 100
      },
      shipData: [],
      shipParams: {
        cid: this.companyId,
        pageNum: 1,
        pageSize: 5
      },
      shipTotal: 0,
      affiliatesData: [],
      affiliatesParams: {
        cid: this.companyId,
        pageNum: 1,
        pageSize: 5
      },
      affiliatesTotal: 0,
      labelArr: ['失信联合惩戒企业', '严重行政处罚', '司法纠纷', '注销', '注销企业'],
      childFinancial: {}
    };
  },
  watch: {
    financial: {
      handler(newValue) {
        this.childFinancial = newValue;
      },
      deep: true
    }
  },
  created() {
    this.handleQuery();
    this.handleInvest();
    this.getAffiliatesData();
  },
  mounted() {
  },
  methods: {
    async handleQuery() {
      this.isSkeleton = true;
      let res = await bestStockPage(this.holderParams);
      if (res.code == 200) {
        this.isSkeleton = false;
        if (res.rows && res.rows.length > 0) {
          res.rows.forEach(item => {
            item.stockPercent ? item.stockPercent = parseFloat(Number(item.stockPercent * 100).toFixed(4)) + '%' : '';
          });
        }
        this.holderData = res.rows;
      }
    },
    async handleInvest() {
      let res = await investment(this.shipParams);
      if (res.code == 200) {
        if (res.rows && res.rows.length > 0) {
          res.rows.forEach(item => {
            item.stockPercentage ? item.stockPercentage = parseFloat(Number(item.stockPercentage * 100).toFixed(4)) + '%' : '';
          });
        }
        this.shipData = res.rows;
        this.shipTotal = res.total;
      }
    },
    async getAffiliatesData() {
      let res = await affiliates(this.affiliatesParams);
      if (res.code == 200) {
        this.affiliatesData = res.rows;
        this.affiliatesTotal = res.total;
      }
    },
    handleClick() {
    },
    handlePath() {
      changePath(this, 'overseas');
    },
    handlePath1() {
      changePath(this, 'branch');
    }
  }
}
</script>

<style lang="scss" scoped>
.rela-container {
  margin: 0;
  padding: 24px 16px;
  background: #ffffff;
  border-radius: 4px;
  .selfTab {
    margin: 24px 0 0 -12px;
    ::v-deep .el-tabs__nav-wrap::after {
      display: none;
    }
    ::v-deep .el-tabs__item {
      height: 30px;
      line-height: 30px;
      padding: 0 12px;
    }
  }
  .table-item {
    margin-top: 16px;
    .tags {
      .tag {
        display: inline-block;
        border-radius: 2px;
        padding: 1px 7px;
        margin: 4px 8px 0 0;
        &.style1 {
          background: #e4f3fd;
          color: #41a1fd;
        }
        &.style2 {
          background: #fff1f1;
          color: #ff3c3c;
        }
      }
    }
    ::v-deep .el-table--border .el-table__cell {
      border-bottom: 0;
    }
  }
  .rela-person {
    width: 100%;
    height: 24px;
    line-height: 24px;
    font-size: 12px;
    color: #3d3d3d;
    padding: 0 8px;
    background: #fdf8e9;
  }
  .rela-more {
    padding-top: 16px;
    text-align: center;
    span {
      cursor: pointer;
    }
  }
}
</style>
