<template>
  <div>
    <div id="boxlist" class="flex" style="flex:1; ">
      <criteria-paged :model="model" v-ref:paged>
        <criteria partial='criteria' @condition-changed='$parent.conditionSearch()' v-ref:cri>
          <div novalidate class="form-horizontal  select-overspread auto" partial>
            <div class="row">
              <div class="col-sm-4 form-group">
                <label class="font_normal_body">客户编号</label>
                <input type="text" class="input_search" v-model="model.f_userinfo_code"
                       condition="f_userinfo_code like '%{}%'" style="width:60%" placeholder='客户编号'>
              </div>
              <div class="col-sm-4 form-group">
                <label class="font_normal_body">客户名称</label>
                <input type="text" class="input_search" v-model="model.f_user_name"
                       condition="f_user_name like '%{}%'" style="width:60%" placeholder='客户名称'>
              </div>
              <div class="col-sm-4 form-group">
                <label class="font_normal_body">详细地址</label>
                <input type="text" class="input_search" v-model="model.f_address"
                       condition="f_address like '%{}%'" style="width:60%" placeholder='详细地址'>
              </div>
              <div class="col-sm-4 form-group">
                <label class="font_normal_body">小&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;区</label>
                <input type="text" class="input_search" v-model="model.f_residential_area"
                       condition="f_residential_area like '%{}%'" style="width:60%" placeholder='小区'>
              </div>
              <div class="col-sm-4 form-group">
                <label class="font_normal_body">楼&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号</label>
                <input type="text" class="input_search" v-model="model.f_building"
                       condition="f_building like '%{}%'" style="width:60%" placeholder='楼号'>
              </div>
              <div class="col-sm-4 form-group">
                <label class="font_normal_body">单&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;元</label>
                <input type="text" class="input_search" v-model="model.f_unit"
                       condition="f_unit like '%{}%'" style="width:60%" placeholder='单元'>
              </div>
              <div class="col-sm-4 form-group">
                <label class="font_normal_body">楼&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;层</label>
                <input type="text" class="input_search" v-model="model.f_floor"
                       condition="f_floor like '%{}%'" style="width:60%" placeholder='楼层'>
              </div>
              <div class="col-sm-4 form-group">
                <label class="font_normal_body">门&nbsp;&nbsp;牌&nbsp;&nbsp;号</label>
                <input type="text" class="input_search" v-model="model.f_room"
                       condition="f_room like '%{}%'" style="width:60%" placeholder='门牌号'>
              </div>

              <div class="span" style="float:right;">
                <button class="button_search button_spacing" type="button" style="width: max-content;margin-left: auto;"
                        @click="search">查询
                </button>
                <button class="button_new button_spacing" type="button" style="width: max-content;margin-left: auto;"
                        @click="$parent.$parent.clear()">清除
                </button>
                <button class="button_search button_spacing" type="button" style="width: max-content;margin-left: auto;"
                        @click="$parent.$parent.dropAll">移出所选
                </button>
              </div>
            </div>
          </div>
        </criteria>
        <data-grid :model="model" partial='list' class="list_area table_sy" v-ref:grid>
          <template partial='head'>
            <tr>
              <th>
                <input type="checkbox" id="checked" @click.stop="$parent.$parent.$parent.selectAll"></input>
              </th>
              <th>序号</th>
              <th>用户编号</th>
              <th>用户名称</th>
              <th>小区</th>
              <th>楼号</th>
              <th>单元</th>
              <th>楼层</th>
              <th>门牌号</th>
              <th>详细地址</th>
              <th>绑定状态</th>
              <th>操作</th>
            </tr>
          </template>
          <template partial='body'>
            <td>
              <input type="checkbox" class="check"></input>
            </td>
            <td style="text-align: center;">{{ $index + 1 }}</td>
            <td style="text-align: center;">{{ row.f_userinfo_code }}</td>
            <td style="text-align: center;" v-show="false">{{ row.f_userinfo_id }}</td>
            <td style="text-align: center;">{{ row.f_user_name }}</td>
            <td style="text-align: center;">{{ row.f_residential_area }}</td>
            <td style="text-align: center;">{{ row.f_building }}</td>
            <td style="text-align: center;">{{ row.f_unit }}</td>
            <td style="text-align: center;">{{ row.f_floor }}</td>
            <td style="text-align: center;">{{ row.f_room }}</td>
            <td style="text-align: center;">{{ row.f_address }}</td>
            <td style="text-align: center;">{{ row.f_adjustable_id !== null ? '已绑定' : '未绑定' }}</td>
            <td style="text-align:center">
              <button class="btn btn-link " type="button" style="width: max-content"
                      @click="$parent.$parent.$parent.dropOne(row.f_userinfo_id)">移出
              </button>
            </td>
          </template>
        </data-grid>
      </criteria-paged>
    </div>
  </div>
