<template>
  <div class="flex-row">
  <div class="basic-main">
    <criteria-paged :model="model" v-ref:paged    paged@sort="sort">
      <criteria partial='criteria' class="search_area" @condition-changed='$parent.selfSearch' v-ref:criteria>
        <div novalidate class="form-horizontal select-overspread container-fluid auto" partial>
          <div class="row">
            <div class="row">
              <div class="col-sm-5" style="width: 20%">
                <label class="font_normal_body">客户编号</label>
                <input type="text" class="input_search" v-model="model.f_userinfo_id"
                       style="width: 60%" placeholder="客户编号">
              </div>
              <div class="col-sm-5" style="width: 20%">
                <label class="font_normal_body">客户名称</label>
                <input type="text" class="input_search" v-model="model.f_user_name"
                       style="width: 60%" placeholder="客户名称">
              </div>
              <div class="col-sm-5" style="width: 20%">
                <label class="font_normal_body">客户电话</label>
                <input type="text" class="input_search" v-model="model.f_user_phone"
                       style="width: 60%" placeholder="客户电话" >
              </div>
              <div class="col-sm-5" style="width: 20%">
                <label class="font_normal_body">小区地址</label>
                <input type="text" class="input_search" v-model="model.f_residential_area"
                       style="width: 60%" placeholder="小区地址" >
              </div>
            </div>
           <div class="row">
                <div class="col-sm-5" style="width: 20%">
                  <label class="font_normal_body">所属片区</label>
                  <input type="text" class="input_search" v-model="model.f_check_area"
                         style="width: 60%" placeholder="所属片区" >
                </div>
                <div class="col-sm-5" style="width: 20%">
                  <label class="font_normal_body">详细地址</label>
                  <input type="text" class="input_search" v-model="model.f_address"
                         style="width: 60%" placeholder="详细地址" >
                </div>
              <div class="col-sm-5" style="width: auto;margin-top:5px;padding: 0 5px;float: right">
                <button class="button_spacing button_search" @click="search()">查询</button>
                <button class="button_spacing button_search" style="width: 75px" @click="$parent.$parent.addArea()">添加片区</button>
                <button class="button_spacing button_search" style="width: 130px" @click="$parent.$parent.search222()">查询未划分用户</button>
              </div>
           </div>

          </div>
        </div>
      </criteria>
      <data-grid class="list_area table_sy" style="overflow: hidden" :model="model" partial='list' v-ref:grid>
        <template partial='head'>
          <tr>
            <th>
              <nobr>全选
                <input type="checkbox" @click='$parent.$parent.$parent.changeStates'  v-model='$parent.$parent.$parent.checkedAll'>
              </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 :class="[ row.color ==='red' ? 'p1' : row.color === 'yellow'? 'p':''  ]" style="text-align: center">
            <nobr>
              <input type="checkbox" v-model="row.checked" v-bind:checked="row.checked"  @click="$parent.$parent.$parent.addChecked(row)">
            </nobr>
          </td>
          <td style="text-align: center">{{row.f_userinfo_id}}</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_check_area}}</td>
          <td style="text-align: center">{{row.f_residential_area}}</td>
          <td style="text-align: center">{{row.f_address}}</td>
        </template>
      </data-grid>
    </criteria-paged>
  </div>
   <!-- <message-box></message-box>-->
  </div>
  <modal :show.sync="showModal" backdrop="false">
    <div slot="modal-header" class="modal-header">
      <h4 class="modal-title">
        选择片区
      </h4>
    </div>
    <div slot="modal-body" class="modal-body">
      <v-select :value="pianqu2" v-model='pianqu2'
                :value-single="true"
                :options='pianqu' placeholder='选择片区'
                class="select_list select"
                close-on-select width=60%"
                v-on:change="PQselected">
      </v-select>
    </div>
    <div slot="modal-footer" class="modal-footer" style="text-align: center">
      <button class="button_search" @click="ok">确认</button>
      <button class="button_search" @click="cancel">取消</button>
    </div>
  </modal>
