<template>
  <div class="app-container">
    <div class="cmain">
      <companyInfo :bar="true"></companyInfo>
      <div class="out" style="margin-top: 20px">
        <div class="int">
          <div class="bos" style="border: 0px">
            <div class="lab">
              <div class="bsg"></div>
              <div class="tit">交易金额统计</div>
            </div>
            <div class="years">
              <el-date-picker class="dpicker" :clearable="false" v-model="year" type="year" value-format="yyyy" placeholder="请选择年份"></el-date-picker>
              <div class="year" :class="{ active: current == index }" @click="current = index" v-for="(item, index) in type" :key="index">{{ item.name }}</div>
            </div>
            <BarChart :chartData="chartData" height="270px" v-if="chartData"></BarChart>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BarChart from '@/views/dashboard/BarChart';
export default {
  name: 'Money',
  components: {
    BarChart
  },
  data() {
    return {
      current: 0,
      chartData: [],
      year: this.util.getDate('year'),
      type: [
        { name: '充值金额', value: 0 },
        { name: '提现金额', value: 1 },
        { name: '发放金额', value: 2 }
      ]
    };
  },
  watch: {
    current(val) {
      this.getRecord();
    },
    year(val) {
      this.getRecord();
    }
  },
  mounted() {
    this.getRecord();
  },
  methods: {
    getRecord() {
      this.ajax({ url: '/work/company/statistics/chart', data: { year: this.year, type: this.current } }).then((response) => {
        this.chartData = response.data;
      });
    }
  }
};
</script>
