<template>
  <div class="flex-row" id="unit" v-show="(!echarts)&&(!isActiveTotalForm)">
    <div class="basic-main" @keyup.enter="search">
      <div class="flex">
        <div class="flex" style="flex:1;">
          <criteria-paged :model="model" :pager='true' v-ref:paged>
            <criteria @condition-changed='$parent.search' partial='criteria' v-ref:cri>
              <div class="form-horizontal select-overspread container-fluid auto" novalidate partial>
                <div class="row" width="100%">
                  <div class="col-sm-2 form-group">
                    <label class="font_normal_body">客户编号</label>
                    <input  style="width:60%" class="input_search" condition="u.f_userinfo_code like '%{}%'" placeholder='客户编号' type="text"
                           v-el:meternumber v-model="model.f_userinfo_code" v-next-el='f_userinfo_code'
                    >
                  </div>
                  <div class="col-sm-2 form-group">
                    <label class="font_normal_body">客户名称</label>
                    <input  style="width:60%" class="input_search" condition="u.f_user_name like '%{}%'" placeholder='客户名称' type="text"
                           v-el:username v-model="model.f_username" v-next-el='userid'>
                  </div>
                  <div class="col-sm-2 form-group">
                    <label class="font_normal_body">用气地址</label>
                    <input  style="width:60%" class="input_search" condition="a.f_address like '%{}%'" placeholder='用气地址' type="text"
                            v-el:area v-el:xq v-model="model.f_address" v-next-el='address'
                    >
                  </div>
                  <div class="col-sm-2 form-group">
                    <label class="font_normal_body">表&emsp;&emsp;号</label>
                    <input  style="width:60%" class="input_search" condition="h.f_meternumber = '{}'" placeholder='表号' type="text"
                            v-el:meternumber v-model="model.f_meternumber" v-next-el='meternumber'
                    >
                  </div>
                  <div class="col-sm-4 form-group button-range">
                    <button @click="search()" class="button_search button_spacing">查询</button>
                    <button @click="$parent.$parent.clearmsg" class="button_clear button_spacing">清空</button>
                    <export-excel :data="{condition:$parent.$parent.condition}"
                                  :field="$parent.$parent.getfield"
                                  sqlurl="rs/logic/exportfile" sql-name="webmeter_getUserGasList" template-name='表具查询'
                                  v-ref:exports
                                  :choose-col="true"></export-excel>
                    <button class="button_export button_spacing" style="width: max-content" @click="$parent.$parent.showTotalForm()" >显示汇总</button>
<!--                    <button class="btn btn-success" @click="$parent.$parent.showEcharts()">显示图表</button>-->
                    <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>
                    <v-select
                      placeholder='用气属性'
                      value-single="true"
                      :value.sync="model.f_gasproperties2"
                      v-model="model.f_gasproperties2"
                      :options='$parent.$parent.Gasproperties2'
                      close-on-select condition="uf.f_gasproperties2 {}">
                    </v-select>
                  </div>-->
<!--                  <res-select-group  :show-component="['company']" :initres="$parent.$parent.initres"  @re-res="$parent.$parent.getRes" v-ref:sel></res-select-group>-->

                  <div class="col-sm-2">
                    <label class="font_normal_body">公&emsp;&emsp;司</label>
                    <right-tree @re-res="$parent.$parent.getorg"
                                :initresid='$parent.$parent.orgid'></right-tree>
                  </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>
                    <v-select :options='$parent.$parent.Gasusertype'
                              :value.sync="model.f_user_type"
                              close-on-select
                              style="width:60%"
                              condition="uf.f_user_type = '{}'"
                              id="f_user_type"
                              placeholder='客户类型'
                              v-model="model.f_user_type"
                              value-single="true">
                    </v-select>
                  </div>
                  <div class="col-sm-2 form-group">
                    <label class="font_normal_body">用气性质</label>
                    <v-select :options='$parent.$parent.Gasproperties'
                              :value.sync="model.f_gasproperties"
                              close-on-select
                              condition="uf.f_gasproperties = '{}'"
                              id="f_gasproperties"
                              placeholder='用气性质'
                              style="width:60%"
                              v-model="model.f_gasproperties"
                              value-single="true">
                    </v-select>
                  </div>
