<template>
  <div class="flex">
    <p class="bg-info text-center" style="padding: 8px;">{{ '总表分表列表' }}</p>
    <criteria-paged :model="model" v-ref:paged>
      <criteria partial='criteria' @condition-changed='$parent.selfSearch' v-ref:cri>
        <div novalidate class="form-horizontal select-overspread container-fluid auto" partial>
          <div class="row">
            <div class="col-sm-4 form-group">
              <label class="font_normal_body">客户编号</label>
              <input type="text"
                     class="input_search"
                     style="width:60%"
                     v-model="model.f_userinfo_code"
                     condition="f_userinfo_code = '{}'"
                     placeholder="客户编号"/>
            </div>
            <div class="col-sm-4 form-group button-range">
              <button class="button_search button_spacing" @click="search()">查询</button>
              <button class="button_search button_spacing"
                      style="width: max-content"
                      @click="$parent.$parent.batchAddSubMeter()">
                添加分表
              </button>
              <div
                :class="{'button_shrink_top':$parent.$parent.criteriaShow,'button_shrink_bottom':!$parent.$parent.criteriaShow}"
                @click="$parent.$parent.hidden()"
                class="button_spacing"
                style="float: right">
              </div>
            </div>
          </div>
          <div class="row" v-if="$parent.$parent.criteriaShow">
            <div class="col-sm-4 form-group">
              <label class="font_normal_body">客户名称</label>
              <input type="text"
                     class="input_search"
                     style="width:60%"
                     v-model="model.f_user_name"
                     condition="f_user_name like '%{}%'"
                     placeholder="客户名称"/>
            </div>
            <div class="col-sm-4 form-group">
              <label class="font_normal_body">详细地址</label>
              <input class="input_search"
                     condition="f_address like '%{}%'"
                     placeholder='详细地址'
                     style="width:60%"
                     type="text"
                     v-model="model.f_address">
            </div>

          </div>
        </div>
      </criteria>
      <data-grid :model="model" partial='list' style="overflow: auto" class="list_area table_sy" v-ref:grid>
        <template partial='head'>
          <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>
        </template>
        <template partial='body'>
          <td style="text-align:center">
            <button type="button" name="button" class="button_search-2 button_spacing width-60"
                    @click.stop="$parent.$parent.$parent.operate(row)">移出
            </button>
          </td>
          <td style="text-align:center">
            <nobr>{{ row.f_userinfo_code }}</nobr>
          </td>
          <td style="text-align:center">
            <nobr>{{ row.f_user_name }}</nobr>
          </td>
          <td style="text-align:center">
            <nobr>{{ row.f_meternumber }}</nobr>
          </td>
          <td style="text-align:center">
            <nobr>{{ row.f_address }}</nobr>
          </td>
          <td style="text-align:center">
            <nobr>{{ row.f_meter_brand }}</nobr>
          </td>
          <td style="text-align:center">
            <nobr>{{ row.f_meter_style }}</nobr>
          </td>

        </template>
        <template partial='foot'></template>
      </data-grid>
    </criteria-paged>
    <modal :show.sync="operateShow" v-if="operateShow" :title="operateTitle" v-ref:operateModal backdrop="false"
           @modal-close="closeModal()">
      <header slot="modal-header" class="modal-header" style="text-align: center">
        <h4 class="modal-title">{{ operateTitle }}</h4>
      </header>
      <article slot="modal-body" class="modal-body">
        <div class="form-horizontal select-overspread container-fluid auto">
          <validator name='v'>
            <div class="col-sm-12 form-group" :class="[$v.f_reason.required ? 'has-error' : '']">
              <label class="font_normal_body" for="f_reason">操作原因</label>
              <textarea type="text" style="width:87%" v-model="f_reason" rows="3"
                        placeholder='操作原因' v-validate:f_reason='{required: true }'>
              </textarea>
            </div>
          </validator>
        </div>
      </article>
      <footer slot="modal-footer" class="modal-footer">
        <button type="button" class="btn btn-success" :disabled="!$v.valid" @click='confirmBefore()'>确认</button>
        <button type="button" class="btn btn-default" @click="closeModal()">取消</button>
      </footer>
    </modal>
    <add-sub-meter-user-list :show.sync="batchAddSubMeterShow"
                             :f_filialeids="f_filialeids"
                             v-ref:addsub
    ></add-sub-meter-user-list>
  </div>
