<template>
  <div id='app' class="flex bg-white p-10  datapanel" >
    <criteria-paged :model="model" :pager='true' v-ref:paged>
      <criteria partial='criteria' @condition-changed='search' v-ref:cri>
        <div novalidate class="form-horizontal select-overspread container-fluid auto" partial >
          <p class="bg-info text-center" style="padding: 8px;">用户用气明细</p>
          <div class="row">
              <div class="col-sm-2 form-group form-input-group">
                <label class="control-label">用户类型</label>
                <v-select id="f_user_type"
                          v-model="model.f_user_type"
                          placeholder='用户类型'
                          :value.sync="model.f_user_type"
                          :options='$parent.$parent.usertypes'
                          condition="f_user_type = '{}'"
                          close-on-select >
                </v-select>
              </div>
              <div class="col-sm-2 form-group form-input-group">
                <label class="control-label">用气性质</label>
                <v-select id="f_gasproperties"
                          v-model="model.f_gasproperties"
                          placeholder='用气性质'
                          :value.sync="model.f_gasproperties"
                          :options='$parent.$parent.Gasproperties'
                          condition="f_gasproperties = '{}'"
                          close-on-select >
                </v-select>
              </div>
              <div class="col-sm-2 form-group form-input-group">
                <label class="control-label">时间区间</label>
                <datepicker id="startDate" placeholder="开始时间"
                            v-model="model.startDate"
                            :value.sync="model.startDate"
                            :disabled-days-of-Week="[]"
                            :format="'yyyy-MM-dd 00:00:00'"
                            condition= "f_hand_date >= '{}'"
                            :show-reset-button="reset">
                </datepicker>
              </div>
              <div class="col-sm-2 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 id="endDate" placeholder="结束日期"
                            v-model="model.endDate"
                            :value.sync="model.endDate"
                            :disabled-days-of-Week="[]"
                            :format="'yyyy-MM-dd 23:59:59'"
                            condition= "f_hand_date <= '{}'"
                            :show-reset-button="reset">
                </datepicker>
              </div>
              <div class="col-sm-2 form-group form-input-group">
                <label class="control-label">用户姓名</label>
                <input  type="text" class="form-control" v-model="model.f_username" placeholder='用户姓名'
                        condition="f_user_name = '{}'" v-next-el='userid' v-el:username>
              </div>
              <div class="col-sm-2 form-group form-input-group">
                <label class="control-label">用户地址</label>
                <input type="text" class="form-control" v-model="model.f_address" placeholder='地址'
                       condition="f_address like '%{}%'" v-el:xq v-next-el='address' v-el:area
                >
              </div>
            <div class="col-sm-2 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="f_meternumber = '{}'" v-next-el='meternumber' v-el:meternumber
              >
            </div>
          </div>
          <div class="row" style="float: right">
              <button class="btn btn-success " @click="$parent.$parent.getdata()">查询</button>
              <button class="btn btn-default width-100" @click="$parent.$parent.clearmsg">清空</button>
              <button class="btn btn-success" v-if="$parent.$parent.eformsShowButton" @click="$parent.$parent.showTotalForm()" >显示汇总</button>
              <button class="btn btn-success" v-if="!$parent.$parent.eformsShowButton" @click="$parent.$parent.notShowTotalForm()" >隐藏汇总</button>
              <button class="btn btn-success" v-if="$parent.$parent.echartsShowButton" @click="$parent.$parent.showEcharts()">显示图表</button>
              <button class="btn btn-success" v-if="!$parent.$parent.echartsShowButton" @click="$parent.$parent.notShowEcharts()">隐藏图表</button>
            <!--<print-table :model='$parent.model'-->
            <!--:top='40' :left='60' :right='40' :bottom='60'-->
            <!--:thead='"<th>序号</th>\n"+-->
            <!--"<th>档案编号</th>" +-->
            <!--" <th>档案标识</th>"+-->
            <!--"<th>用户名称</th>"+-->
            <!--"<th>表号</th"+-->
            <!--"<th>表具类型</th>"+-->
            <!--"<th>用户类型</th>"+-->
            <!--"<th>区域</th>"+-->
            <!--"<th>小区</th>"+-->
            <!--"<th>地址</th>"+-->
            <!--"<th>用气气量</th>"+-->
            <!--"<th>用气金额</th>"-->
            <!--+"<th>用气价格</th>"-->
            <!--+"<th>时间</th>"-->
            <!--+"<th>所属机构</th>"'-->
            <!--:fields='["$index+1","f_username","f_meternumber","f_usertype","f_save_money","f_operate_status","f_close_reason","f_area","f_districtname","f_address","id","yytdepa"]'>-->
            <!--</print-table>-->
            <!--<export-excel :data="{orderitem: 'lastinputdate desc', condition: '1=1'}"-->
            <!--:field="{f_username: '用户姓名', f_meternumber: '表号',f_usertype:'用户类型',f_save_money:'剩余金额',-->
            <!--f_operate_status:'状态',f_close_reason:'关阀原因',f_area:'区域',f_districtname:'小区', f_address: '地址',id:'档案编号',yytdepa:'所属机构'}"-->
            <!--sqlurl="rs/sql/getUserGas"></export-excel>-->

          </div>
        </div>
      </criteria>
      <data-grid id="usergasall" :model="model" partial='list' v-ref:grid>
        <template partial='head'>
          <tr>
            <th rowspan="2" style="text-align:center" ><nobr>序号</nobr></th>
            <th rowspan="2" style="text-align:center"><nobr>表钢号</nobr></th>
            <th rowspan="2" style="text-align:center"><nobr>用户名称</nobr></th>
            <th rowspan="2" style="text-align:center"><nobr>用户类型</nobr></th>
            <th rowspan="2" style="text-align:center"><nobr>用气性质</nobr></th>
            <th rowspan="2" style="text-align:center"><nobr>地址</nobr></th>
            <th rowspan="2" style="text-align:center"><nobr>期初余额(元)</nobr></th>
            <th rowspan="2" style="text-align:center"><nobr>上期底数</nobr></th>
            <th rowspan="2" style="text-align:center"><nobr>本期底数</nobr></th>
            <th rowspan="2" style="text-align:center"><nobr>气价(元/m³)</nobr></th>
            <th rowspan="2" style="text-align:center"><nobr>用气气量(m³)</nobr></th>
            <th rowspan="2" style="text-align:center"><nobr>用气金额(元)</nobr></th>
            <th rowspan="2" style="text-align:center"><nobr>期末结余(元)</nobr></th>
            <th rowspan="2" style="text-align:center"><nobr>用气区间</nobr></th>
          </tr>
        </template>
        <template partial='body'>
          <td style="text-align:center">{{$index+1}}</td>
          <!--<td style="text-align:center">{{row.f_user_id}}</td>-->
          <td style="text-align:center"><nobr>{{row.f_meternumber}}</nobr></td>
          <td style="text-align:center"><nobr>{{row.f_user_name}}</nobr></td>
          <td style="text-align:center"><nobr>{{row.f_user_type}}</nobr></td>
          <td style="text-align:center"><nobr>{{row.f_gasproperties}}</nobr></td>
          <td style="text-align:center"><nobr>{{row.f_address}}</nobr></td>
          <td style="text-align:center"><nobr>{{row.f_balance}}</nobr></td>
          <td style="text-align:center"><nobr>{{row.f_last_tablebase}}</nobr></td>
          <td style="text-align:center"><nobr>{{row.f_tablebase}}</nobr></td>
          <td style="text-align:center"><nobr>{{row.f_avg_price}}</nobr></td>
          <td style="text-align:center"><nobr>{{row.f_oughtamount}}</nobr></td>
          <td style="text-align:center"><nobr>{{row.f_oughtfee}}</nobr></td>
          <td style="text-align:center"><nobr>{{row.f_curbalance}}</nobr></td>
          <td style="text-align:center"><nobr>{{row.f_hand_date}}</nobr></td>
        </template>
      </data-grid>
    </criteria-paged>
    <!--      图显示模板-->
    <div class="mystyle" v-show="echarts">
      <label class="control-label">图表统计项</label>
      <v-select id="groupname"   v-model="groupname"
                placeholder='分组项'
                value-single="true"
                :value.sync="groupname"
                :options='getgroupname'
                 close-on-select></v-select>
    </div>
    <div class="span " v-show="echarts">
      <gas-analysis-echarts :groupname="groupname[0]" :condition="condition" :startdate="startDate" :enddate="endDate"></gas-analysis-echarts>
    </div>

    <!--汇总表显示模板-->
    <div class="span"  v-show="isActiveTotalForm">
      <gas-analysis-summary ></gas-analysis-summary>
    </div>

  </div>
