<template >
  <div class="flex-row">
    <div @keyup.enter="search1" class="basic-main">
      <criteria-paged :model="model" v-ref:paged>
        <criteria @condition-changed='$parent.search' partial='criteria' v-ref:criteria>
          <div class="form-horizontal select-overspread container-fluid auto" novalidate partial>
            <div class="row">
              <div class="col-sm-2">
                <res-select-group :show-component="['company']" :initres="$parent.$parent.org" @re-res="$parent.$parent.getorg" style="width:60%"></res-select-group>
              </div>
              <div style="float:right">
                <button @click="search()" class="button_search" v-el:cba>查询</button>
                <button @click="$parent.$parent.clearmsg" class="button_clear">清空</button>
                <export-excel
                  :choose-col="true"
                  :data="{condition: $parent.$parent.condition,
                          f_orgid: $parent.$parent.f_orgid
                          }"
                  :field="$parent.$parent.getfield" sql-name="residentialAreaUserStateQuery" sqlurl="api/af-revenue/logic/openapi/exportfile"
                  template-name='小区用户统计查询'></export-excel>
                <div
                  :class="{'button_shrink_top':$parent.$parent.criteriaShow,'button_shrink_bottom':!$parent.$parent.criteriaShow}"
                  @click="$parent.$parent.hidden()" class="button_spacing" style="float: right"></div>
              </div>
            </div>
          </div>
        </criteria>
        <data-grid :model="model" class="list_area table_sy" partial='list' :modelval="$parent.$parent.modelval" 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>
            </tr>
          </template>
          <template partial='body'>
            <tr>
              <td style="text-align:center">
                <nobr>{{row.f_residential_area}}</nobr>
              </td>
              <td style="text-align:center">
                {{row.total_users}}
              </td>
              <td style="text-align:center">
                <nobr>{{row.zhengchang_users}}</nobr>
              </td>
              <td style="text-align:center">
                <nobr>{{row.xiaohu_users}}</nobr>
              </td>
              <td style="text-align:center">
                <nobr>{{row.tinyong_users}}</nobr>
              </td>
              <td style="text-align:center">
                <nobr>{{row.yubei_users}}</nobr>
              </td>
            </tr>
          </template>
        </data-grid>
      </criteria-paged>
    </div>

  </div>
</template>
<script>
import {HttpResetClass, PagedList} from 'vue-client'
import * as Util from '../../../Util'

let readyGen = async function (self) {
  await self.$MagLoadParams.loadParam()
  self.getfield = self.config.excelHeaders
}
export default {
  title: '小区用户统计查询',
  data () {
    return {
      model: new PagedList('api/af-revenue/sql/residentialAreaUserStateQuery', 50),
      row: null,
      isLoading: true,
      searchshow: true,
      criteriaShow:false,
      org:{
        org:[this.$login.f.orgid],
        dep:[],
        user:[],
      },
      orgcondition:'',
      show: false,
      imgShow: false,
      condition:'',
      f_orgid:'',
      getfield: {},
      config: {
        excelHeaders: {
          'f_residential_area': '小区名称','total_users': '总用户数','zhengchang_users': '正常用户数',
          'xiaohu_users': '销户用户数','tinyong_users': '停用用户数','yubei_users': '预备用户数'
        }
      },
      modelval: [
        '小区名称','总用户数','正常用户数','销户用户数','停用用户数','预备用户数',
      ]
    }
  },
  ready () {
    readyGen(this)
    this.$refs.paged.$refs.grid.modelval = this.modelval
  },
  methods: {
    hidden(){
      this.criteriaShow = !this.criteriaShow
    },
    getorg(condition,obj) {
      this.orgcondition = condition.replace('f_orgid','ua.f_orgid')
      this.orgcondition = this.orgcondition.replace('f_depid','ua.f_depid')
      this.orgcondition = this.orgcondition.replace('f_operatorid','ua.f_operatorid')
      this.orgname = obj.orgnames[0]
    },
    clearmsg () {
      this.$refs.paged.$refs.criteria.model = {}
    },
    clickshow () {
      this.searchshow = !this.searchshow
    },
    dealmsg (val) {
      val.model = this.model.model
      this.$emit('deal-msg', val)
    },
    async search (args) {
      // this.obj.resids = this.obj.resids.replace(/\./g, ''),
      args.condition =  `${args.condition}`+this.orgcondition
      console.log(args.condition+"args.condition")
      this.condition = args.condition
      if(this.f_orgid_new == '' || this.f_orgid_new == null){
        this.model.params.f_orgid = `'${this.$login.f.orgid}'`;
        this.f_orgid = `'${this.$login.f.orgid}'`;
      }else{
        this.model.params.f_orgid = `'${this.f_orgid_new}'`;
        this.f_orgid = `'${this.f_orgid_new}'`;
      }
      await this.model.search(args.condition, args.model)
      await this.$refs.paged.$refs.grid.InitializedData()
      await this.$refs.paged.$refs.grid.displayColumnSettings(undefined)

    },

  },
  computed: {
  }
}
</script>
<style>
.form-input-group label {
  text-align: right;
  width: auto;
}
.datapanel {
  color: #333;
  background-color: white;
  box-shadow: darkgrey 0.5px 0.5px 0.5px 0.5px ;
  padding: 10px 30px 10px 30px;
  border-radius:15px;
}
</style>
