<template>
  <xy-page title="参数列表">
    <!-- <xy-search class="mgt20" @enter="search(1)">
      <el-form inline :model="searchFilter" label-width="70px">
      </el-form>
      <div slot="right">
        <el-button type="primary" @click="search(1)">查询</el-button>
        <el-button plain @click="resetForm">清空条件</el-button>
      </div>
    </xy-search> -->

    <!-- 列表区域-STR -->
    <xy-table
      v-show="!listData.firtIn"
      :loading="listData.showLoading"
      :table-data="listData.tableData"
      @change="search"
    >
      <el-table-column min-width="30px" prop="id" label="流水号" />
      <el-table-column min-width="70px" prop="name" label="名字" />
      <el-table-column min-width="70px" prop="key" label="键" />
      <el-table-column min-width="70px" prop="value" label="值" />
      <el-table-column min-width="80px" label="更多">
        <template slot-scope="scope">
          <el-button v-auth="'AUTH_CONFIG-SAVE'" type="text" @click="editRow(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </xy-table>
    <!-- 列表区域-END -->

    <!-- 保存记录-STR -->
    <el-dialog :title="editDialog.data.id?'修改':'添加'+editDialog.title" :visible.sync="editDialog.show" class="modal-resetpwd">
      <div class="form-row form-group ">
        <label class="text-right">
          <span class="require">*</span>键:</label>
        <el-input
          v-model="editDialog.data.key"
          :disabled="true"
          type="test"
          placeholder="请输入键"
        />
        <span class="errmsg">{{ editDialog.errmsg.key }}</span>
      </div>

      <div class="form-row form-group ">
        <label class="text-right">
          <span class="require">*</span>值:</label>
        <el-input v-model="editDialog.data.value" type="test" placeholder="请输入值" />
        <span class="errmsg">{{ editDialog.errmsg.value }}</span>
      </div>

      <div slot="footer" class="dialog-footer">
        <xy-save v-model="editDialog.save" type="primary" @click="saveDialog">确 定</xy-save>
        <el-button @click="editDialog.show = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 保存记录-END -->
  </xy-page>
</template>

<script>
export default {
  name: 'AuthAppList',
  data() {
    return {
      searchFilter: {
      },
      listData: {
        firtIn: true,
        tableData: {
          total: 0,
          page: 1,
          size: 15,
          list: []
        },
        showLoading: false
      },
      editDialog: {
        title: '记录',
        url: '/admin/auth/instance/authConfig/save.do',
        data: {
          key: '',
          value: ''
        },
        errmsg: {
          key: '',
          value: ''
        },
        save: false,
        show: false
      }
    }
  },
  mounted() {
    this.search(1)
  },
  methods: {
    search(page) {
      page = page || this.listData.tableData.page
      this.listData.firtIn = false
      const param = {
        page: page || 1,
        size: this.listData.tableData.size
      }
      this.listData.tableData.list = []
      this.listData.showLoading = true
      this.$postStream('/admin/auth/instance/authConfig/list.do', {
        data: param,
        success: res => {
          this.listData.showLoading = false
          if (res.success) {
            this.listData.tableData.list = res.object.list || []
            this.listData.tableData.total = res.object.count
            this.listData.tableData.page = page || 1
          } else {
            this.$message.error(res.message)
          }
        },
        error: () => {
          this.listData.showLoading = false
        }
      })
    },
    resetForm() {
      this.searchFilter = {}
      this.search(1)
    },
    editRow(row) {
      row = row || {}
      this.editDialog.data = JSON.parse(JSON.stringify(row))
      for (const key in this.editDialog.errmsg) {
        this.editDialog.errmsg[key] = ''
      }
      this.editDialog.show = true
    },
    saveDialog() {
      this.editDialog.save = true
      this.$postStream(this.editDialog.url, {
        data: this.editDialog.data,
        success: res => {
          if (res.success) {
            this.$message.warning(res.message)
            this.editDialog.show = false
            this.search()
          } else {
            this.$message.error(res.message)
          }
          this.editDialog.save = false
        },
        error: () => {
          this.editDialog.save = false
        }
      })
    }
  }
}
</script>

<style lang="scss">
.system-index-btns {
    text-align: right;
    & i {
      font-size: 12px;
      margin-right: 8px;
      vertical-align: top;
    }
    & span {
      display: inline-block;
      vertical-align: top;
    }
  }
.device-info {
  .device-info-body {
    margin: 15px 15px 70px;
  }
  .el-dialog__header {
    border-bottom: 1px solid $lk-border-base;
  }
  .info-line {
    margin-bottom: 10px;
    span {
      display: inline-block;
      padding: 5px 0;
      color: $lk-text-primary;
      font-size: 14px;
      line-height: 24px;
    }
    span.name {
      min-width: 110px;
      line-height: 24px;
    }
  }
}
</style>
