<template>
  <div id="unit" class="flex-row">
    <div class="basic-main" @keyup.enter="search">
      <div class="flex" v-if="!show">
        <criteria-paged :model="model" v-ref:paged>
          <criteria partial='criteria' @condition-changed='$parent.selfSearch' v-ref:cri>
            <div novalidate class="form-inline auto" partial>
              <div class="row">
                <div class="col-sm-2 form-group">
                  <label class="font_normal_body">客户编号</label>
                  <input type="text" style="width:60%" class="input_search" v-model="model.f_userinfo_code"
                         condition="f_userinfo_code = '{}' " placeholder="客户编号">
                </div>
                <div class="col-sm-2 form-group">
                  <label class="font_normal_body">客户名称</label>
                  <input type="text" style="width:60%" class="input_search" v-model="model.f_user_name"
                         condition="f_user_name like '%{}%'" placeholder="客户名称">
                </div>
                <div class="col-sm-2 form-group">
                  <label for="startDate" class="font_normal_body">开始日期</label>
                  <datepicker id="startDate" placeholder="开始日期" style="width:60%"
                              v-model="model.startDate"
                              :value.sync="model.startDate"
                              :format="'yyyy-MM-dd HH:mm:ss'"
                              :show-reset-button="true"
                              condition="f_input_date >= to_date('{}','yyyy-mm-dd hh24:mi:ss')">
                  </datepicker>
                </div>
                <div class="col-sm-2 form-group">
                  <label for="endDate" class="font_normal_body">结束日期</label>
                  <datepicker id="endDate" placeholder="结束日期" style="width:60%"
                              v-model="model.endDate"
                              :value.sync="model.endDate"
                              :format="'yyyy-MM-dd HH:mm:ss'"
                              :show-reset-button="true"
                              condition="f_input_date <= to_date('{}','yyyy-mm-dd hh24:mi:ss')">
                  </datepicker>
                </div>
                <div class="span" style="float:right;">
                  <button class="button_search button_spacing" @click="search()">查询</button>
                  <button class="button_clear button_spacing" @click="$parent.$parent.clear()">清空</button>
                  <export-excel :data="$parent.$parent.getCondition"
                                :field="$parent.$parent.getfield"
                                sqlurl="rs/logic/exportfile" sql-name="FMYgasQuery" template-name='非民用用气查询导出'
                                v-if ="$parent.$parent.jurisdiction.includes('excel导出')"
                                :choose-col="true"></export-excel>
                  <print-data :model="$parent.model" :field="$parent.$parent.getfield"
                              :defaultfield="$parent.$parent.defaultfield" print-name="非民用用气查询打印"
                  ></print-data>

                  <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">
                <res-select-group style="col-sm-2 form-group" :initres="$parent.$parent.initres"  @re-res="$parent.$parent.getRes" v-ref:sel></res-select-group>
                <div class="col-sm-2 form-group">
                  <label class="font_normal_body">客户地址</label>
                  <input type="text" style="width:60%" class="input_search" v-model="model.f_address"
                         condition="f_address like '%{}%'" placeholder='客户地址'>
                </div>
                <div class="col-sm-2 form-group">
                  <label class="font_normal_body">客户表号</label>
                  <input type="text" style="width:60%" class="input_search" v-model="model.f_meternumber"
                         condition="f_meternumber like '%{}%'" placeholder='客户表号'>
                </div>
                <div class="col-sm-2 form-group">
                  <label class="font_normal_body">气表类型</label>
                  <v-select :value.sync="model.f_meter_type"
                            v-model="model.f_meter_type"
                            :options='$parent.$parent.metertype' placeholder='请选择'
                            condition="f_meter_type like '%{}%'"
                            close-on-select></v-select>
                </div>
                <div class="col-sm-2 form-group">
                  <label class="font_normal_body">用户分类</label>
                  <v-select :value.sync="model.f_user_type"
                            @change="$parent.$parent.userTypeChange"
                            :options='$parent.$parent.usertypes' placeholder='请选择' v-model="model.f_user_type"
                            condition="f_user_type = '{}'"
                            close-on-select></v-select>
                </div>
                <div class="col-sm-2 form-group">
                  <label class="font_normal_body">用户类型</label>
                  <v-select :value.sync="model.f_user_mold"
                            @change="$parent.$parent.userMoldChange"
                            :options='$parent.$parent.usermold' placeholder='请选择' v-model="model.f_user_mold"
                            close-on-select></v-select>
                </div>
                <div class="col-sm-2 form-group">
                  <label class="font_normal_body">用气性质</label>
                  <v-select :value.sync="model.f_gasproperties" v-model="model.f_gasproperties"
                            :options='$parent.$parent.gasproperties' placeholder='请选择'
                            condition="f_gasproperties = '{}'"
                            close-on-select></v-select>
                </div>
