<template lang="html">
  <div class="basic-main">
    <div class="form-horizontal select-overspread container-fluid auto">
      <div class="row">
        <div class="col-sm-3 form-group">
          <button @click="$parent.notShowEcharts()" class="button_clear button_spacing">隐藏图表</button>
        </div>

      </div>
    </div>
    <div style="height: 97%;">
      <div class="flex-row" style="flex: 1;border-bottom: 1px dashed #888;height: 48%">
        <div style="flex: 1;border-right: 1px dashed #888;width: 50%">
          <div id="charts3">
            <div id="ms3" :style="{width:'100%',height:'100%'}"></div>
          </div>
        </div>
        <div style="flex: 1;width: 50%">
          <div id="charts1">
            <div id="ms1" :style="{width:'100%',height:'100%'}"></div>
          </div>
          <!--        <bank-manager :startdate='model.startDate' :enddate='model.endDate' :orgid='model.orgid[0]'-->
          <!--                      v-ref:pay></bank-manager>-->
        </div>
      </div>
      <div class="flex-row" style="flex: 1;height: 48%">
        <div style="flex: 1;width: 100%">
          <div id="charts2">
            <div id="ms2" :style="{width:'100%',height:'100%'}"></div>
          </div>
          <!--        <bussiness-type :startdate='model.startDate' :enddate='model.endDate' :orgid='model.orgid[0]' v-ref:pay ></bussiness-type>-->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import * as Util from '../../Util'
  import co from 'co'
  import { HttpResetClass } from 'vue-client'
  import echarts from "echarts";

  let getData = function * (self, condition) {
    let load = new HttpResetClass()
    load.load('POST', 'api/af-revenue/sql/webmeter_getUserGasGroup',
      {data: {condition: condition, groupname: self.groupname, startDate: self.startdate,
          endDate: self.enddate}},
      {resolveMsg: null, rejectMsg: null})
      .then((res) => {
        let d = res.data
        let gasproperties = Array.from(new Set(d.map(x => x.f_gasproperties)))
        let userType = Array.from(new Set(d.map(x => x.f_user_type)))
        let meterBrand = Array.from(new Set(d.map(x => x.f_meter_brand)))
        let gasproGas = []
        let gasproMoney = []
        let userTypeGas = []
        let userTypeMoney = []
        let meterBrandGas = []
        let meterBrandMoney = []
        for (let i in gasproperties) {
          gasproGas.push(d.filter(x => x.f_gasproperties === gasproperties[i]).map(item => item.f_gas).reduce((x, y) => x + y, 0).toFixed(2))
          gasproMoney.push(d.filter(x => x.f_gasproperties === gasproperties[i]).map(item => item.f_money).reduce((x, y) => x + y, 0).toFixed(2))
        }
        console.log('userType------', userType)
        for (let items of userType) {
          console.log('userType------', items)
          let gas = d.filter(x => x.f_user_type === items).map(item => item.f_gas).reduce((x, y) => x + y, 0).toFixed(2)
          let money = d.filter(x => x.f_user_type === items).map(item => item.f_money).reduce((x, y) => x + y, 0).toFixed(2)
          userTypeGas.push({name: items, value: gas})
          userTypeMoney.push({name: items, value: money})
        }
        console.log('userTypeGas------', userTypeGas)
        console.log('userTypeMoney------', userTypeMoney)
        for (let i in meterBrand) {
          meterBrandGas.push(d.filter(x => x.f_meter_brand === meterBrand[i]).map(item => item.f_gas).reduce((x, y) => x + y, 0).toFixed(2))
          meterBrandMoney.push(d.filter(x => x.f_meter_brand === meterBrand[i]).map(item => item.f_money).reduce((x, y) => x + y, 0).toFixed(2))
        }
        let legend1 = [{
          name: '气量',
          data: gasproGas
        },{
          name: '金额',
          data: gasproMoney
        }]
        let legend2 = [{
          name: '气量',
          data: meterBrandGas
        },{
          name: '金额',
          data: meterBrandMoney
        }]
        self.setBar('ms1','用气分析(用气性质)', gasproperties, legend1)
        self.setBar('ms2','用气分析(气表品牌)', meterBrand, legend2)
        self.setPie ('ms3', '用气分析(用户类型)', userType, userTypeGas, userTypeMoney)
      })
  }
  export default {
    props: {
      echarts:{
        type:Boolean,
        default:false
      },
      startdate: {
        type: String,
        default: Util.toStandardDateString()
      },
      enddate: {
        type: String,
        default: Util.toStandardDateString()
      },
      condition: {
        type: String,
        default: '1=1'
      },
      groupname: {
        type: String,
        default: 'year'
      }
    },
    data () {
      title: '业务类型'
      return {
        xc: ''
      }
    },
    ready(){
      this.searchdata(this.condition)
      console.log(this.echarts)
    },
    methods: {
      setBar (id, titleText, type, legend) {
        let legendNew = legend.map(x => x.name)
        let ser = legend.map(x => {
          return {
            name: x.name,
            type: 'bar',
            data: x.data,
            markLine : {
            data : [
              {type : 'average', name: '平均值'}
            ]
          }}
        })
        this.xc = this.$echarts.init(document.getElementById(id))


        this.xc.setOption({
            title : {

            text: titleText,
            subtext: '数据查询来源',
            x: 'left'
          },
        tooltip : {
          trigger: 'axis',
          extraCssText: 'width: auto;height: auto;'
        },
        legend: {
            x: 'left',
            y: 'bottom',
            data: legendNew //['气量']
        },
        toolbox: {
          show : true,
            feature : {
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar']},
            restore : {show: true},
            saveAsImage : {show: true}
          }
        },
        calculable : true,
          xAxis : [
          {
            type : 'category',
            data : type
          }
        ],
          yAxis : [
          {
            type : 'value'
          }
        ],
          series : ser
      })
      },
      setPie (id, titleText, type, dateGas, dateMoney) {
        console.log("进入组件")
        let xc = this.$echarts.init(document.getElementById(id))
        xc.setOption({
          title: [
            {
              text: titleText,
              x: '0%',
              y: '0%',
              textStyle: {
                color: '#010606',
                fontSize: 18,
              }
            },
            {
              text: '气量分布',
              x: '18%',
              y: '18%',
              textStyle: {
                color: '#010606',
                fontSize: 16,
              }
            },
            {
              text: '金额分布',
              x: '58%',
              y: '18%',
              textStyle: {
                color: '#010606',
                fontSize: 16,
              }
            }],
          tooltip: {
            trigger: 'item',
            extraCssText: 'width: auto;height: auto;',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          legend: {
            orient: 'horizontal',
            icon: 'circle',
            x: 'center',
            y: '80%',

            textStyle: {
              padding: [0, 0, 0, 4],
              color: '#010606'
            },
            data: type
          },
          series : [
            {
              name: '气量',
              type: 'pie',
              radius: ['0%', '40%'],
              center: ['25%', '50%'],
              hoverAnimation: true,
              minAngle: 15,//最小角度
              startAngle: 60, //起始角度
              label: {normal: {show:true,}},
              labelLine: { normal: {show:true,}},
              data: dateGas
            },
            {
              name: '金额',
              type: 'pie',
              radius: ['0%', '40%'],
              center: ['65%', '50%'],
              hoverAnimation: true,
              minAngle: 15,//最小角度
              startAngle: 60, //起始角度
              label: {normal: {show:true,}},
              labelLine: { normal: {show:true,}},
              data: dateMoney
            }
          ]

        },true)
      },
      searchdata (condition) {
        console.log("ec:"+this.echarts)
        let getGen = getData(this, condition)
        co(getGen)
      }
    },
    watch: {
      'echarts' (val) {
        this.searchdata(this.condition)
      },
      'groupname' (val) {
        this.searchdata(this.condition)
      }
    }
  }
</script>
