<template>
  <div>
    <div class="section2" v-if="majorList.length">
      <div class="title">
        <div>
          <!-- 持股统计 -->
          {{ $t('product.l96') }}
        </div>
      </div>
      <div class="flex">
        <div class="sub">
          <!-- 主要股东 -->
          {{ $t('product.l21') }}
        </div>
      </div>
      <!-- <div class="des">
        更新时间
        {{ $t('product.l22') }}:{{ majorUpdate }}</div> -->
      <div class="pie-box">
        <pieView @select="chartSelect" id="pie1" ref="pie" height="219px" />
      </div>
      <div class="major-list">
        <div class="table-header flex">
          <div>
            <!-- 机构名称 -->
            {{ $t('product.l97') }}
          </div>
          <div>
            <!-- 持股比例 -->
            {{ $t('product.l1') }}
          </div>
        </div>
        <div class="table-body">
          <div class="tr flex" v-for="(item, index) in majorList" :key="index" :class="{active: chartIndex === index}" @click="dispatchAction(index)">
            <div class="left flex">
              <div class="radius" :style="{'background-color': colorList[index] }"></div>
              <div class="name">{{ item.holderName }}</div>
            </div>
            <div class="right">
              {{ Number(item.holdingRatio).toFixed(2) }}%
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getMajor } from "@/api/market";
import pieView from "@/components/charts/pie.vue";
export default {
  props: ['colorList', 'symbolInfo'],
  components: {
    pieView
  },
  data () {
    return {
      majorList: [],
      majorUpdate: '',
      chartIndex: ''
    }
  },
  computed: {
    holderTypeText() {
      return {
        // A: '内部持有',
        // B: '机构持有',
        // C: '共同基金持有',
        // '10': '十大股东',
        // '20': '十大流通股东',
        A: this.$t('product.l4'),
        B: this.$t('product.l5'),
        C: this.$t('product.l6'),
        '10': this.$t('product.l7'),
        '20': this.$t('product.l8'),
      }
    }
  },
  created () {
    this.getMajor()
  },
  methods: {
    getMajor() {
      getMajor({
        symbol: this.symbolInfo.symbol,
        market: this.symbolInfo.market
      }).then(res => {
        var majorList = (res || []).sort((a, b) => Number(b.holdingRatio) - Number(a.holdingRatio));
        if (majorList[0]) {
          this.majorUpdate = this.listDateForm(majorList[0].reportDate)
        }
        var pieDate = [];
        var list = [];
        var sign = {};
        majorList.forEach((item, index) => {
          if (list.length > 5) {
            return
          }
          if (!(sign[item.holderName])) {
            sign[item.holderName] = true;
            list.push(item);
            pieDate.push({
              value: Number(item.holdingRatio).toFixed(2),
              name: item.holderName
            });
          };
        });
        this.majorList = list;
        this.$nextTick(() => {
          this.$refs['pie'].setOption(pieDate, {
            radius: ['85%', '40%'],
            tooltipShow: true,
            labelShow: false,
            tooltip: {
              position: [10, 10],
              formatter: '{b}<br/>{c}%',
              extraCssText: 'word-break: break-all;white-space: pre-wrap;max-width: 300px'
            }
          })
        })
      }).catch(() => {})
    },
    holdingNumberForm(value) {
      if (value) {
        if (value > 1000000000000) {
          return Number((value / 1000000000000).toFixed(2)) + 'T'
        }
        if (value > 1000000000) {
          return Number((value / 1000000000).toFixed(2)) + 'B'
        }
        if (value > 1000000) {
          return Number((value / 1000000).toFixed(2)) + 'M'
        }
        return Number((value).toFixed(2))
      }
      return '--'
    },
    listDateForm(value) {
      if (value && value != '0') {
        return value.replace(new RegExp(/-/gm), "/")
      }
      return ''
    },
    chartSelect(index) {
      this.chartIndex = index
    },
    dispatchAction(index) {
      this.chartIndex = index
      this.$refs['pie'].dispatchAction(index)
    }
  }
}
</script>
<style lang="less" scoped>
.title {
  font-size: 16px;
  color: #333333;
  line-height: 18px;
  margin-bottom: 21px;
  font-weight: 600;
}
.sub {
  box-shadow: 0px 2px 5px 0px rgba(188,192,193,0.31);
  border-radius: 4px;
  border: 1px solid #000000;
  line-height: 24px;
  padding: 0 7px;
  color: #333333;
}
.section2 {
  background-color: var(--bg-);
  margin-bottom: 6px;
  padding: 14px 18px 30px;
  .des {
    font-size: 12px;
    color: #A6A6A6;
    margin-top: 6px;
  }
}
.pie-box {
  .left {
    width: 50%;
  }
}
.major-list {
  margin-top: 16px;
  font-size: 9px;
  line-height: 10px;
  .radius {
    border-radius: 50%;
    width: 5px;
    height: 5px;
    margin-right: 8px;
  }
}
.table-header {
  color: #7C7C7C;
  justify-content: space-between;
  padding: 6px 17px 6px 26px;
}
.table-body {
  .tr {
    height: 24px;
    color: #313131;
    justify-content: space-between;
    line-height: 16px;
    padding-left: 13px;
    cursor: pointer;
    &.active {
      background-color: rgba(234, 236, 240, 0.6);
    }
  }
  .name {
    width: 150px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .right {
    width: 53px;
  }
}
</style>