<template>
  <div>
    <p  class="bg-info text-center" style="padding: 8px;">
      隐患等级管理
      <button class="btn btn-primary" @click="add()">新增</button>
    </p>
    <criteria-paged :model="model" v-ref:paged>
      <criteria partial='criteria' @condition-changed='search' v-ref:criteria>
        <div novalidate class="form-horizontal select-overspread container-fluid auto" partial>
          <div class="col-sm-4 form-group form-input-group" style="width: 20%">
            <label class="control-label">隐患名称</label>
            <input type="text" class="form-control" v-model="model.f_defect_name"
                   style="height:34px;margin-top: 8px"    placeholder="隐患名称" condition="f_defect_name like '%{}%'">
          </div>
          <div class="col-sm-4 form-group form-input-group" style="width: 20%">
            <label class="control-label">隐患等级</label>
            <input type="text" class="form-control" v-model="model.f_defect_level"
                   style="height:34px;margin-top: 8px"    placeholder="隐患等级" condition="f_defect_level = '{}'">
          </div>
          <div class="col-sm-4 form-group form-input-group" style="width: 20%">
            <label class="control-label">隐患所属</label>
            <input type="text" class="form-control" v-model="model.f_defect_belongto"
                   style="height:34px;margin-top: 8px"    placeholder="隐患所属" condition="f_defect_belongto = '{}'">
          </div>
          <div class="row">
            <div class="span" style="margin-top:8px;float:right">
              <button class="button_spacing button_search" @click="search()">查询</button>
            </div>
          </div>
        </div>
        <!--</div>-->
      </criteria>
      <data-grid :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">{{$index+1}}</td>
          <td style="text-align: center">{{row.f_defect_name}}</td>
          <td style="text-align: center">{{row.f_defect_level}}</td>
          <td style="text-align: center">{{row.f_defect_belongto}}</td>
          <td style="text-align: center" class="flex-around">
            <button type="button" name="button" class="btn btn-link" @click.stop="$parent.$parent.$parent.modifyParam(row,$index)">修改</button>
            <button type="button" name="button" class="btn btn-link" @click.stop="$parent.$parent.$parent.deleteItem(row)">删除</button>
          </td>
        </template>
      </data-grid>
    </criteria-paged>
  </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="from-group">
        <label for="">隐患名称</label>
        <input type="text" class="form-control" v-model="selectItem.f_defect_name">
      </div>
      <div class="from-group">
        <label for="">隐患等级</label>
        <input type="text" class="form-control" v-model="selectItem.f_defect_level">
      </div>
      <div class="from-group">
        <label for="">隐患所属</label>
        <input type="text" class="form-control" v-model="selectItem.f_defect_belongto">
      </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>
</template>

<script>
  import { PagedList } from 'vue-client'
    export default {
        title: "DefectLevelManage",
      data () {
        return {
          selectItem: {},
          params: null,
          model: new PagedList('rs/sql/getDefectLevelInfo', 20),
          show: false,
          index: null,
        }
      },
      ready () {
        // this.model.rows = AppData.singleValues
      },
      methods: {
        deleteItem (row) {
          this.$showMessage('删除后不可恢复，确认删除吗？', ['confirm', 'cancel']).then((res) => {
            if (res === 'confirm') {
              this.$resetpost('rs/logic/deleteLeveInfo', {data:{id:row.id}}).then((res) => {
                this.$refs.paged.$refs.criteria.search()
                this.$showMessage('删除成功！')
              })
            }
          })
        },
        add () {
          this.show = true
        },
        modifyParam (row,index) {
          this.show = true
          this.index = index
          // this.selectItem = row
          this.selectItem = row
        },
        confirm () {
          this.$resetpost('rs/logic/saveDefectLeveInfo',{data:this.selectItem}).then((res)=>{
            // this.model.rows.push(this.selectItem)
            this.show = false
            this.$showMessage('操作成功！')
            this.$refs.paged.$refs.criteria.search()
            this.selectItem = {}
          })
        },
        close () {
          this.show = false
          this.selectItem = {}
        }
      }
    }
</script>

<style scoped>

</style>
