<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_userinfo_code" placeholder='客户编号'
                     condition="tui.f_userinfo_code = '{}'" @keyup.enter="search()">
            </div>
            <div class="form-group col-sm-3">
              <label class="font_normal_body">客户名称</label>
              <input type="text" class="input_search" v-model="model.f_user_name"
                     style="width: 60%" placeholder="客户名称" condition="tui.f_user_name like '%{}%'">
            </div>
            <div class="form-group col-sm-3" >
              <label class="font_normal_body">地址</label>
              <input type="text" class="input_search" v-model="model.f_address"
                     style="width: 60%" placeholder="地址" condition="tua.f_address like '%{}%'">
            </div>
            <div class="form-group col-sm-3" >
              <label class="font_normal_body">小区名称</label>
              <input type="text" class="input_search" v-model="model.f_residential_area"
                     style="width: 60%" placeholder="小区名称" condition="tua.f_residential_area like '%{}%'">
            </div>
          </div>
          <div class="row">
            <div class="form-group col-sm-4" >
              <label class="font_normal_body">客户类型</label>
              <v-select :value.sync="model.f_user_type" v-model='model.f_user_type'
                        :value-single="true" style="width: 60%"
                        class="select_list select"
                        :options='$parent.$parent.userTypes' placeholder='客户类型'
                        close-on-select
                        condition="tuf.f_user_type ='{}'"></v-select>
            </div>
            <div class="form-group col-sm-4">
              <label class="font_normal_body">首次通气开始</label>
              <datepicker
                :value.sync="model.f_gas_start"
                placeholder='首次通气开始' style="width: 60%"
                :disabled-days-of-week="[]"
                :format="'yyyy-MM-dd'"
                :show-rest-button="reset"
                v-model="model.f_gas_start"
                condition="tui.f_uservent_date > ='{} 00:00:00'">
              </datepicker>
            </div>
            <div class="form-group col-sm-4">
              <label class="font_normal_body">首次通气结束</label>
              <datepicker
                :value.sync="model.f_gas_end"
                placeholder='首次通气结束' style="width: 60%"
                :disabled-days-of-week="[]"
                :format="'yyyy-MM-dd'"
                :show-rest-button="reset"
                v-model="model.f_gas_end"
                condition="tui.f_uservent_date <=  '{} 23:59:59'">
              </datepicker>
            </div>
          </div>
          <div class="row">
            <div class="form-group col-sm-4" >
              <label class="font_normal_body">用气性质</label>
              <v-select :value.sync="model.f_gasproperties" v-model='model.f_gasproperties'
                        :value-single="true" style="width: 60%"
                        class="select_list select"
                        :options='$parent.$parent.gasproperties' placeholder='用气性质'
                        close-on-select
                        condition="tuf.f_gasproperties ='{}'"></v-select>
            </div>
            <div class="form-group col-sm-4" >
              <label class="font_normal_body">表具状态</label>
              <v-select :value.sync="model.f_table_state" v-model='model.f_table_state'
                        :value-single="true" style="width: 60%"
                        class="select_list select"
                        :options='$parent.$parent.table_states' placeholder='表具状态'
                        close-on-select
                        condition="tuf.f_table_state ='{}'"></v-select>
            </div>
          </div>
          <div class="row">
            <div class="form-group col-sm-2 button-range" >
              <export-excel-safe  v-if="$parent.$parent.excelStart"
                                  :data="$parent.$parent.searchData"
                                 :field="$parent.$parent.excelHeaders"
                                 :choose-col="true"
                                 sqlurl="rs/logic/SafeExportExcel" sql-name="getUserByCheckBook" template-name='安检册明细'></export-excel-safe>
              <button class="button_search" style="margin-right: 10px"  @click="search()" v-el:cba>查询</button>
              <button class="button_spacing button_search-1" @click='$parent.$parent.removes()' v-if="$parent.$parent.bookList.length>0 && $parent.$parent.$parent.removeStart" >移出安检册</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" v-model="$parent.$parent.$parent.checkAll"></input>全选</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 v-if="$parent.$parent.$parent.removeStart"><nobr>操作</nobr></th>
          </tr>
        </template>
        <template partial='body' >
          <tr >
            <td style="text-align: center">
              <nobr><input type="checkbox" :checked="$parent.$parent.$parent.checkModel(row)"
                           @change="$parent.$parent.$parent.checkChange(row, $event)"></input>
              </nobr>
            </td>
            <td style="text-align:center;">{{$index+1}}</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_uservent_date}}</td>
            <td style="text-align: center" v-if="$parent.$parent.$parent.removeStart">
              <button class="button_spacing button_search-1"    @click='$parent.$parent.$parent.remove(row)'>移出安检册</button>
            </td>
          </tr>
        </template>
        <template partial='foot'></template>
      </data-grid>
    </criteria-paged>
  </div>
</template>

<script>
import {PagedList} from 'vue-client'
import bus from "../../../bus";

