<template>
  <div>
    <div class="text-1">
      <div id="charts"></div>
    </div>
  </div>
</template>

<script>
import {HttpResetClass} from "vue-client";

export default {
  title: "用户分布",
  data() {
    return {
      model : {},
      company:"",
      fencompany:"",
      usertype:"",
      metertype:"",
      userstreet: "",
      residential:"",
      userinfo:"",
      slicearea:"",
      meterTypeArea:"",
      meterTypeUser:""
    }
  },
  methods: {
    setBar() {
      console.log('进入画图~~~~~~~~~~~~~~~~~~~')
      console.log(this.model)
      this.xc = this.$echarts.init(document.getElementById('charts'))
      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',

            name: 'tree1',

            data: [this.model],

            top: '5%',
            left: '7%',
            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 getcompany() {
      let HttpReset = new HttpResetClass()
      //获取表具总数
      let getcompany = await HttpReset.load('post','api/af-revenue/sql/getCompany',{data:{}})
      this.company=getcompany.data
    },
    async getfencompany(){
      let HttpReset = new HttpResetClass()
      //获取分公司总表具数
      let getfencompany =await HttpReset.load('post','api/af-revenue/sql/getFencompany',{data:{}})
      this.fencompany=getfencompany.data
    },
    async getslicearea(){
      let HttpReset = new HttpResetClass()
      //获取分公司大区总表具数
      let getslicearea =await HttpReset.load('post','api/af-revenue/sql/getSlicearea',{data:{}})
      this.slicearea=getslicearea.data
    },
    async getusertype(){
      let HttpReset = new HttpResetClass()
      //获取分公司大区民用和非民用总表具数
      let getusertype =await HttpReset.load('post','api/af-revenue/sql/getUsertype',{data:{}})
      this.usertype=getusertype.data
    },
    async getmetertype() {
      let HttpReset = new HttpResetClass()
      //获取分公司民用和非民用各自表品牌总表具数
      let getmetertype = await HttpReset.load('post', 'api/af-revenue/sql/getMetertype', {data: {}})
      this.metertype=getmetertype.data
    },
    async getmetertypeArea() {
      let HttpReset = new HttpResetClass()

      let meterTypeArea = await HttpReset.load('post', 'api/af-revenue/sql/getMeterTypeArea', {data: {}})
      this.meterTypeArea=meterTypeArea.data
    },
    async getmetertypeUser() {
      let HttpReset = new HttpResetClass()

      let meterTypeUser = await HttpReset.load('post', 'api/af-revenue/sql/getMeterTypeUser', {data: {}})
      this.meterTypeUser=meterTypeUser.data
    },

    dataGeneration () {
      let model = {
        name: '渭南天然气公司' + `\n (${this.company[0].sumnum})`,
        value: this.company[0].sumnum,
        children: []
      }
      for (let row1 of this.fencompany) {
        let obj1 = {
          name: row1.name + `\n (${row1.num})`,
          value: row1.num,
          children: []
        }
        const filter1 = this.conditionGenerate(this.slicearea, 'name', row1.name)
        for (let row2 of filter1) {
          let obj2 = {
            name: row2.f_slice_area + `\n (${row2.num})`,
            value: row2.num,
            children: []
          }
          obj1.children.push(obj2)
          const filter2 = this.conditionGenerate(this.usertype, ['name', 'f_slice_area'], [row1.name, row2.f_slice_area])
          for (let row3 of filter2) {
            let obj3 = {
              name: row3.f_user_type + `(${row3.num})`,
              value: row3.num,
              children: []
            }
            obj2.children.push(obj3)
          const filter3 = this.conditionGenerate(this.metertype, ['name', 'f_slice_area','f_user_type'], [row1.name, row2.f_slice_area,row3.f_user_type])
          for (let row4 of filter3) {
            let odj4 = {
              name: row4.f_meter_brand + `(${row4.num})`,
              value: row4.num,
              children: []
            }
            obj3.children.push(odj4)
            const filter4 = this.conditionGenerate(this.meterTypeArea, ['name', 'f_slice_area','f_user_type'], [row1.name, row2.f_slice_area,row3.f_user_type,row4.f_meter_brand])
            for (let row5 of filter4) {
              let obj5 = {
                name: row5.f_residential_area + `(${row5.num})`,
                value: row5.num,
                children: []
              }
              odj4.children.push(obj5)
              // const filter5 = this.conditionGenerate(this.meterTypeUser, ['name', 'f_slice_area','f_user_type'], [row1.name, row2.f_slice_area,row3.f_user_type,row4.f_meter_brand,row5.f_residential_area])
              // console.log()
              // for (let row6 of filter5) {
              //   let obj6 = {
              //     name: row6.f_user_name + `(${row6.num})`,
              //     value: row6.num,
              //     children: []
              //   }
              //   obj5.children.push(obj6)
              // }
            }
          }
        }
        }
        model.children.push(obj1)
      }
      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
    }
  },
  async ready(){
    await this.getcompany() //总公司
    await this.getfencompany() //分公司
    await this.getslicearea()  //大区
    await this.getusertype()   //用户类型
    await this.getmetertype()  //表型
    await this.getmetertypeArea()
    // await this.getmetertypeUser()
    this.dataGeneration()
    this.setBar()
  },
}
</script>

<style scoped>

</style>
