<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-09-05 10:03:31
 * @LastEditors: 无尘
 * @LastEditTime: 2019-09-05 10:03:31
 -->
<template>
  <div class="api-body-content border-box">
    <div class="common-nav">
      <nav-bread :navPath="navPath"></nav-bread>
      <div class="change-env" @click="goEnvList"><span>切换环境</span><i class="iconfont iconicon-qihuan" @click="goEnvList(item)"></i></div>
    </div>
    <div class="api-body-main common-body-main border-box">
      <div class="api-main-content border-box">
        <div class="env-tab-wrap">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <div class="search-box">
              <div class="left">
                <div v-if="activeName === 'second' || activeName === 'first'">
                  <el-input v-model="search" placeholder="请输入接口名称" prefix-icon="el-icon-search" clearable class="w-320" @keyup.enter.native="getSearchList()" @clear="getSearchList()"> </el-input>
                  <el-select v-model="projectId" placeholder="请选择项目" class="w-140 marginLeft10" size="small" style="display:inline-block" clearable @change="getChange()">
                    <el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
                  </el-select>
                  <el-select v-model="groupId" placeholder="请选择分组" class="w-140 marginLeft10" size="small" style="display:inline-block" clearable :disabled="projectId === ''" @change="getSearchList()">
                    <el-option v-for="item in groupList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
                  </el-select>
                </div>
              </div>
              <div>
                <el-button type="primary" v-if="activeName === 'third'" @click="addCode">新建错误码</el-button>
                <el-button type="primary" v-if="activeName === 'first'" @click="addBind('1')">新建绑定</el-button>
                <el-button type="primary" v-if="activeName === 'second'" @click="addBind('2')">新建绑定</el-button>
              </div>
            </div>
            <el-tab-pane label="白名单接口" name="first" v-loading="loading">
              <whiteList v-if="activeName === 'first'" :tableData="tableData" @getList="getList"></whiteList>
            </el-tab-pane>
            <el-tab-pane label="能力接口" name="second" v-loading="loading">
              <capacityList v-if="activeName === 'second'" :tableData="tableData" @getList="getList"></capacityList>
            </el-tab-pane>
            <el-tab-pane label="错误码配置" name="third" v-loading="loading">
              <errorCodeList v-if="activeName === 'third'" :tableData="tableData" @getList="getList"></errorCodeList>
            </el-tab-pane>
          </el-tabs>
          <div style="text-align:right;margin-top:20px;" v-if="total !== 0">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="pageSizes" :page-size="pageSize" layout="total, sizes, prev, pager, next" :total="total"> </el-pagination>
          </div>
        </div>
      </div>
    </div>
    <selectEnv v-if="showdialog" :pluginId="pluginId" :pluginType="pluginType" @closeDialog="closeDialog"></selectEnv>
    <bindTranser v-if="showBinddialog" :type="type" @cancelBind="cancelBind" :sceneCode="sceneCode" @getList="getList"></bindTranser>
    <newErrorCode v-if="showNewCode" :errorSettingId="errorSettingId" @getList="getList" @cancelNewCoce="cancelNewCoce"></newErrorCode>
  </div>
