<template>
  <div class="flex">
    <p  class="bg-info text-center" style="padding: 8px;">
      单值管理
      <span class="btn btn-link add-postition" @click="add()">新增</span>
    </p>
    <div class="form-inline auto" style="margin-bottom: 5px;">
      <div class="row">
        <div class="col-sm-4 form-group">
          <label>参数名称：</label>
          <input type="text" class="input_search"  placeholder='请输入查找的参数名' v-model="param" @keyup.enter="filterParams(param)">
        </div>
        <div class="col-sm-4 form-group button-range"  style="float:left;">
          <button class="btn btn-primary" @click="filterParams(param)">查询</button>
        </div>
      </div>
    </div>
    <div class="span">
      <partial-view v-ref:single-load>
        <data-grid :model="model" v-ref:grid >
          <template partial='head'>
            <tr>
              <th>序号</th>
              <th>名称</th>
              <th>参数值</th>
              <th>操作</th>
            </tr>
          </template>
          <template partial='body'>
            <td>{{$index+1}}</td>
            <td>{{row.name}}</td>
            <!-- <td>{{row}}</td> -->
            <td>
              {{row.value}}
              <!-- <input type="text" v-model="row"> -->
              <!-- <input type="text" v-model="row.value" @dblclick.stop="$parent.$parent.modify(row, $key)"
              :class="{'edit-tree': $parent.$parent.key === $key, 'no-edit': $parent.$parent.key !== $key}"
              :readonly="$parent.$parent.key !== $key" @blur="$parent.$parent.clear(row, $key)"> -->
            </td>

            <td class="flex-around">
              <button type="button" name="button" class="btn btn-link" @click.stop="$parent.$parent.$parent.modifyParam(row)">修改</button>
              <button type="button" name="button" class="btn btn-link" @click.stop="$parent.$parent.$parent.deleteItem(row)">删除</button>
            </td>
          </template>
        </data-grid>
      </partial-view>
    </div>
    <modal :show.sync="show" v-ref:modal backdrop="false">
      <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">
        <div class="row">
        <div class="col-sm-6 from-group">
          <label for="">单值名称</label>
          <input type="text" class="input_search" style="width: 60%" v-model="selectItem.name">
        </div>
        <div class="col-sm-6 from-group">
          <label for="">单值内容</label>
          <input type="text" class="input_search" style="width: 60%" v-model="selectItem.value">
        </div>
        </div>
      </article>

      <footer slot="modal-footer" class="modal-footer">
        <button v-show="show" type="button" class="btn btn-default" @click='close'>取消</button>
        <button v-show="show" type="button" class="btn btn-success" @click='confirm'>确认</button>
      </footer>
    </modal>
  </div>
</template>
<script>


  export default {
    title: '用户操作',
    data () {
      return {
        selectItem: {
          name: '',
          value: ''
        },
        params: null,
        model: {
          rows: []
        },
        show: false
      }
    },
    ready () {
      // this.model.rows = AppData.singleValues
      this.loadSingle()
    },
    methods: {
      loadSingle () {
        this.$refs.singleLoad.load('rs/sql/singleTable', {data: {tablename: 't_singlevalue', condition: '1=1'}}).then((res) => {
          this.model.rows = this.params = res.data
        })
      },
      deleteItem (row) {
        this.$showMessage('删除后不可恢复，确认删除吗？', ['confirm', 'cancel']).then((res) => {
          if (res === 'confirm') {
            this.$refs.singleLoad.load('rs/logic/deleteValue', {tablename: 't_singlevalue', id: row.id}).then((res) => {
              this.loadSingle()
            })
          }
        })
      },
      filterParams (param) {
        if (param && param !== "") {
          // this.model.rows = []
          this.model.rows = this.params.filter((item) => {
            return item.name.includes(param)
          })
          // for (var i = 0; i < keys.length; i++) {
          //   this.model.rows[keys[i]] = item.name[keys[i]]
          // }
        }else {
          this.model.rows = this.params
        }
      },
      add () {
        this.show = true
      },
      modifyParam (row) {
        this.show = true
        // this.selectItem = row
        this.selectItem.name = row.name
        this.selectItem.id = row.id
        this.selectItem.value = row.value
      },
      confirm () {
        this.$refs.singleLoad.load('rs/entity/t_singlevalue', this.selectItem).then((res) => {
          this.show = false
          // 如果没有id，需要在数组中添加
          this.loadSingle()
          this.selectItem = {
            name: '',
            value: ''
          }
        })
      },
      // 关闭模态框
      close () {
        this.show = false
        this.selectItem = {
          name: '',
          value: ''
        }
      }
      // modify (row, key) {
      //   this.value = row
      //   this.key = key
      // },
      // clear (row, key) {
      //   if (this.key) {
      //     this.model.rows[key] = this.value
      //     this.value = null
      //     this.key = null
      //   }
      // }
    }

  }
</script>
