<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-09-05 10:03:31
 * @LastEditors: 无尘
 * @LastEditTime: 2019-09-30 16:18:26
 -->
<template>
  <div style="margin-top:20px">
    <div class="list-content">
      <div class="list-item" v-for="(item, index) in tableData" :key="index">
        <div class="item-top">
          <img v-if="item.alarmType === 1" src="../../../static/img/流控告警.png" alt="" />
          <img v-if="item.alarmType === 2" src="../../../static/img/熔断器.png" alt="" />
          <div class="item-info">
            <p class="info-type">{{ item.alarmType === 1 ? '流控告警' : '熔断告警' }}</p>
            <p class="name">Webhook通知地址</p>
            <div class="address">
              <p v-if="!item.editStatus">{{ item.alarmInfo }}</p>
              <el-input v-else type="textarea" resize="none" placeholder="请输入内容" v-model="item.alarmInfo" style="width:368px; height: 78px;"> </el-input>
            </div>
          </div>
        </div>
        <div class="item-bottom">
          <div>
            <p @click="editItemm(item)">{{ item.editStatus ? '保存' : '编辑' }}Webhook通知地址</p>
            <p @click="seeLog(item)">日志</p>
          </div>
          <span style="display:none">{{ refash }}</span>
          <el-switch v-model="item.enableFlag" @change="handleChange(item)"> </el-switch>
        </div>
      </div>
    </div>
    <alarmLog v-if="showDialog" @cancelLog="cancelLog" :alarmType="alarmType" :sceneCode="sceneCode"></alarmLog>
  </div>
</template>

<script>
import { getRequest } from '@/api/api';
import alarmLog from '@/components/plug/alarm-log';
export default {
  props: {
    tableData: {
      type: Array,
      default() {
        return [];
      }
    },
    sceneCode: {
      type: String,
      default() {
        return '';
      }
    }
  },
  data() {
    return {
      showDialog: false,
      refash: false
    };
  },
  methods: {
    handleChange(item) {
      this.$emit('changeFlag', item);
    },
    seeLog(item) {
      this.ruleId = item.sceneCode;
      this.alarmType = item.alarmType;
      this.showDialog = true;
    },
    cancelLog() {
      this.showDialog = false;
    },
    editItemm(item) {
      var that = this;
      this.refash = !this.refash;
      item.editStatus = !item.editStatus;
      if (!item.editStatus) {
        let params = {
          alarmType: item.alarmType,
          alarmInfo: item.alarmInfo,
          sceneCode: this.sceneCode
        };
        getRequest('/gateway-manage/rule/alarm/edit', params)
          .then(res => {
            if (res.data.code == '0000') {
              this.$emit('getList');
              this.$message.success('保存成功');
            } else {
              item.editStatus = !item.editStatus;
              this.$message.error(res.data.message);
            }
          })
          .catch(function(error) {
            that.$message.error({
              duration: 1000,
              message: error.message
            });
          });
      }
    }
  },
  components: {
    alarmLog
  }
};
</script>
<style lang="less" scoped>
.list-content {
  font-size: 0;
  .list-item {
    display: inline-block;
    margin-right: 10px;
    width: 460px;
    height: 196px;
    padding: 20px 18px;
    background: rgba(255, 255, 255, 1);
    border-radius: 4px;
    border: 1px solid rgba(220, 223, 230, 1);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    &:hover {
      box-shadow: 0px 2px 10px 0px rgba(213, 213, 213, 0.5);
    }
    .item-top {
      display: flex;
      img {
        width: 32px;
        height: 32px;
      }
      .item-info {
        margin-left: 20px;
        .info-type {
          font-size: 14px;
          color: #303133;
          line-height: 20px;
          font-weight: 600;
        }
        .name {
          color: #909399;
          font-size: 12px;
          margin: 5px 0;
        }
        .address {
          color: #606266;
          font-size: 14px;
          min-height: 78px;
          .el-textarea {
            /deep/ .el-textarea__inner {
              height: 100%;
            }
          }
          p {
            word-wrap: break-word;
            width: 350px;
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
          }
        }
      }
    }
    .item-bottom {
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
      align-items: center;
      div {
        font-size: 0;
        p {
          padding: 8px 10px;
          font-size: 14px;
          border-radius: 4px;
          border: 1px solid #5584ff;
          display: inline-block;
          color: #5584ff;
          margin-right: 10px;
          cursor: pointer;
        }
        p:hover {
          box-shadow: 0px 2px 10px 0px rgba(213, 213, 213, 0.5);
        }
      }
    }
  }
  .list-item:hover {
    box-shadow: 0px 2px 10px 0px rgba(213, 213, 213, 0.5);
  }
}
</style>
