
<template>
  <div class="bigBox">
    <div class="hearder">
      <svg-icon style="font-size: 20px;" icon-class="castingDetailsYcsj" class="sidebar-logo" />
      <span>异常事件</span>
    </div>
    <div class="content">
      <div>
        <el-steps direction="vertical" :active="abnormalListData.length">
          <el-step v-for="item in abnormalListData">
            <template v-slot:description>
              <div>
                <div class="descriptionTitle">{{ item.abnormalEventTitle }}</div>
                <div class="descriptionTime">事件时刻: <span>{{ item.abnormalEventTime }}</span></div>
                <div class="descriptionContent">事件描述: <span>{{ item.abnormalEventDesc }}</span> </div>
                <div class="descriptionImg">
                  <img style="cursor:zoom-in;" v-for="iten in item.imgInfos" :src="iten.url" alt="" @click="imgBig(iten)">
                </div>
              </div>
            </template>
          </el-step>

        </el-steps>
      </div>
    </div>
    <el-dialog v-model="dialogTableVisible" title="预览" width="1000">
      <div style="display: flex;justify-content: center;">
        <img :src="imgBigUrl" alt="" style="max-width:1000px">
      </div>
    </el-dialog>
  </div>
</template>
      
<script setup>
const props = defineProps({
  abnormalListData: {
    type: Array,
    default: [],
  },
});
// 图片放大
const dialogTableVisible = ref(false)
const imgBigUrl = ref('')
const imgBig = (iten) => {
  dialogTableVisible.value = true
  imgBigUrl.value = iten.url
}
</script>
      
<style lang="scss" scoped>
.bigBox {
  border: 1px solid rgba(235, 237, 238, 1);
  border-radius: 4px;

  .hearder {
    height: 44px;
    line-height: 44px;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    background-color: rgba(250, 251, 252, 1);
    border-bottom: 1px solid rgba(235, 237, 238, 1);
    padding-left: 15px;

    .sidebar-logo {
      vertical-align: middle;
    }

    span {
      vertical-align: middle;
      display: inline-block;
      color: rgba(11, 24, 45, 1);
      font-weight: 600;
      font-size: 14px;
      height: 22px;
      line-height: 22px;
      margin-left: 7px;
    }
  }

  .content {
    padding: 20px;

    .descriptionTitle {
      font-size: 14px;
      height: 22px;
      line-height: 22px;
      color: #000;
      font-weight: 500;
    }

    .descriptionTime {
      font-size: 14px;
      height: 22px;
      line-height: 22px;
      color: rgba(123, 130, 142, 1);
      font-weight: 400;

      span {
        color: rgba(11, 24, 45, 1);
      }
    }

    .descriptionContent {
      font-size: 14px;
      height: 22px;
      line-height: 22px;
      color: rgba(123, 130, 142, 1);
      font-weight: 400;

      span {
        color: rgba(11, 24, 45, 1);
      }
    }

    .descriptionImg {
      img {
        margin-right: 10px;
        width: 72px;
        height: 72px;
      }
    }
  }
}

:deep(.el-step__icon-inner) {
  display: none !important;
}

:deep(.el-step__icon) {
  width: 10px;
  height: 10px;
  margin-left: 7px;
  margin-bottom: 11px;
  border: 2px solid rgba(232, 51, 51, 1)
}

:deep(.el-step__line-inner) {
  border: 1px dashed rgba(245, 167, 167, 1);
}

:deep(.el-step__line) {
  background: none;
}
</style>