<template>
  <div class="sys">
    <div class="clear-both top">
      <el-button type="success" plain @click="add" style="float: right" v-if="!$store.state.readonly">添加配置</el-button>
      <el-form inline="">
        <el-form-item label="关键字">
          <el-input placeholder="输入关键字搜索" v-model="searchKey"></el-input>
        </el-form-item>
        <el-form-item >
          <el-button type="primary" @click="getList">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table
      :data="list"
      style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left"  class="demo-table-expand">
            <el-form-item label="Key">
              <span>{{ props.row.key }}</span>
            </el-form-item>
            <el-form-item label="关键词">
              <span>{{ props.row.value }}</span>
            </el-form-item>
            <el-form-item label="描述">
              <span>{{ props.row.desc }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        label="ID" sortable
        prop="id">
      </el-table-column>
      <el-table-column
        label="Key"
        prop="key">
      </el-table-column>
      <el-table-column
        label="关键词"
        prop="value">
      </el-table-column>
      <el-table-column
        prop="created_at"
        label="创建时间" sortable>
      </el-table-column>
      <el-table-column
        width="250"
        v-if="!$store.state.readonly"
        label="操作">
        <template slot-scope="scope">
          <el-button size="mini" plain type="warning" @click="edit(scope.row)">
            编辑
          </el-button>
          <el-button size="mini" plain type="danger" @click="del(scope.row)" v-if="$store.state.deletePermission">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <dialog-com :dialogObj="dialogObj" @changeShow="changeShow" @reflash="getList"/>
    <page :total="total" :limit="limit" @pageChange="onPageChange" @sizeChange="onSizeChange"/>
  </div>
</template>

<script>
  import dialogCom from './sysConfigDialog'
  import {getConfigListApi,deleteConfigApi,getConfigDetailApi} from "../../service/api";
  import page from '../framework/page'
  export default {
    name: "sysConfig",
    data() {
      return {
        total:0,
        nowPage:1,
        searchKey:"",
        limit: 10,
        dialogObj:{
          value:'',
          desc:'',
          show:false,
          id:''
        },
        list: []
      }
    },
    components:{
      dialogCom,
      page
    },
    mounted(){
      this.getList()
    },
    methods: {
      changeShow(data){
        this.dialogObj.show=data
      },
      getList(){
        let json = {
          limit: this.limit,
          page: this.nowPage
        };
        if(this.searchKey){
          json.key = this.searchKey
        }
        getConfigListApi(json).then(res => {
          this.list = res.list
          this.total = res.total
        })
      },
      onPageChange(val){
        this.nowPage = val;
        this.getList();
      },
      onSizeChange(val){
        this.nowPage = 1;
        this.limit = val;
        this.getList();
      },
      add(){
        this.dialogObj.id = '';
        this.dialogObj.key= '';
        this.dialogObj.value = '';
        this.dialogObj.desc = '';
        this.dialogObj.show = true
      },
      edit(data){
        getConfigDetailApi(data.id).then((res) => {
          this.dialogObj.id = res.id;
          this.dialogObj.key= res.key;
          this.dialogObj.value = res.value;
          this.dialogObj.desc = res.desc;
          this.dialogObj.show = true
        });
      },
      del(data){
        this.$confirm('此操作将删除该记录?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteConfigApi(data.id).then(res=>{
            this.getList()
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          });
        });
      }
    }
  }
</script>

<style scoped lang="less">
  @import "../../util/public";
  .sys {
    padding: 20px 0;
  }
  .add-btn {
    margin: 10px 0;
  }
  .top {
    margin-bottom:10px;
  }
</style>