<template>
  <div class="flex-row">
    <div id='app' class="basic-main" v-show="!echarts">
      <criteria-paged :model="model" :pager='true' v-ref:paged>
        <criteria partial='criteria' @condition-changed='$parent.search' v-ref:cri>
          <div novalidate class="form-horizontal select-overspread container-fluid auto" partial>
            <div class="row">
              <div class="col-sm-2 form-group">
                <label class="font_normal_body">表&nbsp;钢&nbsp;号&nbsp;</label>
                <input @keyup.enter="search" style="width:60%" type="text" class="input_search"
                       v-model="model.f_meternumber" placeholder='表钢号'
                       condition="uf.f_meternumber like '%{}%'" v-next-el='meternumber' v-el:meternumber
                >
              </div>
             <!-- <div class="col-sm-2 form-group">
                <label class="font_normal_body">组织机构</label>
                <res-select :initresid="$parent.$parent.orgid"
                            style="width:60%"
                            @res-select="$parent.$parent.getRes"
                            restype='organization'>
                </res-select>
              </div>-->
              <div class="col-sm-2 form-group">
                <label class="font_normal_body">客户编号</label>
                <input @keyup.enter="search" style="width:60%" type="text" class="input_search"
                       v-model="model.f_userinfo_code" placeholder='客户编号'
                       condition="u.f_userinfo_code = '{}'" v-next-el='f_userinfo_code' v-el:meternumber
                >
              </div>
              <div class="col-sm-2 form-group">
                <label class="font_normal_body">客户名称</label>
                <input @keyup.enter="search" style="width:60%" type="text" class="input_search"
                       v-model="model.f_username" placeholder='客户名称'
                       condition="u.f_user_name like '%{}%'" v-next-el='userid' v-el:username>
              </div>
              <div class="span" style="float:right;margin-top:10px">
                <button class="button_search button_spacing" @click="search()">查询</button>
                <button class="button_clear button_spacing" @click="$parent.$parent.clearmsg">清空</button>
                <export-excel :data="$parent.$parent.getCondition" class="button_export button_spacing"
                              :field="$parent.$parent.getfield"
                              sqlurl="rs/logic/exportfile" sql-name="webmeter_getNewHandChanceList" template-name='抄表分析'
                              :choose-col="true"></export-excel>
                <div style="float: right" class="button_spacing" :class="{'button_shrink_top':$parent.$parent.criteriaShow,'button_shrink_bottom':!$parent.$parent.criteriaShow}" @click="$parent.$parent.hidden()"></div>
              </div>
            </div>
            <div class="row" v-show="$parent.$parent.criteriaShow">
              <div class="col-sm-2 form-group">
                <label class="font_normal_body">客户地址</label>
                <input @keyup.enter="search" style="width:60%" type="text" class="input_search"
                       v-model="model.f_address" placeholder='地址'
                       condition="a.f_address like '%{}%'" v-el:xq v-next-el='address' v-el:area
                >
              </div>
              <div class="col-sm-2 form-group">
                <label class="font_normal_body">用户类型</label>
                <v-select style="width:60%" id="f_user_type"
                          v-model="model.f_user_type"
                          placeholder='用户类型'
                          :value.sync="model.f_user_type"
                          :options='$parent.$parent.usertypes'
                          condition="uf.f_user_type = '{}'"
                          close-on-select>
                </v-select>
              </div>
              <div class="col-sm-2 form-group">
                <label class="font_normal_body">用气性质</label>
                <v-select style="width:60%" id="f_gasproperties"
                          v-model="model.f_gasproperties"
                          placeholder='用气性质'
                          :value.sync="model.f_gasproperties"
                          :options='$parent.$parent.Gasproperties'
                          condition="uf.f_gasproperties = '{}'"
                          close-on-select>
                </v-select>
              </div>

              <div class="col-sm-2 form-group">
                <label class="font_normal_body" style="word-break:keep-all;">上报时间</label>
                <datepicker style="width:60%" placeholder="起始时间"
                            :value.sync="model.startDate"
                            v-model="model.startDate"
                            :format="'yyyy-MM-dd HH:mm:ss'"
                ></datepicker>
              </div>
              <div class="col-sm-2 form-group">
                <label class="font_normal_body" style="word-break:keep-all;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;至&nbsp;&nbsp;&nbsp;</label>
                <datepicker style="width:60%" placeholder="结束时间"
                            :value.sync="model.endDate"
                            v-model="model.endDate"
                            :format="'yyyy-MM-dd HH:mm:ss'"
                ></datepicker>
              </div>
            </div>
          </div>
        </criteria>
        <data-grid id="reportgas" :model="model" partial='list' class="list_area table_sy" v-ref:grid>
          <template partial='head'>
            <tr>
              <th style="text-align:center">序号</th>
              <th style="text-align:center"><nobr>上报日期</nobr></th>
              <th style="text-align:center" title="安装户数=正常户数+停用户数+未注册户数"><nobr>安装户数</nobr></th>

              <th style="text-align:center" title="停用户数:表具状态为停用的用户数"><nobr>停用户数</nobr></th>
              <th style="text-align:center" title="在用户数:表具状态为正常的用户数"><nobr>在用户数</nobr></th>

              <th style="text-align:center" title="用户使用率=在用户数/正常户数"><nobr>用户使用率</nobr></th>
              <th style="text-align:center"><nobr>抄表成功户数</nobr></th>
              <th style="text-align:center"><nobr>总用气量</nobr></th>
              <th style="text-align:center" title="日均户均用气量=总用气量/抄表成功户数"><nobr>日均户均用气量(成功)</nobr></th>
              <th style="text-align''enter" title ="日均户均用气量=总用气量/在用户数"><nobr>日均户均用气量(在用)</nobr></th>
              <!--<th style="text-align:center"><nobr>指令成功户数</nobr></th>-->
              <th style="text-align:center" title="抄表成功率=抄表成功户数/在用户数"><nobr>抄表成功率</nobr></th>
              <!--<th style="text-align:center" title="指令成功率=指令成功户数/抄表成功户数"><nobr>指令成功率</nobr></th>-->
              <!--<th style="text-align:center" title="综合成功率=指令成功户数/在用户数"><nobr>综合成功率</nobr></th>-->
            </tr>
          </template>
          <template partial='body' partial='list' v-ref:grid>
            <tr>
              <td style="text-align:center">{{$index + 1}}</td>
              <td style="text-align:center;width: 170px;"><nobr>{{row.f_insert_date}}</nobr></td>
              <td style="text-align:center">{{row.anzhuang}}</td>

              <th style="text-align:center">{{row.c0}}</th>
              <td style="text-align:center"><nobr>{{row.c}}</nobr></td>

              <td style="text-align:center"><nobr>{{row.user_bv}}%</nobr></td>
              <!--<td style="text-align:center"><nobr>{{row.f_gas}}</nobr></td>-->
              <td style="text-align:center">{{row.c1}}</td>
              <td style="text-align:center">{{row.f_gas_all}}</td>
              <td style="text-align:center">{{row.f_gas}}</td>
              <td style="text-align:center">{{row.f_gas1}}</td>
              <td style="text-align:center">{{row.f_bv1}}%</td>
              <!--<td style="text-align:center">{{row.f_bv2}}%</td>-->
              <!--<td style="text-align:center;width: 170px;"><nobr>{{row.f_bv3}}%</nobr></td>-->
            </tr>
          </template>
          <template partial='foot'></template>
        </data-grid>
      </criteria-paged>
    </div>
    <div style="height: 40px;width: 100%;" v-show="echarts">
      <button class="button_search button_spacing" @click="showEcharts()">隐藏图表</button>
    </div>
    <!--图显示模板-->
    <div class="span " v-show="echarts" style="width: 100%;height: 90%;">
      <user-gas-echarts-list :condition="condition" :startdate="startDate"
                             :enddate="endDate" :echarts="echarts"></user-gas-echarts-list>
    </div>
  </div>
