<template>
  <div id="boxlist" class="flex" style="flex:1; ">
    <criteria-paged :model="model" v-ref:paged>
      <criteria partial='criteria' @condition-changed='search' v-ref:cri>
        <div novalidate class="form-inline" partial>
          <button class="button_search button_spacing" @click="$parent.$parent.save()" >保存更改</button>

          <button class="button_clear button_spacing" @click="$parent.$parent.back()" >添加用户</button>

          <button class="button_clear button_spacing" @click="$parent.$parent.back()" >返 回</button>


        </div>
      </criteria>

      <data-grid class="list_area table_sy" :model="model" partial='list' v-ref:grid>
        <template partial='head'>
          <tr>
            <th>序号</th>
            <th>客户姓名</th>
            <th>客户地址</th>
            <th>客户电话</th>
            <th>操作</th>
          </tr>
        </template>
        <template partial='body'>
          <td style="text-align: center;">{{row.index = $index+1}}</td>
          <td style="text-align: center;">{{row.f_user_name}}</td>
          <td style="text-align: center;">{{row.f_address}}</td>
          <td style="text-align: center;">{{row.f_user_phone}}</td>
          <td style="text-align: center;">
            <a style="cursor:pointer" @click.stop="$parent.$parent.$parent.moveup(row)">上移 </a>
            <a style="cursor:pointer" @click.stop="$parent.$parent.$parent.movedown(row)">下移 </a>
            <a style="cursor:pointer" @click.stop="$parent.$parent.$parent.moveout(row)">移出</a>
          </td>
        </template>
      </data-grid>
    </criteria-paged>

  </div>
  <modal :show.sync="addUserShow" width="80%" title="选择合并后用户" v-ref:modal large backdrop="false">
    <article slot="modal-body" class="modal-body">
      <add-user-to-book :mergeinfo=addUserShow :bookinfo="bookinfo"></add-user-to-book>
    </article>
    <footer slot="modal-footer" class="modal-footer">
    </footer>
  </modal>
</template>



<script>
  import { PagedList } from 'vue-client'
  import HttpResetClass from 'vue-client/src/plugins/HttpResetClass'

export default {
    title: '用户列表',
    data () {
      return {
        model: new PagedList('rs/sql/getBookList', 20),
        firstIndex: 0,
        isSet: true,
        addUserShow: false
      }
    },
    props: ['bookinfo'],
    ready () {
      this.model.search(`files.f_meter_book_num =${this.bookinfo.id}`).then(() => {
        this.firstIndex = 0
        if (this.model.rows.length > 0) {
          this.firstIndex = this.model.rows[0].f_meter_book_sort
        }
      })
    },
    methods: {
      search () {
        this.$dispatch('search')
      },
      moveup (row) {
        if (row.index == 1) {
          return
        }
        this.isSet = false
        let a = this.model.rows[row.index - 1]
        this.model.rows[row.index - 1] = this.model.rows[row.index - 2]
        this.model.rows[row.index - 2] = a
        let b = this.model.rows
        this.model.rows = []
        this.model.rows = b
        // this.isSet = true
      },
      movedown (row) {
        if (row.index == this.model.rows.length) {
          return
        }
        this.isSet = false
        let a = this.model.rows[row.index]
        this.model.rows[row.index] = this.model.rows[row.index - 1]
        this.model.rows[row.index - 1] = a
        let b = this.model.rows
        this.model.rows = []
        this.model.rows = b
        // this.isSet = true
      },
      moveout (row) {
        this.$showMessage('此操作将会把用户移除此抄表册，请确认是否继续？', ['confirm', 'cancel']).then((res) => {
          if (res === 'confirm') {
            let parm = {}
            parm.f_userfiles_id = row.f_userfiles_id
            parm.version = row.version
            parm.f_meter_book_num = ''
            parm.f_meter_book_sort = ''
            this.$resetpost('rs/entity/t_userfiles', parm, {
              resolveMsg: '删除成功',
              rejectMsg: '未通过，删除出错!!!'
            }).then(() => {
              this.model.rows.splice(row.index - 1, 1)
            })
          }
        })
      },
      save () {
        if (this.model.rows.length == 0) {
          return
        }
        this.model.rows.forEach((value, index) => {
          this.doSave(value, index).then(() => {
          })
        })
        this.$parent.refresh = -1 * this.$parent.refresh
        this.$parent.meterShow = false
      },
      back () {
        this.$parent.meterShow = false
        this.$parent.bookinfo = {}
      },
      async doSave (value, index) {
        let parm = {}
        parm.f_userfiles_id = value.f_userfiles_id
        parm.version = value.version
        parm.f_meter_book_sort = Number(this.firstIndex)
        this.firstIndex = Number(this.firstIndex) + 1

        if (index === this.model.rows.length - 1) {
          new HttpResetClass().load('POST', 'rs/entity/t_userfiles', parm, {resolveMsg: '提交成功！', rejectMsg: null}).then(() => {

          })
        } else {
          new HttpResetClass().load('POST', 'rs/entity/t_userfiles', parm, {resolveMsg: null, rejectMsg: null})
        }
      }
    },
    watch: {
      bookinfo () {
        this.model.search(`f_meter_book_num = ${this.bookinfo.id}`).then(() => {
          this.firstIndex = -1
          if (this.model.rows.length > 0) {
            this.firstIndex = this.model.rows[0].f_meter_book_sort
          }
        })
      },
      'model.rows': {
        handler (val, oldVal) {
          if (this.model.rows.length > 0 && this.isSet === true) {
            this.firstIndex = this.model.rows[0].f_meter_book_sort
          }
          this.isSet = true
        },
        deep: true
      }
    }
  }
</script>




<style>
  .box {
    width: 727px;
    height: 175px;
    border-radius: 2px;
    background-color: #fafafa;
    border: 1px solid #999999;
    margin-top: 13px;
  }
  .datapanel {
    color: #333;
    background-color: white;
    box-shadow: darkgrey 0.5px 0.5px 0.5px 0.5px ;
    padding: 10px 30px 10px 30px;
    border-radius:15px;
  }
</style>