</template>

<script>
  import { PagedList } from 'vue-client'
  import GasAnalysisEcharts from './GasAnalysisEcharts'
  import GasAnalysisSummary from './GasAnalysisSummary'

  export default {
    title: '用气分析',
    props: ['data'],
    components: {GasAnalysisEcharts, GasAnalysisSummary},
    data () {
      return {
        model: new PagedList('rs/sql/gasAnalysisQuery', 20, {startDate: 'this.model.startDate', endDate: 'this.model.endDate'}),
        groupNameByDate: [],
        getGroupNameByDate: [
          {label: '年份', value: 'year'},
          {label: '月份', value: 'month'},
          {label: '周', value: 'week'}
        ],
        reportStr: null,
        show: false,
        outlets: [],
        operator: [],
        filename: '',
        echarts: true,
        searchshow: false,
        startDate: '',
        endDate: '',
        echartsShowButton: false,
        eformsShowButton: true,
        isActiveTotalForm: false,
        condition: '1=1',
        groupname: 'year',
        getgroupname: [
          {label: '年份', value: 'year'},
          {label: '月份', value: 'month'},
          {label: '周', value: 'week'},
          {label: '日', value: 'day'}
        ]

      }
    },
    ready () {
      this.$refs.paged.$refs.cri.model.startDate = this.$login.toStandardDateString() + ' 00:00:00'
      this.$refs.paged.$refs.cri.model.endDate = this.$login.toStandardDateString() + ' 23:59:59'
      this.getdata()
    },
    methods: {
      // 查询开关
      seachchange () {
        this.searchshow = !this.searchshow
      },
      clearmsg () {
        this.$refs.paged.$refs.cri.model = {}
      },
      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 = true
        this.echartsShowButton = false
        this.isActiveTotalForm = false
      },
      notShowTotalForm () {
        this.echarts = false
        this.echartsShowButton = true
        this.eformsShowButton = true
        this.isActiveTotalForm = false
      },
      // 不显示柱状图
      notShowEcharts () {
        this.echarts = false
        this.echartsShowButton = true
        this.eformsShowButton = true
        this.isActiveTotalForm = false
      },
      // 显示汇总数据表格
      showTotalForm () {
        this.echarts = false
        this.eformsShowButton = false
        this.echartsShowButton = true
        this.isActiveTotalForm = true

      },
      close () {
        this.show = false
      }
    },
    watch: {
      'data' (val) {
        if (val.f_files_path) {
          this.getFileContent(val.f_files_path)
        } else {
          this.reportStr = null
        }
      }
    },
    computed: {
      usertypes () {
        return [{label: '全部', value: ''}, ...this.$appdata.getParam('用户类型')]
      },
      f_outlets () {
        return [{label: '全部', value: ''}, ...this.$appdata.getParam('网点查询用')]
      },
      Gasproperties () {
        return [{label: '全部', value: ''}, ...this.$appdata.getParam('用气性质')]
      }
    }
  }
</script>
<style>
  .mystyle {
    width: 100%;
    height: 35px;
    /*background: #00A3F0;*/
    padding-left: 85%;
    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>
