<template>
  <div>
    <!-- <a-row :gutter="24">
      <a-col :span="12" :style="{ marginBottom: '24px' }" class="container gutter-row">
        <chart-card >
          <span>资产总数</span>
        </chart-card>
      </a-col>
      <a-col :span="12" :style="{ marginBottom: '24px' }" class="container">
        <chart-card>
          <span>系统介绍</span>
        </chart-card>
      </a-col>
    </a-row> -->
     <a-row :gutter="24">
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card  title="成员访问次数" :total="cardCount.sll | NumberFormat">
          <template slot="footer">今日访问量：<span>{{ todaySll }}</span></template>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card  title="办结量" :total="cardCount.bjl | NumberFormat">
          <template slot="footer">今日办结量：<span>{{ todayBjl }}</span></template>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card  title="用户受理量" :total="cardCount.isll | NumberFormat">
          <template slot="footer">用户今日受理量：<span>{{ todayISll }}</span></template>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card  title="用户办结量" :total="cardCount.ibjl | NumberFormat">
          <template slot="footer">用户今日办结量：<span>{{ todayIBjl }}</span></template>
        </chart-card>
      </a-col>
    </a-row>

    <div class="container">
    <div id="main" style="width: 600px; height: 400px" ></div>
    <div id="pie" style="width: 600px; height: 400px" ></div>
  </div>
  </div>
</template>

<script>
import ACol from "ant-design-vue/es/grid/Col"
import ChartCard from '@/components/ChartCard'

export default {
  components: {
    ACol,
    ChartCard,
  },
  data() {
    return {
      loading: true,
      cardCount: {
        sll: 100,
        bjl: 87,
        isll: 15,
        ibjl: 9
      },

      todaySll: 60,
      todayBjl: 54,
      todayISll: 13,
      todayIBjl: 7,

      chartData: {
        sll: [],
        bjl: [],
        isll: [],
        ibjl: []
      },
    }
  },
  methods: {
    drawChart() {
      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
      let myChart = this.$echarts.init(document.getElementById("main"));
      // 指定图表的配置项和数据
      let option = {
        title: {
          text: "资产分布",
        },
        tooltip: {},
        legend: {
          data: ["资产数量"],
        },
        xAxis: {
          data: ["理工一", "崇实楼", "行知楼", "理工二"],
        },
        yAxis: {},
        series: [
          {
            name: "资产数量",
            type: "bar",
            data: [5, 20, 36, 10],
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    drawPie() {
      let myChart = this.$echarts.init(document.getElementById("pie"));



      let option = {
        title: {
          text: "领用单位资产数统计",
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 706, name: '821501:终端室' },
              { value: 761, name: '821502:微机室' },
              { value: 97, name: '821503:硬件实验室' },
              { value: 55, name: '821511:计算机总控室' },
              { value: 180, name: '821512:12年前盘亏' }
            ]
          }
        ]
      };
      myChart.setOption(option);

    }

  },
  mounted() {
    this.drawChart();
    this.drawPie();
  },

}
</script>

<style lang="less" scoped>
.container {
  // width: 100%;
  // height: 100%;
  display: flex;

  background-color: #fff;
  padding: 24px;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);

}
</style>