<template>
  <div class="flex bg-white p-10 datapanel" >
    <div style="flex: 1.5" class="flex">
      <div class="flex">
        <button class="btn btn-xs" style="background: #d2e4f5;padding: 0" v-show="!this.searchshow" @click="this.searchshow = true">
          <span class="glyphicon glyphicon-chevron-down" style="color: #000;"></span>
        </button>
        <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="form-group">-->
                <!--<label class="control-label">导入日期:</label>-->
                <!--<datepicker  placeholder="开始日期"-->
                             <!--v-model="model.f_import_start_date"-->
                             <!--:value.sync="model.f_import_start_date"-->
                             <!--:format="'yyyy-MM-dd 00:00:00'"-->
                             <!--condition="f_import_date >= '{}'"-->
                <!--&gt;</datepicker>-->
                <!--<datepicker  placeholder="结束日期"-->
                             <!--v-model="model.f_import_end_date"-->
                             <!--:value.sync="model.f_import_end_date"-->
                             <!--:format="'yyyy-MM-dd 23:59:59'"-->
                             <!--condition="f_import_date <= '{}'"-->
                <!--&gt;</datepicker>-->
              <!--</div>-->
              <span v-show="$parent.$parent.searchshow">
                <div class="form-group">
                <v-select :value.sync="model.f_distribution_state" v-model="model.f_distribution_state"
                          :options='$parent.$parent.distributionstate' placeholder='分配状态'
                          close-on-select condition="f_distribution_state = '{}'"></v-select>
                </div>
                <div class="form-group" v-show="false">
                  <input type="text" class="form-control" v-model="model.f_warehouse_id"
                         condition="f_warehouse_id={}" placeholder='所在仓库' :size="8">
                </div>
                <div class="form-group">
                  <input type="text" class="form-control" v-model="model.f_meternumber"
                         condition="f_meternumber='{}'" placeholder='表号' :size="8">
                </div>
                <div class="form-group">
                  <input type="text" class="form-control" v-model="model.f_batch_number"
                         condition="f_batch_number='{}'" placeholder='批次号' :size="8">
                </div>
                <div class="form-group">
                  <input type="text" class="form-control" v-model="model.f_metertype"
                         condition="f_metertype='{}'" placeholder='表类型' :size="8">
                </div>
                <div class="form-group">
                  <input type="text" class="form-control" v-model="model.f_device_address"
                         condition="f_device_address like '%{}%'" placeholder='设备地址' :size="8">
                </div>
                <div class="form-group">
                  <button class="btn btn-success width-100" @click="search()">查 询</button>
                  <button class="btn btn-warning width-100" @click="$parent.$parent.clean">清 空</button>
                  <button class="btn" @click="$parent.$parent.searchshow = false" style="">
                    <!--<span class="glyphicon glyphicon-chevron-up"></span>-->
                    隐藏查询条件
                  </button>
                </div>
              </span>
            </div>
          </criteria>
          <data-grid :model="model" v-ref:grid  partial='list'>
            <template partial='head'>
              <tr>
                <th style="padding: 0;border: 0">
                  <input type="checkbox" id="f_operator" v-model="$parent.$parent.$parent.all[model.pageIndex-1]"
                         @change="$parent.$parent.$parent.select()" style="width: 22px;height: 22px"/>
                </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;padding: 0;border: 0">
                <input type='checkbox' @change="$parent.$parent.$parent.selectOne($event,row,$index)"
                       :checked="$parent.$parent.$parent.ischecked(model.pageIndex-1,$index)" style="width: 22px;height: 22px;"/>
              </td>
              <!--<td style="text-align: center;">{{$index + 1}}</td>-->
              <td style="text-align: center;">{{row.f_meternumber}}</td>
              <td style="text-align: center;">{{row.f_batch_number}}</td>
              <td style="text-align: center;">{{row.f_device_address}}</td>
              <td style="text-align: center;">{{row.f_metertype}}</td>
              <td style="text-align: center;">{{row.f_distribution_state}}</td>
              <td style="text-align: center;">{{row.f_warehouse_name}}</td>
              <td style="text-align: center;">{{row.f_import_date}}</td>
            </template>
          </data-grid>
        </criteria-paged>
      </div>
    </div>
  </div>
</template>

<script>
  import { PagedList } from 'vue-client'
  export default {
    'title': '表具列表',
    data () {
      return {
        model: new PagedList('rs/sql/sale_getMeterInfo', 30, {orderitem: '`id DESC`'}),

        f_operator: this.$login.f.name,
        f_filiale: this.$login.f.f_fengongsi,
        f_outlets: this.$login.f.f_parentname,
        f_orgstr:this.$login.f.orgpathstr,
        f_filialeids:this.$login.f.f_orgids,
        //要操作的用户
        rowsdata: [],
        //控制全选
        all: [],
        //控制单选
        radio: [],
        // 控制查询条件显示
        searchshow: true
      }
    },
    ready () {
      this.search()
    },
    methods: {
      clean () {
        Object.keys(this.$refs.paged.$refs.criteria.model).forEach((key) => {
          this.$refs.paged.$refs.criteria.model[key] = ''
        })
      },
      search () {
        this.$refs.paged.$refs.criteria.search()
      },
      selfSearch (args) {
        //查询时清空选择的数据,防止出错
        this.selectInit()
        args.condition = `${args.condition} and f_filialeids  = '${this.f_filialeids}'`
        this.model.search(args.condition, args.model)
      },
      //多选框初始化
      selectInit(){
        this.rowsdata = []
        this.all = []
        this.radio = []
        this.$dispatch('select',this.rowsdata)
      },
      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.$dispatch('select',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.$dispatch('select',this.rowsdata)
      }
    },
    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: '已入库'},{label: '已领用', value: '已领用'}]
      }
    },
    watch: {
      // 分配状态改变
      'model.model.f_distribution_state' (val) {
        this.search()
        this.$dispatch('change-state', val[0])
      },
      // 所在仓库改变
      'model.model.f_warehouse_id' (val) {
        this.search()
        this.$dispatch('change-warehouseid', val)
      }
    }
  }
</script>
<style>
  .datapanel {
    color: #333;
    background-color: white;
    padding: 10px 20px;
    border-radius:15px;
  }
</style>
