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

    <BaseTable
      ref="table"
      :loading="loading"
      :tableOptions="tableOptions"
      :tableData="tableData"
    >
      <template #action="{ row }">
        <el-button
          circle
          icon="el-icon-minus"
          @click="handleMinus(row)"
        ></el-button>
      </template>
    </BaseTable>

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

    <ChooseDialog
      title="添加接口"
      :visible.sync="open"
      :queryOptions="queryOptions"
      :tableOptions="chooseTableOptions"
      :request="listInterface"
      @chooseEnd="chooseEnd"
    />
  </div>
</template>

<script>
import BaseTable from '@/views/gateway/components/BaseTable';
import ChooseDialog from './chooseDialog.vue'
import { listInterface } from "@/api/gateway/interface";
export default {
  components: {
    BaseTable,
    ChooseDialog,
  },
  dicts: ['gateway_data_status', 'gateway_strategy_type'],
  data() {
    return {
      listInterface,
      tableOptions: [
        { label: '接口ID', prop: 'id', width: '80' },
        { label: '接口名称', prop: 'interfaceName' },
        { label: '接口路劲', prop: 'interfacePath' },
        { label: '接口描述', prop: 'description' },
        { label: '接口版本', prop: 'version', width: '120' },
        { type: 'slot', prop: 'action', label: '操作', fixed: 'right', width: '100px' }
      ],
      loading: false,
      tableData: [],
      total: 1,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },

      // 弹出框相关
      open: false,
    }
  },
  computed: {
    chooseTableOptions() {
      return this.tableOptions.filter(item => item.prop !== 'action');
    },
    queryOptions() {
      return [
        { label: '接口名称', prop: 'interfaceName', type: 'input' },
      ]
    },
  },  
  created() {
    this.getList();
  },
  methods: {
    async getList() {
      console.log('getList');
      // 调用配置详情接口
      this.tableData = []
    },
    handleMinus(row) {
      console.log(row);
      this.tableData = this.tableData.filter(item => item.id !== row.id);
    },
    chooseEnd(rows) {
      // TODO 调用接口 管理策略到该服务 并刷新列表
      this.tableData = this.tableData.concat(rows);
    }
  }
}
</script>

<style lang="scss" scoped>

</style>