<template>
    <div class="deptOperation">
        <div class="title">企业运营</div>
        <div class="content">
            <div class="select-box">
                <div class="tab-chart">
                    <span class="tab-button" @click="getTypeData(1)" :class="{'is-active':chartActive=== 1 }">公司营收统计</span>
                    <span class="tab-button" @click="getTypeData(2)" :class="{'is-active':chartActive=== 2 }">客户增长分布</span>
                </div>
                <div class="tab-data" v-if="chartActive===1">
                    <span class="tab-button" @click="getTimeData('year')" :class="{'is-active':dataActive=== 'year' }">年</span>
                    <span class="tab-button" @click="getTimeData('month')" :class="{'is-active':dataActive=== 'month' }">月</span>
                </div>
                <div class="tab-data" v-if="chartActive===2">
                  <el-select v-model="years" size="mini" @change="getCustomer">
                    <el-option
                      v-for="item in yearsOption"
                      :key="item"
                      :label="item"
                      :value="item">
                    </el-option>
                  </el-select>
                </div>
            </div>
            <div class="charts">
                <statistics v-if="chartActive===1" :message="statisticsChart" idstr="statisticsChart" class="statisticsChart"></statistics>
                <distributed v-else :message="distributedChart" :idstr="'distributedChart'" class="distributedChart"></distributed>
            </div>
        </div>

    </div>
</template>

<script>
import statistics from './mainPageEcharts/statistics' // 公司营收统计
import distributed from './mainPageEcharts/distributed' // 公司营收统计
import * as API_BASIC from '@/api/sys.basic.js'

export default {
  components: { statistics, distributed },
  data () {
    return {
      yearsOption: [],
      years: '2021',
      chartActive: 1,
      dataActive: 'year',
      statisticsChart: {},
      distributedChart: {
        xAxis: [],
        serise: {}
      }
    }
  },
  mounted () {
    this.getCustomerTime()
    this.getTypeData(1)
  },
  methods: {
    async getCustomerTime () {
      const _data = await API_BASIC.getCustomerTime()
      this.yearsOption = _data.data
      this.years = this.yearsOption[0]
    },
    getTimeData (param) {
      if (param === 'year') {
        this.dataActive = 'year'
      } else {
        this.dataActive = 'month'
      }
      this.getRevenueDataList()
    },
    getTypeData (param) {
      if (param === 1) {
        this.chartActive = 1
        this.getRevenueDataList()
      } else {
        this.chartActive = 2
        this.getCustomer()
      }
    },
    // 查询公司营收数据
    async getRevenueDataList () {
      const _data = await API_BASIC.getRevenueDataList({ time: this.dataActive })
      this.statisticsChart = _data.data
    },
    // 查询客户增长分布数据
    async getCustomer () {
      const _data = await API_BASIC.getCustomer({ time: this.years })
      this.distributedChart = _data.data
    }
  }
}
</script>

<style lang="scss" scoped>
  .deptOperation{
    .content {
      font-size: .12rem;
      padding: .16rem .24rem;
      .select-box {
        justify-content: flex-end;
        .tab-data {
            margin-left: .4rem;
            .el-select {
              width: 1.2rem;
            }
        }
      }
      .charts {
          width: 100%;
          height: 2rem;
          .statisticsChart ,.distributedChart {
              width: 100%;
              height: 2rem;
          }
      }
    }
  }
</style>