<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-07-22 19:14:58
 * @LastEditors: 无尘
 * @LastEditTime: 2020-09-23 16:21:18
 -->
<template>
  <div class="api-body-content border-box">
    <div class="common-nav">
      <nav-bread :nav-path="navPath" />
    </div>
    <div class="api-body-main common-body-main border-box">
      <div class="api-main-content border-box">
        <div class="search-wrap m-b-20 flex flex-space-between">
          <div style="font-size:0">
            <el-input
              v-model="searchValue"
              clearable
              class="w-320"
              placeholder="请输入API名称"
              @keyup.native="value => searchData(value)"
              @clear="clearInput">
              <i
                slot="prefix"
                class="el-input__icon el-icon-search" />
            </el-input>
            <el-select
              v-model="targetType"
              class="w-137 margin-left10"
              placeholder="请选择"
              @change="changeTargetType">
              <el-option
                v-for="item in targetTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value" />
            </el-select>
          </div>
          <div v-if="$route.query.projectName && $route.query.interfaceGroupId">
            <el-button
              type="primary"
              @click="createApi">
              创建API
            </el-button>
          </div>
        </div>
        <div class="table-wrap">
          <el-table
            v-loading="loading"
            :data="tableData"
            style="width: 100%">
            <el-table-column
              prop="interfaceName"
              label="API名称"
              show-overflow-tooltip />
            <el-table-column
              label="API类型"
              show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.interfaceType == '0' ? 'http' : scope.row.interfaceType == '1' ? 'dubbo ' : '自定义返回' }}
              </template>
            </el-table-column>
            <el-table-column
              label="访问路径"
              show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.interfaceUrl }}
              </template>
            </el-table-column>
            <el-table-column
              label="访问类型"
              show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.optType }}
              </template>
            </el-table-column>
            <el-table-column
              label="项目/分组"
              show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.projectName + '/' + scope.row.interfaceGroupName }}
              </template>
            </el-table-column>
            <el-table-column
              label="创建时间"
              show-overflow-tooltip>
              <template slot-scope="scope">
                <div class="color-606266 line-18">
                  {{ scope.row.createTime | timeStampToYmd }}
                </div>
                <div class="color-606266 line-18">
                  {{ scope.row.createTime | timeStampToHms }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              show-overflow-tooltip>
              <template slot-scope="scope">
                <el-button
                  type="text"
                  @click="toApiListManage(scope.$index, scope.row)">
                  管理
                </el-button>
                <!-- <el-button @click="handleEdit(scope.$index, scope.row)" type="text">编辑</el-button>
                <el-button @click="handleDel(scope.$index, scope.row)" type="text">删除</el-button> -->
              </template>
            </el-table-column>
          </el-table>
          <div
            v-if="!!totalCount"
            class="pagination text-right m-t-14">
            <dm-pagination
              small
              :page-size="pageSize"
              :current-page="currentPage"
              layout="prev, pager, next"
              :total="totalCount"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange" />
          </div>
        </div>
      </div>
    </div>
    <new-api-group
      :edit-row="editRow"
      :show-dialog="showDialog"
      @hideDialog="hideDialog" />
  </div>
</template>
<script>
import navBread from '@/components/nav/nav-bread.vue';
import newApiGroup from '@/components/program/new-api-group.vue';
import { getRequest } from '@/api/api';
import { _debounce } from '@/assets/js/public';
// import showMsg from '@/assets/js/showmsg';
import errMsg from '@/assets/js/error';
export default {
  name: 'ApiProgramGroup',
  components: {
    navBread,
    newApiGroup
  },
  data() {
    return {
      // 面包屑参数
      navPath: [
        {
          name: 'API管理',
          path: '/apiProgram'
        },
        {
          name: `${this.$route.query.projectName}项目列表`,
          path: '/apiProgramGroup'
        },
        {
          name: `${this.$route.query.interfaceGroupName}分组列表`,
          path: '/groupApiList'
        },
        {
          name: 'API列表',
          path: ''
        }
      ],
      projectId: this.$route.query.projectId || '',
      interfaceGroupId: this.$route.query.interfaceGroupId || '',
      searchValue: '',
      targetType: '-1',
      targetTypeOptions: [
        {
          value: '-1',
          label: '所有'
        },
        {
          value: '0',
          label: '私有'
        },
        {
          value: '1',
          label: '公开'
        }
      ],
      loading: true,
      tableData: [
        /* {
          interfaceId: '1',
          interfaceName: '测试',
          interfaceGroupName: '234',
          interfaceType: '0',
          optType: 'get',
          createTime: 1564455643252
        } */
      ],
      pageSize: 20,
      currentPage: 1,
      totalCount: 0,
      showDialog: false,
      editIndex: '',
      editRow: {}
    };
  },
  /* 接收数据 */
  mounted() {
    const that = this;
    that.$emit('showTab', 21);
    that.getData();
  },
  methods: {
    /**
     * @description: 搜索
     * @author: 无尘
     */
    searchData: _debounce(function() {
      const that = this;
      that.currentPage == 1;
      that.getData();
    }, 500),

    /**
     * @description: 搜索清除
     * @author: 无尘
     */
    clearInput() {
      this.currentPage = 1;
      this.getData();
    },
    /**
     * @description: 选择 API类型
     * @author: 无尘
     */
    changeTargetType() {
      this.currentPage = 1;
      this.getData();
    },
    /**
     * @description: 创建 API
     * @author: 无尘
     */
    createApi() {
      const that = this;
      that.$router.push(`/createApi?projectId=${that.$route.query.projectId}&projectName=${that.$route.query.projectName}&interfaceGroupId=${that.$route.query.interfaceGroupId}&interfaceGroupName=${that.$route.query.interfaceGroupName}`);
    },
    /**
     * @description: 分页
     * @param {Number} val
     * @author: 无尘
     */
    handleSizeChange(val) {
      this.pageSize = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getData();
    },
    /**
     * @description: 管理
     * @param {Number} index
     * @param {Object} row
     * @author: 无尘
     */
    toApiListManage(index, row) {
      const that = this;
      that.$router.push(`/apiListManage?interfaceId=${row.interfaceId}&interfaceName=${row.interfaceName}&projectId=${row.projectId}&projectName=${row.projectName}&interfaceGroupId=${row.interfaceGroupId}&interfaceGroupName=${row.interfaceGroupName}`);
    },

    /**
     * @description: 获取数据
     * @author: 无尘
     */
    getData() {
      const that = this;
      that.loading = true;
      let para = {
        projectId: that.projectId,
        interfaceGroupId: that.interfaceGroupId,
        search: that.searchValue,
        target: that.targetType, // 对象 0 对内 1对外 2对部分
        pageSize: that.pageSize,
        pageNum: that.currentPage
      };
      getRequest('/gateway-manage/page-api', para)
        .then(res => {
          let resData = res.data;
          that.loading = false;
          if (resData.code == '0000') {
            that.tableData = resData.result.result;
            that.totalCount = resData.result.totalCount;
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.loading = false;
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    }
  },
  watch: {
    $route: {
      handler: function(val, oldVal) {},
      // 深度观察监听
      deep: true
    }
  },

};
</script>

<style lang="less" scoped>
.w-137 {
  width: 137px;
}
.w-320 {
  width: 320px;
}
.m-t-14 {
  margin-top: 14px;
}
.margin-left10 {
  margin-left: 10px;
}
</style>
