<template>
  <div id='MbpeopleList' class="flex">
    <criteria-paged :model="model" v-ref:paged>
      <criteria partial='criteria' @condition-changed='$parent.selfSearch' v-ref:cri>
        <div novalidate class="form-horizontal select-overspread container-fluid auto" partial>
          <div class="row">
            <div class="col-sm-3 form-group">
              <label class="font_normal_body">用户编号</label>
              <input type="text" class="input_search" style="width:60%" v-model="model.f_userinfo_code"
                     condition="f_userinfo_code = '{}'" placeholder='用户编号'>
            </div>
            <div class="col-sm-3 form-group">
              <label class="font_normal_body">用户姓名</label>
              <input type="text" class="input_search" style="width:60%" v-model="model.f_user_name"
                     condition="f_user_name like '%{}%'" placeholder='用户姓名'>
            </div>
            <div class="col-sm-3 form-group">
              <label class="font_normal_body">小&emsp;区&emsp;</label>
              <input type="text" class="input_search" v-model="model.f_residential_area" style="width: 60%"
                     condition=" f_residential_area like '{}%'" placeholder="输入小区">
            </div>
            <div class="col-sm-3 form-group">
              <label class="font_normal_body">楼&emsp;号&emsp;</label>
              <input type="text" class="input_search" style="width:60%" v-model="model.f_building"
                     condition="f_building = '{}'" placeholder='楼号'>
            </div>
            <div class="form-group button-range" style="float: right">
              <button class="button_search button_spacing" @click="$parent.$parent.search()">查询</button>
              <button class="button_clear button_spacing" @click="clear">清空</button>
              <!--              <button class="button_export button_spacing" @click="$parent.$parent.importFile">导入</button>-->
              <!--              <export-excel-->
              <!--                :data="{condition:$parent.$parent.condition}"-->
              <!--                :field="$parent.$parent.getfield"-->
              <!--                sqlurl="rs/logic/exportfile" sql-name="salembPeopleList" template-name='表册用户导出'-->
              <!--                :choose-col="true"></export-excel>-->
              <div style="float: right" class="button_spacing"
                   :class="{'button_shrink_top': $parent.$parent.criteriaShow,'button_shrink_bottom': !$parent.$parent.criteriaShow}"
                   @click="$parent.$parent.criteriaShow = !$parent.$parent.criteriaShow"></div>
            </div>
          </div>
          <div class="row" v-show="$parent.$parent.criteriaShow">
            <div class="col-sm-3 form-group">
              <label class="font_normal_body">&nbsp;小&nbsp;区&nbsp;域</label>
              <v-select :value.sync="model.f_small_area" v-model="model.f_small_area"
                        :options='$parent.$parent.smallareas' placeholder='小区域'
                        close-on-select :search='true'
                        condition="f_small_area = '{}'"></v-select>
            </div>
            <div class="form-group col-sm-3">
              <label class="font_normal_body">用户电话</label>
              <input type="text" class="form-control" v-model="model.f_user_phone" placeholder='用户电话'
                     condition="f_user_phone like '%{}%'" v-next-el='yhxm' style="width: 60%"
              >
            </div>
            <div class="form-group col-sm-3">
              <label class="font_normal_body">客户类型</label>
              <v-select :options='$parent.$parent.user_type' :value.sync="model.f_user_type"
                        close-on-select condition="f_user_type='{}'"
                        placeholder='用户类型' v-model="model.f_user_type"></v-select>
            </div>
            <div class="form-group col-sm-3">
              <label class="font_normal_body">客户状态</label>
              <v-select :options='$parent.$parent.user_state' :value.sync="model.f_user_state"
                        close-on-select condition="f_user_state = '{}'"
                        placeholder='客户状态' v-model="model.f_user_state"></v-select>
            </div>
            <div class="col-sm-3 form-group">
              <label class="font_normal_body">所属表册</label>
              <v-select :value.sync="model.f_meter_book_num" v-model="model.f_meter_book_num"
                        :options='$parent.$parent.meterbooks' placeholder='抄表册'
                        :value-single="true"
                        condition="f_meter_book_num='{}'"
                        style="width:60%"
                        close-on-select></v-select>
            </div>
            <div class="col-sm-3 form-group">
              <label class="font_normal_body">抄&nbsp;表&nbsp;员&nbsp;</label>
              <v-select :value.sync="model.f_inputtor" v-model='model.f_inputtor'
                        style="width:60%"
                        multiple="true"
                        condition="f_inputtor in {}"
                        :options='$parent.$parent.inputtores' placeholder='抄表员'
                        close-on-select
                        v-el:cc></v-select>
            </div>
            <div class="col-sm-3 form-group">
              <label class="font_normal_body">表箱号&emsp;</label>
              <!--              <input style="width:60%" type="text" class="form-control" v-model="model.f_adjustable_id"-->
              <!--                     condition="f_adjustable_id like '%{}%'" placeholder='调压箱号'-->
              <!--              >-->
              <input style="width:60%" type="text" class="form-control" v-model="model.f_metertitles"
                     condition="f_metertitles like '%{}%'" placeholder='表箱号'
              >
              <!--              <v-select :value.sync="model.f_adjustable_id" v-model="model.f_adjustable_id"-->
              <!--                        :options='$parent.$parent.adjustables' placeholder='调压箱号'-->
              <!--                        :value-single="true"-->
              <!--                        condition="f_adjustable_id='{}'"-->
              <!--                        style="width:60%"-->
              <!--                        close-on-select></v-select>-->
            </div>
            <div class="form-group col-sm-3">
              <label class="font_normal_body">用气性质</label>
              <v-select :options='$parent.$parent.gasproperties' :value.sync="model.f_gasproperties"
                        close-on-select condition="f_gasproperties='{}'"
                        placeholder='用气性质' v-model="model.f_gasproperties"></v-select>
            </div>
            <div class="form-group col-sm-3">
              <label class="font_normal_body">气表类型</label>
              <v-select :options='$parent.$parent.meter_classify' :value.sync="model.f_meter_classify"
                        close-on-select condition="f_meter_classify='{}'"
                        placeholder='气表类型' v-model="model.f_meter_classify"></v-select>
            </div>
            <div class="col-sm-3 form-group">
              <label class="font_normal_body">气表品牌</label>
              <v-select :value.sync="model.f_meter_brand" multiple
                        v-model="model.f_meter_brand"
                        :options='$parent.$parent.meterbrands' placeholder='请选择'
                        condition="f_meter_brand in {}"
                        close-on-select></v-select>
            </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_address"
                     condition="f_address like '%{}%'" placeholder='客户地址'>
            </div>

            <div class="form-group col-sm-3">
              <label class="font_normal_body">组织机构</label>
              <res-select :initresid='$parent.$parent.curorgid'
                          @res-select="$parent.$parent.getorg"
                          class="select select_list"
                          restype='organization' :is-mul="false"
                          style="width: 60%">
              </res-select>
            </div>
            <div class="form-group col-sm-3">
              <label class="font_normal_body">是否在册</label>
              <v-select :options='$parent.$parent.whether_list'
                        :value.sync="model.f_book_name"
                        v-model="model.f_book_name"
                        close-on-select condition="f_book_name {}"
                        placeholder='是否在册'></v-select>
            </div>
            <div class="col-sm-3 form-group">
              <label class="font_normal_body">入户证号</label>
              <input style="width:60%" type="text" class="form-control" v-model="model.f_book_no"
                     condition="f_book_no like '%{}%'" placeholder='入户证号'
              >
            </div>
            <div class="col-sm-3 form-group">
              <label class="font_normal_body">表&emsp;号&emsp;</label>
              <input style="width:60%" type="text" class="form-control" v-model="model.f_meternumber"
                     condition="f_meternumber like '%{}%'" placeholder='表号'
              >
            </div>
            <div class="col-sm-3 form-group">
              <label class="font_normal_body">气表状态</label>
              <v-select :options='$parent.$parent.table_state'
                        :value.sync="model.f_table_state"
                        v-model="model.f_table_state"
                        close-on-select
                        condition="f_table_state = '{}'"
                        placeholder='气表状态' ></v-select>
            </div>
            <div class="col-sm-3 form-group">
              <label class="font_normal_body">抄表月份</label>
              <v-select :options='$parent.$parent.handMonths'
                        :value.sync="model.f_hand_month"
                        v-model="model.f_hand_month"
                        close-on-select
                        condition="f_hand_month = '{}'"
                        placeholder='抄表月份' ></v-select>
            </div>
          </div>
        </div>
      </criteria>
      <data-grid class="list_area table_sy" :model="model" partial='list' v-ref:grid :optional="true">
        <template partial='head'>
          <!--<th>-->
          <!--<input type="checkbox" id="f_operator" v-model="$parent.$parent.$parent.all[model.pageIndex-1]"-->
          <!--@change="$parent.$parent.$parent.select()"/>-->
          <!--</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>
          <th>
            <nobr>表底数</nobr>
          </th>
        </template>
        <template partial='body'>
          <!--<td>-->
          <!--<input :id="'body'+model.pageIndex" type='checkbox' @change="$parent.$parent.$parent.selectOne($event,row,$index)"-->
          <!--:checked="$parent.$parent.$parent.ischecked(model.pageIndex-1,$index)"/>-->
          <!--</td>-->
          <td>
            <nobr>{{ $index + 1 }}</nobr>
          </td>
          <td>
            <nobr>{{ row.f_userinfo_code }}</nobr>
          </td>
          <td>
            <nobr>{{ row.f_user_name }}</nobr>
          </td>
          <td>
            <nobr>{{ row.f_user_state }}</nobr>
          </td>
          <td>
            <nobr>{{ row.f_address }}</nobr>
          </td>
          <td>
            <nobr>{{ row.f_residential_area }}</nobr>
          </td>
          <td>
            <nobr>{{ row.f_building }}</nobr>
          </td>
          <td>
            <nobr>{{ row.f_meternumber }}</nobr>
          </td>
          <td>
            <nobr>{{ row.f_book_name }}</nobr>
          </td>
          <td>
            <nobr>{{ row.f_inputtor }}</nobr>
          </td>
