<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" condition="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" condition="uf.f_userid like '%{}%'" placeholder='客户编号' type="text"
                           v-el:meternumber v-model="model.f_userid" v-next-el='f_userid'
                    >
                  </div>
                  <div class="col-sm-2 form-group">
                    <label class="font_normal_body">客户名称</label>
                    <input  style="width:60%" class="input_search" condition="uf.f_username 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>
                    <export-excel :data="$parent.$parent.getCondition" class="button_export button_spacing"
                                  :field="$parent.$parent.getfield"
                                  sqlurl="rs/logic/exportfile" sql-name="webmeter_getUserGasList" template-name='用气分析明细'
                                  :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>-->
                  <div class="col-sm-2 form-group">
                    <label class="font_normal_body">用气地址</label>
                    <input  style="width:60%" class="input_search" condition="uf.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 :options='$parent.$parent.Gasusertype'
                              :value.sync="model.f_usertype"
                              close-on-select
                              style="width:60%"
                              condition="uf.f_usertype = '{}'"
                              id="f_user_type"
                              placeholder='客户类型'
                              v-model="model.f_usertype"
                              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">
                    <label class="font_normal_body">用气差异> </label>
                    <input  style="width:60%" class="input_search" condition="different>= '{}'" placeholder='大于' type="text"
                             v-model="model.different" >

                  </div>
                  <div class="col-sm-2 form-group">
                    <label class="font_normal_body">用户级别</label>
                    <v-select :options='$parent.$parent.Userlevel'
                              :value.sync="model.f_safechecklevel"
                              close-on-select
                              condition="uf.f_safechecklevel = '{}'"
                              id="f_safechecklevel"
                              placeholder='用户级别'
                              style="width:60%"
                              v-model="model.f_safechecklevel"
                              value-single="true">
                    </v-select>
                  </div>
                  <div class="col-sm-2 form-group">
                    <label class="font_normal_body">一级单位编号</label>
                    <input  style="width:60%" class="input_search" condition="f_first_unitid ='{}'" placeholder='编号' type="text"
                            v-el:meternumber v-model="model.f_first_unitid" v-next-el='f_userid'
                    >
                  </div><div class="col-sm-2 form-group">
                  <label class="font_normal_body">二级单位编号</label>
                  <input  style="width:60%" class="input_search" condition="f_second_unitid = '{}'" placeholder='编号' type="text"
                          v-el:meternumber v-model="model.f_second_unitid" v-next-el='f_userid'
                  >
                </div><div class="col-sm-2 form-group">
                  <label class="font_normal_body">三级单位编号</label>
                  <input  style="width:60%" class="input_search" condition="f_unitid ='{}'" placeholder='编号' type="text"
                          v-el:meternumber v-model="model.f_unitid" v-next-el='f_userid'
                  >
                </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>

                  <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>
                </tr>


              </template>
              <template partial='body'>
                <td>{{row.f_userid}}</td>
                <td style="text-align:center">{{row.f_usertype}}</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_username}}</nobr>
                </td>
                <td>
                  <nobr>{{row.f_address}}</nobr>
                </td>
                <td>{{row.f_meternumber}}</td>
                <td style="text-align:center">{{row.f_zhye}}</td>
                <td style="text-align:center">{{row.lastinputgasnum}}</td>
                <td style="text-align:center">{{row.lastrecord}}</td>
                <!--<td style="text-align:center">{{row.f_avg_price}}</td>-->
                <td style="text-align:center">{{row.oughtamount}}</td>
                <td style="text-align:center">{{row.oughtfee}}</td>
                <td style="text-align:center">{{row.oughtamount}}</td>
                <td style="text-align:center">{{row.different}}</td>
                <td style="text-align:center">{{row.f_hand_date}}</td>
                <td style="text-align:center">{{row.unit_price}}</td>


                <td style="text-align:center">{{row.f_cumulativepurchase}}</td>
                <td style="text-align:center">{{row.f_cumulativepurchase}}</td>


<!--                <td style="text-align:center">{{row.f_collection}}</td>-->
                <td style="text-align:center">{{row.f_bczhye}}</td>
                <td style="text-align:center">{{row.f_safechecklevel}}</td>
                <td style="text-align:center">{{row.f_first_unitid}}</td>
                <td style="text-align:center">{{row.f_second_unitid}}</td>
                <td style="text-align:center">{{row.f_unitid}}</td>


              </template>
            </data-grid>
          </criteria-paged>
        </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'

  export default {
    title: '用气分析',
    props: ['data'],
    components: {UserGasEcharts},
    data() {
      return {
        model: new PagedList('rs/sql/webmeter_getUserGasList', 20),
        getGroupNameByDate: [
          {label: '年份', value: 'year'},
          {label: '月份', value: 'month'},
          {label: '周', value: 'week'}
        ],
        meterbrands: [],
        // level:[
        //   {label: '全部',value:''},
        //   {label: '一级',value:'一级'},
        //   {label: '二级',value:'二级'},
        //   {label:'三级',value:'三级'},
        //   {label:'四级',value:'四级'}
        //   ],
        criteriaShow: false,
        reportStr: null,
        show: false,
        outlets: [],
        different: [],
        operator: [],
        filename: '',
        searchshow: true,
        startDate: '',
        endDate: '',
        echarts: false,
        isActiveTotalForm: false,
        condition: '1=1',
        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],
          getfield:{
            "f_userid":"客户编号",
            "f_usertype":"客户类型" ,
            "f_gasproperties":"用气性质" 	,
            "f_username":"客户名称",
            "f_address":"用气地址:",
            "f_meternumber":"表号",
            "f_zhye" :"期初余额(元)"	,
            "lastinputgasnum":"上期底数" 	,
            "lastrecord":"本期底数",
            "oughtamount":"用气量(m³) "	,
            "oughtfee":"用气金额(元) 	",
            "f_bczhye":"期末结余(元)",
            "date":"日期",
            "unit_price":"用气单价",
            "f_total_fee":"用户总购金额",
            "f_total_fee":"当前表总购金额",
            "f_safechecklevel":"用户级别",
            "f_first_unitid":"一级单位编号",
            "f_second_unitid":"二级单位编号",
            "f_unitid":"三级单位编号",
          },
      }
    },
    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]

      },
      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)
        //   this.condition = this.$refs.paged.$refs.cri.condition + `and h.f_orgid in ${this.orgCondtionStr}`
        // else
          this.condition = this.$refs.paged.$refs.cri.condition
        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)
      // },
    },
    watch: {
      'data'(val) {
        if (val.f_files_path) {
          this.getFileContent(val.f_files_path)
        } else {
          this.reportStr = null
        }
      }
    },
    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}`
            }

        },
      Gasusertype() {
        return [{label: '全部', value: ''}, ...this.$appdata.getParam('用户类型')]
      },
      valveStatus() {
        return [{label: '全部', value: ''}, ...this.$appdata.getParam('气表类型')]
      },
      // Gasproperties() {
      //   return [{label: '全部', value: ''}, ...this.$appdata.getParam('用气性质')]
      // },
      Userlevel() {
        return [{label: '全部', value: ''}, ...this.$appdata.getParam('用户级别')]
      },
      Gasproperties () {
        let rs = []
        if (this.$refs.paged.$refs.cri.model.f_usertype.length === 1) {
          rs = this.$appdata.getParam(this.$refs.paged.$refs.cri.model.f_usertype[0])
        }
        return [{label: '全部', value: ''}, ...rs]
      }
    }
  }
</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>
