<template>
  <div class="row">
    <div class="col-sm-12 chartsItem" v-if="chartsData_line">
      <chart-type-base title="开户曲线" type="line" :smooth="true"
                       :data="chartsData_line"></chart-type-base>
    </div>
<!--    loding-->
    <div class="col-sm-12 chartsItem" v-if="!chartsData_line">
      <div class="loading">
        <div class="loading-text">加载中...</div>
      </div>
    </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_line: null,
    }
  },
  methods: {
    async getData() {
      let load = new HttpResetClass()
      let chartsData_line = {}
      await load.load("POST", 'api/af-revenue/sql/userOpenEcharts',
        {data: Object.assign(this.data)},
        {resolveMsg: null, rejectMsg: null})
        .then(async (res) => {
            if (res.data.length > 1){
              res.data.forEach(item=>{
                chartsData_line[item.f_open_date] = item.c
              })
            }
        })
      this.chartsData_line = Object.assign({}, chartsData_line)
    }
  },
  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>
