<template>
  <div class="Dashboard-Campus-Service">
    <div class="Dashboard-SearchBar bothSearch">
      <search-item label="运营商">
        <operator-select
          :accessType="1"
          :value="filters.operateId"
          @input="val => changeOperatorHandle({ operateId: val })"
        />
      </search-item>
      <search-item label="区域">
        <dashboard-area-select
          :operateId="filters.operateId"
          :value="filters.choiceareaIds"
          multiple
          @input="val => updateFilters({choiceareaIds: val})"
        />
      </search-item>
      <el-radio-group
        class="Dashboard-Radio"
        :value="filters.timeType"
        @input="val => updateFilters({ timeType: val })"
      >
        <el-radio
          class="Dashboard-Radio-item"
          :label="0"
        >本日</el-radio>
        <el-radio
          class="Dashboard-Radio-item"
          :label="1"
        >本月</el-radio>
        <el-radio
          class="Dashboard-Radio-item"
          :label="2"
        >本年</el-radio>
      </el-radio-group>
      <el-button
        :loading="loading.service||loading.area||loading.equipment"
        type="primary"
        @click="fetchConsumeList"
        class="CampusRank-search"
      >搜索</el-button>
    </div>
    <div class="Dashboard-Campus-Service-chart">
      <CampusRank />
      <SeviceRatio />
    </div>
  </div>
</template>

<script>
import SeviceRatio from '../SeviceRatio/SeviceRatio';
import CampusRank from '../CampusRank/CampusRank';
import { mapGetters, mapActions } from 'vuex';

export default {
  components: {
    SeviceRatio,
    CampusRank,
  },
  computed: {
    ...mapGetters('Dashboard', [
      'campusRankList',
      'filters',
      'areaInfo',
      'loading',
    ]),
  },
  methods: {
    ...mapActions('Dashboard', [
      'fetchConsumeList',
      'updateCampusName',
      'updateFilters',
    ]),
    changeOperatorHandle(data) {
      this.updateFilters({ ...data, choiceareaIds: [] });
      // this.fetchConsumeList();
    },
  },
};
</script>

<style lang="scss">
.Dashboard-Campus-Service {
  .Dashboard & .Dashboard-SearchBar.bothSearch {
    justify-content: flex-start;
    align-items: center;
    .Dashboard-Radio {
      margin-left: 20px;
    }
  }
  .Dashboard-Campus-Service-chart {
    display: flex;
    width: 100%;
    .CampusRank-wrap {
      position: relative;
      flex: 1.2;
      margin-right: 20px;
    }
    .CampusRank-wrap::after {
      content: '';
      position: absolute;
      height: 80%;
      top: 10%;
      right: -10px;
      border-right: 1px dotted #eee;
    }
    .SeviceRatio {
      flex: 1;
    }
  }
  .el-select {
    .el-select__tags {
      height: 90%;
      overflow: hidden;
      input {
        display: none;
      }
    }
    .el-input {
      overflow: hidden;
    }
    .el-input__inner {
      height: 100% !important;
    }
  }
}
</style>