<template>
  <div style="padding: 0 100px;">
    <criteria-paged :model="model" v-ref:paged>
      <criteria partial='criteria' v-ref:criteria @condition-changed="$parent.selfSearch">
        <div novalidate class="form-inline" partial></div>
      </criteria>
      <data-grid :model="model" v-ref:grid  partial='list'>
        <template partial='head'>
          <tr>
            <th colspan="4">移动设备管理</th>
          </tr>
          <tr>
            <th>新增设备</th>
            <th colspan="2">
              设备名称：<input type="text" class="form-control device" v-model="$parent.$parent.$parent.move.name">
              设备标识：<input type="text" class="form-control device" v-model="$parent.$parent.$parent.move.identification">
            </th>
            <th><button class="btn btn-success" @click="$parent.$parent.$parent.addDeviceInfo()">新增</button></th>
          </tr>
          <tr>
            <th>设备编号</th>
            <th>设备名称</th>
            <th>设备识别码</th>
            <th>操作</th>
          </tr>
        </template>
        <template partial='body'>
          <td>{{row.id}}</td>
          <td>{{row.name}}</td>
          <td>{{row.identification}}</td>
          <td>
            <button @click="$parent.$parent.$parent.updateDevice(row)" class="btn btn-warning">修改</button>
            <button @click="$parent.$parent.$parent.delDeveInfo(row.id)" class="btn btn-warning">删除</button>
          </td>
        </template>
      </data-grid>
    </criteria-paged>
  </div>
  <!--修改模态框开始-->
  <modal v-ref:modal :show.sync="setShow" :backdrop="false" class="auto">
    <header slot="modal-header" class="modal-header">
      <button type="button" class="close" @click="close"><span>&times;</span></button>
      <h4 class="modal-title">修改</h4>
    </header>
    <article slot="modal-body" class="modal-body modifystyle">
      <table class="table-condensed" style="margin: 0 auto;">
        <tr>
          <td>设备名称：</td>
          <td><input type="text" v-model="upmove.name" class="input-sm device"></td>
        </tr>
        <tr>
          <td>设备标识：</td>
          <td><input type="text" v-model="upmove.identification" class="input-sm device"></td>
        </tr>
      </table>
    </article>
    <footer slot="modal-footer" class="footerbtn">
      <button  type="button" class="btn btn-success" @click='save()'>保存</button>
    </footer>
  </modal>
  <!--修改模态框结束-->
</template>

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

  export default {
    title: '移动设备管理',
    data () {
      return {
        model: new PagedList('rs/sql/getMoveDeviceManager', 20, {}),
        move: {
          name: '',
          identification: ''
        },
        setShow: false,
        upmove: {
          id: 0,
          name: '',
          identification: ''
        }
      }
    },
    ready () {
      this.search()
    },
    methods: {
      search () {
        this.$refs.paged.$refs.criteria.search()
      },
      selfSearch (args) {
        this.model.search(args.condition, args.model)
      },
      // 根据编号删除设备
      delDeveInfo (id) {
        this.$resetdelete('rs/entity/t_movedeviceinfo', {id: id}, {resolveMsg: '删除成功！', rejectMsg: '删除失败！'}).then(() => {
          this.search()
        })
      },
      // 新增设备
      addDeviceInfo () {
        if (this.move.name) {
          if (this.move.identification) {
            // 新增
            this.$resetpost('rs/entity/t_movedeviceinfo', this.move).then(() => {
              this.search()
            })
          } else {
            this.$showMessage('设备标识不能为空！')
          }
        } else {
          this.$showMessage('设备名称不能为空！')
        }
      },
      // 更新设备信息
      updateDevice (row) {
        this.upmove.id = row.id
        this.upmove.name = row.name
        this.upmove.identification = row.identification
        this.setShow = true
      },
      // 关闭模态框
      close () {
        this.setShow = false
      },
      // 保存修改数据
      save () {
        this.$resetpost('rs/entity/t_movedeviceinfo', this.upmove).then(() => {
          this.setShow = false
          this.search()
        })
      }
    }
  }
</script>

<style scoped>
  .device{
    width: 300px;
    margin-left: 20px;
  }
</style>
