<template lang="html">
  <div class="div-4">
    <div :style="{height:headheight,background:'#eaeff4'}">
      <div class="div-2">
        <button class="but-1" @click="barrdios" v-show="full_screen"><img src='../../../assets/echarts6.png'
                                                                          class="img-1"/>&nbsp;全屏显示
        </button>
        <button @click="showall" v-show="show_all" class="but-2">返回</button>
      </div>
    </div>
    <div class="flex-row" style="height: 90%;">
      <div class="span">
        <div class="form-inline" v-if="echartsshow" style="height: auto;margin-bottom: 5%;margin-top: 5%">
          <div class="form-group">
            <label for="endDate">截至日期:</label>
            <datepicker id="endDate" placeholder="结束日期"
                        v-model="endDate"
                        :value.sync="endDate"
                        :disabled-days-of-Week="[]"
                        :format="'yyyy-MM-dd'"
                        :show-reset-button="reset">
            </datepicker>
          </div>
<!--          <div class="form-group">-->
<!--            <label class="control-label">组织机构</label>-->
<!--            <chooser :userid.sync='f.id' resource-type="user" :width='200' :select-data.sync='chosenOrg'></chooser>-->
<!--          </div>-->
        </div>
        <div id="gph"></div>
      </div>

      <!--调用子组件绘图查表-->
      <div v-if="echartsshow">
        <h4  align="center">用户及小区统计表</h4>
        <criteria-paged :model="model" v-ref:crip>
          <data-grid :model="model" partial='list' id="datagridstyle1" v-ref:grid1
                     classname="table table-bordered table table-hover">
            <template partial='head'>
              <tr>
                <th>
                  <nobr>分公司</nobr>
                </th>
                <th>
                  <nobr>民用</nobr>
                </th>
                <th>
                  <nobr>非民用</nobr>
                </th>
                <th>
                  <nobr>小区</nobr>
                </th>
              </tr>
            </template>
            <template partial='body'>
              <tr class="tr-1">
                <td class="td-1" style="text-align: center;">
                  {{row.f_filialeid}}
                </td>
                <td class="td-1" style="text-align: center;">
                  {{row.mytype}}
                </td>
                <td class="td-1" style="text-align: center;">
                  {{row.fmytype}}
                </td>
                <td class="td-1" style="text-align: center;">
                  {{row.countxq}}
                </td>
              </tr>
            </template>
            <template partial='foot'>
              <tr>
                <td colspan="1" style="text-align: right">合计：</td>
                <td style="text-align: center"><nobr>{{$parent.$parent.$parent.count.mytype}}</nobr></td>
                <td style="text-align: center"><nobr>{{$parent.$parent.$parent.count.fmytype}}</nobr></td>
                <td style="text-align: center"><nobr>{{$parent.$parent.$parent.count.countxq}}</nobr></td>
              </tr>
            </template>
          </data-grid>
        </criteria-paged>
      </div>

    </div>
  </div>
