<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 #strategyType="{ row }">
        <dict-tag :options="dict.type.gateway_strategy_type" :value="row.strategyType"/>
      </template>
      <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="listStrategy"
      @chooseEnd="chooseEnd"
    >
      <template #strategyType="{ row }">
        <dict-tag :options="dict.type.gateway_strategy_type" :value="row.strategyType"/>
      </template>
    </ChooseDialog>
  </div>
</template>

<script>
import BaseTable from '@/views/gateway/components/BaseTable';
import ChooseDialog from './chooseDialog.vue'
import { listStrategy } from "@/api/gateway/strategy";
export default {
  components: {
    BaseTable,
    ChooseDialog,
  },
  dicts: ['gateway_data_status', 'gateway_strategy_type'],
  data() {
    return {
      listStrategy,
      tableOptions: [
        { label: '策略ID', prop: 'id', width: '80' },
        { type: 'slot', label: '策略类型', prop: 'strategyType', width: '120' },
        { label: '策略名称', prop: 'strategyName' },
        { label: '策略描述', prop: 'description' },
        { type: 'slot', prop: 'action', label: '操作', fixed: 'right', width: '100px' }
        // { label: '服务器端口', prop: 'serverPort' },
      ],
      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: 'strategyName', type: 'input' },
        { label: '策略类型', prop: 'strategyType', type: 'select', dicts: this.dict.type.gateway_strategy_type },
        // { label: '策略描述', prop: 'description', type: 'input' },
      ]
    },
  },  
  created() {
    this.getList();
  },
  methods: {
    async getList() {
      console.log('getList');
      // 调用配置详情接口
      this.tableData = [{
          id: 'xxx',
          strategyName: '策略名称',
          strategyType: 'AUTHENTICATION',
          description: '策略描述',
        }
      ]
    },
    handleMinus(row) {
      console.log(row);
      this.tableData = this.tableData.filter(item => item.id !== row.id);
    },
    chooseEnd(rows) {
      console.log(rows)
      // TODO 调用接口 管理策略到该服务 并刷新列表
      this.tableData = this.tableData.concat(rows);
    }
  }
}
</script>

<style lang="scss" scoped>

</style>