<template>
  <div style="flex:1;" class="flex">
    <button class="btn btn-xs" v-show="!criteriaShow" @click="this.show()">
      <span class="glyphicon glyphicon-chevron-down" style="color: #000;"></span>
    </button>
    <criteria-paged :model="model" v-ref:paged>
      <criteria partial='criteria' @condition-changed='$parent.selfSearch' v-ref:cri v-show="$parent.criteriaShow">
        <div novalidate class="form-horizontal select-overspread container-fluid auto" partial >
          <div class="row">
          <div class="col-sm-3 form-group form-input-group">
            <label for="f_user_type" 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-3 form-group form-input-group">
            <label for="f_gasproperties" 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-3 form-group form-input-group">
            <label for="f_table_state" class="control-label">设备类型</label>
            <v-select
              v-model="model.f_devices_type"
              placeholder='设备类型'
              :value.sync="model.f_devices_type"
              :options='$parent.$parent.devicesties'
              condition="f_devices_type = '{}'"
              close-on-select >
            </v-select>
          </div>
          <div class="col-sm-3 form-group form-input-group">
            <label for="f_table_state" class="control-label">表状态</label>
            <v-select id="f_table_state"
                      v-model="model.f_table_state"
                      placeholder='表状态'
                      :value.sync="model.f_table_state"
                      :options='$parent.$parent.tablestate'
                      condition="f_table_state = '{}'"
                      close-on-select >
            </v-select>
          </div>
        </div>
          <div class="row">
            <div class="col-sm-3 form-group form-input-group" >
              <label class="control-label">气表品牌</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-3 form-group form-input-group" >
              <label class="control-label">气价名称</label>
              <v-select :value.sync="model.f_price_name"
                        v-model="model.f_price_name"
                        :options='$parent.$parent.pricenames' placeholder='请选择'
                        condition="f_price_name = '{}'"
                        close-on-select></v-select>
            </div>
            <div class="col-sm-3 form-group form-input-group">
              <label for="startDate"  class="control-label">购气开始</label>
              <datepicker id="startDate" placeholder="开始日期"
                          v-model="model.startDate"
                          :value.sync="model.startDate"
                          :disabled-days-of-Week="[]"
                          :format="'yyyy-MM-dd'"
                          :show-reset-button="reset">
              </datepicker>
            </div>
            <div class="col-sm-3 form-group form-input-group">
              <label for="startDate"  class="control-label">购气结束</label>
              <datepicker id="endDate" placeholder="结束日期"
                          v-model="model.endDate"
                          :value.sync="model.endDate"
                          :disabled-days-of-Week="[]"
                          :format="'yyyy-MM-dd'"
                          :show-reset-button="reset">
              </datepicker>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-3 form-group form-input-group"  class="control-label">
              <label   class="control-label">总购次数</label>
              <div class="form-group" >
                <v-input  id="cishu" placeholder="总购气次数"
                          :expression.sync = 'model.cishu'
                          v-model="model.cishu"
                          condition= "cishu  {}"
                          :show-reset-button="reset"
                          v-ref:cishu>
                </v-input>
              </div>
            </div>
            <div class="col-sm-3 form-group form-input-group">
              <label   class="control-label">总购气量</label>
              <div class="form-group">
                <v-input  id="pregas" placeholder="总购气量"
                          :expression.sync = 'model.pregas'
                          v-model="model.pregas"
                          condition= "pregas  {}"
                          :show-reset-button="reset"
                          v-ref:pregas>
                </v-input>
              </div>
            </div>
            <div class="col-sm-3 form-group form-input-group">
              <label class="control-label">未购天数</label>
              <div class="form-group">
                <v-input  id="day1" placeholder="未购气天数"
                          :expression.sync = 'model.diffday'
                          v-model="model.diffday"
                          :show-reset-button="reset"
                          condition= "diffday  {}"
                          v-ref:diffday>
                </v-input>
              </div>
            </div>
            <div class="col-sm-3 form-group form-input-group">
              <label   class="control-label">阶段次数</label>
              <div class="form-group">
                <v-input  id="sellcishu" placeholder="期间购气次数"
                          :expression.sync = 'model.sellcishu'
                          v-model="model.sellcishu"
                          condition= "sellcishu  {}"
                          :show-reset-button="reset"
                          v-ref:sellcishu>
                </v-input>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-3 form-group form-input-group" >
              <label class="control-label">卡号</label>
              <input  type="text" class="form-control"
                      v-numfilter v-model="model.f_card_id"
                      condition="f_card_id = '{}' " placeholder="卡号">
            </div>

            <div class="col-sm-3 form-group form-input-group">
              <label   class="control-label">期间购气量</label>
              <div class="form-group">
                <v-input  id="sellpregas" placeholder="期间购气量"
                          :expression.sync = 'model.sellpregas'
                          v-model="model.sellpregas"
                          condition= "sellpregas  {}"
                          :show-reset-button="reset"
                          v-ref:sellpregas>
                </v-input>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="span" style = "float:right;">
              <button class="btn btn-success" @click="search()">查询</button>
              <button class="btn btn-success" @click="$parent.$parent.clear()">清空</button>
              <export-excel :data="$parent.$parent.getCondition"
                            :field="$parent.$parent.getfield"
                            sqlurl="rs/logic/exportfile"
                            :sql-name="$parent.$parent.sqlName"
                            template-name='稽查查询导出'
                            :choose-col="true"></export-excel>
              <print-data :model="$parent.model" :field="$parent.$parent.getfield" :defaultfield="$parent.$parent.defaultfield" print-name="稽查查询打印" :sumsmodel="$parent.$parent.sumsmodel" ></print-data>
              <button class="btn" @click="$parent.$parent.hidden()" style="margin-left: 10px">
                <span class="glyphicon glyphicon-chevron-up"></span>
              </button>
            </div>
          </div>
        </div>
      </criteria>
      <data-grid :model="model" partial='list' v-ref:grid>
        <template partial='head'>
          <tr>
            <th><nobr>序号</nobr></th>
            <th><nobr>卡号</nobr></th>
            <th><nobr>表号</nobr></th>
            <th><nobr>用户姓名</nobr></th>
            <th><nobr>地址</nobr></th>
            <th><nobr>用户类型</nobr></th>
            <th><nobr>用气性质</nobr></th>
            <th><nobr>气表品牌</nobr></th>
            <th><nobr>表具状态</nobr></th>
            <th><nobr>总购气次数</nobr></th>
            <th><nobr>总购气量</nobr></th>
            <th><nobr>阶段购气次数</nobr></th>
            <th><nobr>阶段购气量</nobr></th>
            <th><nobr>累计未购气天数</nobr></th>
            <th><nobr>组织机构</nobr></th>
          </tr>
        </template>
        <template partial='body'>
          <td style="text-align: center;"><nobr>{{$index+1}}</nobr></td>
          <td style="text-align: center;"><nobr>{{row.f_card_id}}</nobr></td>
          <td style="text-align: center;"><nobr>{{row.f_meternumber}}</nobr></td>
          <th style="text-align: center;"><nobr>{{row.f_user_name}}</nobr></th>
          <th style="text-align: center;"><nobr>{{row.f_address}}</nobr></th>
          <th style="text-align: center;"><nobr>{{row.f_user_type}}</nobr></th>
          <th style="text-align: center;"><nobr>{{row.f_gasproperties}}</nobr></th>
          <th style="text-align: center;"><nobr>{{row.f_meter_brand}}</nobr></th>
          <th style="text-align: center;"><nobr>{{row.f_table_state}}</nobr></th>
          <th style="text-align: center;"><nobr>{{row.cishu}}</nobr></th>
          <th style="text-align: center;"><nobr>{{row.pregas}}</nobr></th>
          <th style="text-align: center;"><nobr>{{row.sellcishu}}</nobr></th>
          <th style="text-align: center;"><nobr>{{row.sellpregas}}</nobr></th>
          <th style="text-align: center;"><nobr>{{row.diffday}}</nobr></th>
          <th style="text-align: center;"><nobr>{{row.f_filiale}}</nobr></th>
        </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">总购气量合计:&emsp;&emsp;{{sumsmodel.pregas}}</td>
        <td style="display: inline-block;width: auto;border-right: 1px solid #F2F6FA;padding: 0px 10px 0px 10px">阶段购气量合计:&emsp;&emsp;{{sumsmodel.sellpregas}}</td>
      </tr>
    </table>
  </div>
