<template>
  <div class="indicator">
    <div class="flex title">
      <div>
        <!-- 财务关键指标 -->
        {{ $t('product.l28') }}
      </div>
      <!-- <img class="img" src="/img/product/info.png" alt="极度证券"> -->
    </div>
    <div class="btn-list">
      <div class="btn" :class="{'active': type == 1}" @click="changeType(1)">
        <!-- 每股收益 -->
        {{ $t('product.l29') }}
      </div>
      <div class="btn" :class="{'active': type == 2}" @click="changeType(2)">
        <!-- 每股净资产 -->
        {{ $t('product.l30') }}
      </div>
      <div class="btn" :class="{'active': type == 3}" @click="changeType(3)">
        <!-- 流动比率 -->
        {{ $t('product.l31') }}
      </div>
      <div class="btn" :class="{'active': type == 4}" @click="changeType(4)">
        <!-- 速动比率 -->
        {{ $t('product.l32') }}
      </div>
    </div>
    <div class="btn-list">
      <div class="btn" :class="{'active': type == 5}" @click="changeType(5)">
        <!-- 净资产收益率 -->
        {{ $t('product.l33') }}
      </div>
      <div class="btn" :class="{'active': type == 6}" @click="changeType(6)">
        <!-- 总资产收益率 -->
        {{ $t('product.l34') }}
      </div>
      <div class="btn" :class="{'active': type == 7}" @click="changeType(7)">
        <!-- 毛利率 -->
        {{ $t('product.l35') }}
      </div>
      <div class="btn" :class="{'active': type == 8}" @click="changeType(8)">
        <!-- 净利率 -->
        {{ $t('product.l36') }}
      </div>
    </div>
    <div class="filter-box flex">
      <div>
        <!-- 币种 -->
        {{ $t('product.l39') }}:{{ symbolInfo.currency }}</div>
      <van-popover
        v-model="showPopover"
        placement="bottom-end"
        trigger="click"
        :actions="actions"
        @select="onSelect"
      >
        <template #reference>
          <div class="filter flex">
            <!-- 年报  累计季报-->
            <div>{{filter == 1 ? $t('product.l37') : $t('product.l38')}}</div>
            <img class="down" :class="{'active': showPopover}" src="/img/product/down.png" alt="极度证券">
          </div>
        </template>
      </van-popover>
    </div>
    <div v-if="chartShow" id="indicator" />
    <NoData v-if="!chartShow"/>
  </div>
