<template>
  <div class="flex-row" >
    <div style="flex: 1.5" class="flex">
      <div class="flex">
        <criteria-paged :model="model" v-ref:paged>
          <criteria partial='criteria' v-ref:criteria @condition-changed="$parent.selfSearch">
            <div novalidate class="form-inline 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 = '{}'" 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_address"
                       condition="f_address like '%{}%'" placeholder='客户地址'>
              </div>
                <div style="float: right">
                  <button class="button_search" @click="search()">查 询</button>
                  <button class="button_search" @click="$parent.$parent.generate()">批量修改</button>
                  <div
                    :class="{'button_shrink_top':$parent.$parent.criteriaShow,'button_shrink_bottom':!$parent.$parent.criteriaShow}"
                    @click="$parent.$parent.criteriaShow=!$parent.$parent.criteriaShow"
                    class="button_spacing"
                    style="float: right"></div>
                </div>
              </div>
              <div class="row" v-show="$parent.$parent.criteriaShow">
              <div class="col-sm-3 form-group">
                <label class="font_normal_body">用户状态</label>
                <v-select :value.sync="model.f_user_state" v-model="model.f_user_state"
                          :options='$parent.$parent.userstates' placeholder='用户状态'
                          close-on-select></v-select>
              </div>
              <div class="col-sm-3 form-group">
              <label class="font_normal_body">气表类型</label>
              <v-select :value.sync="model.f_meter_classify" v-model="model.f_meter_classify"
                        style="width:60%"
                        :options='$parent.$parent.meters' placeholder='气表类型'
                        close-on-select
                        condition="f_meter_classify like '%{}'"
                       ></v-select>
              </div>
                <div class="col-sm-3 form-group">
                  <label class="font_normal_body" >抄表员</label>
                  <v-select :value.sync="model.f_inputtor" placeholder='抄表员'
                            :options='$parent.$parent.inputtore' v-model="model.f_inputtor"
                            v-ref:f_inputtor
                            condition="u.f_inputtor like '%{}%'"
                            close-on-select ></v-select>
                </div>
                <div class="col-sm-3 form-group">
                  <label class="font_normal_body" title="参数:使用状态">使用状态</label>
                  <v-select :value.sync="model.f_usestate" placeholder='使用状态'
                            :options='$parent.$parent.usestate' v-model="model.f_usestate"
                            v-ref:f_usestate
                            condition="u.f_usestate like '%{}%'"
                            close-on-select ></v-select>
                </div>
                <div class="col-sm-3 form-group">
                  <label class="font_normal_body">滞纳规则</label>
                  <v-select :value.sync="model.f_overdue_set" placeholder='滞纳规则'
                            :options='$parent.$parent.overdueset' v-model="model.f_overdue_set"
                            condition="u.f_overdue_set = '{}'"
                            close-on-select ></v-select>
                </div>
              </div>
            </div>
          </criteria>
          <data-grid :model="model" v-ref:grid class="list_area table_sy" partial='list'>
            <template partial='head'>
              <tr>
                <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>
              </tr>
            </template>
            <template partial='body'>
              <td style="text-align: center;">
                <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 style="text-align: center;">{{row.f_userinfo_code}}</td>
              <td style="text-align: center;">{{row.f_user_name}}&nbsp;&nbsp;{{row.f_user_phone ? row.f_user_phone : ''}}</td>
              <td style="text-align: center;">{{row.f_address_detail ? row.f_address + row.f_address_detail : row.f_address}}</td>
              <td style="text-align: center;">{{row.f_user_state}}</td>
              <td style="text-align: center;">{{row.f_meter_classify}}</td>

            </template>
          </data-grid>
        </criteria-paged>
      </div>
    </div>
  </div>
</template>

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

  let loadParamGem = async function (self) {
    // console.log('获取登录信息，', self.$login, self.$appdata, self.$appdata.getParam('用户类型'), Vue.$login.f.name)
    await self.search()
    await self.$LoadParams.loadParam()
    let overdueset = []
    let res = await self.$resetpost('rs/sql/saleSingleTable', {
      data: {
        tablename: 't_overdue_set',
        condition: `f_orgid = '${self.$login.f.orgid}' `
      }
    }, {resolveMsg: null, rejectMsg: ''})
    for (let row of res.data) {
      overdueset.push({label: row.f_rule_name, value: `${row.id}`})
    }
    self.overdueset = overdueset
  }

  export default {
    'title': '费用生成',
    data () {
      return {
        model: new PagedList('rs/sql/sale_getFiles', 30),
        // 要修改的档案
        rowsdata: [],
        overdueset: [],
        // 控制全选
        all: [],
        // 控制单选
        radio: [],
        criteriaShow: false,
        meters: [{label: '全部', value: ''}, {label: '机表', value: '机表'}, {label: '卡表', value: '卡表'}, {label: '物联网表', value: '物联网表'}]
      }
    },
    ready () {
      loadParamGem(this)
    },
    methods: {
      search () {
        // this.$refs.paged.$refs.criteria.model.generate_state = '0'
        this.$refs.paged.$refs.criteria.search()
      },
      selfSearch (args) {
        // 查询时把选择数据清空,防止出错
        this.selectInit()
        args.condition = `${args.condition} and u.f_orgid  = '${this.$login.f.orgid}'`
        this.model.search(args.condition, args.model)
      },
      close () {
        // this.inputDate =  this.$login.toStartAndEndDateString()[0],
        // this.endDate = this.$login.toStartAndEndDateString()[1],
        this.selectInit()
      },
      // 多选框初始化
      selectInit () {
        this.rowsdata = []
        this.all = []
        this.radio = []
      },
      async generate (row) {
        if (row) {
          // 先清空,防止把多选的数据提交
          this.selectInit()
          this.rowsdata.push(row)
        } else {
          let info = '确认根据当前查询条件批量修改档案吗?'
          console.log('=========>', this.rowsdata.length)

          // 是多选
          if (this.rowsdata.length) {
            info = `共选中${this.rowsdata.length}条数据，确认批量修改档案吗?`
          }
          // 点击的是批量生成
          this.$showMessage(info, ['confirm', 'cancel']).then(
            (response) => {
              if (response === 'confirm') {
                this.mergeRowData()

                this.mode = {}
                this.$parent.rowsdata = this.rowsdata

                this.$emit('save')
                this.rowsdata = []
              }
            })
        }
      },

      // 合并二维数组并去空
      mergeRowData () {
        if (this.rowsdata.length === 0) {
          this.rowsdata = this.$refs.paged.$refs.grid.model.rows
        } else {
          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.rowsdata = data
        }
      },
      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)
          }
        }
      },
      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)
        }
      }
    },
    computed: {
      usestate () {
        return this.$appdata.getParam('使用状态')
      },
      inputtore () {
        // 获取抄表员
        console.log('获取抄表员', this.$login.f)
        let rs = []
        rs.push({'label': '全部', 'value': ''})
        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)
          }
        }
        return [ ...rs]
      },
      userstates () {
        return this.$appdata.getParam('用户状态')
      },
      ischecked () {
        return function (index, i) {
          // console.log("计算属性")
          if (!this.radio[index]) {
            return false
          }
          return this.radio[index][i]
        }
      }
    },
    watch: {
      // 'generate_state'(){
      //   this.search()
      // }
    }
  }
</script>
<style>
</style>
