<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="对外投资" name="second"></el-tab-pane>
    </el-tabs>
    <div class="table-item">
      <div class="rela-person" v-if="activeName=='first'">实际控制人：<router-link to="" tag="a" class="a-link">重庆市国有资产监督管理委员会</router-link></div>
      <el-table :data="holderData" border style="width: 100%" :default-sort = "{prop: 'date', order: 'descending'}" v-if="activeName=='first'">
        <el-table-column label="序号" width="55" align="left" fixed>
          <template slot-scope="scope">{{ pageIndex * pageSize - pageSize + scope.$index + 1 }}</template>
        </el-table-column>
        <el-table-column prop="name" min-width="140" label="股东名称"></el-table-column>
        <el-table-column prop="cgsl" label="持股数量（亿）"></el-table-column>
        <el-table-column prop="cgbl" label="持股比例"></el-table-column>
        <el-table-column prop="fddbr" label="法定代表人"></el-table-column>
        <el-table-column prop="clrq" label="成立日期"></el-table-column>
      </el-table>
      <el-table :data="shipData" border style="width: 100%" :default-sort = "{prop: 'date', order: 'descending'}" v-else>
        <el-table-column label="序号" width="55" align="left" fixed>
          <template slot-scope="scope">{{ pageIndex * pageSize - pageSize + scope.$index + 1 }}</template>
        </el-table-column>
        <el-table-column prop="name" min-width="140" label="被投资企业名称">
          <template slot-scope="scope">
            <router-link to="" tag="a" class="a-link">{{ scope.row.name }}</router-link>
            <div class="tags" v-if="scope.row.nAjlx">
              <span class="tag style1">{{scope.row.nAjlx}}</span>
              <span class="tag style1">{{scope.row.nAjlx}}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="fddbr" label="法定代表人"></el-table-column>
        <el-table-column prop="zczb" label="注册资本（万元）">
          <template slot-scope="scope">
            <div style="text-align: right">{{ scope.row.zczb }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="clrq" label="成立日期"></el-table-column>
        <el-table-column prop="gqzb" label="股权占比">
          <template slot-scope="scope">
            <div style="text-align: right">{{ scope.row.gqzb }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="rjcze" label="认缴出资额（万元）">
          <template slot-scope="scope">
            <div style="text-align: right">{{ scope.row.rjcze }}</div>
          </template>
        </el-table-column>
      </el-table>
      <div class="rela-more" v-if="activeName=='second'"><router-link to="" tag="a" class="a-link">查看更多数据 ></router-link></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Relationship',
  data() {
    return {
      activeName:'first',
      //表格数据
      holderData:[
        {name: '重庆城市交通开发投资 (集团)有限公司', cgsl: '60.00', cgbl: '100%', fddbr: '李方宇', clrq: '1994-11-09'},
        {name: '重庆城市交通开发投资 (集团)有限公司', cgsl: '60.00', cgbl: '100%', fddbr: '李方宇', clrq: '1994-11-09'}
      ],
      shipData:[
        {name: '深圳市地铁集团有限建设总部', nAjlx: '招标', fddbr: '雷江松', zczb: '15100', clrq: '1920-02-21', gqzb: '35%', rjcze: '2133'},
        {name: '深圳市地铁集团有限建设总部', nAjlx: '招标', fddbr: '雷江松', zczb: '15100', clrq: '1920-02-21', gqzb: '35%', rjcze: '2133'},
        {name: '深圳市地铁集团有限建设总部', nAjlx: '招标', fddbr: '雷江松', zczb: '15100', clrq: '1920-02-21', gqzb: '35%', rjcze: '2133'},
        {name: '深圳市地铁集团有限建设总部', nAjlx: '招标', fddbr: '雷江松', zczb: '15100', clrq: '1920-02-21', gqzb: '35%', rjcze: '2133'},
        {name: '深圳市地铁集团有限建设总部', nAjlx: '招标', fddbr: '雷江松', zczb: '15100', clrq: '1920-02-21', gqzb: '35%', rjcze: '2133'}
      ],
      pageIndex: 1,
      pageSize: 10
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    handleClick(){

    }
  }
}
</script>

<style lang="scss" scoped>
  .rela-container{
    margin: 0;
    padding: 24px 16px;
    background: #FFFFFF;
    .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;
          }
        }
      }
      ::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;
    }
  }
</style>
