<template>
  <div class="uni-flex">
    <mg-table row-key="title" ref='table' :column="options.col" :searchConfig="options.searchConfig" :api="options.api" :params="options.params" :prop='options.prop'>
      <el-button slot='searchBtns' @click="handleUpdate()">新增</el-button>
      <div slot-scope="scope">
        <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
        <el-button class="c999" size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
      </div>
    </mg-table>
    <edit :form="formdata" v-if="show" @closed='closed' />
  </div>
</template>

<script>
import edit from './edit.vue'
import {
  getList, //api配置列表查询
  delAPI, //api删除
} from '../../api/apiconfig.js'


export default {
  components: { edit },
  data() {
    return {
      show: false,
      formdata: {},
      options: {
        api: getList,
        params: {

        },
        searchConfig: [
          {
            type: 'input',
            label: 'API名称',
            prop: 'name',
          },
        ],
        col: [
          {
            label: 'API名称',
            prop: 'name'
          },
          {
            label: '类型',
            prop: 'source',
            enum: 'API_source'
          },
          {
            label: 'URL',
            prop: 'url',
          },
          {
            label: '请求方式',
            prop: 'method',
            enum: 'method'
          },
          {
            label: '功能类型',
            prop: 'type',
            enum: 'API_type'
          }
        ]
      }
    }
  },
  //生命周期，创建完成（可以访问当前this实例）
  created() {
  },
  //方法集合
  methods: {
    handleDelete(data) {
      this.$confirm('此操作将删除该API, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delAPI({ ids: data.id + '' }).then(res => {
          this.$message.info('已删除！')
          this.$refs.table.fetch()
        })
      })

    },
    handleUpdate(data) {
      this.formdata = Object.assign({}, data)
      this.formdata.param = (this.formdata.param && this.formdata.param != 'null' ? JSON.parse(this.formdata.param) : [])
      this.formdata.response = (this.formdata.response && this.formdata.response != 'null' ? JSON.parse(this.formdata.response) : [])
      this.show = true
    },
    closed(data) {
      this.show = false
      if (data) {
        this.$refs.table.fetch()
      }
    },
  }
}
</script>
<style scoped lang="less">
</style>
