<template>
  <div>
    <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"
                    v-show="$parent.searchshow">
            <div novalidate class="form-inline auto" partial>
              <div class="row">
                <div class="col-sm-2 form-group">
                  <label class="font_normal_body">组织机构</label>
                  <res-select :initresid='$parent.$parent.curorgid'
                              @res-select="$parent.$parent.getorg"
                              class="select select_list"
                              restype='organization'
                              style="width: 60%">
                  </res-select>
                </div>
                <div class="col-sm-2 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-2 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="span" style="float:right;">
                  <button class="button_search" @click="search()">查 询</button>
                  <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" v-ref:grid class="list_area table_sy" partial='list'>
            <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>
                <th><nobr>公司</nobr></th>
              </tr>
            </template>
            <template partial='body'>
              <td style="text-align: center;"><nobr>{{$index + 1}}</nobr></td>
              <td style="text-align: center;">{{row.f_userinfo_code}}</td>
              <td style="text-align: center;">{{row.f_user_name}}</td>
              <td style="text-align: center;">{{row.f_user_phone}}</td>
              <td style="text-align: center;">{{row.f_address}}</td>
              <td style="text-align: center;">{{row.f_card_id}}</td>
              <td style="text-align: center;">{{row.f_user_type}}</td>
              <td style="text-align: center;">{{row.f_gasproperties}}</td>
              <td style="text-align: center;">{{row.f_inputtor}}</td>
              <td style="text-align: center;">{{row.f_input_date}}</td>
              <td style="text-align: center;">{{row.f_orgname}}</td>
            </template>
          </data-grid>
        </criteria-paged>
        <split-price :showdata="splitdata" :pricesplit="priceSplit" v-if="priceSplit" ></split-price>
      </div>
    </div>
  </div>
</template>

<script>
import {PagedList} from 'vue-client'
const myMap = new Map()

export default {
  'title': '111',
  data () {
    return {
      model: new PagedList('rs/sql/usersListQuery', 20),
      // 控制查询条件显示
      searchshow: true,
      da: {
        rows: []
      },
      f_meternumber: '',
      splitdata: '',
      // 公司下拉
      curorgid: [this.$login.f.orgid],
      f_orgid: '',
      priceSplit: false,
      criteriaShow: false,
      imgshow: false,
      imgfilename: ''
    }
  },
  ready () {
    this.search()
    // this.getwarehouse()
  },
  props: ['showMessage'],
  methods: {
    getorg (val) {
      this.f_orgid = this.$login.convertToIn(val)
      this.f_filialeid = val[0]
    },
    imgclose () {
      this.imgshow = false
    },
    imgShow (val) {
      this.imgfilename = `rs/image/file/` + val
      this.imgshow = true
    },
    hidden () {
      this.criteriaShow = !this.criteriaShow
    },
    fileterprice (row) {
      this.splitdata = row
      this.priceSplit = true
      console.log('row==>', row)
    },
    init () {
      this.f_meternumber = ''
      this.da.rows = []
      myMap.clear()
    },
    view (row) {
      this.$parent.showupload = true
      this.$parent.row = row
    },
    cancelSet () {
      this.showSetModal = false
      this.init()
    },

    jump () {
      this.joinshow2 = false
      this.showSetModal = true
    },
    async getwarehouse () {

    },

    join1 (row) {
      this.joinrow = row
      this.joinshow = true
    },

    joinclose () {
      this.joinshow = false
    },
    joinclose2 () {
      this.joinshow2 = false
    },

    search () {
      this.$refs.paged.$refs.criteria.search()
    },
    importFile () {
      this.show = true
    },
    selfSearch (args) {
      if (!this.f_orgid) {
        this.getorg([this.$login.f.orgid])
      }
      console.log('查询。。。', this.f_orgid)
      if (this.f_orgid) {
        args.condition = `${args.condition} `
      }
      this.model.search(args.condition, args.model)
    },
    mergeRowData (joinrows) {

    },
    // 多选框初始化
    selectInit () {
      this.rowsdata = []
      this.all = []
      this.radio = []
    },
    select () {
      let index = this.model1.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.model1.rows)
        // 勾选
        for (var i = 0; i < this.model1.rows.length; i++) {
          this.radio[index].$set(i, true)
        }
      } else {
        // 数据
        this.rowsdata[index] = []
        // 不勾选
        for (var i = 0; i < this.model1.rows.length; i++) {
          this.radio[index].$set(i, false)
        }
      }
    },
    selectOne (event, row, i) {
      console.log('单选', event.target.checked)
      let index = this.model1.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.model1.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: {
    ischecked () {
      return function (index, i) {
        // console.log("计算属性")
        if (!this.radio[index]) {
          return false
        }
        return this.radio[index][i]
      }
    },
    distributionstate () {
      return [{label: '全部', value: ''}, {label: '待分配', value: 'is null'}, {label: '已入库', value: 'is not null'}]
    }
  }
}
</script>
<style>
.datapanel {
  color: #333;
  background-color: white;
  padding: 10px 20px;
  border-radius: 15px;
}
</style>
