<template>
  <div>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="open = true"
        >添加</el-button>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="routeList" @selection-change="handleSelectionChange">
      <!-- <el-table-column type="selection" width="55" align="center" /> -->
      <el-table-column label="路由ID" align="center" prop="id" />
      <el-table-column label="路由名称" align="center" prop="routerName" />
      <el-table-column label="请求路径" align="center" prop="requestPath" />
      <el-table-column label="请求方式" align="center" prop="requestMethod">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.http_request_method" :value="scope.row.requestMethod"/>
        </template>
      </el-table-column>
      <el-table-column label="服务地址" align="center" prop="serverAddress" />
      <el-table-column label="服务器端口" align="center" prop="serverPort" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            circle
            icon="el-icon-minus"
            @click="handleMinus(scope.row)"
            v-hasPermi="['gateway:route:edit']"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <ChooseDialog
      title="添加路由"
      :visible.sync="open"
      :queryOptions="queryOption"
      :tableOptions="tableOptions"
      :request="listRoute"
      @chooseEnd="chooseEnd"
    />
  </div>
</template>

<script>
import { listRoute } from '@/api/gateway/route'
import ChooseDialog from './chooseDialog.vue'
export default {
  components: {
    ChooseDialog
  },
  props: {
    serverId: {
      type: String | Number,
      default: '',
    }
  },
  dicts: ['http_request_method',],
  data() {
    return {
      listRoute,
      loading: false,
      total: 0,
      routeList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },

      // 弹出框相关
      open: false,
      dialogQuery: {
        routerName: '',
      },
      queryOption: [
        { label: '路由名称', prop: 'routerName', type: 'input' },
      ],
      tableOptions: [
        { label: '路由ID', prop: 'id' },
        { label: '路由名称', prop: 'routerName' },
        { label: '请求路径', prop: 'requestPath' },
        { label: '请求方式', prop: 'requestMethod' },
        { label: '服务地址', prop: 'serverAddress' },
        { label: '服务器端口', prop: 'serverPort' },
      ],
    }
  },
  created() {
    // this.getList()
  },
  methods: {
    /** 查询路由管理列表 */
    getList() {
      this.loading = true;
      listRoute(this.queryParams).then(response => {
        this.routeList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    handleSelectionChange() {

    },
    handleMinus(row) {
      this.routeList = this.routeList.filter(item => item.id !== row.id);
    },
    handleQuery() {

    },
    resetQuery() {

    },
    chooseEnd(data) {
      console.log(data);
      this.routeList = data;
      // 调用配置路由接口、同时刷新表格
    },
  }
}
</script>

<style lang="scss" scoped>

</style>