<template>
  <div id='app' class="flex datapanel" 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" width="100%">
            <div>
              <div class="col-sm-3 form-group form-input-group">
                <label class="control-label">组织机构</label>
                <right-tree :userid.sync='$parent.$parent.obj.userid' :source.sync='$parent.$parent.obj.source'
                            :multiple="true"
                            @re-res="$parent.$parent.getRes"></right-tree>
              </div>
              <div v-if="$parent.$parent.searchshow">
                <div class="col-sm-3 form-group form-input-group">
                  <label class="control-label">表&nbsp;钢&nbsp;号&nbsp;</label>
                  <input type="text" class="form-control" v-model="model.f_meternumber" placeholder='表钢号'
                         condition="uf.f_meternumber like '%{}%'" v-next-el='meternumber' v-el:meternumber
                  >
                </div>
                <div class="col-sm-3 form-group form-input-group">
                  <label class="control-label">&nbsp;用&nbsp;户&nbsp;号</label>
                  <input type="text" class="form-control" v-model="model.f_userinfo_code" placeholder='用户号'
                         condition="u.f_userinfo_code   like '%{}%'" v-next-el='f_userinfo_code' v-el:meternumber
                  >
                </div>
                <div class="col-sm-3 form-group form-input-group">
                  <label class="control-label">用户姓名</label>
                  <input type="text" class="form-control" v-model="model.f_username" placeholder='用户姓名'
                         condition="u.f_user_name like '%{}%'" v-next-el='userid' v-el:username>
                </div>
                <div class="col-sm-3 form-group form-input-group">
                  <label class="control-label">用户类型</label>
                  <v-select id="f_user_type"
                            v-model="model.f_user_type"
                            placeholder='用户类型'
                            value-single="true"
                            :value.sync="model.f_user_type"
                            :options='$parent.$parent.Gasusertype'
                            condition="uf.f_user_type {}"
                            close-on-select>
                  </v-select>
                </div>
                <div class="col-sm-3 form-group form-input-group">
                  <label class="control-label">用气性质</label>
                  <v-select id="f_gasproperties"
                            v-model="model.f_gasproperties"
                            placeholder='用气性质'
                            value-single="true"
                            :value.sync="model.f_gasproperties"
                            :options='$parent.$parent.Gasproperties'
                            condition="uf.f_gasproperties {}"
                            close-on-select>
                  </v-select>
                </div>
                <div class="col-sm-3 form-group form-input-group">
                  <label class="control-label" style="word-break:keep-all;">上报时间</label>
                  <datepicker placeholder="起始时间"
                              :value.sync="model.startDate"
                              v-model="model.startDate"
                              :format="'yyyy-MM-dd HH:mm:ss'"
                  ></datepicker>
                </div>
                <div class="col-sm-3 form-group form-input-group">
                  <label class="control-label" style="word-break:keep-all;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;至&nbsp;&nbsp;&nbsp;</label>
                  <datepicker placeholder="结束时间"
                              :value.sync="model.endDate"
                              v-model="model.endDate"
                              :format="'yyyy-MM-dd HH:mm:ss'"
                  ></datepicker>
                </div>
                <div class="col-sm-3 form-group form-input-group">
                  <label class="control-label">用户地址</label>
                  <input type="text" class="form-control" v-model="model.f_address" placeholder='地址'
                         condition="a.f_address like '%{}%'" v-el:xq v-next-el='address' v-el:area
                  >
                </div>
              </div>
              <div class="col-sm-3 form-group">
                <label class="control-label"></label>
                <button class="btn btn-success" @click="search()">查询</button>
                <label class="control-label"></label>
                <button class="btn btn-default" @click="$parent.$parent.clearmsg">清空</button>
                <label class="control-label" v-if="!$parent.$parent.excelTable">超过十万条限制导出</label>
                <export-excel v-if="$parent.$parent.excelTable"
                              :data="{condition: $parent.$parent.condition,startDate: model.startDate,endDate: model.endDate}"
                              :field="$parent.$parent.getfield"
                              sqlurl="rs/logic/webmeter_exportfile" sql-name="webmeter_getNewInstructChanceList"
                              template-name='UserInstructList'
                              :choose-col="true"></export-excel>
              </div>
              <div class="col-sm-3 form-group">
                <label class="control-label"></label>
                <button class="btn btn-success" @click="$parent.$parent.showEcharts()">显示图表</button>
              </div>
              <div v-show="!$parent.$parent.searchshow" @click="$parent.$parent.seachchange"
                   style="position: relative;float: right;margin-right: 1%;">
                <img src="../../../static/webMeter/shousuo.png"><span>展开</span>
              </div>
              <div v-show="$parent.$parent.searchshow" @click="$parent.$parent.seachchange"
                   style="position: relative;float: right;margin-right: 1%;">
                <img src="../../../static/webMeter/shangsheng.png"><span>收缩</span>
              </div>
            </div>
          </div>
        </div>
      </criteria>
      <data-grid id="reportgas" :model="model" partial='list' 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" 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" title="综合指令成功率=指令下发总表具数/在用户数">
              <nobr>综合指令成功率</nobr>
            </th>
          </tr>
        </template>
        <template partial='body' 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.zaiyong}}</td>
            <th style="text-align:center">{{row.tingyong}}</th>

            <td style="text-align:center">{{row.c0}}</td>
            <th style="text-align:center">{{row.c}}</th>
            <th style="text-align:center">{{row.f_bv1}}</th>
            <td style="text-align:center">
              <nobr>{{row.success}}</nobr>
            </td>
            <td style="text-align:center">
              <nobr>{{row.c1}}</nobr>
            </td>
            <td style="text-align:center">
              <nobr>{{row.f_bv2}}</nobr>
            </td>
            <td style="text-align:center">
              <nobr>{{row.f_bv0}}</nobr>
            </td>
          </tr>
        </template>
        <template partial='foot'></template>
      </data-grid>
    </criteria-paged>
  </div>
  <div style="height: 6%;width: 100%;" v-show="echarts">
    <button class="btn btn-success" @click="showEcharts()">隐藏图表</button>
  </div>
  <!--      图显示模板-->
  <div class="span " v-show="echarts" style="width: 100%;height: 90%;">
    <cr-user-instruct-echarts-list :condition="condition" :startdate="startDate"
                                :enddate="endDate" :echarts="echarts"></cr-user-instruct-echarts-list>
  </div>
