<template>
  <div class="flex">
    <criteria-paged :model="model" v-ref:paged>
      <criteria partial='criteria' @condition-changed='$parent.selfSearch' v-ref:criteria>
        <div novalidate class="form-horizontal select-overspread container-fluid auto" partial>
          <div class="row">
            <div class="form-group col-sm-3" >
              <label class="font_normal_body">客户编号</label>
              <input type="text" class="input_search" style="width:60%" v-model="model.f_userinfo_code" placeholder='客户编号'
                     condition="f_userinfo_code = '{}'" @keyup.enter="search()">
            </div>
            <div class="form-group col-sm-3" >
              <label  class="font_normal_body">表号</label>
              <input type="text" class="input_search" style="width:60%" v-model="model.f_meternumber" placeholder='表号'
                     condition="f_meternumber = '{}'" @keyup.enter="search()">
            </div>
            <div class="form-group col-sm-4 button-range" >
              <button class="button_search" style="margin-right: 10px"  @click="search()" v-el:cba>查询</button>
              <export-excel
                :data="{condition: $parent.$parent.condition}"
                :field="$parent.$parent.getfield"
                sqlurl="rs/logic/saleExport" sql-name="getGasBrandsUser" :template-name="$parent.$parent.meterbrand+'气价使用人'"
                :choose-col="true"></export-excel>
              <div style="float: right" class="button_spacing"
                   :class="{'button_shrink_top': $parent.$parent.criteriaShow2,'button_shrink_bottom': !$parent.$parent.criteriaShow2}"
                   @click="$parent.$parent.criteriaShow2 = !$parent.$parent.criteriaShow2"></div>
            </div>
          </div>
          <div class="row" v-show="$parent.$parent.criteriaShow2">
            <div class="form-group col-sm-3" >
              <label  class="font_normal_body">气表状态</label>
              <v-select  style="width:60%" :value.sync="model.f_table_state"
                         v-model="model.f_table_state"
                         :options='$parent.$parent.gasStates' placeholder='气表状态'
                         condition="f_table_state ='{}'"></v-select>
            </div>
          </div>
        </div>
      </criteria>
      <data-grid :model="model" class="table_sy"  partial='list' v-ref:grid >
        <template partial='head' >
          <tr>
            <th style="text-align:center">
              <nobr>全选</nobr>
              <input @keyup.enter="search" style="width:60%" type="checkbox" v-model='checked1' :checked="$parent.$parent.$parent.checked1"
                     @click="$parent.$parent.$parent.checkedALL()">
            </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' >
          <tr >
            <td style="text-align:center">
              <input @keyup.enter="search" style="width:60%" type="checkbox" checked="checked" name="opertioninput"
                     @click="$parent.$parent.$parent.checked(row)"></td>
            <td style="text-align:center"><span @click="$parent.$parent.$parent.dealmsg(row)"><a><b>{{row.f_userinfo_code}}</b></a></span></td>
            <td style="text-align:center">{{row.f_meternumber}}</td>
            <td style="text-align:center">{{row.f_meter_brand}}</td>
            <td style="text-align:center">{{row.f_meter_type}}</td>
            <td style="text-align:center">{{row.f_user_name}}</td>
            <td style="text-align:center;white-space: nowrap;">{{row.f_address}}</td>
          </tr>
        </template>
        <template partial='foot'></template>
      </data-grid>
    </criteria-paged>
  </div>
</template>

<script>
  import {HttpResetClass, PagedList} from 'vue-client'

  let loadParamGem = async function (self) {
    await self.$LoadParams.loadParam(self.f_filialeid)
  }
  export default {
    title: '气价使用人',
    data () {
      return {
        model: new PagedList('rs/sql/getGasBrandsUser', 20, {}),
        condition: '',
        criteriaShow2: false,
        getfield: {},
        show: false,
        gasproperties: [],
        f_filialeid: this.$login.f.orgid,
        usertypes: this.$appdata.getParam('用户类型') ? [{label: '全部', value: ''}, ...this.$appdata.getParam('用户类型')] : [],
        pricetypes: this.$appdata.getParam('气价类型') ? [{label: '全部', value: ''}, ...this.$appdata.getParam('气价类型')] : [],
        config: {
          excelHeaders: {
            'f_userinfo_code': '客户编号',
            'f_meternumber': '表号',
            'f_meter_brand': '气表品牌',
            'f_meter_type': '气表类型',
            'f_user_name': '客户姓名',
            'f_address': '客户地址'
          }
        },
        checked1: true,
        map: new Map()
      }
    },
    props: ['brandid', 'meterbrand', 'orgcondition'],
    ready () {
      this.search()
      this.getfield = this.config.excelHeaders
      loadParamGem(this)
    },
    methods: {

      search () {
        this.$refs.paged.$refs.criteria.search()
      },
      selfSearch (args) {
        if (this.orgcondition) {
          args.condition = `${args.condition} and f_orgid in ${this.orgcondition} `
        }
        args.condition = `${args.condition} and f_gasbrand_id = '${this.brandid}'`
        this.condition = args.condition
        this.model.search(args.condition, args.model)
      },
      dealmsg (val) {
        this.$parent.f_userinfo_id = val.f_userinfo_id
        this.$parent.listpage = false
      },
      checkedALL () {
        this.checked1 = !this.checked1
        let box = document.getElementsByName('opertioninput')
        for (var i = 0; i < box.length; i++) {
          box[i].checked = this.checked1
        }
      },
      checked (val) {
        let userid = val.f_userfiles_id
        if (this.map.has(userid)) {
          this.map.delete(userid)
        } else {
          this.map.set(userid, {id: null, f_user_id: userid})
        }
      },
      mapset (array) {
        this.map.clear()
        for (let i = 0; i < array.length; i++) {
          let userid = array[i].f_userfiles_id
          this.map.set(userid, {id: null, f_user_id: userid})
        }
      }
    },
    watch: {
      'brandid' () {
        this.search()
      },
      'model.pageIndex' () {
        this.checked1 = false
        this.mapset(this.model.rows)
        this.checkedALL()
      },
      'model.rows' () {
        this.checked1 = false
        this.mapset(this.model.rows)
        this.checkedALL()
      },
      'checked1' (val) {
        if (val) {
          this.mapset(this.model.rows)
        } else {
          this.map.clear()
        }
      }
    },
    computed: {
      userstates () {
        return [{label: '全部', value: ''}, {label: '销户', value: '销户'}, {label: '停用', value: '停用'}, ...this.$appdata.getParam('客户状态')]
      },
      gasStates () {
        return [{label: '全部', value: ''}, ...this.$appdata.getParam('气表状态')]
      }
    }
  }
</script>
