<template>
  <div>
    <div class="section">
      <div class="title">
        <!-- 主营构成 -->
        {{ $t('product.l40') }}
      </div>
      <div class="box">
        <div class="btn-box flex">
          <div class="btn" :class="{'active': segmentType == 'B'}" @click="changeSegmentType('B')">
            <!-- 业务 -->
            {{ $t('product.l41') }}
          </div>
          <div class="btn" :class="{'active': segmentType == 'G'}" @click="changeSegmentType('G')">
            <!-- 地区 -->
            {{ $t('product.l42') }}
          </div>
        </div>
      </div>
      <div class="tip flex">
        <div>
          <!-- 币种 -->
          {{ $t('product.l39') }}:{{ symbolInfo.currency }}</div>
        <div class="report" v-if="reportDate">{{ getReportDate(reportDate) }}{{ $t('product.l37') }}
          <!-- 年报 -->
        </div>
      </div>
      <div class="th flex">
        <div>
          <!-- 营业收入 -->
          {{ $t('product.l43') }}
        </div>
        <div class="col1">
          <!-- 收入占比 -->
          {{ $t('product.l44') }}
        </div>
      </div>
      <div class="pie-box">
        <pieView id="pie3" ref="pie" width="111px" height="111px" />
        <div class="right">
          <div class="item flex" v-for="(item, index) in financeList1" :key="item.id">
            <div class="name-box flex">
              <div class="radius" :style="{'background-color': colorList[index] }"></div>
              <div class="name">{{ item.name }}</div>
            </div>
            <div class="num">{{ holdingNumberForm(item.operatingIncome) }}</div>
            <div class="col1">{{ Number(item.incomeRatio).toFixed(2) }}%</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getFinance } from "@/api/market";
import pieView from "@/components/charts/pie.vue";
export default {
  props: ['symbolInfo', 'colorList'],
  components: {
    pieView
  },
  data () {
    return {
      segmentType: 'B',
      reportDate: '',
      reportType: '',
      financeList: [],
      financeList1: [],
    }
  },
  created () {
    this.getFinance()
  },
  methods: {
    getFinance() {
      getFinance({
        symbol: this.symbolInfo.symbol,
      }).then(res => {
        var list = (res || []).filter(item => item.reportDate).sort((a, b) => new Date(b.reportDate.replace(new RegExp(/-/gm), "/")).getTime() - new Date(a.reportDate.replace(new RegExp(/-/gm), "/")).getTime())
        if (list[0]) {
          var date = list[0].reportDate
          list = list.filter(item => item.reportDate == date)
        }
        var list1 = []
        var sign = {}
        list.forEach(item => {
          // if ((item.reportType == 'FY' || item.reportType == 'F')) {
            if (!sign[item.name]) {
              list1.push(item)
              sign[item.name] = true
            }
          // }
        })
        this.financeList = list1.sort((a, b) => Number(b.incomeRatio) - Number(a.incomeRatio))
        this.setFinanceList1()
      }).catch(() => {

      })
    },
    changeSegmentType(type) {
      if (this.segmentType == type) {
        return
      }
      this.segmentType = type
      this.setFinanceList1()
    },
    setFinanceList1() {
      var list = []
      this.financeList.forEach(item => {
        if (this.segmentType == 'B') {
          if (item.segmentType == 'B' || item.segmentType == '行业') {
            list.push(item)
          }
        }
        if (this.segmentType == 'G') {
          if (item.segmentType == 'G' || item.segmentType == '地区') {
            list.push(item)
          }
        }
      })
      this.financeList1 = list.slice(0, 10)
      this.setPieChart()
    },
    setPieChart() {
      var pieDate = []
      this.financeList1.forEach((item, index) => {
        if (index == 0) {
          this.reportDate = item.reportDate
          this.reportType = item.reportType
        }
        pieDate.push({
          value: Number(item.incomeRatio).toFixed(2),
          name: item.name
        })
      })
      this.$nextTick(() => {
        this.$refs['pie'].setOption(pieDate, {
          radius: ['100%', '40%'],
          labelShow: false,
          tooltipShow: false,
          tooltip: {
            formatter: '{b}<br/>{c}%',
            // position: ['10px', '10px']
          }
        })
      })
    },
    getReportDate(date) {
      return date.split('-')[0]
    },
    holdingNumberForm(value) {
      if (value) {
        if (value > 1000000000000 || value < -1000000000000) {
          return Number((value / 1000000000000).toFixed(2)) + 'T'
        }
        if (value > 1000000000 || value < -1000000000) {
          return Number((value / 1000000000).toFixed(2)) + 'B'
        }
        if (value > 1000000 || value < -1000000) {
          return Number((value / 1000000).toFixed(2)) + 'M'
        }
        return Number(Number(value).toFixed(2))
      }
      return '--'
    },
  }
}
</script>
<style lang="less" scoped>
.title {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-1-);
  margin-bottom: 26px;
}
.section {
  padding: 14px 18px;
  background-color: #fff;
  margin-bottom: 6px;
  .tip {
    font-size: 12px;
    font-weight: 400;
    color: #7C7C7C;
    justify-content: space-between;
    margin-bottom: 20px;
    .report {
      color: #333333;
    }
  }
  .box {
    padding: 0 90px;
  }
  .btn-box {
    background: #FFFFFF;
    border-radius: 4px;
    border: 1px solid #E4E6EB;
    font-size: 14px;
    color: #676767;
    line-height: 28px;
    text-align: center;
    margin-bottom: 8px;
    .btn {
      cursor: pointer;
      width: 50%;
      &.active {
        background: #000000;
        box-shadow: 0px 2px 5px 0px rgba(188,192,193,0.31);
        border-radius: 4px;
        color: #FFFFFF;
      }
    }
  }
}
.th {
  justify-content: flex-end;
  font-size: 10px;
  color: #7C7C7C;
  margin-bottom: 9px;
}
.col1 {
  width: 58px;
  text-align: right;
}
.pie-box {
  display: flex;
  align-items: flex-start;
  .right {
    flex: 1;
    min-width: 10%;
    padding-left: 9px;
  }
}
.item {
  font-size: 10px;
  &+.item {
    margin-top: 9px;
  }
  .name-box {
    column-gap: 8px;
    color: #313131;
    flex: 1;
    min-width: 10%;
    padding-right: 17px;
    .radius {
      width: 6px;
      height: 6px;
      border-radius: 50%;
    }
    .name {
      flex: 1;
      min-width: 10%;
      max-width: 100%;
      line-height: 16px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .num {
    padding-right: 3px;
  }
}
</style>