<template>
  <div>
    <div novalidate class="form-horizontal select-overspread container-fluid auto" partial >
      <div class="col-sm-3 form-group">
        <label class="font_normal_body" for="startDate">开始日期:</label>
        <datepicker id="startDate" placeholder="开始日期"
                    style="width:60%"
                    v-model="models.startDate"
                    :value.sync="models.startDate"
                    :disabled-days-of-Week="[]"
                    class="datepicker"
                    :format="'yyyy-MM-dd'"
                    :show-reset-button="reset">
        </datepicker>
      </div>
      <div class="col-sm-3 form-group">
        <label class="font_normal_body" for="endDate">结束日期:</label>
        <datepicker id="endDate" placeholder="结束日期"
                    style="width:60%"
                    class="datepicker"
                    v-model="models.endDate"
                    :value.sync="models.endDate"
                    :disabled-days-of-Week="[]"
                    :format="'yyyy-MM-dd'"
                    :show-reset-button="reset">
        </datepicker>
      </div>
    </div>
    <div class="text-1">
      <div id="chart"></div>
    </div>
  </div>
</template>

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

export default {
  title: "树状图2",
  data() {
    return {
      model: {},
      models: {
        startDate: Util.toStandardDateString(),
        endDate: Util.toStandardDateString()
      },
      gasmoney: '',
      fengasmoney:'',
      zone: ''
    }
  },
  watch: {
    'models.startDate'(val) {
      if (val) {
        console.log(val)
        this.ks()
      }

    },
    'models.endDate'(val) {
      if (val) {
        console.log(val)
        this.ks()
      }
    },
  },
  methods: {
    setBar() {
      console.log('进入画图~~~~~~~~~~~~~~~~~~~')
      console.log(this.model)
      this.xc = this.$echarts.init(document.getElementById('chart'))
      this.xc.setOption({
        tooltip: {
          trigger: 'item',
          triggerOn: 'mousemove'
        },
        legend: {
          top: '2%',
          left: '3%',
          orient: 'vertical',
          data: [{
            name: 'tree1',
            icon: 'rectangle'
          }],
          borderColor: '#c23531'
        },
        series: [
          {
            type: 'tree',

            data: [this.model],

            top: '5%',
            left: '10%',
            bottom: '2%',
            right: '20%',

            symbolSize: 7,

            label: {
              position: 'left',
              verticalAlign: 'middle',
              align: 'right'
            },

            leaves: {
              label: {
                position: 'right',
                verticalAlign: 'middle',
                align: 'left'
              }
            },

            emphasis: {
              focus: 'descendant'
            },

            expandAndCollapse: true,

            animationDuration: 550,
            animationDurationUpdate: 750

          },
        ]
      })
    },
    async getgasmoney() {
      let HttpReset = new HttpResetClass()
      //获取公司的总用气量和总金额
      let getgasmoney = await HttpReset.load('post', 'api/af-revenue/sql/getGasmoney', {
        data: {
          startDate: this.models.startDate,
          endDate: this.models.endDate
        }
      })
      console.log("111111111111111", getgasmoney)
      this.gasmoney = getgasmoney.data
    },
    async getfengasmoney() {
      let HttpReset = new HttpResetClass()
      //获取分公司总用气量和总金额
      let getfengasmoney = await HttpReset.load('post', 'api/af-revenue/sql/getFengasmoney', {
        data: {
          startDate: this.models.startDate,
          endDate: this.models.endDate
        }
      })
      console.log("2222222222222222", getfengasmoney)
      this.fengasmoney = getfengasmoney.data
    },
    async getzone() {
      let HttpReset = new HttpResetClass()
      //获取分公司总用气量和总金额
      let getzone = await HttpReset.load('post', 'api/af-revenue/sql/getZone', {
        data: {
          startDate: this.models.startDate,
          endDate: this.models.endDate
        }
      })
      console.log("2222222222222222", getzone)
      this.zone = getzone.data
    },
    // dataGeneration() {
    //   let group = this.quchong(this.fengasmoney, 'name')
    //   console.log('筛选', group)
    //   let model = {
    //     name: '渭南天然气公司' + `\n (${this.gasmoney[0].f_meter_classify})` + `\n '金额:'(${this.gasmoney[0].money})`
    //       + `\n '气量:'(${this.gasmoney[0].gas})` + `\n (${this.gasmoney[1].f_meter_classify})` + `\n '金额:'(${this.gasmoney[1].money})`
    //       + `\n '气量:'(${this.gasmoney[1].gas})`,
    //     children: []
    //   }
    //   for (let row2 of group) {
    //     let obj1 = {
    //
    //     }
    //
    //     const filter1 = this.conditionGenerate(this.fengasmoney, 'name', row2)
    //     for(let row3 of filter1){
    //       let obj1 = {
    //         name: row3.name
    //           + `\n (${row3.f_meter_classify})` + `\n '金额:'(${row3.money})`
    //           + `\n '气量:'(${row3.gas})` + `\n (${row3.f_meter_classify})` + `\n '金额:'(${row3.money})`
    //           + `\n '气量:'(${row3.gas})`,
    //         children: []
    //       }
    //       console.log("obj1",obj1)
    //       model.children.push(obj1)
    //     }
    //   }
    //
    //   this.model=m
    dataGeneration() {
      let model = {
        name: '渭南天然气公司',
        children: []
      }
      console.log('aaaa')
      for (let i = 0; i < this.gasmoney.length; i++) {
        let obj = {
          name: this.gasmoney[i].f_meter_classify + `\n '气量:'(${this.gasmoney[i].gas})` + `\n '金额:'(${this.gasmoney[i].money})`,
          children: []
        }
        if (i == 1) {
          let obj_xs1 = {
            name: '详情',
            children: []
          }
          model.children.push(obj_xs1)
          let group = this.quchong(this.fengasmoney, 'name')
          for (let row of group) {
            let obj1 = {
              name: row,
              children: []
            }
            let filter1 = this.conditionGenerate(this.fengasmoney, 'name', row)
            for (let j = 0; j < filter1.length; j++) {
              let obj2 = {
                name: filter1[j].f_meter_classify + `\n '气量:'(${filter1[j].gas})` + `\n '金额:'(${filter1[j].money})`,
                children: []
              }
              if (j == 1) {
                let obj_xs2 = {
                  name: '详情',
                  children: []
                }
                let data1 = this.conditionGenerate(this.zone, 'name', row)
                let group1 = this.quchong(data1, 'f_district')
                // let data1 = this.conditionGenerate(this.zone, ['name',''], [row,group1])
                obj1.children.push(obj_xs2)
                for (let row2 of group1) {
                  let obj3 = {
                    name: row2,
                    children: []
                  }
                  let filter2 = this.conditionGenerate(data1, 'f_district', row2)
                  for (let row3 of filter2) {
                    let obj4 = {
                      name: row3.f_meter_classify + `\n '气量:'(${row3.gas})` + `\n '金额:'(${row3.money})`,
                      children: []
                    }
                    obj3.children.push(obj4)
                  }
                  obj_xs2.children.push(obj3)
                }
              }
              obj1.children.push(obj2)
            }
            obj_xs1.children.push(obj1)
          }
        }
        model.children.push(obj)
      }
      console.log('ppp')
      this.model = model
    },
    /**
     * 数组筛选
     * @param data 要筛选的数组
     * @param key 筛选的key,可以是数组
     * @param value 筛选key对应的value值,可以是数组
     * @returns {Array}
     */
    conditionGenerate(data, key, value) {
      const group = []
      for (let row of data) {
        if (key instanceof Array) {
          let flag = true
          for (let [index, item] of key.entries()) {
            if (row[item] != value[index]) {
              flag = false
            }
          }
          if (flag) group.push(row)
        } else {
          if (row[key] == value) {
            group.push(row)
          }
        }
      }
      return group
    },
    quchong(data, key) {
      const group = []
      for (let row of data) {
        if (!group.includes(row[key])) {
          group.push(row[key])
        }
      }
      return group
    },
    async ks() {
      await this.getgasmoney()
      await this.getfengasmoney()
      await this.getzone()
      this.dataGeneration()
      this.setBar()
    }
  },
  ready() {
    this.ks()
  }
}
</script>

<style scoped>

</style>
