<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--选择器数据-->
      <el-col :span="10" :xs="24">
        <el-form
            ref="formRef"
            :inline="true"
            size="mini"
            :model="selectorParam"
        >
          <el-form-item>
            <span>选择器列表</span>
          </el-form-item>
          <div style="float: right">
            <el-form-item>
              <el-input v-model="selectorParam.name">
                <template #append>
                  <el-button
                      type="primary"
                      icon="el-icon-search"
                      placeholder="选择器名称"
                      @click="getSelectorList"
                  />
                </template>
              </el-input>
            </el-form-item>
            <el-form-item>
              <!-- <el-button type="primary" @click="selectorVisible = true">
                添加选择器
              </el-button> -->
            </el-form-item>
          </div>
        </el-form>
        <el-table
            stripe
            ref="selectorTable"
            :data="selectorData"
            :height="tableHeight"
            highlight-current-row
            @current-change="handleCurrentChange"
            :header-cell-style="{
            background: '#ebf3fb',
            color: '#333',
            padding: '4px 0',
            'border-right': '1px solid #fff',
          }"
        >
          <el-table-column
              show-overflow-tooltip
              header-align="center"
              align="center"
              prop="name"
              label="名称"
          />
          <el-table-column
              show-overflow-tooltip
              header-align="center"
              align="center"
              prop="enabled"
              label="状态"
          >
            <template slot-scope="scope">
              <el-tag
                  :type="scope.row.enabled ? 'success' : 'warning'"
                  disable-transitions
              >
                {{ scope.row.enabled ? "开启" : "关闭" }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
              fixed="right"
              align="center"
              label="操作"
              width="220"
          >
            <template #default="scope">
              <!-- <el-button
                v-hasPermi="['service:info:update']"
                @click="handleEditSelector(scope.row)"
                size="mini"
              >
                编辑
              </el-button> -->
              <el-button
                  type="danger"
                  @click="handleDeleteSelector(scope.row)"
                  v-hasPermi="['service:info:delete']"
                  size="mini"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
            v-show="selectorDataTotal > 0"
            :total="selectorDataTotal"
            :page.sync="selectorParam.currentPage"
            :limit.sync="selectorParam.pageSize"
            @pagination="getSelectorList"
        />
      </el-col>
      <!--选择器规则列表-->
      <el-col :span="14" :xs="24">
        <el-form ref="formRef" :inline="true" size="mini" :model="ruleParam">
          <el-form-item>
            <span>选择器规则列表</span>
          </el-form-item>
          <el-form-item>
            <el-button
                type="primary"
                plain
                icon="el-icon-refresh-right"
                @click="syncProxyData"
            >
              同步数据
            </el-button>
          </el-form-item>
          <div style="float: right">
            <el-form-item>
              <el-input v-model="ruleParam.name">
                <template #append>
                  <el-button
                      type="primary"
                      icon="el-icon-search"
                      placeholder="规则名称"
                      @click="getRuleList"
                  />
                </template>
              </el-input>
            </el-form-item>
            <el-form-item>
              <!-- <el-button type="primary" @click="ruleVisible = true">
                添加规则
              </el-button> -->
            </el-form-item>
          </div>
        </el-form>
        <el-table
            stripe
            :data="ruleData"
            :height="tableHeight"
            :header-cell-style="{
            background: '#ebf3fb',
            color: '#333',
            padding: '4px 0',
            'border-right': '1px solid #fff',
          }"
        >
          <el-table-column
              show-overflow-tooltip
              align="center"
              prop="name"
              label="规则名称"
          />
          <el-table-column
              show-overflow-tooltip
              header-align="center"
              align="center"
              width="70"
              prop="enabled"
              label="状态"
          >
            <template slot-scope="scope">
              <el-tag
                  :type="scope.row.enabled ? 'success' : 'warning'"
                  disable-transitions
              >
                {{ scope.row.enabled ? "开启" : "关闭" }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
              show-overflow-tooltip
              align="center"
              width="150"
              prop="dateUpdated"
              label="更新时间"
          />
          <el-table-column
              fixed="right"
              align="center"
              label="操作"
              width="180"
          >
            <template #default="scope">
              <!-- <el-button
                v-hasPermi="['service:info:update']"
                @click="handleEditRule(scope.row)"
                size="mini"
              >
                编辑
              </el-button> -->
              <el-button
                  type="danger"
                  @click="handleDeleteRule(scope.row)"
                  v-hasPermi="['service:info:delete']"
                  size="mini"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
            v-show="ruleDataTotal > 0"
            :total="ruleDataTotal"
            :page.sync="ruleParam.currentPage"
            :limit.sync="ruleParam.pageSize"
            @pagination="getRuleList"
        />
      </el-col>
    </el-row>
    <el-dialog :visible.sync="selectorVisible" title="选择器">
      <el-form ref="selectorForm" :model="selectorForm">
        <el-form-item label="名称">
          <el-input v-model="selectorForm.name"></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="selectorForm.type" placeholder="类型">
            <el-option label="全流量" value="0"></el-option>
            <el-option label="自定义" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="selectorForm.type == '1'" label="类型">
          <el-select v-model="selectorForm.matchMode" placeholder="类型">
            <el-option
                v-for="matchMode in matchModes"
                :key="matchMode.id"
                :value="matchMode.dictValue"
            >{{ matchMode.dictName }}
            </el-option
            >
          </el-select>
        </el-form-item>
        <el-row :gutter="5">
          <el-col :span="7">
            <el-form-item label="继续后续选择器：">
              <el-switch v-model="selectorForm.continued"></el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="打印日志：">
              <el-switch v-model="selectorForm.loged"></el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="是否开启：">
              <el-switch v-model="selectorForm.enabled"></el-switch>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="处理">
          <el-row :gutter="5">
            <el-col
                :span="6"
                v-for="handler in pluginHandles"
                :key="handler.id"
            >
              <el-input v-model="selectorForm[handler.field]">
                <template slot="prepend">{{ handler.label }}</template>
              </el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="执行顺序">
          <el-input v-model="selectorForm.sort"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="selectorVisible = true">
            确认
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog :visible.sync="ruleVisible" title="选择器规则">
      <!-- @close="closeDialog" -->
    </el-dialog>
  </div>
</template>

<script>
import "@/assets/styles/common.scss";
import {
  deleteRule,
  deleteSelector,
  getMatchModeList,
  getOperatorList,
  getParamTypeList,
  getPluginHandleList,
  getRuleList,
  getSelectorList,
  getShenyuToken,
  syncProxyData,
} from "@/api/gateway/proxy.js";

export default {
  name: "proxy",
  data() {
    return {
      token: undefined,
      selectorVisible: false,
      ruleVisible: false,
      currentRow: undefined,
      tableHeight: window.innerHeight - 300,
      selectorData: [],
      selectorDataTotal: 0,
      selectorParam: {
        currentPage: 1,
        pageSize: 20,
        pluginId: 5,
        name: "",
      },
      ruleData: [],
      ruleDataTotal: 0,
      ruleParam: {
        currentPage: 1,
        pageSize: 20,
        pluginId: 5,
        name: "",
        selectorId: "",
      },
      selectorForm: {},
      ruleForm: {},

      operators: undefined,
      matchModes: undefined,
      paramTypes: undefined,
      pluginHandles: undefined,
    };
  },
  mounted() {
    getShenyuToken().then((r) => {
      this.token = r.data.token;
      this.getSelectorList();
      this.getBaseData();
    });
  },
  methods: {
    // 获取选择器列表
    getSelectorList() {
      getSelectorList(this.selectorParam, this.token).then((r) => {
        this.selectorData = r.data.dataList;
        this.selectorDataTotal = r.data.page.totalCount;
        this.setCurrent(this.selectorData[0]);
      });
    },
    // 获取选择器规则列表
    getRuleList() {
      this.ruleParam.selectorId = this.currentRow.id;
      getRuleList(this.ruleParam, this.token).then((r) => {
        this.ruleData = r.data.dataList;
        this.ruleDataTotal = r.data.page.totalCount;
      });
    },
    // 同步信息
    syncProxyData() {
      syncProxyData(this.token).then((r) => {
        this.$modal.msgSuccess("同步成功");
      });
    },
    // 设置当前行
    setCurrent(row) {
      this.$refs.selectorTable.setCurrentRow(row);
    },
    // 选中执行操作
    handleCurrentChange(val) {
      this.currentRow = val;
      this.getRuleList();
    },
    // 编辑选择器
    handleEditSelector(selector) {
    },
    // 编辑选择器规则
    handleEditRule(rule) {
    },
    // 删除选择器
    handleDeleteSelector(selector) {
      this.$modal
          .confirm('是否确认删除选择器 "' + selector.name + '" ？')
          .then(() => deleteSelector([selector.id], this.token))
          .then(() => {
            this.getSelectorList();
            this.$modal.msgSuccess("删除成功");
          })
          .catch(() => {
          });
    },
    // 删除选择器规则
    handleDeleteRule(rule) {
      this.$modal
          .confirm('是否确认删除选择器 "' + rule.name + '" ？')
          .then(() => deleteRule([rule.id], this.token))
          .then(() => {
            this.getRuleList();
            this.$modal.msgSuccess("删除成功");
          })
          .catch(() => {
          });
    },
    getBaseData() {
      getOperatorList(this.token).then((r) => {
        this.operators = r.data;
      });
      getMatchModeList(this.token).then((r) => {
        this.matchModes = r.data;
      });
      getParamTypeList(this.token).then((r) => {
        this.paramTypes = r.data;
      });
      getPluginHandleList(this.token).then((r) => {
        this.pluginHandles = r.data;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-table {
  border: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
  border-bottom: none;
  border-radius: 5px;
}

::v-deep .el-dialog {
  position: relative;
  background: #ffffff;
  border-radius: 2px;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

::v-deep .el-dialog__body {
  // border-top: 1px solid #dcdfe6;
  overflow-y: auto;

  &::-webkit-scrollbar {
    width: 2px;
    background-color: #ccc;
  }

  &::-webkit-scrollbar-thumb {
    background-color: #0ae;
  }

  &::-webkit-scrollbar-track {
    background-color: #ccc;
  }
}
</style>