<!--                  <div class="col-sm-2 form-group">-->
<!--                    <label class="font_normal_body">气表品牌</label>-->
<!--                    <v-select :value.sync="model.f_meter_brand"-->
<!--                              v-model="model.f_meter_brand"-->
<!--                              :options='$parent.$parent.meterbrands' placeholder='请选择'-->
<!--                              condition="f_meter_brand = '{}'"-->
<!--                              close-on-select></v-select>-->
<!--                  </div>-->
                  <div class="col-sm-2 form-group">
                    <label class="font_normal_body">时间区间</label>
                    <datepicker  :disabled-days-of-Week="[]" :format="'yyyy-MM-dd HH:mm:ss'"
                                :show-reset-button="reset"
                                :value.sync="model.startDate"
                                condition="h.f_hand_date >= '{}'"
                                id="startDate"
                                style="width:60%"
                                placeholder="开始时间"
                                v-model="model.startDate">
                    </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  :disabled-days-of-Week="[]" :format="'yyyy-MM-dd HH:mm:ss'"
                                :show-reset-button="reset"
                                :value.sync="model.endDate"
                                style="width:60%"
                                condition="h.f_hand_date <= '{}'"
                                id="endDate"
                                style="width:60%"
                                placeholder="结束日期"
                                v-model="model.endDate">
                    </datepicker>
                  </div>
                  <div class="col-sm-2 form-group  flex-row" style="white-space: nowrap">
                    <label class="font_normal_body">&nbsp;&nbsp;&nbsp;用气量&nbsp;</label>
                    <div class="row">
                      <input type="text" style="width:27%" class="input_search" v-model="model.f_oughtamount1"
                             condition="f_oughtamount >= {} " placeholder="">
                      <label class="font_normal_body"> ≤ x ≤ </label>
                      <input type="text" style="width:27%" class="input_search" v-model="model.f_oughtamount2"
                             condition="f_oughtamount <= {} " placeholder="">
                    </div>
                  </div>
                  <!--<div class="col-sm-2 form-group">
                    <label class="font_normal_body">用&nbsp;气&nbsp;量&nbsp;</label>
                    <input  type="text" style="width:60%" class="input_search"
                           v-model="model.f_start_oughtamount" placeholder='起始气量'
                    >
                  </div>
                  <div class="col-sm-2 form-group">
                    <label class="font_normal_body">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;至&nbsp;&nbsp;&nbsp;</label>
                    <input  type="text" style="width:60%" class="input_search"
                           v-model="model.f_end_oughtamount" placeholder='结束气量'
                    >
                  </div>-->
                </div>
              </div>
            </criteria>
            <data-grid :model="model" id="usergasall" partial='list' class="list_area table_sy" v-ref:grid>
              <template partial='head'>
                <tr>
                  <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>-->
                  <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>
                  <th style="text-align:center">
                    <nobr>上期底数</nobr>
                  </th>
                  <th style="text-align:center">
                    <nobr>本期底数</nobr>
                  </th>
                  <!-- <th style="text-align:center"><nobr>气价(元/m³)</nobr></th>-->
                  <th style="text-align:center">
                    <nobr>用气量(m³)</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>


              </template>
              <template partial='body'>
                <td>{{row.f_userinfo_code}}</td>
                <td style="text-align:center">{{row.f_user_type}}</td>
                <td style="text-align:center">{{row.f_gasproperties}}</td>
                <!--<td style="text-align:center">{{row.f_gasproperties2}}</td>-->
                <td style="text-align:center">
                  <nobr>{{row.f_user_name}}</nobr>
                </td>
                <td>
                  <nobr>{{row.f_address}}</nobr>
                </td>
                <td>{{row.f_meternumber}}</td>
                <td style="text-align:center">{{row.f_balance}}</td>
                <td style="text-align:center">{{row.f_last_tablebase}}</td>
                <td style="text-align:center">{{row.f_tablebase}}</td>
                <!--<td style="text-align:center">{{row.f_avg_price}}</td>-->
                <td style="text-align:center">{{row.f_oughtamount}}</td>
                <td style="text-align:center">{{row.f_oughtfee}}</td>
<!--                <td style="text-align:center">{{row.f_collection}}</td>-->
                <td style="text-align:center">{{row.f_curbalance}}</td>
              </template>
            </data-grid>
          </criteria-paged>
          <table class="table-hover">
            <tr style="position: relative" class="table-bordered">
              <td
                style="display: inline-block;width: auto;border-right: 1px solid #F2F6FA;padding: 0px 10px 0px 10px;color: #5CB95C;font-weight: bold">
                汇总信息
              </td>
              <td style="display: inline-block;width: auto;border-right: 1px solid #F2F6FA;padding: 0px 10px 0px 10px;font-weight: bold">
                总用气量:&emsp;{{model.sums.f_oughtamount}}
              </td>
              <td style="display: inline-block;width: auto;border-right: 1px solid #F2F6FA;padding: 0px 10px 0px 10px;font-weight: bold">
                总用气金额:&emsp;{{model.sums.f_oughtfee}}
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
  <div  v-show="echarts">
    <user-gas-echarts :condition="condition" :echarts="echarts" :enddate="endDate"
                      :groupname="groupname[0]" :startdate="startDate"></user-gas-echarts>
  </div>
  <!--汇总表显示模板-->
  <div v-show="isActiveTotalForm">
    <user-gas-eform :condition="condition"></user-gas-eform>
  </div>
</template>