</template>
<script>
import navBread from '@/components/nav/nav-bread.vue';
/*eslint-disable*/
import { getRequest } from '@/api/api';
import { postRequest } from '@/api/api';
// import request from '@/api/api';
import selectEnv from '@/components/plug/environment-list';
import whiteList from '@/components/plug/white-list';
import capacityList from '@/components/plug/capacity-list';
import errorCodeList from '@/components/plug/error-code';
import bindTranser from '@/components/plug/bind-transfer';
import newErrorCode from '@/components/plug/new-error-code';
export default {
  name: 'envManage',
  components: {
    navBread,
    selectEnv,
    whiteList,
    capacityList,
    errorCodeList,
    bindTranser,
    newErrorCode
  },
  data() {
    return {
      // 面包屑参数
      navPath: [
        {
          name: '插件管理',
          path: '/pluginManage'
        },
        {
          name: '开放平台',
          path: ''
        }
      ],
      activeName: 'first',
      search: '',
      showdialog: false,
      pluginId: '',
      sceneCode: '',
      pluginType: 1,
      projectList: [],
      projectId: '',
      groupList: [],
      groupId: '',
      tableData: [],
      total: 0,
      currentPage: 1,
      pageSize: 20,
      pageSizes: [20, 40, 60, 80],
      showNewCode:false,
      errorSettingId:'',
      showBinddialog:false,
      type:'',
      loading:false
    };
  },
  methods: {
    /**
     * tab 切换
     */
    /* eslint-disable */
    handleClick(tab, event) {
      this.search = ''
      this.projectId= ''
      this.groupId= ''
      this.getList()
    },
    goEnvList() {
      this.showdialog = true;
      this.pluginId = this.pluginId;
    },
    closeDialog() {
      this.showdialog = false;
    },
    getChange() {
      this.groupId = ''
      this.getGroupList()
      this.getList()
    },
    getSearchList() {
      if(this.activeName === 'first'||this.activeName === 'second') {
        this.currentPage = 1
        this.getGroupList()
        this.getList()

      }
    },
    // 分页
    handleSizeChange(size) {
      //设置每页条数
      this.pageSize = size;
      this.getList();
    },
    handleCurrentChange(page) {
      //设置跳到第几页
      this.currentPage = page;
      this.getList();
    },
    //获取列表
    getList() {
      var that = this;
      let url = ''
      let params = {}
      if(this.activeName === 'first') {//白名单
        url='/gateway-manage/platform/white/list'
        params = {
          projectId:this.projectId?this.projectId:null,
          groupId:this.groupId?this.groupId:null,
          search:this.search?this.search:null,
          sceneCode:this.sceneCode,
          currentPage:this.currentPage,
          pageSize:this.pageSize
        }
      }else if(this.activeName === 'second') {
        url='/gateway-manage/platform/capacity/list'
        params = {
          projectId:this.projectId?this.projectId:null,
          groupId:this.groupId?this.groupId:null,
          search:this.search?this.search:null,
          sceneCode:this.sceneCode,
          currentPage:this.currentPage,
          pageSize:this.pageSize
        }
      }else if(this.activeName === 'third') {
        url='/gateway-manage/page-error-setting'
        params = {
          errorType:2,
          pageNum:this.currentPage,
          pageSize:this.pageSize
        }
      }
      if(this.activeName === 'first'||this.activeName === 'second') {
        this.loading = true
        getRequest(url, params)
        .then(res => {
          if (res.data.code == '0000') {
             if (res.data.result.result) {
                this.tableData = res.data.result.result;
                 this.total = res.data.result.totalCount
              } else {
                this.tableData = [];
                this.total = 0
              }
              this.loading = false
          } else {
            this.$message.error(res.data.message);
          }
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
      }else{
        this.loading = true
        postRequest(url, params)
        .then(res => {
          if (res.data.code == '0000') {
             if (res.data.result.result) {
                this.tableData = res.data.result.result;
                this.total = res.data.result.totalCount
              } else {
                this.tableData = [];
                this.total = 0
              }
              this.loading = false
          } else {
            this.$message.error(res.data.message);
          }
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
      }

    },
    //获取项目列表
    getProjectList() {
      var that = this;
      getRequest('/gateway-manage//plugin/interface/tree',{})
        .then(res => {
          if (res.data.code == '0000') {
            if (res.data.result) {
              this.projectList = res.data.result;
            } else {
              this.projectList = [];
            }
          } else {
            this.$message.error(res.data.message);
          }
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    //获取分组列表
    getGroupList() {
      var that = this;
       let params = {
        type:0,
        id:this.projectId
      }
      getRequest('/gateway-manage/plugin/interface/tree', params)
        .then(res => {
          if (res.data.code == '0000') {
            if (res.data.result) {
              this.groupList = res.data.result;
            } else {
              this.groupList = [];
            }
          } else {
            this.$message.error(res.data.message);
          }
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    //新建错误码addCode
    addCode(){
      this.showNewCode = true;
      this.errorSettingId =''
    },
    cancelNewCoce() {
      this.showNewCode = false;
    },
    addBind(val) {
      this.showBinddialog = true
      this.type = val
    },
    cancelBind() {
      this.showBinddialog = false
    }
  },
  watch: {
    $route: {
      handler: function(val, oldVal) {},
      // 深度观察监听
      deep: true
    },
    $route(to, from) {
      this.pluginId = this.$route.query.pluginId
      this.sceneCode = this.$route.query.sceneCode
      this.getProjectList();
      this.getList()
    }
  },
  created() {
    this.pluginId = this.$route.query.pluginId
    this.sceneCode = this.$route.query.sceneCode
    this.getProjectList();
    this.getList()
  }


};
</script>

<style lang="less" scoped>
.w-320{
  width:320px;
}
.w-140{
  width:140px;
}
.marginLeft10{
  margin-left:10px;
}
.common-nav{
  position: relative;
    .change-env{
      position: fixed;
      right:20px;
      font-size:12px;
      top: 63px;
      width:85px;
      height:26px;
      color:#606266;
      line-height:26px;
      text-align: center;
      background:#EBECF0;
      border-radius:40px;
      cursor: pointer;
      i{
        font-size:12px;
      }
    }
    .change-env:hover{
      // box-shadow: 0px 2px 10px 0px rgba(213, 213, 213, 0.5);
      cursor: pointer;
    }
}
.search-box{
  display:flex;
  justify-content: space-between;
  margin-top:5px;
  .left{
    font-size:0
  }
}

</style>