<!--                <div class="col-sm-2 form-group">-->
<!--                  <label for="f_area_id" class="font_normal_body">小区编码</label>-->
<!--                  <input id="f_area_id" type="text" style="width:60%" class="input_search" v-model="model.f_area_id"-->
<!--                         condition="f_area_id = '{}'" placeholder='小区编码'>-->
<!--                </div>-->
                <div class="col-sm-2 form-group">
                  <label class="font_normal_body">&nbsp;&nbsp;&nbsp;小区&nbsp;&nbsp;&nbsp;</label>
                  <v-select :value.sync="model.f_residential_area"
                            class="select_list select"
                            enter-push
                            multiple="true"
                            v-model="model.f_residential_area"
                            style="width: 60%"
                            :options='$parent.$parent.residentialArea' placeholder='选择小区'
                            close-on-select>
                  </v-select>
                </div>
                <div class="col-sm-2 form-group">
                  <label class="font_normal_body">房产地址</label>
                  <input class="input_search" condition="f_house_address = '{}'"
                         placeholder='房产地址'
                         style="width:60%" type="text" v-model="model.f_house_address">
                </div>
                <div class="col-sm-2 form-group">
                  <label class="font_normal_body">用途</label>
                  <input class="input_search" condition="f_property_usage = '{}'"
                         placeholder='用途'
                         style="width:60%" type="text" v-model="model.f_property_usage">
                </div>
                <div class="col-sm-2 form-group">
                  <label class="font_normal_body">房型</label>
                  <input class="input_search" condition="f_house_type = '{}'"
                         placeholder='房型'
                         style="width:60%" type="text" v-model="model.f_house_type">
                </div>
                <div class="col-sm-2 form-group">
                  <label class="font_normal_body">是否一户多表</label>
                  <input class="input_search" condition="f_is_multi_meter = '{}'"
                         placeholder='是否一户多表'
                         style="width:60%" type="text" v-model="model.f_is_multi_meter">
                </div>
                <div class="col-sm-2 form-group">
                  <label class="font_normal_body">关联ID</label>
                  <input class="input_search" condition="f_house_id = '{}'"
                         placeholder='关联ID'
                         style="width:60%" type="text" v-model="model.f_house_id">
                </div>
              </div>
            </div>
          </criteria>
          <data-grid :model="model" partial='list' class="list_area table_sy" v-ref:grid :classname="$parent.classname">
            <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>
              </tr>
            </template>
            <template partial='body'>
              <td style="text-align: center;">
                <nobr>
                  <span @click="$parent.$parent.$parent.dealmsg(row)"><a>{{ row.f_userinfo_code }}</a></span></nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{ row.f_user_name }}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{ row.f_address }}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{ row.f_meternumber }}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{ row.f_meter_brand }}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{ row.f_meter_type }}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{ row.yongqiliang }}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{ row.yongqijine }}</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>
            </template>
            <template partial='foot'></template>
          </data-grid>
        </criteria-paged>
      </div>
    </div>

  </div>
</template>
<script>
import {HttpResetClass, PagedList} from 'vue-client'
import defaultPrint from '../config/DefaultPrint'
import exportConfig from '../config/exportConfig'