</template>

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

  let getData = function * (self) {
    let load = new HttpResetClass()
    self.set()
    load.load('POST', 'rs/sql/CountPeople', {data: {endDate: self.endDate, orgid: self.orgid}},
      {resolveMsg: null, rejectMsg: null})
      .then((res) => {
      let filialeArray = []
      let mytypeArray = []
      let fmytypeArray = []
      let countxqArray = []
      self.count.mytype = 0
      self.count.fmytype = 0
      self.count.countxq =0
      for (var i = 0;i < res.data.length;i++){
      filialeArray[i] = res.data[i].f_filialeid
      mytypeArray[i] = res.data[i].mytype
      fmytypeArray[i] = res.data[i].fmytype
      countxqArray[i] = res.data[i].countxq
      self.count.mytype += res.data[i].mytype
      self.count.fmytype += res.data[i].fmytype
      self.count.countxq += res.data[i].countxq
    }
    self.set(filialeArray, mytypeArray, fmytypeArray, countxqArray)
    self.settable()
  })
  }
  export default {
    title: '用户数量分布',
    data () {
      return {
        full_screen: true,//控制全屏按键显示状态
        show_all: false,//控制返回按键显示状态
        //控制图表的显示状态
        echartsshow: false,
        barshow: true,
        detailshows: true,

        //控制图表的style
        barheight: '88.37%',
        headheight: '11.61%',
        styledate: {
          echartsheight: '95%',
          echartsfloat: 'none',
        },

        echartswidth: '95%',
        barshowid: '1',
        headData: [],
        bodyData: [],

        count:{
          mytype:0,
          fmytype:0,
          countxq:0,
        },

        model: new PagedList('rs/sql/CountPeople', 20, {endDate: 'this.endDate', orgid: 'this.orgid'}),
        orgid: `('${this.$login.f.orgid}')`,
        f: this.$login.f,
        chosenOrg: {
          id: 0
        },
        endDate: Util.toStandardDateString(),
        xc: '',
        isView: false
      }
    },
    props:{
      f_filialeids:{
        type:String
      }
    },
    methods: {
      barrdios() {//全屏按键事件
        console.log("全屏显示事件")
        this.barshow = true
        this.echartsshow = true
        this.show_all = true
        this.full_screen = false
        this.buttonshow = true
        this.showdetail = false
        this.barheight = '87%'
        this.styledate.echartsfloat = 'left'
        this.styledate.echartsheight = '65%'
        this.echartswidth = '50%'
        this.headheight = '8%'
        this.$parent.echarts = '1'
        this.$emit('echarts-changed')
        this.newecharts = true
        this.searchdata()
        console.log(this.$parent.echarts, '主图状态')
      },
      showall() {//返回按键事件
        //修改显示状态
        this.barshow = false
        this.detailshows = true
        this.echartsshow = false
        this.buttonshow = false
        this.buttonshow1 = false
        this.newecharts = false
        this.show_all = false
        this.full_screen = true
        this.oldecharts = true
        this.showdetail = false
        this.styledate.echartsheight = '95%'
        this.echartswidth = '50%'
        this.$parent.echarts = -1
        this.headheight = '11.61%'
        this.$emit('echarts-changed', this.echarts)
      },
      settable() {
        this.model = new PagedList('rs/sql/CountPeople', 20, {endDate: 'this.endDate', orgid: 'this.orgid'})
        this.model.endDate = this.endDate
        this.model.orgid = this.orgid
        this.model.search('1=1')
      },
      set(filialeArray, mytypeArray, fmytypeArray, countxqArray) {
        this.xc = echarts.init(document.getElementById('gph'))
        this.xc.setOption({
            backgroundColor: 'white',
            title: {
              text: '用户及小区',
              x: 'left'
            },
            tooltip: {
              trigger: 'axis',
              extraCssText: 'width: auto;height: auto;',
              axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
              }
            },
            grid: {
              left: '2%',
              right: '4%',
              bottom: '14%',
              top: '16%',
              containLabel: true
            },
            legend: {
              data: ['民用', '非民用', '小区'],
              right: 10,
              top: 12,
              textStyle: {
                color: "black"
              },
              itemWidth: 12,
              itemHeight: 10,
              // itemGap: 35
            },
            xAxis: {
              type: 'category',
              data: filialeArray,
              axisLine: {
                lineStyle: {
                  color: 'black'

                }
              },
              axisLabel: {
                // interval: 0,
                // rotate: 40,
                textStyle: {
                  fontFamily: 'Microsoft YaHei'
                }
              },
            },
            "dataZoom": [{
              "show": true,
              "height": 12,
              "xAxisIndex": [
                0
              ],
              bottom: '8%',
              "start": 10,
              "end": 90,
              handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
              handleSize: '110%',
              handleStyle: {
                color: "#d3dee5",

              },
              textStyle: {
                color: "#fff"
              },
              borderColor: "#90979c"
            }, {
              "type": "inside",
              "show": true,
              "height": 15,
              "start": 1,
              "end": 35
            }],
            yAxis: {
              type: 'value',
              axisLine: {show: true, lineStyle: {color: '#999999'}},
            },
            series: [{
              name: '民用',
              type: 'bar',
              barWidth: '15%',
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#fccb05'
                  }, {
                    offset: 1,
                    color: '#f5804d'
                  }]),
                  barBorderRadius: 12,
                },
              },
              data: mytypeArray
            },
              {
                name: '非民用',
                type: 'bar',
                barWidth: '15%',
                itemStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: '#8bd46e'
                    }, {
                      offset: 1,
                      color: '#09bcb7'
                    }]),
                    barBorderRadius: 11,
                  }

                },
                data: fmytypeArray
              },
              {
                name: '小区',
                type: 'bar',
                barWidth: '15%',
                itemStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: '#248ff7'
                    }, {
                      offset: 1,
                      color: '#6851f1'
                    }]),
                    barBorderRadius: 11,
                  }
                },
                data: countxqArray
              }]
          })
      },
      searchdata () {
        let getGen = getData(this)
        co(getGen)
      }
    },
    ready () {
      // this.orgid = `('${this.$login.f.orgid}')`
      // this.searchdata()
    },
    watch: {
      'endDate' (val) {
        console.log("我是watch")
        this.searchdata()
      },
      // 'chosenOrg': {
      //   deep: true,
      //   handler(val) {
      //     this.orgid = ''
      //     if (typeof this.chosenOrg.fullid !== 'undefined') {
      //       let orgarray = this.chosenOrg.fullid.split(".")
      //       let strid = orgarray[1]
      //       for (let i = 2; i < orgarray.length; i++) {
      //         strid += '.' + orgarray[i]
      //       }
      //       this.$set('orgid', strid)
      //     }
      //   },
      //   immediate: true
      // },
      'f_filialeids'(){
        console.log('number改变了')
        this.orgid = this.f_filialeids
        this.searchdata()
      }
    }

  }
