<template>
  <div>
    <Row :gutter="20">
      <i-col :xs="12" :md="8" :lg="8" v-for="(infor, i) in inforCardData" :key="`infor-${i}`" style="height: 120px;padding-bottom: 10px;">
        <infor-card shadow :color="infor.color" :icon="infor.icon" :icon-size="36" style="border-radius:10px">
          <!-- <count-to :end="infor.count" count-class="count-style"/> -->
          <p style="font-size: 24px;">{{ infor.count }}</p>
          <p>{{ infor.title }}</p>
        </infor-card>
      </i-col>
    </Row>
    <div ref="myChart" id="my_chart" :style="{width: '100%',height: '500px'}"></div>
    <Table border width="80%" :columns="columnsList" :data="loginData" :loading="statisLoad" class="statisTab">
      <template slot-scope="{row}" slot="table_schema">
        <p> {{row.table_schema}} </p>
      </template>
      <template slot-scope="{row}" slot="table_name">
        <p> {{row.table_name}} </p>
      </template>
    </Table>
  </div>
</template>

<script>
import InforCard from '_c/info-card'
// import { GetDataFlowApi } from '@/api/stats'
import { GetSpaceIndex } from '@/api/database'
import CountTo from '_c/count-to'
import { ChartPie, ChartBar } from '_c/charts'
import { getToken } from '@/libs/util'
import echarts from 'echarts'
export default {
  components: {
    InforCard,
    CountTo,
    ChartPie,
    ChartBar
  },
  data () {
    return {
      token: getToken(),
      loginData: [],
      xAxisData: [],
      dataNumber: 0,
      indexNumber: 0,
      statisLoad: false,
      columnsList: [
        {
          title: 'id',
          key: 'id',
          align: 'center'
        },
        {
          title: this.$t('database'),
          key: 'table_schema',
          slot: 'table_schema',
          align: 'center'
        },
        {
          title: this.$t('table_name'),
          key: 'table_name',
          slot: 'table_name',
          align: 'center'
        },
        {
          title: this.$t('data_size'),
          key: 'data_length_str',
          align: 'center'
        },
        {
          title: this.$t('index_size'),
          key: 'index_length_str',
          align: 'center'
        },
        {
          title: this.$t('records_num'),
          key: 'table_rows_str',
          align: 'center'
        }
      ],
      inforCardData: [
        { title: this.$t('database_total_size'), icon: 'ios-archive-outline', count: '', color: '#2d8cf0' },
        { title: this.$t('data_size'), icon: 'ios-pulse-outline', count: '', color: '#19be6b' },
        { title: this.$t('index_size'), icon: 'ios-git-network', count: '', color: '#ff9900' }
        // <Icon type="ios-git-network" /><Icon type="ios-pulse-outline" /><Icon type="ios-archive-outline" />
      ]
    }
  },
  // 获取首页数据
  created () {
    this.statisLoad = true
    const formdata = new FormData()
    formdata.append('access_token', this.token)
    GetSpaceIndex(formdata).then(res => {
      const resData = res
      if (resData.ret === 200) {
        this.loginData = resData.data.detail
        this.statisLoad = false
        this.xAxisData = [...resData.data.data, ...resData.data.index]
        // this.dataNumber
        resData.data.data.forEach(item => {
          this.dataNumber += item.value
        })
        resData.data.index.forEach(item => {
          this.indexNumber += item.value
        })
        // const indexObj = resData.data.detail[resData.data.detail.length - 1]
        this.inforCardData[0].count = resData.data.total
        this.inforCardData[1].count = resData.data.dataTotal
        this.inforCardData[2].count = resData.data.indexTotal
        this.getQuery()
      } else {
        this.$Message.error(resData.msg)
      }
    })
  },
  mounted () {
  },
  methods: {
    // 接口数据统计
    getQuery () {
      this.$nextTick(() => {
        this.createEchars()
      })
    },
    createEchars () {
      let myChartData = echarts.init(this.$refs.myChart)
      let option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        series: [
          {
            name: this.$t('data_and_index_size'),
            type: 'pie',
            selectedMode: 'single',
            radius: [0, '30%'],

            label: {
              position: 'inner'
            },
            labelLine: {
              show: false
            },
            data: [
              { value: this.dataNumber, name: this.$t('data_size') },
              { value: this.indexNumber, name: this.$t('index_size') }
            ]
          },
          {
            name: this.$t('data_and_index_size'),
            type: 'pie',
            radius: ['40%', '55%'],
            label: {
              formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
              backgroundColor: '#eee',
              borderColor: '#aaa',
              borderWidth: 1,
              borderRadius: 4,
              // shadowBlur:3,
              // shadowOffsetX: 2,
              // shadowOffsetY: 2,
              // shadowColor: '#999',
              // padding: [0, 7],
              rich: {
                a: {
                  color: '#999',
                  lineHeight: 22,
                  align: 'center'
                },
                // abg: {
                //     backgroundColor: '#333',
                //     width: '100%',
                //     align: 'right',
                //     height: 22,
                //     borderRadius: [4, 4, 0, 0]
                // },
                hr: {
                  borderColor: '#aaa',
                  width: '100%',
                  borderWidth: 0.5,
                  height: 0
                },
                b: {
                  fontSize: 16,
                  lineHeight: 33
                },
                per: {
                  color: '#eee',
                  backgroundColor: '#334455',
                  padding: [2, 4],
                  borderRadius: 2
                }
              }
            },
            data: this.xAxisData // 外环数据
          }
        ]
      }
      myChartData.setOption(option)
      // 建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
      window.addEventListener('resize', function () { myChartData.resize() })
    }
  }
}
</script>

<style lang="less">
.count-style{
  font-size: 50px;
}
#my_chart{
  margin: 10px 0 20px;
  background: #fff;
  padding: 50px 0;
  border-radius: 10px;
}
.statisTab{
  background: #fff;
  border-radius: 10px;
}
</style>
