<template>
  <div class="top-right-box">
    <ItemBox :title="$t('dashboard.realtimeAlarm')">
      <div v-loading="loading" class="box">
        <div class="alarm-list">
          <template v-if="listData.length">
            <div v-for="(item, index) in listData" :key="index" :class="index % 2 ? 'item1' : 'item'">
              <div class="alarm-title">
                <div class="dev">
                  <span class="title">{{ $t('dashboard.device') }}：</span>
                  <span class="value">{{ item.deviceName }}</span>
                </div>
                <div class="time-box">
                  <div class="time">{{ item.createTime }}</div>
                </div>
                <div class="leve">
                  <span :class="item.name === '异常' ? 'leve-value' : 'leve-value2'">{{ item.name }}</span>
                </div>
              </div>
              <div class="bottom">
                <span class="content">{{ item.description }}</span>
              </div>
            </div>
          </template>
          <div v-else style="height:100%;text-align:center;font-size:14px;color:#999;display: flex;justify-content: center;align-items: center;">
            {{ $t('screen.runSuccess' ) }}
          </div>

        </div>
      </div>
    </ItemBox>
  </div>
</template>

<script>
import { GetAlarmList } from '@/api/alarm/realtime'
export default {
  name: 'Index',
  props: {
    stationId: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      config: {
        header: ['等级', '内容', '时间'],
        data: [],
        columnWidth: [80],
        align: ['center', 'center', 'center', 'center'],
        headerBGC: '#062b40',
        oddRowBGC: 'rgba(255, 255, 255, 0)',
        evenRowBGC: 'rgba(255, 255, 255, 0.05)'
      },
      pageflag: false,
      listData: [],
      loading: false
    }
  },
  computed: {
    eventLevels() {
      return this.$store.getters.dicts['eventLevel'] || []
    },
    eventTypes() {
      return this.$store.getters.dicts['eventType'] || []
    }
  },
  watch: {},
  created() {
    // this.GetAlarmList()
  },
  mounted() {
    // this.getData()
  },
  methods: {
    oldsortData(data) {
      const result = data.sort(function(a, b) {
        return b.createTime - a.createTime
      })
      return result
    },
    async getData() {
      this.loading = true
      this.pageflag = false
      const params = {
        pageNum: 1,
        pageSize: 50,
        status: 0,
        stationIds: this.stationId ? [this.stationId] : [],
        deviceTypeList: [],
        description: '',
        eventLevels: ['1', '2', '3'],
        eventTypes: ['2', '3', '4', '5', '6']
      }
      this.config.data = []
      try {
        const res = await GetAlarmList(params)
        // const sortDataRes = this.oldsortData(res.data.list)
        const chartData = []
        res.data.list.forEach(item => {
          const eventLevel = this.getEventLevelsname(item.eventLevel)
          const lastIndex = item.timeStamp.lastIndexOf('.')
          const result = item.timeStamp.slice(0, lastIndex)
          item.timeStamp = result

          const i = {
            name: eventLevel,
            deviceName: item.name,
            description: item.description,
            createTime: item.timeStamp
          }
          chartData.push(i)
        })
        // console.log(chartData)
        this.listData = chartData

        this.pageflag = true
      } catch (error) {
        // console.log(error);
      } finally {
        this.loading = false
      }
    },
    getEventLevelsname(item) {
      return (
        this.eventLevels.find(level => Number(level.value) === item).label || ''
      )
    }
  }
}
</script>
<style lang="scss" scoped>
.top-right-box{
  width: 100%;
  height: 100%;
  overflow: hidden;
  .box {
    width: 100%;
    height: 100%;
    padding: 10px;
    padding-bottom: 0;
    overflow-y: auto;
    overflow-x: hidden;
    font-family: Source Han Sans CN;

    .top-box {
      width: 100%;
      height: 30px;
      line-height: 30px;
    }

    .alarm-list {
      width: 100%;
      height: 100%;
      margin: 0 auto;
      overflow: auto;

      .alarm-title {
        display: flex;
        width: 100%;
        flex-direction: row;
        align-items: center;

        .dev {
          flex: 1;
          display: flex;
          flex-direction: row;
          align-items: center;

          .title {
            display: inline-block;

            font-family: Source Han Sans CN;
            font-size: 14px;
            font-weight: normal;
            text-align: center;
            letter-spacing: 0px;

            color: rgba(206, 235, 255, 0.7);

          }

          .value {

            font-family: Source Han Sans CN;
            font-size: 14px;
            font-weight: normal;
            letter-spacing: 0px;

            color: rgba(206, 235, 255, 0.7);
            width: calc(100% - 45px);
            display: -webkit-box; //将盒子转换为弹性盒子
            -webkit-box-orient: vertical; //文本显示方式，默认水平
            -webkit-line-clamp: 1; //设置显示多少行
            overflow: hidden;
          }

          .time {
            /* 12:33:17 */

            opacity: 1;

            font-family: Source Han Sans CN;
            font-size: 14px;
            font-weight: normal;
            letter-spacing: 0px;

            color: #ffffff;

            z-index: 1;
          }
        }

        .time-box {
          min-width: 117px;
          height: 100%;
          /* 设备：PCS */
          display: flex;
          flex-direction: row;
          align-items: center;
          margin-right: 5px;

          .title {
            font-family: Source Han Sans CN;
            font-size: 14px;
            font-weight: normal;
            text-align: center;
            letter-spacing: 0px;
            flex-shrink: 0;

            color: rgba(206, 235, 255, 0.7);
          }

          .time {
            /* 12:33:17 */

            opacity: 1;

            font-family: Source Han Sans CN;
            font-size: 14px;
            font-weight: normal;
            letter-spacing: 0px;

            color: rgba(206, 235, 255, 0.7);

            z-index: 1;
            display: -webkit-box; //将盒子转换为弹性盒子
            -webkit-box-orient: vertical; //文本显示方式，默认水平
            -webkit-line-clamp: 1; //设置显示多少行
            overflow: hidden;
          }
        }

        .leve {
          // width: 20%;
          margin-left: auto;

          height: 100%;
          /* 异常 */
          text-align: center;
          opacity: 1;
          font-family: Source Han Sans CN;
          font-size: 14px;
          font-weight: normal;
          letter-spacing: 0em;
          color: #ffeeee;
          text-shadow: 0px 0px 5px 0px #ff0000, 0px 0px 5px 0px #ffb800;

          .leve-value {
            display: inline-block;
            width: 40px;
            background: url(../../../../assets/images/alarm-error.png) no-repeat;
            background-size: 100% 100%;
          }

          .leve-value2 {
            display: inline-block;
            width: 40px;
            background: url(../../../../assets/images/alarm-error-2.png) no-repeat;
            background-size: 100% 100%;
          }
        }
      }

      .bottom {
        width: 100%;
        margin-top: 10px;
        padding: 5px;
        display: flex;
        align-items: center;
        background-image: url('../../../../assets/images/alarm-con-bg.png');
        background-size: 100% 100%;

        .content {
          /* 这是内容这是内容这是内容这是内容这是内容这 */

          opacity: 1;

          font-family: Source Han Sans CN;
          font-size: 14px;
          font-weight: normal;
          letter-spacing: 0px;

          color: rgba(255, 255, 255, 1);

          display: inline-block;
        }
      }

      .item {
        width: 100%;
        padding: 5px 10px;
        background-color: #0c3650;
        background-size: 100% 100%;
        margin-bottom: 10px;

      }

      .item1 {
        width: 100%;
        padding: 5px 10px;
        margin-bottom: 10px;
        background-color: transparent;
        background-size: 100% 100%;

      }
    }
  }
}
</style>
