<template>
  <div class="auto select-overspread">
    <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_residential_area" placeholder='单位名称'
                     condition="f_company_name like '%{}%'" @keyup.enter="search()">
            </div>
            <div class="form-group col-sm-2 button-range" >
              <button class="button_search" style="margin-right: 10px"  @click="search()" v-el:cba>查询</button>
              <button class="button_search" style="margin-right: 10px"  @click="$parent.$parent.send()" v-el:cba>下发</button>
            </div>
          </div>
        </div>
      </criteria>
      <data-grid :model="model" class="table_sy"  partial='list' v-ref:grid >
        <template partial='head' >
          <tr>
            <th><nobr><input type="checkbox" onClick="event.cancelBubble = true" :checked="$parent.$parent.$parent.checkAll" @change="$parent.$parent.$parent.setCheckAll()"/>全选</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 type="checkbox" onClick="event.cancelBubble = true" :checked="$parent.$parent.$parent.isChecked(row.id)"  @change="$parent.$parent.$parent.setCheckes(row.id)" /></td>
            <td style="text-align:center">{{row.f_rea}}</td>
            <td style="text-align:center">{{row.f_company_street}}</td>
            <td style="text-align:center">{{row.f_company_name}}</td>
            <td style="text-align:center"> <button @click.stop="$parent.$parent.$parent.details(row)" class="btn btn-link"><b>{{row.num?row.num:0}}</b></button></td>
            <td style="text-align:center">{{row.f_company_position}}</td>
          </tr>
        </template>
        <template partial='foot'></template>
      </data-grid>
    </criteria-paged>
    <modal :show.sync="showSendModal" :backdrop="false" width="90%" height="90%">
      <article slot="modal-body" class="modal-body" style="height: 80vh">
        <check-book-search-user-list  v-if="showSendModal" :row="row"  :addcondata="addcondata" :bookrowsdata="{bookrows:checkes,checkAll:checkAll}"  :needprops="needprops":userlogin="userlogin"></check-book-search-user-list>
      </article>
      <footer slot="modal-footer">
      </footer>

    </modal>
  </div>
</template>

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

export default {
  title: '非民用片区单位',
  props: ['row','needprops'],
  data () {
    return {
      rowdata: this.row,
      showSendModal:false,
      checkBookRow:{
      },
      userlogin:{
        id:this.$login.f.id,
        name:this.$login.f.name,
        orgid:this.$login.f.orgid,
        orgstr:this.$login.f.orgs,
      },
      model: new PagedList('rs/sql/getCheckBookCompany', 50),
      checkAll:false,
      checkes:[],
      addcondata:'',
    }
  },
  ready(){
    console.log(this.row)
    const val = this.row
    if (val) {
      this.checkAll=false
      this.checkes=[]
      this.rowdata = val
      const condition  = `f_check_book_id =${val.id}`
      this.model.search(condition)
    }
  },
  watch: {
    'row' (val) {
      if (val) {
        this.checkAll=false
        this.checkes=[]
        this.rowdata = val
        const condition =  `f_check_book_id =${val.id}`
        this.model.search(condition)
      }
    }
  },
  methods: {
    setCheckAll() {
      this.checkAll=this.checkAll?false:true;
      // 全选改变后，清空选中数据
      this.checkes = []
    },
    isChecked(v) {
      // 如果全选，不在的按选中算，否则，在的按选中算
      if (this.checkAll) {
        return this.checkes.indexOf(v) == -1
      } else {
        return this.checkes.indexOf(v) != -1
      }
    },
    setCheckes(id) {
      let index=this.checkes.indexOf(id)
      if(index<0){
        this.checkes.push(id)
      }else{
        this.checkes.splice(index,1)
      }
    },
    send(){
      if(!this.checkAll && this.checkes.length == 0){
        return  this.$showMessage('请选择单位')
      }
      this.showSendModal = true
    },
    details(row){
      this.$emit('showuser' ,row)
    },
    selfSearch (args) {
      if (this.rowdata.id) {
        this.checkAll=false
        this.checkes=[]
        args.condition += `and f_check_book_id =${this.rowdata.id}`
        this.model.search(args.condition)
        this.addcondata = args.model.f_residential_area ? ` and tc.f_company_name like '%${args.model.f_residential_area}%'`: ''
      } else {
        this.$showMessage('请选择片区')
      }
    }
  }
}
</script>
