<template>
  <div class="apilist">
    <el-form
      ref="form"
      :model="form"
      :inline="true"
      class="orderform flex-between"
      size="mini"
    >
      <div>
        <el-form-item label="接口名称:" prop="tag">
          <el-input
            v-model="form.tag"
            style="width: 250px"
            placeholder="请输入..."
            class="search_tag"
            clearable
          />
        </el-form-item>
        <!-- <el-form-item prop="appId" label="应用列表">
          <el-select
            v-model="form.appId"
            clearable
            placeholder="请选择"
            style="width: 250px"
          >
            <el-option
              v-for="item in appList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item> -->
        <el-form-item label="角色列表:">
          <el-select
            v-model="form.roleId"
            filterable
            clearable
            placeholder="请选择"
            size="mini"
          >
            <el-option v-for="item in roleList" :key="item.id" :label="item.roleName" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="用户列表:">
          <el-select
            v-model="form.userId"
            filterable
            clearable
            placeholder="请选择"
            size="mini">
            <el-option v-for="item in userList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="allApis()"
          ><i class="el-icon-search" /> 搜索</el-button
          >
          <el-button
            @click="btn_clear()"
          ><i class="el-icon-remove-outline" /> 重置</el-button
          >
        </el-form-item>
      </div>
      <!-- <el-form-item style="margin-right: 0">
        <el-button
          type="primary"
          @click="addFormVisible = true"
        ><i class="el-icon-plus" /> 申请新增接口
        </el-button>
      </el-form-item> -->
    </el-form>
    <div class="flex" style="background: #ffffff;height: 100%">
      <div class="text-center left">
        <div
          :class="{ active: !form.apiTypeId }"
          class="p-12 font-14 item"
          @click="handleApiList('')"
        >
          全部接口
        </div>
        <div
          v-for="(item, index) in apiList"
          :key="index"
          :class="{ active: form.apiTypeId === item.id }"
          class="p-10 font-14 item"
          @click="handleApiList(item.id)"
        >
          {{ item.name }}
        </div>
      </div>
      <div class="flex-1 w-95 right">
        <el-tabs v-model="activeName" @tab-click="tabsClick">
          <el-tab-pane name="1" label="已授权" />
          <el-tab-pane name="0" label="未授权" />
          <el-tab-pane name="2" label="待审核" />
        </el-tabs>
        <el-table
          ref="multipleTable"
          :data="apis"
          :highlight-current-row="true"
          stripe
          fit
          height="calc(100% - 1px)"
          border
          :header-cell-style="{color:APP_CONFIG.TABLE_DOMINANT_COLOR}"
          :cell-style="{color:APP_CONFIG.TABLE_ASSISTANT_COLOR}"
        >
          <el-table-column prop="api.name" label="接口名称" />

          <el-table-column label="所属角色">
            <template slot-scope="scope">
              <span>{{ getRole(scope.row.roleId) }}</span>
            </template>
          </el-table-column>

          <el-table-column label="类别">
            <template slot-scope="scope">
              <span>{{ typeName(scope.row.apiType.id) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="url" label="请求地址" />
          <!-- <el-table-column prop="callLimit" label="调用量限制" /> -->
          <el-table-column prop="api.qpsLimit" label="QPS限制" />
          <el-table-column v-if="activeName!=0" label="申请人">
            <template slot-scope="scope">
              <span>{{ getUser(scope.row.userId) }}</span>
            </template>
          </el-table-column>
          <el-table-column v-if="activeName!=0" prop="api.applyTime" label="申请时间" />
          <!-- <el-table-column prop="createTime" label="创建时间" />
          <el-table-column prop="updateTime" label="更新时间" /> -->
          <!-- <el-table-column width="100" prop="description" label="查看详情">
            <template slot-scope="scope">

            </template>
          </el-table-column> -->
          <el-table-column width="200" label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="handleDetail(scope.row)">
                查看详情
              </el-button>
              <el-button v-if="scope.row.accreditStatus === 1" type="text" disabled>
                已授权
              </el-button>
              <el-button v-else-if="scope.row.accreditStatus === 2" type="text" @click="empowerClick(scope.row.id)">授权审核</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

  </div>
</template>

<script>
import { mapState } from 'vuex'
import {
  typeList
} from '@/api/apimngr'
import { appList } from '@/api/app'
import axios from 'axios'
import APP_CONFIG from "../../../public/config";

export default {
  name: 'Apilist',
  data() {
    return {
      apiList: [],
      myapis: [],
      apis: [],
      activeNames: [],
      // search
      form: {
        tag: ' ',
        apiTypeId: '',
        appId: '',
        roleId: '',
        userId: '',
        accreditStatus: 2
      },
      appList: [],
      // 参数弹窗
      paramsVisible: false,
      params: [],
      activeName: '2',
      roleList: [], // 角色列表
      userList: [] // 用户列表
    }
  },
  created() {
    this.form.tag = this.$route.query.tag || ''
  },
  // eslint-disable-next-line vue/order-in-components
  computed: {
    APP_CONFIG() {
      return APP_CONFIG
    },
    ...mapState(['user'])
  },
  async mounted() {
    await this.getUserList() // 获取用户列表
    await this.getRoleList() // 获取角色列表
    await this.applist()
    await this.searchAllApis()
    await this.allApis()
  },
  methods: {
    getUserList() {
      const vm = this
      axios.get(process.env.BASE_API + '/user/list', {
      }).then(function(response) {
        var obj = response.data
        if (obj.code !== 10000) {
          vm.$message.error(obj.message)
          vm.userList = []
        } else {
          vm.userList = obj.data
        }
      })
    },
    getUser(id) {
      if (id !== null && id !== undefined) {
        const name = this.userList.filter(val => val.id === id)[0].name
        return name
      } else {
        return ''
      }
    },
    getRole(id) {
      if (id !== null && id !== undefined) {
        const name = this.roleList.filter(val => val.id === id)[0].roleName
        return name
      } else {
        return ''
      }
    },
    getRoleList() {
      const vm = this
      axios.get(process.env.BASE_API + '/role/list', {}).then(function(response) {
        var obj = response.data
        if (obj.code === 10000) {
          vm.roleList = obj.data
        }
      })
    },
    empowerClick(authId) {
      this.$confirm('是否审核授权该接口?', '审核提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var params = new URLSearchParams()
        params.append('authId', authId)
        axios.post(process.env.BASE_API + '/role/endowAuth', params).then(res => {
          if (res.data.code === 10000) {
            this.$message({
              message: '审核成功',
              type: 'success'
            })
            this.allApis()
          } else {
            this.$message.error(res.data.message)
          }
        })
      })
    },
    typeName(id) {
      const name = this.apiList.filter(val => val.id === id)[0].name
      return name
    },
    tabsClick() {
      this.form.accreditStatus = Number(this.activeName)
      this.allApis()
    },
    handleApiList(id) {
      this.form.apiTypeId = id
      this.allApis()
    },
    // 跳转详情
    handleDetail(item) {
      this.$router.push({
        path: `/apimngr/detail/${item.api.id}`
      })
    },
    allApis() {
      console.log(this.form)
      axios.get(process.env.BASE_API + '/apimngr/manageList', {
        params: this.form
      }).then(res => {
        if (res.data.data.length > 0) {
          this.oldApis = JSON.parse(JSON.stringify(res.data.data))
          if (this.form.apiTypeId === '') {
            this.apis = this.oldApis.filter(val => val.accreditStatus === Number(this.activeName))
          } else {
            this.apis = this.oldApis.filter(val => val.accreditStatus === Number(this.activeName) && val.apiType.id === this.form.apiTypeId)
          }
        } else {
          this.apis = []
          this.oldApis = []
        }
      })
    },
    btn_clear() {
      // this.form.tag = ''
      // this.form.appId = ''

      this.form.accreditStatus = 2
      this.$refs['form'].resetFields()
      this.form.apiTypeId = ''
      this.allApis()
    },
    // 分类列表
    async searchAllApis() {
      const res = await typeList()
      this.apiList = res.data
    },
    // 应用列表
    async applist() {
      const res = await appList()
      this.appList = res.data
      // this.form.appId = this.appList[0].id
      window.localStorage.setItem('appId', this.form.appId)
    }
  }
}
</script>

<style scoped lang="scss">
.apilist {
  height: 92%;

  .orderform {
    margin-top: 20px;
  }

  .left {
    width: 150px;

    .item {
      margin: 10px;
      padding: 10px;
      border-bottom: 1px solid #dad6d6;
      border-style-width: 80%;
      //手势
      cursor: pointer;
      //动画
      transition: all 0.3s;

      &:hover {
        background: #409eff;
        color: #ffffff;
        border-radius: 5px;
        //动画
        transition: all 0.3s;
      }
    }

    //选中
    .active {
      background: #409eff;
      color: #ffffff;
      border-radius: 5px;
    }
  }

  .right {
    height: 100%;
  }

  .mydiv {
    display: flex;
    padding: 10px;
    background: #ffffff;
  }
}
</style>