<!--          <td>-->
<!--            <nobr>{{ row.f_adjustable_id }}</nobr>-->
<!--          </td>-->
          <td>
            <nobr>{{ row.f_hand_date }}</nobr>
          </td>
          <td>
            <nobr>{{ row.f_user_type }}</nobr>
          </td>
          <td>
            <nobr>{{ row.f_table_state }}</nobr>
          </td>
          <td>
            <nobr>{{ row.f_hand_month }}</nobr>
          </td>
          <td>
            <nobr>{{ row.f_meter_base }}</nobr>
          </td>
        </template>
      </data-grid>
    </criteria-paged>
  </div>
  <modal :show.sync="show" width="500px" title="文件导入" v-ref:modal large backdrop="false">
    <article slot="modal-body" class="modal-body">
      <file-upload class="my-file-uploader " name="UploadFile" style="border-radius: 2px;"
                   action="rs/file/uploadFile" tagname="导入表册用户" v-ref:file multiple></file-upload>
    </article>
    <footer slot="modal-footer" class="modal-footer">
    </footer>
  </modal>
</template>

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

let loadParamGem = async function (self) {
  await self.$LoadParams.loadParam()
  self.getfield = self.config.excelHeaders
  // self.$refs.paged.$refs.cri.model.f_meter_classify = ['机表']
  self.$refs.paged.$refs.cri.model.f_book_name = ['is null']
  await self.initAdjustables()
  // await self.search()
}
export default {
  name: 'MbpeopleList',
  data() {
    return {
      orgCondtionStr: '',
      f_filialeid: this.$login.f.orgid,
      f_orgid: '',
      invoiceuse: [{label: '是', value: 'is not null'}, {label: '否', value: 'is null'}],
      model: new PagedList('rs/sql/mb_peopleList', 20),
      f_orgstr: this.$login.f.orgid,
      // 要操作的用户
      rowsdata: [],
      aaa: '',
      // 控制全选
      all: [],
      // 控制单选
      radio: [],
      show: false,
      meterbooks: [{label: '全部', value: ''}],
      criteriaShow: false,
      gasproperties: this.$appdata.getParam('用气性质') ? [{
        label: '全部',
        value: ''
      }, ...this.$appdata.getParam('用气性质')] : [],
      user_type: this.$appdata.getParam('用户类型') ? [{
        label: '全部',
        value: ''
      }, ...this.$appdata.getParam('用户类型')] : [],
      meter_classify: this.$appdata.getParam('气表类型') ? [{
        label: '全部',
        value: ''
      }, ...this.$appdata.getParam('气表类型')] : [],
      f_small_areas: this.$appdata.getParam('小区域') ? [{
        label: '全部',
        value: ''
      }, ...this.$appdata.getParam('小区域')] : [],
      user_state: [{label: '正常', value: '正常'}, {label: '预备', value: '预备'}, {label: '销户', value: '销户'}],
      handMonths: this.$appdata.getParam('抄表月份') ? [{label: '全部', value: ''}, ...this.$appdata.getParam('抄表月份')] : [],
      table_state: this.$appdata.getParam('气表状态') ? [{label: '全部', value: ''}, ...this.$appdata.getParam('气表状态')] : [],
      whether_list: [{label: '已在册内', value: 'is not null'}, {label: '不在册内', value: 'is null'}],
      meterbrands: [],
      condition: '',
      adjustables: [],
      unnullrowdata: [],
      getfield: {},
      config: {
        // 导出列要和查询列相同
        excelHeaders: {
          'f_userfiles_id': '系统识别号',
          'f_userinfo_code': '用户编号',
          'f_user_name': '用户姓名',
          'f_address': '用户地址'
        }
      },
      curorgid: [this.$login.f.orgid]
    }
  },
  created() {
  },
  ready() {
    loadParamGem(this)
  },
  methods: {
    async meterbook() {
      this.meterbooks = []
      if (this.f_orgid == '') {
        this.f_orgid = this.$login.f.orgid
      }
      let res = await this.$resetpost('rs/sql/saleSingleTable', {
        data: {
          tablename: 't_meter_book',
          condition: ` 1=1 and f_orgid='${this.f_orgid}' and f_book_state='有效'`
        }
      }, {resolveMsg: null, rejectMsg: null})
      for (let i = 0; i < res.data.length; i++) {
        console.log('res', res.data[i])
        let temp = []
        temp.label = res.data[i].f_book_name
        temp.value = res.data[i].id
        this.meterbooks.push(temp)
      }
    },
    invoiceuseChange(val) {
      // 查询已开票记录清空选项
      if (val == 'is not null') {
        this.rowsdata = []
        this.radio = []
      }
    },

    select() {
      let index = this.model.pageIndex - 1
      console.log('全选', this.all[index])
      if (!this.radio[index]) {
        this.radio.$set(index, [])
      }
      if (this.all[index]) {
        // 数据
        this.rowsdata[index] = Object.assign([], this.model.rows)
        // 勾选
        for (var i = 0; i < this.model.rows.length; i++) {
          this.radio[index].$set(i, true)
        }
      } else {
        // 数据
        this.rowsdata[index] = []
        // 不勾选
        for (var i = 0; i < this.model.rows.length; i++) {
          this.radio[index].$set(i, false)
        }
      }
      this.mergeRowData()
    },
    importFile() {
      this.show = true
    },
    async initAdjustables() {
      let arr = []
      let filter = this.$login.f.orgid
      this.$GetSaleParam.getAdjustable(filter).forEach((item) => {
        let temp = {}
        temp.label = '[' + item.value.f_adjustable_id + ']-' + item.label
        temp.value = item.value.id
        arr.push(temp)
      })
      this.adjustables = [{label: '全部', value: ''}, ...arr]
      // 初始化气表品牌
      let brandArr = []
      this.$GetSaleParam.getGasbrand().forEach((item) => {
        let temp1 = {}
        temp1.label = item.label
        temp1.value = item.value.f_meter_brand
        brandArr.push(temp1)
      })
      this.meterbrands = [{label: '全部', value: ''}, ...brandArr]
      //
      // // 加载抄表册
      // console.log("------------------this.$GetSaleParam.getMeterBooks()",this.$GetSaleParam.getMeterBooks())
      // this.meterbooks = [{label: '全部', value: ''}, ...this.$GetSaleParam.getMeterBooks()]
    },
    search() {
      this.$refs.paged.$refs.cri.search()
      console.log('mbpeople this = ', this)
    },
    selfSearch(args) {
      let f_orgstr = this.orgCondtionStr ? this.orgCondtionStr : "and f_orgid in ('" + this.f_orgid + "')"
      args.condition = `${args.condition} ` + f_orgstr
      // args.condition += ` and f_orgid = ${this.f_orgstr}`
      this.condition = args.condition
      this.$parent.condition = this.condition
      this.model.search(args.condition, args.model)
    },
    // 合并二维数组并去空
    mergeRowData() {
      console.log('!!!!!!!!!!!!!数组去空', this.rowsdata)
      let data = []
      // 合并
      for (let array of this.rowsdata) {
        data.push.apply(data, array)
      }
      // 去空
      // 拓展数组去空值的方法
      Array.prototype.removeEmpty = function () {
        for (var i = 0; i < this.length; i++) {
          if (this[i] == '' || typeof (this[i]) == 'undefined') {
            this.splice(i, 1)
            i--
          }
        }
        return this
      }
      data = data.removeEmpty()
      this.unnullrowdata = []
      data.forEach((row) => {
        this.unnullrowdata.push(row.f_userfiles_id + '')
      })
      this.$parent.rowsdata = this.unnullrowdata
      // this.$parent.rowsdata = this.rowsdata
    },
    selectOne(event, row, i) {
      console.log('单选', event.target.checked)
      let index = this.model.pageIndex - 1
      if (!this.rowsdata[index]) {
        this.rowsdata[index] = []
      }
      if (!this.radio[index]) {
        this.radio.$set(index, [])
      }
      if (event.target.checked) {
        // 数据
        this.rowsdata[index][i] = row
        // 勾选
        this.radio[index].$set(i, true)
        // 判断是否全部选中
        var allState = true
        if (this.model.rows.length != this.radio[index].length) {
          allState = false
        }
        for (var state of this.radio[index]) {
          if (!state) {
            allState = false
          }
        }
        if (allState) {
          this.all.$set(index, true)
        } else {
          this.all.$set(index, false)
        }
      } else {
        // 数据
        this.rowsdata[index][i] = []
        // 不勾选
        this.radio[index].$set(i, false)
        // 任意取消一个则全选状态设为false
        this.all.$set(index, false)
      }
      this.mergeRowData()
    },
    getorg(val) {
      console.log('getorg:val=', val)
      console.log('getorg:this.f_orgid=', this.f_orgid)
      this.f_orgid = val
      this.f_filialeid = val[0]
    },
    async getmeterbook() {
      await this.meterbook()
      this.$emit('childre', this.meterbooks)
    }
  },
  computed: {
    ischecked() {
      return function (index, i) {
        if (!this.radio[index]) {
          return false
        }
        return this.radio[index][i]
      }
    },
    smallareas() {
      return [{label: '全部', value: ''}, ...this.$appdata.getParam('小区域')]
    },
    inputtores() {
      // 获取抄表员
      console.log('获取抄表员', this.$login.f)
      let rs = []
      if (this.$login.f.f_gasman.length > 0) {
        for (let i = 0; i < this.$login.f.f_gasman.length; i++) {
          let temp = {
            label: this.$login.f.f_gasman[i].name,
            value: this.$login.f.f_gasman[i].name
          }
          rs.push(temp)
        }
      }
      this.inputtores2 = rs
      return [...rs]
    }
  },
  watch: {
    async 'f_orgid'() {
      this.meterbooks = []
      await this.meterbook()
      this.$emit('childre', this.meterbooks)
    }
  },
  events: {
    onFileUpload: function (file, res) {
      // let URL = res.f_downloadpath.substring(res.f_downloadpath.lastIndexOf(":\\") + 2)
      // res.f_downloadpath = "http://" + location.host + "/" + URL
      // res.f_downloadpath.replace('\\','/')
      this.$resetpost('rs/logic/upLoadBookFile',
        {
          data: {
            condition: this.condition,
            filepath: res.f_downloadpath
          }
        },
        {resolveMsg: null, rejectMsg: '上传失败'}).then((res) => {
        this.show = false
        this.$showAlert(`导入成功`, 'success', 2000)
        this.search()
      })
    }
  }
}
</script>

<style lang="less">
#MbpeopleList {
  tr {
    th {
      text-align: center;
    }

    td {
      text-align: center;
    }
  }
}
</style>
