<template>
  <div>
      <div class="d-flex search-box jc-end">
        <el-select v-model="selectYear" size="mini"  @change="changeYear">
          <el-option
              v-for="item in yearList"
              :key="item"
              :label="item"
              :value="item">
          </el-option>
        </el-select>
      </div>
      <div class="ball-line d-flex heightCut68">
        <div class="ball flex-1">
          <waterBall :message="waterBall.charts" idstr="ballLeft" class="heightCut68"></waterBall>
            <p>共计 {{waterBall.sign.toFixed(2)}}万元</p>
            <p>已回款 {{waterBall.acc.toFixed(2)}}万元</p>
        </div>
        <div class="flex-2">
          <lineChart :message="dataList" idstr="receiptStatistics" class="receiptStatistics"></lineChart>
        </div>
      </div>

  </div>
</template>

<script>
import lineChart from '@/components/echarts/lineChart' // 回款额 折线图
import waterBall from '@/components/echarts/waterBallChart'
import * as API_OPERATION from '@/api/con.operation'
export default {
  components: { waterBall, lineChart },
  data () {
    return {
      selectYear: '',
      yearList: [],
      waterBall: {},
      dataList: {}
    }
  },
  mounted () {
    this.getYears()
  },
  methods: {
    async getYears () {
      const _data = await API_OPERATION.getCollectionYear()
      this.yearList = _data.data
      this.selectYear = _data.data[0]
      this.getCollection()
    },
    changeYear () {
      this.getCollection()
    },
    async getCollection () {
      const _data = await API_OPERATION.getCollection({ year: this.selectYear })
      this.dataList = _data.data
      this.waterBall = _data.data.waterBall
    }
  }
}
</script>

<style lang="scss" scoped>
  @import '~@/assets/style/operation.scss';
</style>