</template>
<script>
  /**
   *用户档案查询列表以及添加操作组件
   */
  import { PagedList } from 'vue-client'
  import Vue from 'vue'

  let readySomething = async function (self) {
    self.$refs.paged.$refs.cri.model.startDate =  self.$login.toStandardDateString()
    self.$refs.paged.$refs.cri.model.endDate =  self.$login.toStandardDateString()
    await self.$MagLoadParams.loadParam(self.$login.f)
    self.initParams()
    //await self.$refs.paged.$refs.cri.search()
    //self.sumsmodel = self.$refs.paged.$refs.grid.model.sums
  }
  export default {
    title: '稽查查询',
    data () {
      return {
        tablestate: this.$appdata.getParam('气表状态') ? [{label: '全部', value: ''}, ...this.$appdata.getParam('气表状态')] : [],
        criteriaShow: true,
        userid: this.$login.f.id,
        getfield:{
          "f_card_id":"卡号",
          "f_user_name":"用户姓名",
          "f_address":"地址",
          "f_user_type":"用户类型",
          "f_gasproperties":"用气性质",
          "f_meter_brand":"气表品牌",
          "f_input_date":"建档日期",
          "f_table_state":"表具状态",
          "cishu":"总购气次数",
          "pregas":"总购气量",
          "sellcishu":"阶段购气次数",
          "sellpregas":"阶段购气量"
        },
        model: new PagedList('rs/sql/inspectQuery', 50,{},{pregas: 0,sellpregas: 0}),
        rows: null,
        sumsmodel: {},
        defaultfield: [],
        meterbrands: [],
        pricenames: [],
      }
    },
    watch:{
    },
    ready () {
      readySomething(this).then(() => {
        this.$emit('ready')
      }).catch((error) => {
        this.$emit('error', error)
      })
    },
    methods: {
      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]

        // 初始化气价信息
        console.log('初始化气价。。', this.$MagGetSaleParam.getPrice())

        let priceArr = []
        this.$MagGetSaleParam.getPrice().forEach((item) => {
          let temp = {}
          temp.label = item.label
          temp.value = item.value.f_price_name
          priceArr.push(temp)
        })

        this.pricenames = [{label: '全部', value: ''}, ...priceArr]


      },
      search () {
        this.$refs.paged.$refs.cri.search()
      },
      selfSearch (args) {
        this.model.url = 'rs/sql/inspectQuery'
        this.model.params.startDate = `'${this.$refs.paged.$refs.cri.model.startDate}'`
        this.model.params.endDate = `'${this.$refs.paged.$refs.cri.model.endDate}'`
        console.log("拼接的condition", args.condition, this.model)
        this.model.search(args.condition, args.model)
      },
      show(){
        this.criteriaShow = true
      },
      hidden(){
        this.criteriaShow = false
      },
      clear(){
        Vue.set(this.$refs.paged.$refs.cri.$refs.sellpregas, 'value', null)
        Vue.set(this.$refs.paged.$refs.cri.$refs.sellpregas, 'symbol', [])
        Vue.set(this.$refs.paged.$refs.cri.$refs.sellpregas, 'data', null)

        Vue.set(this.$refs.paged.$refs.cri.$refs.diffday, 'value', null)
        Vue.set(this.$refs.paged.$refs.cri.$refs.diffday, 'symbol', [])
        Vue.set(this.$refs.paged.$refs.cri.$refs.diffday, 'data', null)

        Vue.set(this.$refs.paged.$refs.cri.$refs.cishu, 'value', null)
        Vue.set(this.$refs.paged.$refs.cri.$refs.cishu, 'symbol', [])
        Vue.set(this.$refs.paged.$refs.cri.$refs.cishu, 'data', null)

        Vue.set(this.$refs.paged.$refs.cri.$refs.pregas, 'value', null)
        Vue.set(this.$refs.paged.$refs.cri.$refs.pregas, 'symbol', [])
        Vue.set(this.$refs.paged.$refs.cri.$refs.pregas, 'data', null)

        Vue.set(this.$refs.paged.$refs.cri.$refs.sellcishu, 'value', null)
        Vue.set(this.$refs.paged.$refs.cri.$refs.sellcishu, 'symbol', [])
        Vue.set(this.$refs.paged.$refs.cri.$refs.sellcishu, 'data', null)

        Object.keys(this.$refs.paged.$refs.cri.model).forEach((key) => {
          if(key != 'startDate' && key != 'endDate')
            this.$refs.paged.$refs.cri.model[key] = []
        })
      },

    },
    computed: {
      gasproperties () {
        let rs = []
        if (this.$refs.paged.$refs.cri.model.f_user_type.length === 1) {
          rs = this.$appdata.getParam(this.$refs.paged.$refs.cri.model.f_user_type[0])
        }
        return [{label: '全部', value: ''}, ...rs]
      },
      usertypes () {
        return [{label: '全部', value: ''}, ...this.$appdata.getParam('用户类型')]
      },
      devicesties () {
        return  this.$appdata.getParam('设备类型') ? [{label: '全部', value: ''}, ...this.$appdata.getParam('设备类型')] : []

      },
      getCondition () {
        let result = {
          condition: '',
          startDate: '',
          endDate: '',
          diffDay:' 1=1 '
        }
        let temp2 = this.$refs.paged.$refs.cri
        if (temp2.model.startDate && temp2.model.endDate) {
          result.startDate = `f_operate_date >= '${temp2.model.startDate} 00:00:00'`
          result.endDate = `f_operate_date <= '${temp2.model.endDate} 23:59:59'`
        } else if (!temp2.model.startDate && !temp2.model.endDate) {
          result.startDate = '1=1'
          result.endDate = '1=1'
        } else {
          if (temp2.model.startDate) {
            result.startDate = `f_operate_date >= '${temp2.model.startDate} 00:00:00'`
            result.endDate = '1=1'
          } else if (temp2.model.endDate) {
            result.startDate = '1=1'
            result.endDate = `f_operate_date <= '${temp2.model.endDate} 23:59:59'`
          }
        }
        if(temp2.model.diffday != ''){
          result.diffDay += " and diffDay "+ temp2.model.diffday;
        }
        return result
      }
    }
  }
</script>
<style media="screen">
  .divtext {
    min-width: 50px;
    max-width: 200px;
    border: 1px solid green;
    display: inline-block;
  }
</style>
