<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-09-05 10:03:30
 * @LastEditors: 无尘
 * @LastEditTime: 2019-10-23 17:45:59
 -->
<template>
  <div style="margin-top:20px">
    <div class="table-content">
      <el-table
        v-loading="loading"
        :data="tableData"
        style="width: 100%"
        tooltip-effect="dark"
        :height="tableHeight">
        <el-table-column
          label="流控ID"
          prop="ruleCode">
          <template slot-scope="scope">
            <span>{{ scope.row.ruleCode }}</span>
            <span
              v-if="scope.row.editeFlag === 1"
              class="sign-design">未发布</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="rangeType"
          label="流控范围">
          <template slot-scope="scope">
            <p v-if="scope.row.rangeType === 0">
              项目
            </p>
            <p v-if="scope.row.rangeType === 1">
              分组
            </p>
            <p v-if="scope.row.rangeType === 2">
              接口
            </p>
          </template>
        </el-table-column>
        <el-table-column
          prop="ruleContent"
          label="流控内容"
          show-overflow-tooltip />
        <el-table-column
          prop="grade"
          label="阈值类型">
          <template slot-scope="scope">
            <p v-if="scope.row.grade === 1">
              QPS
            </p>
          </template>
        </el-table-column>
        <el-table-column
          prop="count"
          label="阈值" />
        <el-table-column
          prop="strategy"
          label="流控方式">
          <template slot-scope="scope">
            <p v-if="scope.row.strategy === 0">
              快速失败
            </p>
          </template>
        </el-table-column>
        <el-table-column
          prop="grade"
          label="分布式限流">
          <template slot-scope="scope">
            <p v-if="scope.row.distFlag === 1">
              是
            </p>
            <p v-if="scope.row.distFlag === 0">
              否
            </p>
          </template>
        </el-table-column>
        <el-table-column
          prop="enableFlag"
          label="开启状态">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.enableFlag"
              @change="changeFlag(scope.row)" />
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="150">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="edit(scope.row)">
              编辑
            </el-button>
            <dm-delete
              tips="确定要删除该数据吗?"
              @confirm="deleteList(scope.row)">
              <el-button type="text">
                删除
              </el-button>
            </dm-delete>
            <el-button
              type="text"
              @click="seeLog(scope.row)">
              日志
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <new-rule
      v-if="showRuleDialog"
      :scene-code="sceneCode"
      :rule-id="ruleId"
      @cancelAdd="cancelAdd"
      @getList="getList" />
    <ahsh-log
      v-if="showDialog"
      :alarm-type="alarmType"
      :scene-code="sceneCode"
      :rule-id="ruleId"
      @cancelLog="cancelLog" />
  </div>
</template>

<script>
import { getRequest } from '@/api/api';
import newRule from '@/components/plug/new-rule';
import ahshLog from '@/components/plug/ahsh-log';
export default {
  components: {
    newRule,
    ahshLog
  },
  props: {
    tableData: {
      type: Array,
      default() {
        return [];
      }
    },
    sceneCode: {
      type: String,
      default() {
        return '';
      }
    }
  },
  data() {
    return {
      showRuleDialog: false,
      ruleId: '',
      showDialog: '',
      alarmType: 1
    };
  },
  // created() {
  //   this.getUpdateStatus();
  // },
  methods: {
    // 获取更新状态
    // getUpdateStatus(val) {
    //   let params = {
    //     sceneCode: val ? val : this.sceneCode
    //   };
    //   getRequest('/gateway-manage/rule/ratelimiter/has/edit', params).then(res => {
    //     if (res.data.code == '0000') {
    //       console.log(res.data.result);
    //     } else {
    //       this.$message.error(res.data.message);
    //     }
    //   });
    // },
    deleteList(item) {
      let that = this;
      let params = {
        rateLimiterId: item.rateLimiterId
      };
      getRequest('/gateway-manage/rule/ratelimiter/del', params)
        .then(res => {
          if (res.data.code == '0000') {
            this.getList();
          } else {
            this.$message.error(res.data.message);
          }
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    getList() {
      this.$emit('getList');
    },
    changeFlag(item) {
      let params = {
        enableFlag: item.enableFlag ? 1 : 0,
        rateLimiterId: item.rateLimiterId
      };
      getRequest('/gateway-manage/rule/ratelimiter/enable', params).then(res => {
        if (res.data.code == '0000') {
          this.$emit('getList');
        } else {
          item.enableFlag = !item.enableFlag;
          this.$message.error(res.data.message);
        }
      });
    },
    edit(item) {
      this.ruleId = item.rateLimiterId;
      this.showRuleDialog = true;
    },
    cancelAdd() {
      this.showRuleDialog = false;
    },
    seeLog(item) {
      this.ruleId = item.rateLimiterId;
      this.showDialog = true;
    },
    cancelLog() {
      this.showDialog = false;
    }
  }
};
</script>
<style lang="less" scoped>
.sign-design {
  width: 54px;
  height: 20px;
  line-height: 20px;
  background: rgba(255, 99, 131, 1);
  border-radius: 12px;
  font-size: 12px;
  color: #ffffff;
  display: inline-block;
  text-align: center;
}
</style>
