<template>
  <div style="flex:1;" class="flex">
    <criteria-paged :model="model" v-ref:paged>
      <criteria partial='criteria' @condition-changed='$parent.selfSearch' v-ref:cri>
        <div novalidate class="form-inline" style="height:auto" partial>
          <div class="form-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="form-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="form-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 class="form-group">
            <label for="f_input_date1" class="control-label">建档开始日期</label>
            <datepicker id="f_input_date1" placeholder="开始日期" width='100%'
                        v-model="model.f_input_date1"
                        :value.sync="model.f_input_date1"
                        :disabled-days-of-Week="[]"
                        condition="f_input_date > '{} 00:00:00' "
                        :format="'yyyy-MM-dd'"
                        :show-reset-button="reset">
            </datepicker>
          </div>
          <div class="form-group">
            <label>建档结束日期</label>
            <datepicker id="f_input_date2" placeholder="结束日期" width='100%'
                        v-model="model.f_input_date2"
                        :value.sync="model.f_input_date2"
                        condition="f_input_date < '{} 23:59:59' "
                        :disabled-days-of-Week="[]"
                        :format="'yyyy-MM-dd'"
                        :show-reset-button="reset">
            </datepicker>
          </div>
          <div class="form-group">
            <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="form-group">
            <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="form-group">
            <label for="startDate">购气开始日期</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="form-group">
            <label for="endDate">购气结束日期</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 class="form-group">
            <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 class="form-group">
            <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 class="form-group">
            <button class="btn btn-success width-80" @click="search()" v-el:cx>查询</button>
          </div>
          <div class="form-group">
            <button class="btn btn-success  width-100" @click="$parent.$parent.clear()">清空</button>
          </div>
          <div class="form-group">
            <export-excel :data="$parent.$parent.getCondition"
                          :field="$parent.$parent.getfield"
                          sqlurl="rs/logic/exportfile" sql-name="inspectQuery" template-name='稽查查询导出'  :choose-col="true"></export-excel>

          </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>
          </tr>
        </template>
        <template partial='body'>
          <td style="text-align: center;">{{$index+1}}</td>
          <td style="text-align: center;">{{row.f_userinfo_code}}</td>
          <td style="text-align: center;">{{row.f_user_id}}</td>
          <th style="text-align: center;">{{row.f_user_name}}</th>
          <th style="text-align: center;">{{row.f_address}}</th>
          <th style="text-align: center;">{{row.f_user_type}}</th>
          <th style="text-align: center;">{{row.f_gasproperties}}</th>
          <th style="text-align: center;">{{row.f_input_date}}</th>
          <th style="text-align: center;">{{row.f_table_state}}</th>
          <th style="text-align: center;">{{row.cishu}}</th>
          <th style="text-align: center;">{{row.pregas}}</th>
          <th style="text-align: center;">{{row.sellcishu}}</th>
          <th style="text-align: center;">{{row.sellpregas}}</th>
        </template>
      </data-grid>
    </criteria-paged>
  </div>
