<template>
  <div>
    <el-card class="no-bottom">
      <el-form
        ref="searchForm"
        :model="searchForm"
        label-width="80px"
        inline
      >
        <el-form-item
          label="API接口URL"
          label-width="120px"
          prop="api"
        >
          <el-input v-model="searchForm.api" />
        </el-form-item>
        <el-form-item
          label="权限类型"
          prop="auth_type"
        >
          <el-select v-model="searchForm.authType" placeholder="请选择">
            <el-option label="全部" :value="null" />
            <el-option label="不鉴权" value="0" />
            <el-option label="Token鉴权" value="1" />
            <el-option label="授权鉴权" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="getTableData(1)">查询</el-button>
          <el-button icon="el-icon-refresh" @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="margin-top-20">
      <div class="buttons-group margin-bottom-20">
        <el-button type="primary" icon="el-icon-plus" @click="addRow">增加接口</el-button>
        <el-button type="primary" icon="el-icon-refresh" @click="refreshCache">刷新缓存</el-button>
      </div>

      <el-table
        :data="tableData"
        border
      >
        <el-table-column
          type="index"
          label="序号"
          width="50px"
          align="center"
        />
        <el-table-column
          prop="api"
          label="API接口URL"
        />
        <el-table-column
          prop="authType"
          label="权限类型"
          :formatter="authTypeFormatter"
        />
        <el-table-column
          prop="remark"
          label="备注"
        />
        <el-table-column
          label="操作"
          width="140px"
          align="center"
        >
          <template slot-scope="props">
            <el-button v-permission="'SysMgr_update'" type="text" @click="editItem(props.row)">编辑</el-button>
            <el-popconfirm
              title="确定要删除此条记录吗？"
              @onConfirm="deleteItem(props.row.id)"
            >
              <el-button slot="reference" type="text">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        class="margin-top-20 text-align-right"
        :current-page="pageForm.pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageForm.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageForm.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>

    <el-dialog
      :title="add ? '增加接口' : '编辑接口'"
      :visible.sync="dialogVisible"
      width="700px"
    >
      <el-form
        ref="addForm"
        :model="addForm"
        label-width="120px"
        :rules="rules"
      >
        <el-form-item
          label="API接口URL"
          prop="api"
        >
          <el-input v-model="addForm.api" />
        </el-form-item>
        <el-form-item
          label="权限类型"
          prop="authType"
        >
          <el-select v-model="addForm.authType" placeholder="请选择">
            <el-option label="全部" :value="null" />
            <el-option label="不鉴权" value="0" />
            <el-option label="Token鉴权" value="1" />
            <el-option label="授权鉴权" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item
          label="备注"
        >
          <el-input v-model="addForm.remark" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { apiList, apiAdd, apiUpdate, apiDelete, apiRefresh } from '@/api/system-management/api-authority'

export default {
  name: 'Index',
  props: {},
  data() {
    return {
      searchForm: {
        api: null,
        authType: null
      },
      add: true,
      dialogVisible: false,
      tableData: [],
      addForm: {
        api: null,
        authType: null,
        remark: null
      },
      pageForm: {
        pageSize: 10,
        pageNum: 1,
        total: 0
      },
      rules: {
        api: [
          { required: true, message: '请输入API接口', trigger: 'blur' },
          { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
        ],
        authType: [
          { required: true, message: '请选择权限类型', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getTableData(1)
  },
  mounted() {},
  methods: {
    getTableData(pageNum) {
      const param = {
        current: pageNum,
        size: this.pageForm.pageSize,
        ...this.searchForm
      }
      apiList(param).then(res => {
        const { data } = res
        this.tableData = data.records
        this.pageForm.total = data.total
      }).catch(err => {
        this.$message.error(err.message)
        console.error(err.message)
      })
    },
    resetForm() {
      this.$refs.searchForm.resetFields()
      this.searchForm.authType = null
    },
    addRow() {
      this.add = true
      this.addForm = {
        api: null,
        authType: null,
        remark: null
      }
      this.dialogVisible = true
    },
    editItem(row) {
      this.add = false
      this.addForm = {
        id: row.id,
        api: row.api,
        authType: row.authType,
        remark: row.remark
      }
      this.dialogVisible = true
    },
    deleteItem(id) {
      const data = {
        idList: [id]
      }
      apiDelete(data)
        .then(_ => this.$message.success('操作成功'))
        .then(_ => this.getTableData(this.pageForm.pageNum))
        .catch(err => {
          this.$message.error('操作失败')
          console.error(err.message)
        })
    },
    save() {
      this.$refs.addForm.validate().then(_ => {
        if (this.add) {
          apiAdd(this.addForm)
            .then(_ => this.$message.success('操作成功'))
            .then(_ => this.getTableData(this.pageForm.pageNum))
            .then(_ => this.closeDialog())
            .catch(err => {
              this.$message.error('操作失败')
              console.error(err.message)
            })
        } else {
          apiUpdate(this.addForm)
            .then(_ => this.$message.success('操作成功'))
            .then(_ => this.getTableData(this.pageForm.pageNum))
            .then(_ => this.closeDialog())
            .catch(err => {
              this.$message.error('操作失败')
              console.error(err.message)
            })
        }
      })
    },
    refreshCache() {
      apiRefresh()
        .then(_ => this.$message.success('操作成功'))
        .catch(err => {
          this.$message.error('操作失败')
          console.error(err.message)
        })
    },
    handleSizeChange(val) {
      this.pageForm.pageSize = val
      this.getTableData(1)
    },
    handleCurrentChange(val) {
      this.pageForm.pageNum = val
      this.getTableData(val)
    },
    closeDialog() {
      this.resetFields()
      this.$nextTick()
        .then(_ => {
          this.dialogVisible = false
        })
    },
    resetFields() {
      this.addForm = {
        api: null,
        authType: null,
        remark: null
      }
      this.$refs.addForm.clearValidate()
    },
    authTypeFormatter({ authType }) {
      const map = {
        '0': '不鉴权',
        '1': 'Token鉴权',
        '2': '授权鉴权'
      }
      if (map[authType] === null) {
        return authType
      }
      return map[authType]
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
