<template>
  <div>
    <div>
      <el-form :inline="true" class="orderform" size="mini">
        <el-row>
          <el-form-item label="应用名称/接口名称:">
            <el-input v-model="tag" style="width: 250px" placeholder="请输入应用名称/接口名称" class="search_tag" clearable/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="btn_search()"><i class="el-icon-search"/> 搜索</el-button>
            <el-button @click="btn_clear()"><i class="el-icon-remove-outline"/> 重置</el-button>
            <!--el-button type="primary" @click="addFormVisible = true"><i class="el-icon-plus"/> 添加</el-button-->
          </el-form-item>
        </el-row>
      </el-form>
      <el-table
        ref="multipleTable"
        :data="tableData"
        :highlight-current-row="true"
        :header-cell-style="{color:APP_CONFIG.TABLE_DOMINANT_COLOR}"
        :cell-style="{color:APP_CONFIG.TABLE_ASSISTANT_COLOR}"
        border>
        <el-table-column
          prop="id"
          label="序列号"/>
        <el-table-column
          prop="app.name"
          label="应用名称"/>
        <el-table-column
          prop="api.name"
          label="接口名称"/>
        <!-- <el-table-column
          prop="callLimit"
          label="调用限制"/> -->
        <el-table-column
          prop="qpsLimit"
          label="QPS限制"/>
        <el-table-column
          :formatter="formatStatus"
          prop="status"
          label="状态"/>
        <el-table-column
          prop="app.user.name"
          label="开发者"/>
        <el-table-column
          fixed="right"
          label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="handleDisable(scope.row)">
              <span v-if="scope.row.status === 3">启用</span>
              <span v-if="scope.row.status !== 3">停用</span>
            </el-button>
            <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="mydiv">
        <el-pagination
          :current-page.sync="pageNo"
          :page-sizes="[10, 50, 100, 300,1000]"
          :page-size="pageSize"
          :total="totalDataNumber"
          layout="sizes,total, prev, pager, next"
          class="table-pagination"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
      </div>

    </div>

    <el-dialog :visible.sync="editFormVisible" title="编辑接口权限">
      <el-form :model="editForm">
        <el-form-item :label-width="formLabelWidth" label="应用名称">
          <el-input v-model="editForm.appName" disabled="true"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="接口名称">
          <el-input v-model="editForm.apiName" disabled="true"/>
        </el-form-item>
        <!-- <el-form-item :label-width="formLabelWidth" label="调用限制">
          <el-input v-model="editForm.callLimit" placeholder="请输入调用限制"/>
        </el-form-item> -->
        <el-form-item :label-width="formLabelWidth" label="QPS限制">
          <el-input v-model="editForm.qpsLimit" placeholder="请输入QPS限制"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="btnUpdateCancel">取 消</el-button>
        <el-button type="primary" @click="btnUpdateSubmit">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      :visible.sync="disableFormVisible"
      title="提示"
      width="30%">
      <span v-if="status === 1">确定对选择接口权限进行 <b>停用</b> 处理? </span>
      <span v-if="status !== 1">确定对选择接口权限进行 <b>启用</b> 处理? </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="disableFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitDisable">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      :visible.sync="deleteDialogVisible"
      title="提示"
      width="30%">
      <span>确定删除选择接口权限信息? </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitDelete">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
import APP_CONFIG from "../../../public/config";

