<template>
  <div>
    <a-row :gutter="24">
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card title="仪器总数" :total="this.InstrumentCount">
          <template slot="footer">仪器总价：<span>{{ this.InstrumentAmount }}</span></template>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card title="家具总数" :total="this.FurnitureCount">
          <template slot="footer">家具总价<span>{{ this.FurnitureAmount }}</span></template>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card title="无形资产总数" :total="this.IntangibleCount">
          <template slot="footer">无形资产总价：<span>{{ this.IntangibleAmount }}</span></template>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card title="资产总数" :total="this.InstrumentCount + this.FurnitureCount + this.IntangibleCount">
          <template slot="footer">总资产价值量：<span>{{ this.InstrumentAmount + this.FurnitureAmount
            + this.IntangibleAmount }}</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'
import { getAction } from '../../api/manage'

export default {
  components: {
    ACol,
    ChartCard,
  },
  data() {
    return {
      loading: true,
      PieChartData: [],
      ChartData: [],
      LocationName: [],
      ChartDataSum: 0,
      InstrumentCount: 0,
      FurnitureCount: 0,
      IntangibleCount: 0,
      InstrumentAmount: 0,
      FurnitureAmount: 0,
      IntangibleAmount: 0,
    }
  },
  methods: {
    getChart() {
      getAction('/rms/rmsDepart/getChart').then(res => {
        this.ChartData = res;
        this.drawChart();
      })
    },
    getPieChart() {
      getAction('/rms/rmsDepart/getPieChart').then(res => {
        this.PieChartData = res;
        this.drawPie();
      })
    },
    getLocationName() {
      getAction("/rms/rmsDepart/getLocationName").then(res => {
        this.LocationName = res;
        console.log("位置:" + this.LocationName)
      })
    },
    getInstrumentCount() {
      getAction('/rms/rmsDepart/getInstrumentCount').then(res => {
        this.InstrumentCount = res;
        console.log("仪器总数" + this.InstrumentCount)
      })
    },
    getFurnitureCount() {
      getAction('/rms/rmsDepart/getFurnitureCount').then(res => {
        this.FurnitureCount = res;
        console.log("家具总数:" + this.FurnitureCount)

      })
    },
    getIntangibleCount(){
      getAction('/rms/rmsDepart/getIntangibleCount').then(res => {
        this.IntangibleCount = res;
        console.log("无形资产总数:" + this.IntangibleCount)
      })
    },
    getInstrumentAmount() {
      getAction('/rms/rmsDepart/getInstrumentAmount').then(res => {
        this.InstrumentAmount = res;
      })
    },
    getFurnitureAmount() {
      getAction('/rms/rmsDepart/getFurnitureAmount').then(res => {
        this.FurnitureAmount = res;
      })
    },
    getIntangibleAmount(){
      getAction('/rms/rmsDepart/getIntangibleAmount').then(res => {
        this.IntangibleAmount = res;
      })
    },


    drawChart() {
      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
      let myChart = this.$echarts.init(document.getElementById("main"));
      // 指定图表的配置项和数据
      let option = {
        title: {
          text: "资产分布",
        },
        tooltip: {},
        legend: {
          data: ["资产数量"],
        },
        xAxis: {
          data: this.LocationName,
          axisLabel: {
            interval: 0,
            rotate: 30
          }
        },
        yAxis: {},
        series: [
          {
            name: "资产数量",
            type: "bar",
            data: this.ChartData,
            label: {
              normal: {
                show: true,
                position: 'top'
              },
              formatter: '{@value}'
            }
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      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: this.PieChartData
          }
        ]
      };
      myChart.setOption(option);

    }

  },
  mounted() {
  },

  created() {
    this.getPieChart();
    this.getChart();
    this.getLocationName();
    this.getInstrumentCount();
    this.getFurnitureCount();
    this.getIntangibleCount();
    this.getInstrumentAmount();
    this.getFurnitureAmount();
    this.getIntangibleAmount();
  },

}
</script>

<style lang="less" scoped>
.container {
  display: flex;
  background-color: #fff;
  padding: 24px;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);

}
</style>