<template lang="html">
  <div :class="classname"  :style="{width:width,height:height}">
    <div style="height: 97%;">
      <div class="col-sm-3" style="height: 97%">
        <div class="row form-group" style="height: 5%">
            <label class="font_normal_body" >使用公司:</label>
          <res-select :initresid='model.orgid'
                      @res-select="getorg"
                      :is-mul="false"
                      class="select select_list"
                      restype='organization'
                      style="width: 60%">
          </res-select>
        </div>
        <div class="row" style="margin-left: 5%;margin-right: 5%;height: 15%;text-align:center;" >
          <h4 style="font-size: 18px;">用户数量</h4>
          <table class="col-sm-12 table table-bordered table-striped" style="font-size: 16px;">
            <tr class="text-center">
              <th style="text-align:center;"><nobr>现有户数</nobr></th>
              <th style="text-align:center;"><nobr>年度新增</nobr></th>
              <th style="text-align:center;"><nobr>本月新增</nobr></th>
              <th style="text-align:center;"><nobr>未开户数</nobr></th>
            </tr>
            <tr>
              <td style="text-align:center;"><nobr>{{num}}</nobr></td>
              <td style="text-align:center;"><nobr>{{year}}</nobr></td>
              <td style="text-align:center;"><nobr>{{month}}</nobr></td>
              <td style="text-align:center;"><nobr>{{noopen}}</nobr></td>
            </tr>
          </table>
        </div>
        <div style="width: 100%;height: 40%;margin-top: 10%;text-align:center;">
          <h4 style="font-size: 18px;">民用分类实有户数</h4>
          <ring-chart :sdata="sdata2" ></ring-chart>
        </div>
        <div style="width: 100%;height: 40%;text-align:center;">
          <h4 style="font-size: 18px;">工商业分类实有户数</h4>
          <ring-chart :sdata="sdata1" ></ring-chart>
        </div>
      </div>
      <div class="col-sm-6" style="height: 97%;text-align:center;">
        <h3>营收系统数据统计信息</h3>
        <div style="width: 100%;height: 50%">
          <div>
            <bar-chart :xdata="xdata" :sdata="sdata" :legend="legendData" :xname="xname" :yname="yname"> </bar-chart>
          </div>
        </div>
        <div style="width: 100%;height: 50%">
        <div>
<!--          <bussiness-type :orgid='model.orgid[0]' v-ref:pay ></bussiness-type>-->
          <bar-chart :xdata="xdata3" :sdata="sdata3" :legend="legendData1" :xname="xname" :yname="yname"> </bar-chart>
        </div>
        </div>
      </div>
      <div class="col-sm-3" style="height: 97%">
          <div style="width: 100%;height: 95%;margin-top: 10%;margin-right: 5%;" align="center">
            <h4 style="font-size: 18px;">各类表具在用用户数量</h4>
            <data-grid :model=mood class="table_sy"  partial='list' >
              <template partial='head' >
                <tr>
                  <th><nobr>气表品牌</nobr></th>
                  <th><nobr>使用户数</nobr></th>
                  <th><nobr>异常户数</nobr></th>
                </tr>
              </template>
              <template partial='body' >
                <tr>
                  <td><nobr>{{row.f_meter_brand}}</nobr></td>
                  <td><nobr>{{row.num}}</nobr></td>
                  <td><nobr>{{row.c}}</nobr></td>
                </tr>
              </template>
            </data-grid>
        </div>
      </div>
    </div>
  </div>

</template>

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

