<template>
  <div class="apply">
    <el-tabs v-model="activeName">
      <el-tab-pane label="接口需求申请" name="first">
        <el-table
          :data="applyList"
          border
          stripe
          style="width: 100%">
          <el-table-column
            prop="id"
            label="需求ID"/>
          <el-table-column
            prop="apiName"
            label="接口名称"/>
          <el-table-column
            prop="apiTypeName"
            label="接口分类"/>
          <el-table-column
            prop="applyTime"
            label="申请时间"/>
          <el-table-column
            label="查看申请字段"
          >
            <template slot-scope="scope">
              <el-button type="success" plain @click="handleParam(scope.row)">
                查看申请字段
              </el-button>
            </template>
          </el-table-column>
          <el-table-column
            label="查看详情"
          >
            <template slot-scope="scope">
              <el-button type="success" plain @click="handleDetail(scope.row)">
                查看接口详情
              </el-button>
            </template>
          </el-table-column>
          <el-table-column
            prop="status"
            label="审核状态">
            <template slot-scope="scope">
              <el-popover
                v-if="scope.row.status === 3"
                placement="top-start"
                title="驳回原因"
                width="200"
                trigger="hover"
              >
                <p v-if="scope.row.status === 3">{{ scope.row.disagreeReason }}</p>
                <el-tag slot="reference" :type="statusList[scope.row.status].type">{{ statusList[scope.row.status].label }}</el-tag>
              </el-popover>
              <el-tag v-else :type="statusList[scope.row.status].type">{{ statusList[scope.row.status].label }}</el-tag>
            </template>
          </el-table-column>
          ></el-table>
      </el-tab-pane>
      <el-tab-pane label="接口开发申请" name="second">
        <el-table
          :data="developList"
          style="width: 100%">
          <el-table-column
            prop="id"
            label="需求ID"/>
          <el-table-column
            prop="apiName"
            label="接口名称"/>
          <el-table-column
            prop="applyTime"
            label="申请时间"/>
          <el-table-column
            label="查看详情"
          >
            <template slot-scope="scope">
              <el-button type="success" plain @click="handleDetail(scope.row)">
                查看接口详情
              </el-button>
            </template>
          </el-table-column>
          <el-table-column
            prop="status"
            label="审核状态">
            <template slot-scope="scope">
              <el-popover
                v-if="scope.row.status === 3"
                placement="top-start"
                title="驳回原因"
                width="200"
                trigger="hover"
              >
                <p v-if="scope.row.status === 3">{{ scope.row.disagreeReason }}</p>
                <el-tag slot="reference" :type="statusList[scope.row.status].type">{{ statusList[scope.row.status].label }}</el-tag>
              </el-popover>
              <el-tag v-else :type="statusList[scope.row.status].type">{{ statusList[scope.row.status].label }}</el-tag>
            </template>
          </el-table-column>
          ></el-table>
      </el-tab-pane>
    </el-tabs>
    <el-dialog :visible.sync="dialogTableVisible" title="参数查看">
      <el-table :data="fieldJson" border stripe>
        <el-table-column property="param" label="申请参数"/>
        <el-table-column property="desc" label="申请描述"/>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { apiNeedApplyDetail, apiNeedApplyList } from '@/api/app'
import { applyList } from '@/api/apimngr'

export default {
  name: 'Apply',
  data() {
    return {
      activeName: 'first',
      // 权限申请列表
      applyList: [],
      // 开发申请列表
      developList: [],
      dialogTableVisible: false,
      fieldJson: [],
      statusList: [{
        label: '待审核',
        type: 'warning'
      }, {
        label: '已审核待开发',
        type: 'success'
      }, {
        label: '已开发完成',
        type: 'success'
      }, {
        label: '已驳回',
        type: 'danger'
      }]
    }
  },
  created() {
    this.getApplyList()
    this.getDevelopList()
  },
  methods: {
    // 获取权限申请列表
    getApplyList() {
      apiNeedApplyList().then(res => {
        this.applyList = res.data
      })
    },
    // 获取开发申请列表
    getDevelopList() {
      applyList().then(res => {
        this.developList = res.data
      })
    },
    handleParam(item) {
      apiNeedApplyDetail(item.id).then(res => {
        this.dialogTableVisible = true
        this.fieldJson = JSON.parse(res.data.fieldJson)
      })
    },
    // 跳转详情
    handleDetail(item) {
      this.$router.push({
        path: `/apilist/detail/${item.apiId}`
      })
    }
  }
}
</script>

<style scoped>

</style>
