<template>
  <div style="margin-top:20px">
    <div class="table-content">
      <el-table :data="tableData" style="width: 100%" tooltip-effect="dark" v-loading="loading" :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>
            <p v-if="scope.row.rangeType === 3">其他</p>
          </template>
        </el-table-column>
        <el-table-column prop="ruleContent" label="熔断内容"> </el-table-column>
        <el-table-column prop="grade" label="阈值类型">
          <template slot-scope="scope">
            <p v-if="scope.row.grade === 1">异常比例</p>
          </template>
        </el-table-column>
        <el-table-column prop="count" label="阈值">
          <template slot-scope="scope">
            <p>{{ scope.row.count * 100 }}%</p>
          </template>
        </el-table-column>
        <el-table-column prop="timeWindow" label="时间窗口">
          <template slot-scope="scope">
            <p>{{ scope.row.timeWindow }}秒</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)"> </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="edit(scope.row)">编辑</el-button>
            <dm-delete @confirm="deleteList(scope.row)" tips="确定要删除该数据吗?">
              <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>
    <newSet v-if="showFlusDialog" :sceneCode="sceneCode" :degradeId="degradeId" @cancelAddFlus="cancelAddFlus" @getList="getList"></newSet>
    <ahshLog v-if="showDialog" @cancelLog="cancelLog" :sceneCode="sceneCode" :ruleId="ruleId" :alarmType="alarmType"></ahshLog>
  </div>
</template>

<script>
import { getRequest } from '@/api/api';
import newSet from '@/components/plug/rule-set';
import ahshLog from '@/components/plug/ahsh-log';
export default {
  props: {
    tableData: {
      type: Array,
      default() {
        return [];
      }
    },
    sceneCode: {
      type: String,
      default() {
        return '';
      }
    }
  },
  data() {
    return {
      showFlusDialog: false,
      showDialog: false,
      alarmType: 2
    };
  },
  // created() {
  //   this.getUpdateStatus();
  // },
  methods: {
    // // 获取更新状态
    // getUpdateStatus(val) {
    //   let params = {
    //     sceneCode: val ? val : this.sceneCode
    //   };
    //   getRequest('/gateway-manage/rule/degrade/has/edit', params).then(res => {
    //     if (res.data.code == '0000') {
    //       console.log(res.data.result);
    //     } else {
    //       this.$message.error(res.data.message);
    //     }
    //   });
    // },
    deleteList(item) {
      var that = this;
      let params = {
        degradeId: item.degradeId
      };
      getRequest('/gateway-manage/rule/degrade/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');
    },
    edit(item) {
      this.degradeId = item.degradeId;
      this.showFlusDialog = true;
    },
    cancelAddFlus() {
      this.showFlusDialog = false;
    },
    changeFlag(item) {
      var that = this;
      let params = {
        enableFlag: item.enableFlag ? 1 : 0,
        degradeId: item.degradeId
      };
      getRequest('/gateway-manage/rule/degrade/enable', params)
        .then(res => {
          if (res.data.code == '0000') {
            this.$emit('getList');
          } else {
            item.enableFlag = !item.enableFlag;
            this.$message.error(res.data.message);
          }
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    seeLog(item) {
      this.ruleId = item.degradeId;
      this.showDialog = true;
    },
    cancelLog() {
      this.showDialog = false;
    }
  },
  components: {
    newSet,
    ahshLog
  }
};
</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>