<script>
  import {PagedList} from 'vue-client'
  import UserGasEcharts from './UserGasEcharts'
  import * as Util from '../../../Util'
  import getLodop from '../../../plugins/LodopFuncs'
  import plugins from '../../../plugins/GetLoginInfoService'
  import plugin from 'system-clients/src/plugins/GetLoginInfoService'

  export default {
    title: '用气分析',
    props: ['data'],
    components: {UserGasEcharts},
    data() {
      return {
        model: new PagedList('rs/sql/webmeter_getUserGasList', 20, {}, {
          f_oughtamount: 0,
          f_oughtfee: 0
        }),
        getGroupNameByDate: [
          {label: '年份', value: 'year'},
          {label: '月份', value: 'month'},
          {label: '周', value: 'week'}
        ],
        meterbrands: [],
        criteriaShow: false,
        reportStr: null,
        show: false,
        initres: {
          org:[this.$login.f.orgid],
          dep:[],
          user:[]
        },
        outlets: [],
        operator: [],
        filename: '',
        searchshow: true,
        startDate: '',
        endDate: '',
        echarts: false,
        isActiveTotalForm: false,
        condition: '1=1',
        getfield: {},
        config: {
          excelHeaders: {
            'f_userinfo_code':'客户编号',
            'f_user_type':'客户类型',
            'f_gasproperties': '用气性质',
            'f_user_name': '客户名称',
            'f_address':'用气地址',
            'f_meternumber': '表号',
            'f_balance':'期初余额(元)',
            'f_last_tablebase': '上期底数',
            'f_tablebase':'本期底数',
            'f_oughtamount':'用气量(m³)',
            'f_oughtfee':'用气金额(元)',
            'f_curbalance':'期末结余(元)'

          }
        },
        groupname: ['year'],
        getgroupname: [
          {label: '年份', value: 'year'},
          {label: '月份', value: 'month'},
          {label: '周', value: 'week'},
          {label: '日', value: 'day'}
        ],
        // orgCondtionStr: ' and h.f_orgid in (' + this.$login.f.orgid + ')',
        orgCondtionStr: '(' + this.$login.f.orgid + ')',
        orgid:[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()
        this.getfield = this.config.excelHeaders
    },
    methods: {
      // 查询开关
      hidden() {
        this.criteriaShow = !this.criteriaShow
      },
      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 = {}
      },
      initParams() {
        // 初始化气表品牌
        let brandArr = []
        this.$MagGetSaleParam.getGasbrand().forEach((item) => {
          let temp = {}
          temp.label = item.label
          temp.value = item.value.f_meter_brand
          brandArr.push(temp)
        })
        this.meterbrands = [{label: '全部', value: ''}, ...brandArr]

      },
      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 + ` ${this.orgCondtionStr}`
        if (this.orgCondtionStr)
          this.condition = this.$refs.paged.$refs.cri.condition + `and h.f_orgid in ${this.orgCondtionStr}`
        else
          this.condition = this.$refs.paged.$refs.cri.condition + `and h.f_orgid = ${this.$login.f.orgid}`
        args.condition = this.condition
        this.model.search(args.condition, args.model)
      },
      // 显示柱状图
      showEcharts() {
        this.echarts = true
        this.isActiveTotalForm = false
      },
      notShowTotalForm() {
        this.echarts = false
        this.isActiveTotalForm = false
      },
      // 不显示柱状图
      notShowEcharts() {
        this.echarts = false
        this.isActiveTotalForm = false
      },
      // 显示汇总数据表格
      showTotalForm() {
        this.echarts = false
        this.isActiveTotalForm = true
      },
      close() {
        this.show = false
      },
      getRes(obj) {
        this.orgCondtionStr = plugins.convertToIn(obj)
      },
      getorg(obj) {
        this.orgCondtionStr = plugin.convertToIn(obj.resids)?plugin.convertToIn(obj.resids):'(' + this.$login.f.orgid + ')'
      }
      // getRes(condition,obj) {
      //   this.orgCondtionStr = condition
      //   this.orgname = obj.orgnames[0]
      //   this.depname = obj.depnames[0]
      // }
    },
    watch: {
      'data'(val) {
        if (val.f_files_path) {
          this.getFileContent(val.f_files_path)
        } else {
          this.reportStr = null
        }
      }
    },
    computed: {
      Gasusertype() {
        return [{label: '全部', value: ''}, ...this.$appdata.getParam('用户类型')]
      },
      valveStatus() {
        return [{label: '全部', value: ''}, ...this.$appdata.getParam('气表类型')]
      },
      Gasproperties() {
        return [{label: '全部', value: ''}, ...this.$appdata.getParam('用气性质')]
      }
    }
  }
</script>
<style>
  .mystyle {
    float: right;
    padding-right: 10%;
  }

  .mystyle1 {
    padding-top: 10px;

  }

  .mystyle2 {
    width: 100%;
    height: 35px;
    /*background: #00A3F0;*/
    padding-left: 15px;
    float: left;
  }

  .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>