export default {
  title: '分析统计',
  props: {
    classname: {
      type: String,
      default: 'basic-main'
    },
    width: {
      type: String,
      default: '98.5%'
    },
    height: {
      type: String,
      default: '98%'
    }
  },
  watch:{
    'f_orgid'(val) {
      // if (val) {
        this.ks()
      // }
    }
  },
  data() {
    return {
      jurisdiction: this.$login.r,
      model: {
        orgid: [this.$login.f.orgid],
        startDate: Util.toStandardDateString(),
        endDate: Util.toStandardDateString()
      },
      f_orgid: '',
      xdata:[],
      sdata: [],
      legendData: ['民用'],
      sdata1:[],
      sdata2:[],
      legendData1: ['非民用'],
      xdata3: [],
      sdata3: [],
      xname:"年份",
      yname:"户数",
      num:'',
      year:'',
      month:'',
      noopen:'',
      arr:[],
      arrs:[],
      mood:'',
      resoptions: []
    }

  },
  ready() {

  },
  methods: {
    ks(){
        this.xdata = []
        this.sdata =  []
        this.sdata1 = []
        this.sdata2 = []
        this.xdata3 =  []
        this.sdata3 =  []
        this.num = ''
        this.year = ''
        this.month = ''
        this.noopen = ''
        this.arr = []
        this.arrs = []
        this.mood = ''
      this.getuser()
      this.getType()
      this.getType1()
      this.getnumber()
      this.getnumber1()
      this.getmeterbrand()
      console.log("7777777777777",this.sdata)
    },
    getorg (val) {
      this.f_orgid = this.$login.convertToIn(val)
      // this.$parent.f_orgid = this.f_orgid
    },
    async getuser (){
      let load = new HttpResetClass()
      // let id = this.model.orgid.toString()
      await load.load('POST','api/af-revenue/sql/getUser', {data: {f_orgid: this.f_orgid}}).then((res) => {
          console.log("加载res",res)
        for (var i = 0; i < res.data.length; i++) {
          this.num = res.data[i].number
          this.year = res.data[i].year
          this.month = res.data[i].month
          this.noopen = res.data[i].noopen
        }
        })
    },
    async getType (){
      let load = new HttpResetClass()
      // let id = this.model.orgid.toString()
      await load.load('POST','api/af-revenue/sql/getTypess', {data: {f_orgid: this.f_orgid}}).then((res) => {
        const rdata = res.data
        for (let i = 0; i < rdata.length; i++) {
          const object={
              value: rdata[i].f_type,
              name: rdata[i].f_devices_type
          }
          this.sdata2.push(object)
        }
      })
    },
    async getType1 (){
      let load = new HttpResetClass()
      // let id = this.model.orgid.toString()
      await load.load('POST','api/af-revenue/sql/getTypek', {data: {f_orgid: this.f_orgid}}).then((res) => {
        const rdata = res.data
        for (let i = 0; i < rdata.length; i++) {
          const object = {
            value:rdata[i].f_type,
            name:rdata[i].f_devices_type
          }
          this.sdata1.push(object)
        }
      })
    },
    async getnumber (){
      let load = new HttpResetClass()
      // let id = this.model.orgid.toString()
      await load.load('POST','api/af-revenue/sql/getNumberss', {data: {f_orgid: this.f_orgid}}).then((res) => {
        const rdata=res.data
        for (let i = 0; i < rdata.length; i++) {
          this.arr.push(rdata[i].num)
          this.xdata.push(rdata[i].f_gas_date)
        }
        this.sdata.push(this.arr)
      })
    },
    async getnumber1 (){
      let load = new HttpResetClass()
      // let id = this.model.orgid.toString()
      await load.load('POST','api/af-revenue/sql/getNumbers', {data: {f_orgid: this.f_orgid}}).then((res) => {
        console.log("加载res3",res)
        const rdata=res.data
        for (let i = 0; i < rdata.length; i++) {
          console.log(rdata[i].f_gas_date)
          console.log(rdata[i].num)
          this.arrs.push(rdata[i].num)
          this.xdata3.push(rdata[i].f_gas_date)
        }
        console.log("222222222222222222222222",this.xdata3)
        this.sdata3.push(this.arrs)
      })
    },
    async getmeterbrand (){
      let load = new HttpResetClass()
      // let id = this.model.orgid.toString()
      await load.load('POST','api/af-revenue/sql/getMeterbrand', {data: {f_orgid: this.f_orgid}}).then((res) => {
        this.mood=res
      })
    }
    // searchdata () {
    //   this.$refs.pay.searchdata()
    // },
  }
}
</script>

<style lang="css">
</style>
