<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-09-05 10:03:31
 * @LastEditors: 无尘
 * @LastEditTime: 2020-05-18 15:51:23
 -->
<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-tab-pane label="日志" name="four" v-loading="loading">
              <div class="log-search flex">
                <el-date-picker class="w-280" v-model="logSearch.requestDate" :picker-options="pickerOptions" type="daterange" format="yyyy-MM-dd" value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期" :editable="false" @change="changeDate"> </el-date-picker><el-input class="w-280 marginLeft10" placeholder="请输入traceid/请求内容/返回内容" prefix-icon="el-icon-search" v-model="logSearch.searchValue" clearable @clear="clearSearch" @keyup.native="value => searchEnterFun(value, searchValue)"> </el-input><el-select v-model="logSearch.enterpriseId" placeholder="请选择商户" class="w-140 marginLeft10" size="small" style="display:inline-block" clearable @change="changeBrand"> <el-option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id"> </el-option> </el-select><el-select v-model="logSearch.requestProjectId" placeholder="请选择项目" class="w-140 marginLeft10" size="small" style="display:inline-block" clearable @change="changePro"> <el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item.id"> </el-option> </el-select><el-select v-if="logSearch.requestProjectId" v-model="logSearch.requestGroupId" placeholder="请选择分组" class="w-140 marginLeft10" size="small" style="display:inline-block" clearable @change="changeGroup"> <el-option v-for="item in groupList" :key="item.id" :label="item.name" :value="item.id"> </el-option> </el-select><el-select v-if="logSearch.requestGroupId" v-model="logSearch.interfaceId" placeholder="请选择API" class="w-140 marginLeft10" size="small" style="display:inline-block" clearable @change="changeApi"> <el-option v-for="item in apiData" :key="item.interfaceId" :label="item.interfaceName" :value="item.interfaceId"> </el-option> </el-select
                ><!-- <el-select v-model="logSearch.requestStatus" placeholder="请选择状态" class="w-140 marginLeft10" size="small" style="display:inline-block" clearable @change="changeStatus">
                  <el-option label="全部状态" value=""></el-option>
                  <el-option label="成功" value="1"></el-option>
                  <el-option label="失败" value="0"></el-option>
                </el-select> -->
              </div>
              <log-list :tableData="tableData" @getList="getList"></log-list>
            </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, postRequest } from '@/api/api';