let readySomething = async function (self) {
  self.$refs.paged.$refs.cri.model.startDate = self.$login.toStandardDateString() + ' 00:00:00'
  self.$refs.paged.$refs.cri.model.endDate = self.$login.toStandardDateString() + ' 23:59:59'
  await self.$MagLoadParams.loadParam()
  self.initParams()
}
export default {
  title: '材料列表管理',
  name: 'AddMaterial',
  data() {
    return {

      model: new PagedList('rs/sql/FMYgasQuery', 30, {}),
      initres: {
        org: [this.$login.f.orgid],
        dep: [],
        user: [],
      },
      gasproperties: [],
      usermold: [],
      show: false,
      rowdata: {},
      criteriaShow: false,
      jurisdiction:this.$login.r,
      orgCondtionStr: '',
      modelval: [],
      printshow: false,
      all: false,
      fields: {},
      thead: '',
      tfoot: '',
      residentialArea:[],
      area:[],
      // 下拉框

      //合计数据
      sumsmodel: {},
      defaultfield: [],
      metertype: [{label: '全部', value: ''}, {label: '卡表', value: '卡表'}, {label: '机表', value: '机表'}]
    }
  },
  ready() {
    this.getaddress()
    readySomething(this)
  },
  methods: {
    async getaddress(){
      console.log('开始获取小区')
      let HttpReset = new HttpResetClass()
      var data = await HttpReset.load('POST', 'rs/sql/manage_getarealist', {
        data: {
          condition: '1=1'
        }
      }, {resolveMsg: null, rejectMsg: '获取小区失败!'})
      console.log('小区',data)
      let house = []
      for (let row of data.data){
        console.log('开始保存小区')
        house.push({label: row.f_residential_area, value: row.f_residential_area})
      }
      this.residentialArea = house
    },
    userTypeChange () {
      this.usermold=[]
      this.f_gasproperties=[]
      if(this.$refs.paged.$refs.cri.model !== null) {
        this.$refs.paged.$refs.cri.model.f_gasproperties=''
        this.$refs.paged.$refs.cri.model.f_user_mold=''
        this.usermold = this.$appdata.getParam(this.$refs.paged.$refs.cri.model.f_user_type[0])
      }
      else{
        this.usermold =[{label: '全部', value: ''}]
      }
    },
    userMoldChange () {
      this.gasproperties=[]
      if(this.$refs.paged.$refs.cri.model !==null) {
        this.$refs.paged.$refs.cri.model.f_gasproperties=''
        if (this.$refs.paged.$refs.cri.model.f_user_mold[0] ==='居民'){
          this.gasproperties = this.$appdata.getParam(this.$refs.paged.$refs.cri.model.f_user_type[0] + this.$refs.paged.$refs.cri.model.f_user_mold[0])
          return
        }
        this.gasproperties = this.$appdata.getParam(this.$refs.paged.$refs.cri.model.f_user_mold[0])
      }
      else{
        this.gasproperties =[{label: '全部', value: ''}]
      }
    },
    search() {
      this.$refs.paged.$refs.cri.search()
    },
    cancel() {
      this.show = false
    },
    selfSearch(args) {
      //小区查询条件
      this.area =  this.$refs.paged.$refs.cri.model.f_residential_area
      console.log("=====小区model绑定====",this.area)
      if(this.area.length !== 0){
        let str = JSON.stringify(this.area)
        str = str.replace(/"/g,`'`)
        str = str.replace(/\[/g,``)
        str = str.replace(/\]/g,``)
        console.log("=====小区model22222222222绑定====",str)
        //查询多个小区时条件
        args.condition += ` and f_residential_area in  ( ${str} )`
      }

      args.condition = `${args.condition} and f_user_type= '非民用' ` + this.orgCondtionStr
      this.model.search(args.condition, args.model)
      this.sumsmodel = this.$refs.paged.$refs.grid.model.sums
    },
    clear() {
      //清空部门和人员
      this.$refs.paged.$refs.cri.$refs.sel.$children[1].selectres = []
      //部门和人员变为全选
      this.$refs.paged.$refs.cri.$refs.sel.$children[1].$children[0].isSelectAll = false
      this.$refs.paged.$refs.cri.$refs.sel.$children[2].$children[0].isSelectAll = false
      Object.keys(this.$refs.paged.$refs.cri.model).forEach((key) => {
        this.$refs.paged.$refs.cri.model[key] = ''
      })
    },
    show() {
      this.criteriaShow = true
    },
    hidden() {
      this.criteriaShow = !this.criteriaShow
    },
    getRes(obj) {
      this.orgCondtionStr = obj
    },
    stamp() {
      this.all = false
      //默认选择要打印的列
      this.modelval = defaultPrint.config
      this.fields = this.getfield
      console.log('所有打印字段', this.fields)
      this.printshow = true
      this.put()
    },
    put() {
      // 对Modelval进行排序
      this.sortModelval()
      this.thead = `<tr><th colspan=${this.modelval.length}>收费查询统计报表</th></tr><tr>`
      for (let key of this.modelval) {
        this.thead += '<th>' + this.fields[key] + '</th>'
      }
      this.thead += '</tr>'
    },
    print() {
      this.$refs.print.PrintAsFile()
      this.printshow = false
    },
    dealmsg(val) {
      console.log('---------------dealmsg')
      this.rowdata = val
      this.show = true
      val.model = this.model.model
      this.$dispatch('deal-msg', val)
    },
    close() {
      this.printshow = false
      this.all = false
    },
    // 对选择的列进行排序
    sortModelval() {
      let sortModel = []
      Object.keys(this.fields).forEach((key) => {
        if (this.modelval.includes(key)) {
          sortModel.push(key)
        }
      })
      this.modelval = sortModel
      console.log('选择的打印的字段', this.modelval)
    }

  },
  computed: {
    getCondition() {
      return {condition: `${this.$refs.paged.$refs.cri.condition}` + this.orgCondtionStr}
    },
    getfield() {
      return exportConfig.fmygasConfig
    },
    usertypes() {
      return [{label: ' 全部 ', value: ''}, ...this.$appdata.getParam('用户类型')]
    },
  },
  events: {},
  watch: {
    'all'(val) {
      if (val) {
        this.modelval = this.bodyData
      } else {
        this.modelval = defaultPrint.config
        this.put()
      }
    },
    'modelval.length'() {
      this.put()
    },
  }
}
</script>
<style>
.datapanel {
  color: #333;
  background-color: white;
  padding: 10px 20px;
  border-radius: 15px;
}
</style>