</template>
<script>
import {PagedList} from 'vue-client'
import {remove} from 'vue-client/src/stores/Remove.js'

export default {
  title: '调压箱',
  data () {
    return {
      model: new PagedList('rs/sql/adjustableUserQuery', 20),
      tabConfigList: this.tabConfigList
    }
  },
  props: ['data'],
  ready () {
    this.model.search(`f_adjustable_id = ${this.data.id} `)
    console.log('ready------------->this.data.id', this.data.id)
    console.log('ready------------->this.$login.f.orgid', this.$login.f.orgid)
  },
  methods: {
    clear () {
      Object.keys(this.$refs.paged.$refs.cri.model).forEach((key) => {
        this.$refs.paged.$refs.cri.model[key] = []
      })
    },
    conditionSearch (args) {
      console.log('触发')
      console.log(this.$refs.paged.$refs.cri.condition)
      this.model.search(`${this.$refs.paged.$refs.cri.condition} and f_adjustable_id = ${this.data.id} `)
    },
    refresh () {
      this.$parent.$refs.list.$refs.paged.$refs.cri.search()
    },
    selectAll () {
      const checkboxes = document.querySelectorAll('.check')
      checkboxes.forEach(checkbox => {
        checkbox.checked = event.target.checked
      })
    },
    clearSelect () {
      const checkboxes = document.querySelectorAll('.check')
      checkboxes.forEach(checkbox => {
        checkbox.checked = false
      })
    },
    clearChecked () {
      const checkboxes = document.querySelectorAll('#checked')
      checkboxes.forEach(checkbox => {
        checkbox.checked = false
      })
    },
    dropUser (f_userinfo_id) {
      console.log('移出---->', f_userinfo_id)
      let sql = `UPDATE t_userfiles
                 SET f_adjustable_id = NULL
                 WHERE f_userinfo_id = (SELECT info.f_userinfo_id
                                        FROM (t_userfiles files LEFT JOIN t_userinfo info
                                              ON files.f_userinfo_id = info.f_userinfo_id)
                                        WHERE files.f_adjustable_id = '${this.data.id}'
                                          AND info.f_userinfo_id = '${f_userinfo_id}' )`
      this.$resetpost('/rs/logic/runSQL', {data: {sql: sql}}).then(
        (res) => {
          this.model.search(`f_adjustable_id = ${this.data.id} `)
        }
      )
      this.model.search(`f_adjustable_id = ${this.data.id} `)
    },
    dropOne (f_userinfo_id) {
      this.$showMessage('确认移出此用户？', ['confirm', 'cancel']).then(
        (response) => {
          if (response === 'confirm') {
            this.dropUser(f_userinfo_id)
            this.refresh()
          }
        })
    },
    dropAll () {
      this.$showMessage('确认移出所选？', ['confirm', 'cancel']).then(
        (response) => {
          if (response === 'confirm') {
            const checkboxes = document.querySelectorAll('.check:checked')
            const selectedUserinfoCodes = []
            checkboxes.forEach(checkbox => {
              const userinfoId = checkbox.parentElement.nextElementSibling.nextElementSibling.nextElementSibling.textContent
              selectedUserinfoCodes.push(userinfoId)
            })
            console.log('Codes:', selectedUserinfoCodes)
            let toJson = JSON.stringify(selectedUserinfoCodes)
            if (selectedUserinfoCodes.length === 0) {
              this.$showMessage('选择为空')
              return
            }
            console.log(selectedUserinfoCodes)
            this.$resetpost('/rs/logic/removeAdjustBoxUsers', {
              data: {
                codes: selectedUserinfoCodes,
                f_adjustable_id: this.data.id,
                f_orgid: this.$login.f.orgid
              }
            }).then((res) => {
              if (res.data === 200) {
                this.model.search(`f_adjustable_id = ${this.data.id} `)
                this.clearSelect()
                this.clearChecked()
                this.refresh()
              }
            })
          }
        })
      this.model.search(`f_adjustable_id = ${this.data.id} `)
    },
    remove () {
      return remove
    },
    search () {
      this.$dispatch('search')
    }
  },
  watch: {
    data () {
      this.model.search(`f_adjustable_id = ${this.data.id} `)
    }
  }
}
</script>