</template>
<script>
  import {PagedList} from 'vue-client'
  import UserGasEcharts from './UserGasEchartsList'
  import * as Util from '../../../Util'
  import plugins from '../../../plugins/GetLoginInfoService'

  export default {
    title: '抄表分析',
    props: ['data'],
    components: {UserGasEcharts},
    data () {
      return {
        model: new PagedList('rs/sql/webmeter_getNewHandChanceList', 50, {startDate: 'this.model.startDate', endDate: 'this.model.endDate'}),
        condition: '1=1',
        startDate: '',
        endDate: '',
/*        orgid:[this.$login.f.orgid],*/
        getfield:{"f_insert_date":"上报日期","anzhuang":"安装户数",
          "c0":"停用户数",
          "c":"在用户数","user_bv":"用户使用率",
          "c1":"抄表成功户数",
          "f_gas_all":"总用气量","f_gas":"日均户均用气量(成功)",
          "f_gas1":"日均户均用气量(在用)",
          "f_bv1":"抄表成功率"
          },
        criteriaShow:false,
        echarts: false,
     /*   orgCondtionStr: '(' + this.$login.f.orgid + ')',*/
        searchshow: false,
        /*obj: {
          userid: this.$login.f.id,
          source: `tool.getFullTree(this.getRights().where(row.getType() == $organization$))`,
          res: this.$login.f.f_fengongsi,
          resids: this.$login.f.orgid
        }*/
      }
    },
    ready () {
      this.$refs.paged.$refs.cri.model.startDate = Util.toStandardDateString() + ' 00:00:00'
      this.$refs.paged.$refs.cri.model.endDate = Util.toStandardDateString() + ' 23:59:59'
      this.$refs.paged.$refs.cri.search()
    },
    methods: {
      hidden(){
        this.criteriaShow = !this.criteriaShow
      },
      // 查询开关
      seachchange () {
        this.searchshow = !this.searchshow
      },

      // 显示柱状图
      showEcharts () {
        this.echarts = !this.echarts
        console.log(this.echarts)
      },
      close () {
        this.show = false
      },
      // SaveAsFile(str) {
      //   this.$showMessage('您是否需要导出本页数据？', ['confirm', 'cancel']).then((res) => {
      //     if (res === 'confirm') {
      //       let style = '<style>' +
      //         'td {border-width: 1px;padding: 2px;border-style: solid; border-color:black; border-collapse:collapse;} .tdright{text-align: right;}  .tdcenter{text-align: center;}</style>';
      //       let strHtml = style + document.getElementById(str).innerHTML;
      //       console.log(strHtml);
      //       let LODOP = getLodop();
      //       LODOP.PRINT_INIT('');
      //       LODOP.ADD_PRINT_TABLE(5, 5, '99%', '100%', strHtml);
      //       LODOP.SAVE_TO_FILE('抄表统计.xls')
      //     }
      //   })
      // },
      clearmsg () {
        this.$refs.paged.$refs.cri.model = {}
      },
      search (args) {
        this.startDate = this.$refs.paged.$refs.cri.model.startDate
        this.endDate = this.$refs.paged.$refs.cri.model.endDate
        if (this.endDate == '' || this.startDate == '') {
          return this.$showMessage("时间区间的开始和结束时间不能为空！")
        }
          this.condition = this.$refs.paged.$refs.cri.condition
        args.condition = this.condition
        this.model.search(args.condition, args.model)
      },
     /* getRes (obj) {
        this.orgCondtionStr = plugins.convertToIn(obj)
      }*/
    },
    computed: {
      getCondition() {
        var con=""
          con= `${this.$refs.paged.$refs.cri.condition} `
        return {
          condition: con  ,
          startDate:`${this.$refs.paged.$refs.cri.model.startDate}`,
          endDate:`${this.$refs.paged.$refs.cri.model.endDate}`
        }

      },
      usertypes () {
        return [{label: '全部', value: ''}, ...this.$appdata.getParam('用户类型')]
      },
      // usertypes () {
      //   return this.$getParams('用户类型', [{label: '全部', value: ''}])
      // },
      f_outlets () {
        return [{label: '全部', value: ''}, ...this.$appdata.getParam('网点查询用')]
      },
      valveStatus () {
        return [{label: '全部', value: ''}, ...this.$appdata.getParam('气表类型')]
      },
      // Gasproperties () {
      //   return [{label: '全部', value: ''}, ...this.$appdata.getParam('用气性质')]
      // },
      Gasproperties () {
        let rs = []
        if (this.$refs.paged.$refs.cri.model.f_user_type.length === 1) {
          rs = this.$appdata.getParam(this.$refs.paged.$refs.cri.model.f_user_type[0])
        }
        return [{lable: '全部', value:'' }, ...rs]
      },
      Getuserstyle () {
        return [{label: '全部', value: ''}, ...this.$appdata.getParam('用气类型')]
      }
    }
  }
</script>
<style>
  .mystyle{
    margin-left:80px;
  }
  .datapanel {
    color: #333;
    background-color: white;
    box-shadow: darkgrey 0.5px 0.5px 0.5px 0.5px ;
    padding: 10px 10px 10px 10px;
    border-radius:15px;
  }
</style>
