<template>
  <div class="app-container finance-container">
    <div class="common-title">财务数据
      <el-tooltip placement="top">
        <div slot="content">营业收入数据优先取“营业总收入”<br/>营业总收入未披露时取“营业收入”</div>
				    <img   style="width: 18px; height: 18px;margin-left:9px;" src="@/assets/images/detail/overview/zbph_question.png" >
				  </el-tooltip>
    </div>
    <el-tabs v-model="activeIndex" @tab-click="handleQuery(vals[activeIndex])" class="tabpane selfTab">
      <el-tab-pane label="营业收入" name="0"></el-tab-pane>
      <el-tab-pane label="净利润" name="1"></el-tab-pane>
      <el-tab-pane label="总资产" name="2"></el-tab-pane>
      <el-tab-pane label="净资产" name="3"></el-tab-pane>
    </el-tabs>
    <div class="flex-box finance-box">
      <div class="finance-echarts" v-if="viewData.length>0"><div id="echartsFinance" style="width: 100%;height:300px; margin: 0 auto;"></div></div>
      <div class="finance-no-data" v-else>
        <no-data />
      </div>
      <div class="table-item" v-if="viewData.length>0">
        <el-table
          :data="viewData"
          border
          style="width: 100%"
          :default-sort = "{prop: 'date', order: 'descending'}"
        >
        <el-table-column label="币种：人民币">
          <el-table-column
            prop="year"
            align="left"
            label="报告期（年度）"></el-table-column>
          <el-table-column
            prop="operatingIncome"
            align="right"
            label="营业收入（亿）">
          </el-table-column>
          <el-table-column
            prop="netProfit"
            align="right"
            label="净利润（亿）">
          </el-table-column>
          <el-table-column
            prop="totalAssets"
            align="right"
            label="总资产（亿）">
          </el-table-column>
          <el-table-column
            prop="netAssets"
            align="right"
            label="净资产（亿）">
          </el-table-column>
        </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import {financialData} from '@/api/detail/party-a/overview'
import * as echarts from 'echarts'
import NoData from '../../component/noData'
export default {
  name: 'Finance',
  props: ['companyId'],
  components: {
    NoData
  },
  data() {
    return {
      viewData:[],
      activeIndex:0,
      vals:['operatingIncome','netProfit','totalAssets','netAssets'],
      names:['营业收入（亿）','净利润（亿）','总资产（亿）','净资产（亿）'],
    }
  },
  created() {
    this.handleQuery()
  },
  mounted() {
  },
  methods: {
    async handleQuery(val){
      let res = await financialData({cid: this.companyId})
      if(res.code==200 && res.data){
        this.viewData = res.data
        if(this.viewData.length>0){
          this.$nextTick(() => {
            this.getDT(val)
          })
        }
      }
    },
    getDT(val="operatingIncome"){
      let myChart = echarts.init(document.getElementById("echartsFinance"))
      let barData = [],years = [],compareData = [];
      this.viewData.map(item=>{
        barData.push(item[val+'Size'].toFixed(2));
        compareData.push(item[val+'Compare']||'');
        years.push(item.year)
      })
      // let compareDataMax = Math.max(...compareData)
      // let compareDataMin = Math.min(...compareData)
      let option = {
        legend: {
          show:true,
						width: "100%",
						left: 'center',
            bottom:0,
						textStyle: {
							width: 120,
							padding: [0, 26, 0, 0],
							backgroundColor: "transparent",
						},
						itemWidth: 18,
						itemHeight: 8,
						data: [this.names[this.activeIndex], '同比（%）']
					},
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '32',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: years,
            axisTick: {
              alignWithLabel: true,
              show: false
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            // min:0,
            splitLine : { //网格线
              lineStyle: {
                type: 'dashed' //设置网格线类型 dotted：虚线 solid:实线
              },
            }
          },
          {
            type: 'value',
            // min:'dataMin',
            // max:'dataMax',
            // interval:((compareDataMax-compareDataMin)/5).toFixed(2),
            splitLine : { //网格线
              show:false
            },
            axisLabel: {
                  formatter: '{value}%'
              }
          }
          
        ],
        series: [
          {
            name: this.names[this.activeIndex],
            type: 'bar',
            barWidth: '20px',
            data: barData,
            itemStyle:{
              normal:{
                barBorderRadius:[4,4,0,0],
                color:'#14C9C9'
              },
            }
          },
          {
							name: '同比（%）',
							symbolSize: 12, //标记的大小（折线图圆点大小）
							label: {
								color: "#666666",
							},
							lineStyle: {
								color: "#0081FF",
								width: 1
							},
							itemStyle: {
								color: "#0081FF"
							},
							type: 'line',
              yAxisIndex: 1,
							data: compareData
						},
        ],

        emphasis: {
          itemStyle: {
            // 高亮时点的颜色。
            color: 'rgb(134,231,231)'
          },
        }
      }
      myChart.setOption(option)
    },
  },
}
</script>

<style lang="scss" scoped>
  .finance-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;
      }
    }
    .finance-box{
      width: 100%;
      justify-content: space-between;
      margin: 8px 0 24px 0;
      .finance-echarts{
        width: calc(50% - 8px);
      }
      .finance-no-data{
        width: 100%;
      }
      .table-item{
        width: calc(50% - 8px);
      }
    }
  }
</style>
