<!--
<env-set-list></env-set-list>
import envSetList from '@/components/env/env-set-list.vue';
-->
<template>
  <div>
    <div class="search-wrap m-b-20 flex flex-space-between">
      <el-input clearable class="w-320" placeholder="请输入配置名称/code" v-model="searchValue" @keyup.native="value => searchData(value)" @clear="clearInput">
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>
      <div class="search-wrap-right">
        <el-button type="primary" @click="toCreatSet">新建配置</el-button>
        <el-radio-group v-model="proxyType" @change="changeType">
          <el-radio-button label="0">http</el-radio-button>
          <el-radio-button label="1">dubbo</el-radio-button>
        </el-radio-group>
      </div>
    </div>
    <div class="table-wrap">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="proxyName" label="配置名称" show-overflow-tooltip> </el-table-column>
        <el-table-column prop="proxyCode" label="配置code" show-overflow-tooltip> </el-table-column>
        <el-table-column label="描述" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.description }}
          </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 @click="handleShow(scope.$index, scope.row)" type="text">查看</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 class="pagination text-right m-t-14" v-if="!!totalCount">
        <el-pagination small :page-size="pageSize" :current-page="currentPage" layout="prev, pager, next" :total="totalCount" @size-change="handleSizeChange" @current-change="handleCurrentChange"> </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
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: 'env-set-list',
  data() {
    return {
      proxyType: '0', // http: 0, dubbo: 1
      searchValue: '',
      tableData: [
        /* {
          backendProxyId: '1',
          proxyName: '测试',
          proxyCode: '123',
          description: '234',
          proxyType: '0',
          createTime: 1564455643252
        } */
      ],
      pageSize: 20,
      currentPage: 1,
      totalCount: 0
    };
  },
  methods: {
    /**
     * 新建配置
     */
    toCreatSet() {
      const that = this;
      that.$router.push(`/createEnvSet?proxyType=${that.proxyType}`);
    },
    /**
     *  搜索
     */
    searchData: _debounce(function(value) {
      const that = this;
      that.currentPage == 1;
      that.getData();
    }, 500),

    /**
     *  搜索清除
     */
    clearInput() {
      this.currentPage = 1;
      this.getData();
    },
    /**
     * 切换 http dubbo
     */
    changeType(val) {
      const that = this;
      that.currentPage = 1;
      that.getData();
    },
    /**
     *  分页
     */
    handleSizeChange(val) {
      this.pageSize = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getData();
    },
    /**
     * 查看
     */
    handleShow(index, row) {
      const that = this;
      that.$router.push(`/createEnvSet?envSetFlag=show&proxyType=${row.proxyType}&backendProxyId=${row.backendProxyId}`);
    },
    /**
     * 编辑
     */
    handleEdit(index, row) {
      const that = this;
      that.$router.push(`/createEnvSet?envSetFlag=edit&proxyType=${row.proxyType}&backendProxyId=${row.backendProxyId}`);
    },
    /**
     * 删除
     */
    handleDel(index, row) {
      const that = this;
      that
        .$confirm('确定删除该环境?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        .then(() => {
          that.postDelData(index, row);
        })
        .catch(() => {});
    },
    postDelData(index, row) {
      const that = this;
      let para = {
        backendProxyId: row.backendProxyId,
        requestProject: that.repProjectName
      };
      getRequest('/gateway-manage/delete-proxy', para)
        .then(res => {
          let resData = res.data;
          if (resData.code == '0000') {
            showMsg.showmsg('删除成功', 'success');
            that.tableData.splice(index, 1);
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    /**
     *  获取数据
     */
    getData() {
      const that = this;
      let para = {
        search: that.searchValue,
        pageNum: that.currentPage,
        pageSize: that.pageSize,
        proxyType: that.proxyType
      };
      getRequest('/gateway-manage/page-proxy', para)
        .then(res => {
          let resData = res.data;
          if (resData.code == '0000') {
            that.tableData = resData.result.result || [];
            that.totalCount = resData.result.totalCount;
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    }
  },
  mounted() {
    const that = this;
    that.getData();
  }
};
</script>
<style lang="less" scoped>
.w-320 {
  width: 320px;
}
.m-t-14 {
  margin-top: 14px;
}
.el-radio-group {
  display: inline-block;
  vertical-align: top;
}
</style>
