<template>
  <div class="row">
    <div class="col-sm-12 chartsItem">
      <chart-type-base title="用气性质-金额" type="pie"
                       :data="chartsData_fee"></chart-type-base>
    </div>
    <div class="col-sm-12 chartsItem">
      <chart-type-base title="用气性质-气量" type="pie" :data="chartsData_gas"></chart-type-base>
    </div>
    <div class="col-sm-12 chartsItem" v-if="chartsData_both.length">
      <chart-type-base title="用气性质-气量/金额" :data="chartsData_both" type="bar"></chart-type-base>
    </div>
    <div class="col-sm-12 chartsItem" v-if="chartsData_line.length > 2">
      <chart-type-base title="营收曲线-用气性质" type="line" :smooth="true"
                       :data="chartsData_line"></chart-type-base>
    </div>
  </div>
</template>

<script>
import ChartTypeBase from '../ChartTypeBase.vue'
import {HttpResetClass} from "vue-client";

export default {
  name: "chargeQueryEcharts",
  components: {
    ChartTypeBase
  },
  props: ['data'],
  data() {
    return {
      chartsData_fee: {},
      chartsData_gas: {},
      chartsData_both: [],
      chartsData_line: [],
    }
  },
  methods: {
    async getData() {
      this.chartsData_fee = {}
      this.chartsData_gas = {}
      this.chartsData_both = []
      let load = new HttpResetClass()
      await load.load("POST", 'api/af-revenue/sql/chargeQuery_by_gasproperties',
        {data: Object.assign(this.data, {groupitem: "f_gasproperties"})},
        {resolveMsg: null, rejectMsg: null})
        .then(async (res) => {
          res.data.forEach(item => {
            this.chartsData_fee[item.groupitem] = item.f_preamount
            this.chartsData_gas[item.groupitem] = item.f_pregas
            this.chartsData_both.push({
              product: item.groupitem,
              '气量': item.f_pregas,
              '金额': item.f_preamount
            })
          })
          this.chartsData_fee = Object.assign({}, this.chartsData_fee)
          this.chartsData_gas = Object.assign({}, this.chartsData_gas)
          // 获取折线图数据
          await load.load("POST", 'rs/logic/chargeQuery_by_gasproperties_line',
            {data: Object.assign(this.data, {result: res.data})},
            {resolveMsg: null, rejectMsg: null})
            .then((res) => {
              this.chartsData_line = res.data
            })
        })
    }
  },
  watch: {},
  ready() {
    this.getData()
  }
}
</script>

<style scoped>
.chartsItem {
  height: 300px;
  margin-bottom: 20px;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #e5e5e5;
  padding: 10px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}
</style>
