<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-09-05 10:03:31
 * @LastEditors: 无尘
 * @LastEditTime: 2020-05-26 12:35:30
 -->
<template>
  <div style="margin-top:20px">
    <div class="list-content">
      <div
        v-for="(item, index) in tableData"
        :key="index"
        class="list-item">
        <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
                v-model="item.alarmInfo"
                type="textarea"
                resize="none"
                placeholder="请输入内容"
                style="width:368px; height: 70px;" />
              <div
                v-if="item.showError"
                class="el-form-item__error">
                请输入内容
              </div>
            </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)" />
        </div>
      </div>
    </div>
    <alarm-log
      v-if="showDialog"
      :alarm-type="alarmType"
      :scene-code="sceneCode"
      @cancelLog="cancelLog" />
  </div>
</template>

<script>
import { getRequest } from '@/api/api';
import alarmLog from '@/components/plug/alarm-log';
export default {
  components: {
    alarmLog
  },
  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) {
      const that = this;

      that.refash = !that.refash;
      if (!item.alarmInfo) {
        item.showError = true;
        return false;
      } else {
        item.showError = false;
      }
      item.editStatus = !item.editStatus;
      if (!item.editStatus) {
        let params = {
          alarmType: item.alarmType,
          alarmInfo: item.alarmInfo,
          sceneCode: that.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
            });
          });
      }
    }
  }
};
</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 {
          position: relative;
          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);
  }
}
.el-form-item__error {
  top: 70px;
}
</style>
