<template>
  <div class="tab1">
    <div class="insideTop">文物统计</div>
    <div class="obstruct"></div>
    <!-- 主要内容 -->
    <div class="conten">
      <div class="row1">
        <div class="tit">文物类别</div>
        <div id="echarts1"></div>
        <div class="sumNum1">合计：{{num1}}</div>
      </div>
      <div class="row2">
        <div class="tit">文物级别</div>
        <div id="echarts2"></div>
        <div class="sumNum2">合计：{{num2}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts/core'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent
} from 'echarts/components'
import { PieChart } from 'echarts/charts'
import { LabelLayout } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'
import { goodsReport } from '../../apis/tab2'

echarts.use([
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  PieChart,
  CanvasRenderer,
  LabelLayout
])

export default {
  name: 'tab1',
  components: {},
  data () {
    // 这里存放数据
    return {
      num1: 0,
      num2: 0
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    echartsFu (bs, data, name, centen, radius) {
      const chartDom = document.getElementById(`echarts${bs}`)
      const myChart = echarts.init(chartDom)

      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          type: 'scroll',
          orient: 'vertical',
          right: 20,
          top: 20,
          bottom: 20,
          data,
          formatter: (name) => {
            const value = data.filter((v) => v.name === name)
            return `${name}(${value[0].value})`
          }
        },
        series: [
          {
            name,
            type: 'pie',
            radius: radius,
            center: [centen, '50%'],
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }

      option && myChart.setOption(option)
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  async created () {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  async mounted () {
    const res = await goodsReport()
    const data1 = []
    const data2 = []
    let num1 = 0
    let num2 = 0
    res.data.textureDetail.forEach((v) => {
      if (v.psc) data1.push({ value: v.psc, name: v.name })
      num1 += v.psc
    })

    res.data.levelDetail.forEach(v => {
      data2.push({ value: v.psc, name: v.name })
      num2 += v.psc
    })
    this.num1 = num1
    this.num2 = num2
    this.echartsFu(1, data1, '文物类别', '35%', ['40%', '70%'])
    this.echartsFu(2, data2, '文物级别', '40%', ['30%', '60%'])
  },
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='less' scoped>
.tab1 {
  height: 100%;
  .insideTop .add {
    right: 55px;
  }
  .conten {
    padding: 15px 30px 0;
    height: calc(100% - 32px);
    display: flex;
    justify-content: space-between;
    .row1 {
      width: 55%;
    }
    .row2 {
      width: 40%;
    }
    .tit {
      margin: 15px 0;
    }
    #echarts1 {
      width: 100%;
      height: 520px;
      border-right: 2px solid #ccc;
    }
    #echarts2 {
      width: 100%;
      height: 520px;
    }
    .sumNum1 {
      margin-top: 15px;
      text-align: center;
      padding-right: 250px;
    }
    .sumNum2 {
      margin-top: 15px;
      text-align: center;
      padding-right: 105px;
    }
  }
}
</style>