</template>


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

  export default {
    title: '安检-区域划分',
    data () {
      return {
        checkedAll: false,
        checkrows: [],
        checkids: [],
        showModal: false,
        pianqu: [{label:'A片区',value:'A片区'},{label:'B片区',value:'B片区'},{label:'C片区',value:'C片区'}],
        pianqu2: '',
         // this.$appdata.getParam('安检片区'),  // [{label:A片区,value:A片区},{},{}...]
        model: new PagedList('rs/sql/SafeCheckArea', 10, {
          f_userinfo_id: '',
          f_user_name: '',
          f_user_phone: '',
          f_residential_area: '',
          f_check_area: '',
          f_address: ''
        }),
        show: false
      }
    },
    methods: {
      PQselected(val){
        // //tag
        if(val)
          this.pianqu2 = val
      },
      hidden () {
        this.criteriaShow = !this.criteriaShow
      },
      search () {
        this.$refs.paged.$refs.criteria.search()
      },
      selfSearch (args) {
        let condition = ''
        condition += args.model.f_userinfo_id ? ` u.f_userinfo_id = '${args.model.f_userinfo_id}'` : ' 1=1'
        condition += args.model.f_user_name ? ` and u.f_user_name = '${args.model.f_user_name}'` : ' and 1=1'
        condition += args.model.f_user_phone ? ` and u.f_user_phone = '${args.model.f_user_phone}'` : ' and 1=1'
        condition += args.model.f_check_area ? ` and u.f_check_area = '${args.model.f_check_area}'` : ' and 1=1'
        condition += args.model.f_residential_area ? ` and a.f_residential_area like '%${args.model.f_residential_area}%'` : ' and 1=1'
        condition += args.model.f_address ? ` and a.f_address like '%${args.model.f_address}%'` : ' and 1=1'
        //tag
        this.model.search(condition, args.model)
      },
      search222 (args) {
        // this.$showMessage('未划分用户查询')
         if (this.model.condition == '' || this.model.condition == null) {
          this.model.condition = ' u.f_check_area is null'
        } else {
          this.model.condition += ' and u.f_check_area is null'
        }
        this.model.search(this.model.condition)
      },
      addArea () {
        // //tag
        if (this.checkedAll) {
          // //tag
          this.showModal = true
        } else {
          if (this.checkids.length == 0) {
            // //tag
            this.$showMessage('您还没有选择用户！')
          } else {
            // //tag
            this.showModal = true
          }
        }
      },
      cancel () {
        this.showModal = false
        // this.pianqu  = ''
      },
      ok () {
        // 选择的片区
        // //tag
        // 发送请求
        this.$resetpost(`/rs/logic/checkAreaClassification`, {data:{
          checkedAll: this.checkedAll,
          pianqu: this.pianqu2,
          ids: this.checkids,
          condition: this.model.condition
          }
        })
        this.showModal = false
        this.search()
        this.checkedAll = false
        // this.pianqu  = ''
      },
      addChecked (item) {
        // //tag;
        if (!item.checked) {
          this.checkrows.push(item);
          // //tag;
        } else {
          for (let i = 0; i < this.checkrows.length; i++) {
            if (item.f_userinfo_id == this.checkrows[i].f_userinfo_id) {
              this.checkrows.splice(i , 1)
            }
          }
          // //tag;
        }
        // //tag
        let checkid = []
        for (let i = 0; i < this.checkrows.length; i++) {
          checkid.push(this.checkrows[i].f_userinfo_id)
        }
        // //tag
        this.checkids = checkid
      },
      changeStates () {
        if (this.checkedAll) { // 实现反选
          this.checkrows = [];
          for (let i = 0; i < this.$refs.paged.model.rows.length; i++) {
            this.$set('$refs.paged.model.rows[' + i + '].checked', false)
          }
        } else { // 实现全选
          for (let i = 0; i < this.$refs.paged.model.rows.length; i++) {
            this.$set('$refs.paged.model.rows[' + i + '].checked', true)
          }
          let _this = this
          let condition = this.$refs.paged.$refs.criteria.condition
          let url = this.model.url
          this.$resetpost(`${url}?pageSize=9999999`, {
            data: {
              condition: condition,
              groupitem: '',
              orderitem: 'f_residential_area',
              f_usertype:this.model.f_usertype,
              f_filialeids: this.model.f_filialeids,
              month: this.model.month,
              safeCycle:this.model.safeCycle,
              f_checktime_start:this.model.f_checktime_start,
              f_checktime_end:this.model.f_checktime_end,
              SafeCheckSX: this.model.SafeCheckSX,
              f_last_check_state: this.model.f_last_check_state
            },
          },{resolveMsg: null, rejectMsg: null}, -1).then(

            (respanse) => {
              if (respanse.data.length >= 5000) {
                this.$showMessage("数据量太大，请重新选择")
              } else {
                _this.checkrows = []
                for (let j = 0; j < respanse.data.length; j++) {
                  _this.checkrows.push(respanse.data[j])
                }
                // //tag;
              }
            })
        }
      }
    }

  }
</script>

<style scoped>
.button_search{
  width: 55px;
}
</style>