</script>
<style scoped>
  .div-1 {
    height: 85%;
    width: 10%;
    margin-left: 5%;
    float: left;
    margin-top: 1%;
  }

  .div-2 {
    float: right;
    width: 80%;
    height: 55.56%;
    margin-right: 1%;
    margin-top: 0.5%;
  }

  .div-3 {
    float: left;
    margin-left: 2%;
    padding-top: 2%;
    width: 96%;
    height: 99%;
  }

  .div-4 {
    background-color: #fafafa;
    overflow-y: hidden
  }

  table {
    height: 100%;
    width: 100%;
    font-size: 12px
  }

  tr {
    height: 25%;
    width: 100%
  }

  td {
    width: 11%;
    font-size: 12px;
    color: #666666;
  }

  .td-1 {
    width: 16%;
    color: #90addf;
    font-size: 12px
  }

  .td-2 {
    width: 15%;
    color: #90addf;
    font-size: 12px
  }

  span {
    color: #90addf;
    font-size: 12px
  }

  .span-1 {
    color: #999999;
    font-size: 12px
  }

  .p-1 {
    font-size: 15px;
    height: 99%;
    width: 99%;
    font-weight: bold;
    color: #333333;
  }

  button {
    width: 10%;
    margin-top: 0%;
    margin-left: 2%;
    float: right;
    background-color: #73ca73;
    border-radius: 4px;
    border: 1px solid #73ca73;
    color: #ffffff;
    font-size: 15px;
    height: 120%;
  }

  .but-1 {
    width: 17%;
    float: right;
    border-radius: 4px;
    font-size: 12px;
    height: 130%;
  }

  .but-2 {
    background-color: #88b5e2;
    border: #88b5e2;
    width: 6%;
  }

  img {
    width: 5px;
    height: 18px;
  }

  .img-1 {
    height: 12px;
    width: auto;
  }

</style>