</template>
<script>
import * as echarts from 'echarts'
import { getIndicator } from "@/api/market";
export default {
  props: ['symbol', 'symbolInfo'],
  data () {
    return {
      type: 1,
      filter: 2,
      showPopover: false,
      chartShow: true,
      chart: null,
      xData: [],
      yData: [],
      yData1: [],
      minSpan: 20,
      typeKey: ['',
        ['eps', 'epsYoY'],
        ['netAssetsPS', 'netAssetsPsYoY'],
        ['currentRatio', 'currentRatioYoY'],
        ['quickRatio', 'quickRatioYoY'],
        ['returnOnEquity', 'returnOnEquityYoY'],
        ['returnOnTotalAssets', 'returnOnTotalAssetsYoY'],
        ['grossProfitMargin', 'grossProfitMarginYoY'],
        ['netIncomeRatio', 'netIncomeRatioYoY'],
      ],
      list: [],
      actions: [
        {
          text: this.$t('product.l37'),
          value: 1
        },
        {
          text: this.$t('product.l38'),
          value: 2
        }
      ]
    }
  },
  mounted () {
    this.getIndicator()
    this.initChart()
  },
  methods: {
    getIndicator() {
      getIndicator({
        symbol: this.symbol,
      }).then(res => {
        var list = (res || []).filter(item => (item.reportType != 'Q4' && item.reportType != '4'))
        list.forEach(item => {
          item.xData = item.reportDate.split('-')[0] + '/' + this.getReportType(item.reportType)
        })
        this.list = list
        this.resetChartData()
        if (this.xData.length == 0) {
          this.chartShow = false
          return
        }
        this.$nextTick(() => {
          this.setOption()
        })
      }).catch(() => {})
    },
    resetChartData() {
      var xData = []
      var yData = []
      var yData1 = []
      this.list.forEach(item => {
        var key = this.typeKey[this.type]
        if (item[key[0]] || item[key[1]]) {
          if (this.filter == 1 && (item.reportType == 'FY' || item.reportType == 'F')) {
            xData.unshift(item.xData)
            var y1 = item[key[0]] ? Number(item[key[0]]).toFixed(2) : ''
            yData.unshift(y1)
            yData1.unshift(item[key[1]] ? Number(item[key[1]]).toFixed(2) : '')
          } 
          if (this.filter == 2){
            xData.unshift(item.xData)
            var y1 = item[key[0]] ? Number(item[key[0]]).toFixed(2) : ''
            yData.unshift(y1)
            yData1.unshift(item[key[1]] ? Number(item[key[1]]).toFixed(2) : '')
          }
        }
      })
      this.xData = xData
      this.yData = yData
      this.yData1 = yData1
      this.minSpan = ((4/(this.xData.length || 4)) * 100).toFixed()
    },
    changeType(val) {
      if (this.type == val) {
        return
      }
      this.type = val
      this.resetChartData()
      if (this.xData.length == 0) {
        this.chartShow = false
        return
      }
      if (!this.chartShow) {
        this.chartShow = true
        this.$nextTick(() => {
          this.initChart()
          this.setOption()
        })
        return
      }
      this.updateOption()
    },
    updateOption() {
      this.chart.setOption({
        xAxis: {
          data: this.xData,
        },
        dataZoom: [
          {
            type: 'inside',
            start: (100 - this.minSpan),
            end: 100,
            zoomOnMouseWheel: false,
            minSpan: this.minSpan,
            maxSpan: this.minSpan,
          },
          {
            start: 0,
            end: 20,
          }
        ],
        series: [{
          data: this.yData,
        },{
          data: this.yData1,
        }]
      })
    },
    onSelect(action) {
      if (this.filter == action.value) {
        return
      }
      this.filter = action.value
      this.resetChartData()
      if (this.xData.length == 0) {
        this.chartShow = false
        return
      }
      if (!this.chartShow) {
        this.chartShow = true
        this.$nextTick(() => {
          this.initChart()
          this.setOption()
        })
        return
      }
      this.updateOption()
    },
    initChart() {
      this.chart = echarts.init(document.getElementById('indicator'))
    },
    setOption() {
      var $this = this
      this.chart.setOption({
        color: ['#52DD75', '#3A74F2'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        grid: {
          top: '22px',
          left: '17',
          right: '17',
        },
        xAxis: {
          type: 'category',
          data: this.xData,
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#D2D2D2',
              type: 'dashed'
            }
          }
        },
        dataZoom: [
          {
            type: 'inside',
            start: (100 - this.minSpan),
            end: 100,
            zoomOnMouseWheel: false,
            minSpan: this.minSpan,
            maxSpan: this.minSpan,
          },
          {
            start: 0,
            end: 20,
          }
        ],
        yAxis: [
          {
            show: true,
            type: 'value',
            splitNumber: 5,
            max: function(value) {
              if(Math.abs(value.max) > Math.abs(value.min)){
                  return (Math.abs(value.max)*1.2).toFixed(2);
              }else{
                  return (Math.abs(value.min)*1.2).toFixed(2);
              }
            },
            min: function(value) {
              if(Math.abs(value.max) > Math.abs(value.min)){
                  return (-Math.abs(value.max) * 1.2).toFixed(2);
              }else{
                  return (-Math.abs(value.min) * 1.2).toFixed(2);
              }
            },
            axisLabel: {
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#D2D2D2',
                type: 'dashed'
              }
            }
          },
          {
            show: true,
            type: 'value',
            splitNumber: 5,
            max: function(value) {
              if(Math.abs(value.max) > Math.abs(value.min)){
                  return (Math.abs(value.max)*1.2).toFixed(2);
              }else{
                  return (Math.abs(value.min)*1.2).toFixed(2);
              }
            },
            min: function(value) {
              if(Math.abs(value.max) > Math.abs(value.min)){
                  return (-Math.abs(value.max) * 1.2).toFixed(2);
              }else{
                  return (-Math.abs(value.min) * 1.2).toFixed(2);
              }
            },
            axisLabel: {
              show: false
            },
            splitLine: {
              show: false,
            }
          },
        ],
        series: [
          {
            data: this.yData,
            type: 'bar',
            barWidth: '17',
            tooltip: {
              valueFormatter: function (value) {
                var key = $this.typeKey[$this.type]
                var y = key[0]
                if (y != 'eps' && y != 'netAssetsPS' && value) {
                  return value + ' %';
                }
                return value || '--';
              }
            },
          },
          {
            data: this.yData1,
            tooltip: {
              valueFormatter: function (value) {
                return value ? (value + ' %') : '--';
              }
            },
            type: 'bar',
            barWidth: '17',
            yAxisIndex: 1,
          }
        ]
      })
    },
    getReportType(val) {
      if (val.toLowerCase() == 'i') {
        return 'H1'
      }
      if (val.toLowerCase() == '1') {
        return 'Q1'
      }
      if (val.toLowerCase() == '2') {
        return 'Q2'
      }
      if (val.toLowerCase() == '3') {
        return 'Q3'
      }
      if (val.toLowerCase() == 'f') {
        return 'FY'
      }
      return val
    }
  }
}
</script>
<style lang="less" scoped>
.indicator {
  background-color: var(--bg-);
  padding: 17px 0 32px;
}
.title {
  column-gap: 7px;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-1-);
  margin-bottom: 10px;
  padding: 0 17px;
  .img {
    width: 17px;
  }
}
.btn-list {
  display: flex;
  column-gap: 3px;
  padding: 0 17px 3px;
  white-space: nowrap;
  .btn {
    cursor: pointer;
    line-height: 28px;
    border: 1px solid #E9EBF0;
    width: 79px;
    text-align: center;
    color: #82858C;
    border-radius: 4px;
    font-size: 12px;
    &.active {
      border-color: #000;
      color: #fff;
      background-color: #000;
    }
  }
}
.filter-box {
  justify-content: space-between;
  margin-top: 13px;
  padding: 0 17px;
  color: #B2B2B2;
  font-size: 12px;
  .filter {
    column-gap: 9px;
    height: 30px;
    padding-left: 13px;
    padding-right: 10px;
    border: 1px solid #E8E8E8;
    border-radius: 19px;
    cursor: pointer;
    color: var(--color-1-);
  }
  .down {
    width: 14px;
    transition: transform 0.4s;
    &.active {
      transform: rotate(180deg);
    }
  }
}
#indicator {
  height: 198px;
  width: 100%;
  overflow-x: hidden;
}
</style>