<template>
  <SmallBorder class="SmallBorder">
    <div class="go-alarm-list">
      <div class="header">
        <div class="title">
          <!-- <div class="title-prefix">
            <svg-icon icon-class="rocket" class="title-icon" :style="{ color: option.iconColor }"></svg-icon>
          </div> -->
          <div class="title-text">
            <span :style="{
              color: option.titleColor,
              fontSize: option.titleSize + 'px',
              fontWeight: option.fontWeight,
              fontStyle: option.fontStyle,
              marginLeft: option.paddingX + 'px',
              marginTop: option.paddingY + 'px',
              letterSpacing: option.letterSpacing + 'px'
            }">{{ option.title }}</span>
          </div>
        </div>
        <div v-if="option.isShowButton" class="header-right-squares">
          <!-- <div class="square" style="background-color: #2e69e0"></div>
          <div class="square" style="background-color: #2e9bf0"></div>
          <div class="square" style="background-color: #2ef0b3"></div> -->
        </div>
      </div>
      <div class="table-header" :style="{
        //  backgroundColor: option.headerBackgroundColor,
        height: option.headerHeight + 'px'
      }">
        <div v-for="header in option.header" :key="header" class="header-item"
          :style="{ color: option.headerTextColor, fontSize: option.fontSize + 'px' }">
          {{ header }}
        </div>
      </div>
      <div class="table-body">
        <div v-for="(item, index) in option.dataset" :key="index" class="table-row"
          :style="{ backgroundColor: option.itemBackgroundColor, height: option.itemHeight + 'px' }">
          <div class="row-item" :style="{ color: option.textColor, fontSize: option.fontSize + 'px' }">
            {{ item.event }}
          </div>
          <div class="row-item" :style="{ color: option.textColor, fontSize: option.fontSize + 'px' }">
            {{ item.time }}
          </div>
          <div class="row-item" :style="{ color: option.textColor, fontSize: option.fontSize + 'px' }">
            {{ item.enterprise }}
          </div>
          <div class="row-item" :style="{ color: getStatusColor(item.status), fontSize: option.fontSize + 'px' }">
            {{ item.status }}
          </div>
        </div>
      </div>
    </div>
  </SmallBorder>

</template>

<script setup lang="ts">
import { PropType, computed } from 'vue'
import { option as configOption } from './config'
import SmallBorder from '../SmallBorder/index.vue'
const props = defineProps({
  chartConfig: {
    type: Object as PropType<{ option: typeof configOption }>,
    required: true
  }
})

const option = computed(() => props.chartConfig.option)

const getStatusColor = (status: string) => {
  return props.chartConfig.option.statusColors[status] || '#ffffff'
}
</script>

<style lang="scss" scoped>
.go-alarm-list {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  // background-color: #2066df;
  color: #ffffff;
  padding: 12px;
  margin-top: 5px;
  box-sizing: border-box;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3px;

    .title {
      display: flex;
      align-items: center;
      margin-top: -5px;

      // .title-prefix {
      //   width: 40px;
      //   height: 35px;
      //   // background-image: linear-gradient(to bottom, #2e69e0, #1e55a7);
      //   clip-path: polygon(0 0, 100% 0, 75% 100%, 0% 100%);
      //   display: flex;
      //   justify-content: center;
      //   align-items: center;
      //   margin-left: 0px;

      //   .title-icon {
      //     font-size: 22px;
      //   }
      // }

      .title-text {
        height: 35px;
        display: flex;
        align-items: center;
        // background-image: linear-gradient(to bottom, #17325f, #0e2142);
        padding: 0 20px 0 20px;
        // margin-left: -10px;
        clip-path: polygon(10% 0, 100% 0, 100% 100%, 0% 100%);
      }
    }

    .header-right-squares {
      display: flex;
      align-items: center;

      .square {
        width: 10px;
        height: 10px;
        margin-left: 5px;
      }
    }
  }

  .table-header {
    display: flex;
    align-items: center;
    padding: 0 10px;
    background: linear-gradient(to top, #226493c8, #0f2448);
    border-bottom: 2px solid #4da6ff;

    .header-item {
      flex: 1 0 25%;
      margin-right: 1.5em;
      text-align: left;
    }
  }

  .table-body {
    flex: 1;
    overflow-y: auto;

    &::-webkit-scrollbar {
      display: none;
      /* 隐藏滚动条 */
      width: 0;
      height: 0;
    }

    scrollbar-width: none;

    .table-row {
      display: flex;
      align-items: center;
      padding: 0 10px;
      margin-bottom: 4px;

      &:first-child {
        margin-top: 5px;
      }

      &:last-child {
        margin-bottom: 0;
      }

      .row-item {
        flex: 1 0 25%;
        margin-right: 1.5em;

        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}
</style>