</template>

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

export default {
  data () {
    return {
      criteriaShow: false,
      batchRowList: [],
      batchAddSubMeterShow: false,
      selectRowLen: 0,
      f_reason: '',
      operateTitle: '',
      selectRow: null,
      operateShow: false,
      batchUpdateAreaShow: false,
      model: new PagedList('rs/sql/sale_getHostMeterAllUser', 6)
    }
  },
  title: '总表子表列表',
  props: ['data', 'f_filialeids'],
  ready () {
    this.search()
  },
  methods: {
    batchAddSubMeter () {
      if (!this.$login.r.find(value => value == '添加分表')) {
        this.$showAlert('你没有【添加分表】的权限，请联系管理员', 'warning', 2000)
        return
      }
      this.batchAddSubMeterShow = true
    },
    operate (row) {
      if (!this.$login.r.find(value => value == '将分表移出总表')) {
        this.$showAlert('你没有【将分表移出总表】的权限，请联系管理员', 'warning', 2000)
        return
      }
      this.selectRow = row
      this.operateTitle = '将用户移出总表'
      this.operateShow = true
    },
    confirmBefore () {
      if (this.operateTitle === '将用户移出总表') {
        this.removeHostMeter()
      } else {
        this.batchMoveIn()
      }
    },
    closeModal () {
      this.f_reason = ''
      this.operateTitle = ''
      this.operateShow = false
    },
    batchMoveIn () {
      let msg = {
        resolveMsg: `批量将用户移入总表成功！`,
        rejectMsg: `批量将用户移入总表失败！`
      }
      this.$showMessage(`您确定要将选中的${this.selectRowLen}位用户移入到总表${this.data.f_user_name}中吗?`, ['confirm', 'cancel']).then(async (res) => {
        if (res === 'confirm') {
          let data = {
            selectRows: this.batchRowList,
            reason: this.f_reason,
            f_operator: this.$login.f.name,
            f_operatorid: this.$login.f.id,
            f_orgid: this.$login.f.orgid,
            f_orgname: this.$login.f.orgs,
            f_depid: this.$login.f.depids,
            f_depname: this.$login.f.deps,
            hostMeter: this.data
          }
          await this.$resetpost('rs/logic/sale_batchMoveUserInHostMeter', {data: data}, msg)
          this.search()
        }
      })
    },
    removeHostMeter () {
      let msg = {
        resolveMsg: `将用户移出总表成功！`,
        rejectMsg: `将用户移出总表失败！`
      }
      console.log('看下详细的用户信息', this.selectRow)
      this.$showMessage(`您确定要将该用户${this.selectRow.f_user_name}自总表${this.data.f_user_name}中移出吗?`, ['confirm', 'cancel']).then(async (res) => {
        if (res === 'confirm') {
          let data = {
            row: this.selectRow,
            reason: this.f_reason,
            f_operator: this.$login.f.name,
            f_operatorid: this.$login.f.id,
            f_orgid: this.$login.f.orgid,
            f_orgname: this.$login.f.orgs,
            f_depid: this.$login.f.depids,
            f_depname: this.$login.f.deps
          }
          this.closeModal()
          await this.$resetpost('rs/logic/sale_removeUserByHostMeter', {data: data}, msg)
          this.search()
        }
      })
    },
    hidden () {
      this.criteriaShow = !this.criteriaShow
    },
    cancel () {
      this.$dispatch('cancel')
    },
    search () {
      this.$refs.paged.$refs.cri.search()
    },
    selfSearch (args) {
      if (this.data) {
        args.condition = args.condition + `and f_host_meter_id = '${this.data.f_host_meter_id}'`
      }
      this.model.search(args.condition, args.model)
    }
  },
  events: {
    'batchMove' (selectRows) {
      if (selectRows.length > 0) {
        this.batchRowList = selectRows
        this.selectRowLen = selectRows.length
        this.batchMoveIn()
      }
    }
  },
  computed: {},
  watch: {
    'data' (val) {
      if (val) {
        this.search()
      }
    }
  }
}
</script>
