<template>
  <div
    class="SeviceRatio"
    v-loading="loading.service"
  >
    <div class="Dashboard-title">各服务消费占比</div>
    <SeviceRatioChart
      :data="seviceRatioList"
      :changeServiceHandle="changeServiceHandle"
    />
    <div class="SeviceRatio-title">{{areaInfo.areaName}}</div>
  </div>
</template>

<script>
import SeviceRatioChart from './SeviceRatioChart';
import { mapActions, mapGetters } from 'vuex';
export default {
  name: 'SeviceRatio',
  components: { SeviceRatioChart },
  computed: {
    ...mapGetters('Dashboard', ['seviceRatioList', 'areaInfo', 'loading']),
  },
  methods: {
    ...mapActions('Dashboard', ['fetchConsumeList']),
    changeServiceHandle(data) {
      this.fetchConsumeList({
        serviceId: data.serviceId,
        serviceName: data.serviceName,
        updateEuipmentList: true,
      });
    },
  },
};
</script>

<style lang="scss">
.SeviceRatio-title {
  font-size: 16px;
  text-align: center;
  padding-bottom: 12px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>