<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">表&emsp;&emsp;号</label>
                    <input style="width:60%" class="input_search" cond-value="h.f_meternumber = '{}'" placeholder='表号'
                           type="text"
                           v-el:meternumber v-model="model.f_meternumber" v-next-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 style="width:60%" class="input_search"
                           cond-value="f_userinfo_id in (select f_userinfo_id from t_userinfo where 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-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>
                    <button class="button_export button_spacing" style="width: max-content"
                            @click="$parent.$parent.showTotalForm()" v-show="$parent.$parent.condValueStr !=='1=1'">显示汇总
                    </button>
                    <export-excel :data="$parent.$parent.getCondition"
                                  :field="$parent.$parent.getfield"
                                  sqlurl="rs/logic/exportfile" sql-name="webmeter_getUserGasList"
                                  template-name='用气分析导出'
                                  v-if="$parent.$parent.jurisdiction.includes('excel导出')"
                                  :choose-col="true"></export-excel>
                    <!--                    <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>-->
                  <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">用户分类</label>
                    <v-select :value.sync="model.f_user_type"
                              @change="$parent.$parent.userTypeChange"
                              :options='$parent.$parent.Gasusertype' placeholder='请选择' v-model="model.f_user_type"
                              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 :value.sync="model.f_user_mold"
                              @change="$parent.$parent.userMoldChange"
                              :options='$parent.$parent.usermold' placeholder='请选择' v-model="model.f_user_mold"
                              condition="uf.f_user_mold = '{}'"
                              close-on-select></v-select>
                  </div>
                  <div class="col-sm-2 form-group">
                    <label class="font_normal_body">用气性质</label>
                    <v-select :value.sync="model.f_gasproperties" v-model="model.f_gasproperties"
                              :options='$parent.$parent.gasproperties' placeholder='请选择'
                              condition="uf.f_gasproperties = '{}'"
                              close-on-select></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"
                                cond-value="h.f_input_date >= to_date('{}','yyyy-MM-dd hh24:mi:ss')"
                                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%"
                                cond-value="h.f_input_date <= to_date('{}','yyyy-MM-dd hh24:mi:ss')"
                                id="endDate"
                                placeholder="结束日期"
                                v-model="model.endDate">
                    </datepicker>
                  </div>
                  <div class="col-sm-2 form-group">
                    <label class="font_normal_body">房产地址</label>
                    <input class="input_search" condition="f_house_address = '{}'"
                           placeholder='房产地址'
                           style="width:60%" type="text" v-model="model.f_house_address">
                  </div>
                  <div class="col-sm-2 form-group">
                    <label class="font_normal_body">用途</label>
                    <input class="input_search" condition="f_property_usage = '{}'"
                           placeholder='用途'
                           style="width:60%" type="text" v-model="model.f_property_usage">
                  </div>
                  <div class="col-sm-2 form-group">
                    <label class="font_normal_body">房型</label>
                    <input class="input_search" condition="f_house_type = '{}'"
                           placeholder='房型'
                           style="width:60%" type="text" v-model="model.f_house_type">
                  </div>
                  <div class="col-sm-2 form-group">
                    <label class="font_normal_body">是否一户多表</label>
                    <input class="input_search" condition="f_is_multi_meter = '{}'"
                           placeholder='是否一户多表'
                           style="width:60%" type="text" v-model="model.f_is_multi_meter">
                  </div>
                  <div class="col-sm-2 form-group">
                    <label class="font_normal_body">关联ID</label>
                    <input class="input_search" condition="f_house_id = '{}'"
                           placeholder='关联ID'
                           style="width:60%" type="text" v-model="model.f_house_id">
                  </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>上期底数</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_user_mold }}</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>
                  <nobr>{{ row.f_meter_brand }}</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_last_hand_date }}</td>
                <td style="text-align:center">{{ row.f_tablebase }}</td>
                <td style="text-align:center">{{ row.f_end_hand_date }}</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>
        </div>
        <table class="table-hover" style="height: auto">
          <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">
              气量合计:&emsp;{{ sumsmodel.f_oughtamount }}
            </td>
            <td style="display: inline-block;width: auto;border-right: 1px solid #F2F6FA;padding: 0px 10px 0px 10px">
              金额合计:&emsp;{{ sumsmodel.f_oughtfee }}
            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>
  <div v-show="echarts">
    <user-gas-echarts :condition="condition" :condvalue="condValueStr" :echarts="echarts" :enddate="endDate"
                      :groupname="groupname[0]" :startdate="startDate"></user-gas-echarts>
  </div>
  <!--汇总表显示模板-->
  <div v-if="isActiveTotalForm">
    <user-gas-eform :condition="condition" :condvalue="condValueStr"></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'

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,
      outlets: [],
      operator: [],
      filename: '',
      searchshow: true,
      startDate: '',
      endDate: '',
      gasproperties: [],
      usermold: [],
      echarts: false,
      sumsmodel: {},
      isActiveTotalForm: false,
      condition: '1=1',
      condValueStr: '1=1',
      jurisdiction:this.$login.r,
      groupname: ['year'],
      getgroupname: [
        {label: '年份', value: 'year'},
        {label: '月份', value: 'month'},
        {label: '周', value: 'week'},
        {label: '日', value: 'day'}
      ],
      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()
  },
  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]

    },
    userTypeChange() {
      this.usermold = []
      this.f_gasproperties = []
      if (this.$refs.paged.$refs.cri.model !== null && this.$refs.paged.$refs.cri.model.f_user_type) {
        this.$refs.paged.$refs.cri.model.f_gasproperties = ''
        this.$refs.paged.$refs.cri.model.f_user_mold = ''
        this.usermold = this.$appdata.getParam(this.$refs.paged.$refs.cri.model.f_user_type[0])
      } else {
        this.usermold = [{label: '全部', value: ''}]
      }
    },
    userMoldChange() {
      this.gasproperties = []
      if (this.$refs.paged.$refs.cri.model !== null && this.$refs.paged.$refs.cri.model.f_user_mold) {
        this.$refs.paged.$refs.cri.model.f_gasproperties = ''
        if (this.$refs.paged.$refs.cri.model.f_user_mold[0] === '居民') {
          this.gasproperties = this.$appdata.getParam(this.$refs.paged.$refs.cri.model.f_user_type[0] + this.$refs.paged.$refs.cri.model.f_user_mold[0])
          return
        }
        this.gasproperties = this.$appdata.getParam(this.$refs.paged.$refs.cri.model.f_user_mold[0])
      } else {
        this.gasproperties = [{label: '全部', value: ''}]
      }
    },
    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("时间区间的开始和结束时间不能为空！")
      }
      if (this.orgCondtionStr) {
        args.condValueStr = `${args.condValueStr} and h.f_orgid in ${this.orgCondtionStr}`
      }
      this.condValueStr = args.condValueStr
      this.condition = this.$refs.paged.$refs.cri.condition
      args.condition = this.condition
      this.model.search(args.condition, args.model, args.condValueStr)
      this.sumsmodel = this.model.sums
    },
    // 显示柱状图
    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)
    },
  },
  watch: {
    'data'(val) {
      if (val.f_files_path) {
        this.getFileContent(val.f_files_path)
      } else {
        this.reportStr = null
      }
    }
  },
  computed: {
    getCondition() {
      return {
        condition: `${this.condition}`,
        condValue: this.condValueStr,
      }
    },
    getfield() {
      return {
        'f_userinfo_code': '客户编号',
        'f_user_type': '客户类型',
        'f_user_mold': '客户类型',
        'f_gasproperties': '用气性质',
        'f_user_name': '客户名称',
        'f_address': '用气地址',
        'f_meternumber': '表号',
        'f_balance': '期初余额(元)',
        'f_last_tablebase': '上期底数',
        'f_tablebase': '本期底数',
        'f_oughtamount': '用气量(m³)',
        'f_oughtfee': '用气金额(元)',
        'f_curbalance': '期末结余(元)'
      }
    },
    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>