</template>
<script>
  /**
   *用户档案查询列表以及添加操作组件
   */
  import { PagedList } from 'vue-client'
  import Vue from 'vue'
  import co from 'co'

  export default {
    title: '稽查查询',
    data () {
      return {
        model: new PagedList('rs/sql/inspectQuery', 50),
        rows: null,
        areas: [],
        sliceArea: []
      }
    },
    ready () {
      this.search()
    },
    methods: {
      search () {
        this.$refs.paged.$refs.cri.search()
      },
      selfSearch (args) {
        // 如果隶属总公司，不加任何判断
        // if (!Util.f.parent.parent.name.includes('统一资源管理')) {
        let temp = this.$refs.paged.$refs.cri
        if (temp.model.startDate && temp.model.endDate) {
          this.$refs.paged.$refs.cri.$parent.model.paramSource = {startDate: `"f_delivery_date >= '${temp.model.startDate} 00:00:00'"`, endDate: `"f_delivery_date <= '${temp.model.endDate} 23:59:59'"`}
        } else if (!temp.model.startDate && !temp.model.endDate) {
          this.$refs.paged.$refs.cri.$parent.model.paramSource = {endDate: "'1=1'", startDate: "'1=1'"}
        } else {
          if (temp.model.startDate) {
            this.$refs.paged.$refs.cri.$parent.model.paramSource = {startDate: `"f_delivery_date >= '${temp.model.startDate} 00:00:00'"`, endDate: "'1=1'"}
          } else if (temp.model.endDate) {
            this.$refs.paged.$refs.cri.$parent.model.paramSource = {endDate: `"f_delivery_date <= '${temp.model.endDate} 23:59:59'"`, startDate: "'1=1'"}
          }
        }
        args.condition = args.condition + `and f_filialeids like '${Vue.$login.f.f_orgids}%'`
        this.model.search(args.condition, args.model)
      },
      clear () {
        this.$refs.paged.$refs.cri.$refs.sellpregas.value = null
        this.$refs.paged.$refs.cri.$refs.sellpregas.symbol = []
        this.$refs.paged.$refs.cri.$refs.sellpregas.data = null

        this.$refs.paged.$refs.cri.$refs.cishu.value = null
        this.$refs.paged.$refs.cri.$refs.cishu.symbol = []
        this.$refs.paged.$refs.cri.$refs.cishu.data = null

        this.$refs.paged.$refs.cri.$refs.pregas.value = null
        this.$refs.paged.$refs.cri.$refs.pregas.symbol = []
        this.$refs.paged.$refs.cri.$refs.pregas.data = null

        this.$refs.paged.$refs.cri.$refs.sellcishu.value = null
        this.$refs.paged.$refs.cri.$refs.sellcishu.symbol = []
        this.$refs.paged.$refs.cri.$refs.sellcishu.data = null

        console.log('清楚，22，，', this.$refs.paged.$refs.cri)
        Object.keys(this.$refs.paged.$refs.cri.model).forEach((key) => {
          this.$refs.paged.$refs.cri.model[key] = ''
        })
      }
    },
    computed: {
      gasproperties () {
        return [{label: '全部', value: ''}, ...this.$appdata.getParam('用气性质')]
      },
      usertypes () {
        return [{label: '全部', value: ''}, ...this.$appdata.getParam('用户类型')]
      },
      tablestate () {
        return [{label: '全部', value: ''}, ...this.$appdata.getParam('表状态')]
      },
      getfield () {
        return {"f_userinfo_code":"用户编号","f_user_id":"表编号","f_user_name":"用户姓名","f_address":"地址","f_user_type":"用户类型",
          "f_gasproperties":"用气性质","f_input_date":"建档日期","f_table_state":"表具状态","cishu":"总购气次数","pregas":"总购气量",
          "sellcishu":"阶段购气次数","sellpregas":"阶段购气量"}
      },
      getCondition () {
        let result = {
          condition: '',
          startDate: '',
          endDate: ''
        }
        result.condition = this.$refs.paged.$refs.cri.condition + `and f_filialeids like '${Vue.$login.f.f_orgids}%'`
        let temp2 = this.$refs.paged.$refs.cri
        if (temp2.model.startDate && temp2.model.endDate) {
          result.startDate = `f_delivery_date >= '${temp2.model.startDate} 00:00:00'`
          result.endDate = `f_delivery_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_delivery_date >= '${temp2.model.startDate} 00:00:00'`
            result.endDate = '1=1'
          } else if (temp2.model.endDate) {
            result.startDate = '1=1'
            result.endDate = `f_delivery_date <= '${temp2.model.endDate} 23:59:59'`
          }
        }
        return result
      }
    }
  }
</script>
<style media="screen">
  .divtext {
    min-width: 50px;
    max-width: 200px;
    border: 1px solid green;
    display: inline-block;
  }
</style>