</template>
<script>
  import {PagedList} from 'vue-client'
  import * as Util from '../../Util'
  import getLodop from '../../plugins/LodopFuncs'
  import UserInstructEchartsList from './UserInstructEchartsList'
  import {HttpResetClass} from 'vue-client'

  export default {
    title: '指令分析',
    props: ['data'],
    components: {UserInstructEchartsList},
    data() {
      return {
        model: new PagedList('rs/sql/webmeter_getNewInstructChanceList', 100, {
          startDate: 'this.model.startDate',
          endDate: 'this.model.endDate'
        }),
        condition: '1=1',
        filialeCodeStr: '',
        startDate: '',
        endDate: '',
        echarts: false,
        searchshow: false,
        Gasproperties2: [],
        excelTable: true,

        getfield: {
          'f_insert_date': '上报日期',
          'zaiyong': '在用户数',
          'tingyong': '停用户数',
          'c0': '指令下发成功表具数',
          'c': '指令下发总表具数',
          'f_bv1': '表具指令成功率',
          'success': '成功指令数',
          'c1': '总指令数',
          'f_bv2': '指令成功率',
          'f_bv0': '综合指令成功率'
        },
        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.f_orgids
        }
      }
    },
    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.getdata()
    },
    methods: {
      // 查询开关
      seachchange() {
        this.searchshow = !this.searchshow
      },
      getdata() {
        this.startDate = this.$refs.paged.$refs.cri.model.startDate
        this.endDate = this.$refs.paged.$refs.cri.model.endDate
        this.$refs.paged.$refs.cri.search()
        this.condition = this.$refs.paged.$refs.cri.condition
      },
      // 显示柱状图
      showEcharts() {
        this.echarts = !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) {
        let start=this.$refs.paged.$refs.cri.model.startDate
        let end=this.$refs.paged.$refs.cri.model.endDate
        if (start==null||start==''||end==null||end=='') {
          return this.$showMessage("上报时间的开始和结束时间不能为空！")
        }
        this.startDate = start
        this.endDate = end
        const filialeCondition = this.filialeCodeStr || this.getDefaultOrgCondition()
        if (filialeCondition) {
          args.condition = `${args.condition} and ${filialeCondition}`
        }
        this.condition = args.condition
        this.model.search(args.condition, args.model)
      },
      getRes(obj) {
        this.obj.res = obj.res
        this.obj.resids = obj.resids
        const ids = (obj.resids || '').split(',').map(item => item.trim()).filter(item => item)
        if (ids.length <= 1) {
          this.filialeCodeStr = ids[0] ? `uf.f_filialeids like '${ids[0]}%'` : ''
        } else {
          const parts = ids.map(code => `uf.f_filialeids like '${code}%'`)
          this.filialeCodeStr = `(${parts.join(' or ')})`
        }
      },
      getDefaultOrgCondition () {
        const defaultOrg = this.$login.f.f_orgids || ''
        return defaultOrg ? `uf.f_filialeids like '${defaultOrg}%'` : ''
      },
      uniq(array) {
        array.sort();
        let arraytype=[{label: '全部', value: ''}]
        let dr = {label: '', value: ''}
        if (array[0] == 'n') {
          dr={label: '空值', value: 'is null'}
        } else {
          dr={label: array[0], value: "='"+array[0]+"'"}
        }
        arraytype.push(dr)
        let temp=[array[0]];
        console.log(array[0] + "array[0]")
        for (var i = 1; i < array.length; i++) {
          if (array[i] !== temp[temp.length - 1]) {
            if (array[i] == 'n') {
              dr={label: '空值', value: 'is null'}
            } else {
              dr={label: array[i], value: "='"+array[i]+"'"}
            }
            arraytype.push(dr);
            temp.push(array[i]);
          }
        }
        /*console.log(arraytype[1].label + "label")
        console.log(arraytype[1].value + "value")*/
        return arraytype;
      }
    },
    computed: {
      Getuserstyle() {
        return [{label: '全部', value: ''}, ...this.$appdata.getParam('用气类型')]
      },
      Gasusertype () {
        return [{label: '全部', value: ''}, ...this.$appdata.getParam('用户类型')]
      },
      Gasproperties () {
        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>
