<template>
  <div class="flex">
    <p class="bg-info text-center" style="padding: 8px;">参数管理
      <span class="btn btn-link add-postition" @click="add('t_parameter')">新增</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:params-load>
        <data-grid :model="model" v-ref:params @select-changed="selected" >
          <template partial='head'>
            <tr>
              <th>序号</th>
              <th>名称</th>
              <th>操作</th>
            </tr>
          </template>
          <template partial='body'>
            <td>{{$index+1}}</td>
            <td>{{row.name}}</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.deleteParam(row)">删除</button>
            </td>
          </template>
        </data-grid>
      </partial-view>
    </div>

    <p v-if="selectItem" class="bg-info text-center" style="padding: 8px;margin: 8px 0px;">
      {{selectItem.name}}
      <span class="btn btn-link add-postition" @click="add('t_paramvalue')">新增</span>
    </p>
    <div v-if="selectItem" class="span">
      <partial-view v-ref:selects-load>
        <data-grid :model="params" v-ref:selects >
          <template partial='head'>
            <tr>
              <th>序号</th>
              <th>名称</th>
              <th>操作</th>
            </tr>
          </template>
          <template partial='body'>
            <td>{{$index+1}}</td>
            <td>{{row.name}}</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.deleteParam(row, $index)">删除</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="from-group">
          <label for="">参数名称</label>
          <input type="text" class="form-control" v-model="modifyItem.name" @keyup.enter="confirm">
        </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 {
        allParams: null,  // 获取到所有的参数
        model: {  // 参数列表显示的数据
          rows: []
        },
        selectItem: null, // 选择的参数
        params: { // 选择的参数的具体内容
          rows: []
        },
        selectContent: null, // 选中的一条数据（包含参数或参数的具体内容）
        modifyItem: {
          name: ''
        }, // 要修改的参数
        show: false, // 是否显示添加修改模态框
      }
    },
    ready () {
      this.model.rows = Object.keys(this.$appdata.params)
      this.loadParams()
    },
    methods: {
      // 加载全部参数
      loadParams () {
        this.$refs.paramsLoad.load('rs/sql/hql/simpleHql', {data: {tablename: 't_parameter'}}).then((res) => {
          this.model.rows = this.allParams = res.data
        })
      },
      selected (val) {
        this.selectItem = val.val
        this.params.rows = val.val.f_paramvalues
      },
      filterParams (param) {
        this.selectItem = null
        if (param && param !== "") {
          this.model.rows = this.allParams.filter((item) => {
            return item.name.includes(param)
          })
        }else {
          this.model.rows = this.allParams
        }
      },
      // 添加参数或添加参数内容
      add (type) {
        this.show = true
        this.modifyItem.EntityType = type
      },
      // 修改参数或添加参数内容
      modifyParam (row) {
        this.show = true
        this.selectContent = row
        this.modifyItem.name = row.name
        this.modifyItem.id = row.id
        this.modifyItem.EntityType = row.EntityType
        // this.tempName = row.name
      },
      // 删除
      deleteParam (row, index) {
        if (row.EntityType === 't_parameter') {
          this.$showMessage('删除后不可恢复，确认删除吗？', ['confirm', 'cancel']).then((res) => {
            if (res === 'confirm') {
              this.$refs.paramsLoad.load('rs/logic/deleteParam', row).then((res) => {
                this.loadParams()
                this.selectItem = null
              })
            }
          })
        } else if (row.EntityType === 't_paramvalue') {
          this.$showMessage('删除后不可恢复，确认删除吗？', ['confirm', 'cancel']).then((res) => {
            if (res === 'confirm') {
              this.$refs.selectsLoad.load('rs/logic/deleteValue', {tablename: 't_paramvalue', id: row.id}).then((res) => {
                this.params.rows.splice(index, 1)
              })
            }
          })
        }
      },
      // 修该内容的提交
      confirm () {
        let data = {}
        if (this.modifyItem.EntityType === 't_parameter') {
          // 有id为修改
          if (this.modifyItem.id) {
            data = {
              id: this.modifyItem.id,
              name: this.modifyItem.name
            }
          } else { // 否则为新增
            data = {
              name: this.modifyItem.name
            }
          }
          this.$refs.paramsLoad.load('rs/entity/t_parameter', data).then((res) => {
            this.loadParams()
            this.show = false
            this.modifyItem = {name: ''}
          })
        } else if (this.modifyItem.EntityType === 't_paramvalue') {
          if (this.modifyItem.id) {
            data = {
              id: this.modifyItem.id,
              name: this.modifyItem.name,
              processid: this.modifyItem.processid
            }
          } else {
            data = {
              name: this.modifyItem.name,
              processid: this.selectItem.id
            }
          }
          this.$refs.selectsLoad.load('rs/entity/t_paramvalue', data).then((res) => {
            this.show = false
            // 如果没有id，需要在数组中添加
            if (!data.id) {
              this.params.rows.push({id: res.data.id, name: this.modifyItem.name, processid: this.selectItem.id, EntityType: 't_paramvalue'})
            }else {
              this.selectContent.name = data.name
            }
            this.modifyItem = {name: ''}
          })
        }
      },
      // 关闭模态框, 数据还原
      close () {
        this.show = false
        this.modifyItem = {name: ''}
      }
    }

  }
</script>