export default {
  title: '安检记录列表',
  props: ['row'],
  data() {
    return {
      checkAll: false,
      rowdata: this.row,
      bookList: [],
      searchData: {
        condition: "1=1"
      },
      excelHeaders: {
        'f_userinfo_code': '客户编号',
        'f_user_name': '客户姓名',
        'f_user_phone': '客户电话',
        'f_address': '客户地址',
        'f_uservent_date': '首次通气日期'
      },
      gasproperties:[{
        label: '全部',
        value: ''
      }, ...this.$appdata.getParam('用气性质')],
      table_states:[{
        label: '全部',
        value: ''
      },{
        label: '正常',
        value: '正常'
      },{
        label: '停用',
        value: '停用'
      },{
        label: '待开通',
        value: '待开通'
      } ],
      userTypes: [{label: '全部', value: ''}, {label: '民用', value: '民用'}, {label: '非民用', value: '非民用'}],
      model: new PagedList('rs/sql/getUserByCheckBook', 50)
    }
  },
  ready() {
    if (this.row) {
      let condition = ''
      if (this.row.id) {

        condition = `tua.f_check_book_id ='${this.row.id}'`
      } else {
        condition = `1=1`
      }

      // if(this.row.f_check_book_type1=='小区'){
      //   this.model.url = 'rs/sql/getUserByCheckBook'
      //   condition  = `ta.f_check_book_id =${this.row.f_check_book_id} and ta.id=${this.row.id}`
      // }else{
      //   this.model.url = 'rs/sql/getUserByCheckBookCompany'
      //   condition  = `tc.f_check_book_id =${this.row.f_check_book_id} and tc.id=${this.row.id}`
      // }
      this.model.search(condition)
      this.searchData.condition = condition
      //只显示用户页面
      this.row.f_check_book_type = '用户'
    }
  },
  watch: {
    'checkAll'(val) {
      if (!val) {
        this.bookList = []
      }
      //如果是全选，则查询这个安检册下的用户

      if (val) {
        //遍历this.model.rows
        this.model.rows.forEach(res => {
          this.bookList.push(res.f_userinfo_id)
        })
      }
    },
    'row'(val) {
      if (val) {
        this.rowdata = val
        let condition = ''
        condition = `tua.f_check_book_id ='${val.id}'`
        // if(this.row.f_check_book_type1=='小区'){
        //   condition  = `ta.f_check_book_id =${val.f_check_book_id} and ta.id=${val.id}`
        // }else{
        //   condition  = `tc.f_check_book_id =${val.f_check_book_id} and tc.id=${val.id}`
        // }
        this.model.search(condition)
      }
    }
  },
  methods: {
    setCheckAll() {
      this.checkAll = this.checkAll ? false : true;
      // 全选改变后，清空选中数据
      this.bookList = []
    },
    checkModel(row) {
      if (this.bookList.findIndex(res => res === row.f_userinfo_id) !== -1) {
        return true
      } else {
        return false
      }
    },
    checkChange(row, e) {
      if (e.target.checked) {
        this.bookList.push(row.f_userinfo_id)
      } else {
        this.bookList.splice(this.bookList.findIndex(res => res === row.f_userinfo_id), 1)
      }
    },
    removes() {

      if (this.bookList.length === 0) {
        this.$showMessage('请选择用户')
        return
      }
      this.$showMessage("确认将用户移出此安检册?", ['confirm']).then(res => {
        if (res === 'confirm') {
          //for遍历this.bookList,将每个用户移出安检册
          var c = "("
          for (var i = 0; i < this.bookList.length; i++) {
            c += `'${this.bookList[i]}'` + ","
          }
          //去掉最后一个逗号
          c = c.substring(0, c.length - 1)
          c += ")"
          let data = {
            condition: c,
            f_book_id: this.row.id
          }
          this.$http.post('rs/logic/removesCheckBookUser', {data: data}).then(res => {
            this.$showMessage('移出成功')
            this.$refs.paged.$refs.criteria.search()
          })
        }
      })
    },
    remove(row) {

      this.$showMessage("确认移出此安检册?", ['confirm']).then(res => {
        if (res === 'confirm') {
          let data = {
            f_userinfo_id: row.f_userinfo_id,
            f_book_id: this.row.id
          }
          this.$http.post('rs/logic/removeUserByCheckBook', {data: data}).then(res => {
            this.$showMessage('移出成功')
            this.$refs.paged.$refs.criteria.search()
          })
        }
      })
    },
    selfSearch(args) {
      if (this.rowdata.id) {
        args.condition += ` and tua.f_check_book_id ='${this.rowdata.id}'`
        // if(this.rowdata.f_check_book_type1=='小区'){
        //   args.condition += `and ta.f_check_book_id =${this.rowdata.f_check_book_id} and ta.id=${this.rowdata.id}`
        // }else{
        //   args.condition += `and tc.f_check_book_id =${this.rowdata.f_check_book_id} and tc.id=${this.rowdata.id}`
        // }
        this.model.search(args.condition)
        this.searchData.condition = args.condition
      } else {
        this.$showMessage('请选择片区')
      }
    }
  },
  computed: {
    excelStart() {
      return this.$login.r.includes('安检册用户导出')
    },
    removeStart() {
      return this.$login.r.includes('用户移出安检册')
    }
  }
}
</script>