export default {
  name: 'Index',
  computed: {
    APP_CONFIG() {
      return APP_CONFIG
    }
  },
  data() {
    return {
      tag: '',
      select_value: '', // 用户状态
      options: [{
        value: 1,
        label: '正常'
      }, {
        value: 0,
        label: '已停用'
      }],
      allData: [], // 所有前端分页数据
      tableData: [], // 表格数据 仅展示当前页的数据
      pageNo: 1, // 当前页数
      totalDataNumber: 0, // 总记录数
      pageSize: 10,
      formLabelWidth: '100px', // 弹出框form宽
      disableFormVisible: false,
      addFormVisible: false,
      editFormVisible: false,
      addForm: {
        name: '',
        url: '',
        callLimit: '',
        qpsLimit: '',
        apiTypeId: '',
        description: ''
      },
      editForm: {
        id: '',
        appName: '',
        apiName: '',
        callLimit: '',
        qpsLimit: ''
      },
      status: '',
      id: '',
      deleteDialogVisible: false,
      apiTypes: []
    }
  },
  created() {
    this.searchAllApiTypes()
    this.btn_search()
  },
  mounted() {
  },
  methods: {
    formatStatus(ob) {
      // 0=待审核 1=正常使用 2=待支付 3=停用
      if (ob.status === 1) {
        return '正常'
      } else if (ob.status === 0) {
        return '待审核'
      } else if (ob.status === 2) {
        return '待支付'
      } else if (ob.status === 3) {
        return '停用'
      } else {
        return '未知'
      }
    },
    searchAllApiTypes() {
      const vm = this
      axios.get(process.env.BASE_API + '/apitype/list', {
      }).then(function(response) {
        var obj = response.data
        if (obj.code !== 10000) {
          vm.$message.error(obj.message)
          vm.totalDataNumber = 0
          vm.apiTypes = []
        } else {
          vm.totalDataNumber = parseInt(obj.total)
          if (vm.totalDataNumber > 0) {
            vm.apiTypes = obj.data
          } else {
            vm.apiTypes = []
          }
        }
      }).catch(function(error) {
        alert(error)
      })
    },
    btn_search() {
      const vm = this
      axios.get(process.env.BASE_API + '/appapi/list', {
        params: {
          tag: this.tag,
          status: this.select_value
        }
      }).then(function(response) {
        var obj = response.data
        if (obj.code !== 10000) {
          vm.$message.error(obj.message)
          vm.totalDataNumber = 0
          vm.allData = []
          vm.tableData = []
        } else {
          vm.totalDataNumber = parseInt(obj.total)
          if (vm.totalDataNumber > 0) {
            vm.allData = obj.data
            vm.tableData = obj.data.slice(0, vm.pageSize)
          } else {
            vm.allData = []
            vm.tableData = []
          }
        }
      }).catch(function(error) {
        alert(error)
      })
    },
    btn_clear() {
      this.tag = ''
      this.select_value = ''
      this.btn_search()
    },
    handleCurrentChange() {
      this.tableData = this.allData.slice((this.pageNo - 1) * this.pageSize, this.pageNo * this.pageSize)
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.tableData = this.allData.slice((this.pageNo - 1) * this.pageSize, this.pageNo * this.pageSize)
    },
    btnAddCancel() {
      this.addFormVisible = false
      this.addForm.name = ''
      this.addForm.description = ''
    },
    btnAddSubmit() {
      if (this.addForm.name === '' || this.addForm.name === undefined) {
        this.$message.info('请输入接口类型名称，不能为空')
        return
      }
      if (this.addForm.url === '' || this.addForm.url === undefined) {
        this.$message.info('请输入接口地址，不能为空')
        return
      }
      // if (this.addForm.callLimit === '' || this.addForm.callLimit === undefined) {
      //   this.$message.info('请输入接口调用量限制，不能为空')
      //   return
      // }
      if (this.addForm.qpsLimit === '' || this.addForm.qpsLimit === undefined) {
        this.$message.info('请输入接口qps限制，不能为空')
        return
      }
      if (this.addForm.apiTypeId === '' || this.addForm.apiTypeId === undefined) {
        this.$message.info('请选择接口类型，不能为空')
        return
      }
      var vm = this
      var params = new URLSearchParams()
      params.append('name', vm.addForm.name)
      params.append('url', vm.addForm.url)
      params.append('callLimit', vm.addForm.callLimit)
      params.append('qpsLimit', vm.addForm.qpsLimit)
      params.append('apiTypeId', vm.addForm.apiTypeId)
      params.append('description', vm.addForm.description)
      axios.post(process.env.BASE_API + '/apimngr/insert', params).then(function(response) {
        var obj = response.data
        if (obj.code !== 10000) {
          vm.$message.error(obj.message)
        } else {
          vm.$message(obj.message)
          vm.addForm.name = ''
          vm.addForm.description = ''
          vm.addFormVisible = false
          vm.btn_search()
        }
      }).catch(function(error) {
        alert(error)
      })
    },
    handleEdit(row) {
      this.editForm.id = row.id
      this.editForm.appName = row.app.name
      this.editForm.apiName = row.api.name
      this.editForm.callLimit = row.callLimit
      this.editForm.qpsLimit = row.qpsLimit
      this.editFormVisible = true
    },
    btnUpdateCancel() {
      this.editFormVisible = false
    },
    btnUpdateSubmit() {
      // if (this.editForm.callLimit === '' || this.editForm.callLimit === undefined) {
      //   this.$message.info('请输入调用限制，不能为空')
      //   return
      // }
      if (this.editForm.qpsLimit === '' || this.editForm.qpsLimit === undefined) {
        this.$message.info('请输入QPS限制，不能为空')
        return
      }
      var vm = this
      var params = new URLSearchParams()
      params.append('id', vm.editForm.id)
      params.append('callLimit', vm.editForm.callLimit)
      params.append('qpsLimit', vm.editForm.qpsLimit)
      axios.post(process.env.BASE_API + '/appapi/update', params).then(function(response) {
        var obj = response.data
        if (obj.code !== 10000) {
          vm.$message.error(obj.message)
        } else {
          vm.$message(obj.message)
          vm.editFormVisible = false
          vm.btn_search()
        }
      }).catch(function(error) {
        alert(error)
      })
    },
    handleDelete(row) {
      this.id = row.id
      this.deleteDialogVisible = true
    },
    submitDelete() {
      var vm = this
      var params = new URLSearchParams()
      params.append('id', vm.id)
      axios.post(process.env.BASE_API + '/appapi/delete', params).then(function(response) {
        var obj = response.data
        if (obj.code !== 10000) {
          vm.$message.error(obj.message)
        } else {
          vm.$message(obj.message)
          vm.deleteDialogVisible = false
          vm.btn_search()
        }
      }).catch(function(error) {
        alert(error)
      })
    },
    handleDisable(row) {
      this.id = row.id
      this.status = row.status
      this.disableFormVisible = true
    },
    submitDisable() {
      var vm = this
      var params = new URLSearchParams()
      params.append('id', vm.id)
      if (vm.status === 1) {
        params.append('status', 3)
      } else {
        params.append('status', 1)
      }
      axios.post(process.env.BASE_API + '/appapi/disable', params).then(function(response) {
        var obj = response.data
        if (obj.code !== 10000) {
          vm.$message.error(obj.message)
        } else {
          vm.$message(obj.message)
          vm.btn_search()
        }
      }).catch(function(error) {
        alert(error)
      })
      this.disableFormVisible = false
    }
  }
}
</script>

<style scoped>
  .orderform {
    padding-top: 20px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .mydiv {
    float: right;
    margin-right: 10px;
  }
</style>