import { _debounce } from '@/assets/js/public';
// 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 logList from '@/components/plug/log-list';
import newErrorCode from '@/components/plug/new-error-code';
export default {
  name: 'envManage',
  components: {
    navBread,
    selectEnv,
    whiteList,
    capacityList,
    errorCodeList,
    bindTranser,
    newErrorCode,
    logList
  },
  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,
      // log
      logSearch: {
        requestDate: [],
        enterpriseId: '',
        searchValue: '',
        requestProjectId: '',
        requestGroupId: '',
        interfaceId: ''
      },
      brandList: [],
      apiData: [],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6
        }
      },
    };
  },
  methods: {
    /**
     * 改变log请求时间
     */
    changeDate() {
      const that = this;
      that.currentPage = 1;
      that.getList();
    },
    changeBrand() {
      const that = this;
      that.currentPage = 1;
      that.getList();
    },
    changeApi() {
      const that = this;
      that.currentPage = 1;
      that.getList();
    },
    async changePro() {
      const that = this;
      await that.getGroupList();
      that.currentPage = 1;
      that.getList();
    },
    changeGroup() {
      const that = this;
      that.getApiList();
    },
    searchEnterFun: _debounce(function() {
      const that = this;
      that.currentPage = 1;
      that.getList();
    },200),
    clearSearch() {
      const that = this;
      that.currentPage = 1;
      that.getList();
    },
    /**
     * tab 切换
     */
    /* eslint-disable */
    handleClick(tab, event) {
      const that = this;
      that.search = '';
      that.projectId = '';
      that.groupId = '';
      that.logSearch = {
        requestDate: [],
        enterpriseId: '',
        searchValue: '',
        requestProjectId: '',
        requestGroupId: '',
        interfaceId: ''
      }
      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() {
      const that = this;
      let url = '';
      let params = {};
      if (that.activeName === 'first') {
        //白名单
        url = '/gateway-manage/platform/white/list';
        params = {
          projectId: that.projectId ? that.projectId : null,
          groupId: that.groupId ? that.groupId : null,
          search: that.search ? that.search : null,
          sceneCode: that.sceneCode,
          currentPage: that.currentPage,
          pageSize: that.pageSize
        };
      } else if (that.activeName === 'second') {
        url = '/gateway-manage/platform/capacity/list';
        params = {
          projectId: that.projectId ? that.projectId : null,
          groupId: that.groupId ? that.groupId : null,
          search: that.search ? that.search : null,
          sceneCode: that.sceneCode,
          currentPage: that.currentPage,
          pageSize: that.pageSize
        };
      } else if (that.activeName === 'third') {
        url = '/gateway-manage/page-error-setting';
        params = {
          errorType: 2,
          pageNum: that.currentPage,
          pageSize: that.pageSize
        };
      }else {
        // log
        url = '/gateway-manage/page-log';
        if (!that.logSearch.requestDate) {
          that.logSearch.requestDate = [];
        }
        params = {
          startTime: that.logSearch.requestDate[0],
          endTime: that.logSearch.requestDate[1],
          enterpriseId: that.logSearch.enterpriseId,
          interfaceId: that.logSearch.interfaceId,
          paramSearch: that.logSearch.searchValue,
          pageNum: that.currentPage,
          pageSize: that.pageSize
        };
      }
      if (that.activeName === 'first' || that.activeName === 'second') {
        that.loading = true;
        getRequest(url, params)
          .then(res => {
            if (res.data.code == '0000') {
              that.loading = false;
              if (res.data.result.result) {
                that.tableData = res.data.result.result;
                that.total = res.data.result.totalCount;
              } else {
                that.tableData = [];
                that.total = 0;
              }
            } else {
              that.loading = false;
              that.$message.error(res.data.message);
            }
          })
          .catch(function(error) {
            that.loading = false;
            that.$message.error({
              duration: 1000,
              message: error.message
            });
          });
      } else {
        that.loading = true;
        postRequest(url, params)
          .then(res => {
            if (res.data.code == '0000') {
              if (res.data.result.result) {
                that.tableData = res.data.result.result;
                that.total = res.data.result.totalCount;
              } else {
                that.tableData = [];
                that.total = 0;
              }
              that.loading = false;
            } else {
              that.loading = false;
              that.$message.error(res.data.message);
            }
          })
          .catch(function(error) {
            that.loading = false;
            that.$message.error({
              duration: 1000,
              message: error.message
            });
          });
      }
    },
    //获取项目列表
    getProjectList() {
      const that = this;
      getRequest('/gateway-manage/plugin/interface/tree', {})
        .then(res => {
          if (res.data.code == '0000') {
            if (res.data.result) {
              that.projectList = res.data.result;
            } else {
              that.projectList = [];
            }
          } else {
            that.$message.error(res.data.message);
          }
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    //获取分组列表
    getGroupList() {
      const that = this;
      let params = {
        type: 0,
        id: that.logSearch.requestProjectId || that.projectId
      };
      getRequest('/gateway-manage/plugin/interface/tree', params)
        .then(res => {
          if (res.data.code == '0000') {
            if (res.data.result) {
              that.groupList = res.data.result;
            } else {
              that.groupList = [];
            }
          } else {
            that.$message.error(res.data.message);
          }
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    getApiList() {
      const that = this;
      let para = {
        projectId:  that.logSearch.requestProjectId,
        interfaceGroupId:  that.logSearch.requestGroupId,
        target: '-1', //对象 0 对内 1对外 2对部分
        pageSize: 500,
        pageNum: 1
      };
      getRequest('/gateway-manage/page-api', para)
        .then(res => {
          let resData = res.data;
          if (resData.code == '0000') {
            that.apiData = resData.result.result;
            return;
          }
          errMsg.errorMsg(resData);
        })
        .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;
}

.w-280 {
  width: 280px;
}

.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>
