<template>
  <SmallBorder>
    <div class="go-device-status">
      <div class="header">
        <div class="header-left" :style="{
          marginLeft:
            option.paddingX
            + 'px',
          marginTop:
            option.paddingY
            + 'px'
        }
          ">
          <div class="title-text-bg" :style="{

          }">
            <span class="title-text" :style="{
              letterSpacing: option.letterSpacing + 'px',
              color: option.titleColor, fontSize: option.titleSize + 'px'
            }">{{
              option.title }}</span>
          </div>
        </div>
      </div>
      <div class="status-section">
        <div class="rate-circle-bg">
          <div class="rate-circle"
            :style="{ background: `conic-gradient(${option.progressColor} 0% ${option.onlineRate}%, ${option.progressBgColor} ${option.onlineRate}% 100%)` }">
            <div class="rate-text-wrapper">
              <span class="rate-text" :style="{ color: option.progressTextColor }">{{ option.onlineRate }}</span>
              <span class="rate-percent" :style="{ color: option.progressTextColor }">%</span>
            </div>
          </div>
        </div>

        <div class="online-content">
          <div class="text-content">
            <span class="online-text">
              设备在线率
            </span>
            <div class="online-nums">
              <span class="online-num">{{ option.onlineDevice }}</span>
              <span class="total-num">/{{ option.totalDevice }}</span>
            </div>
          </div>

          <div class="progress-bar-wrapper">
            <div class="progress-bar" :style="{ backgroundColor: option.progressBgColor }">
              <div class="progress" :style="{ width: option.onlineRate + '%', backgroundColor: option.progressColor }">
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="table-header" :style="{
        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 class="header-item"></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.enterprise }}</div>
          <div class="row-item" :style="{ color: option.textColor, fontSize: option.fontSize + 'px' }">{{
            item.deviceType }}</div>
          <div class="row-item" :style="{ color: option.textColor, fontSize: option.fontSize + 'px' }">{{
            item.deviceName }}</div>
          <div class="row-item time-wrapper">
            <div class="time"
              :style="{ backgroundColor: option.timeBgColor, color: option.timeTextColor, fontSize: option.fontSize + 'px' }">
              {{ item.time }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </SmallBorder>

</template>

<script setup lang="ts">
import SmallBorder from '../SmallBorder/index.vue'
import { PropType, computed } from 'vue'
import { option as configOption } from './config'

const props = defineProps({
  chartConfig: {
    type: Object as PropType<{ option: typeof configOption }>,
    required: true
  }
})

const option = computed(() => props.chartConfig.option)
</script>

<style lang="scss" scoped>
SmallBorder {
  position: relative;
}

.go-device-status {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  // background-color: #041126;
  color: #ffffff;
  padding: 10px 15px;
  // padding-bottom: 3px;
  box-sizing: border-box;

  .header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;


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

      .legend {
        display: flex;
        margin-right: 10px;

        .legend-item {
          width: 15px;
          height: 8px;
          margin-left: 5px;
        }
      }
    }
  }

  .status-section {
    display: flex;
    flex-direction: row;

    align-items: center;
    margin-bottom: -2px;
    padding: 0 10px;

    .rate-circle-bg {
      position: relative;
      width: 60px;
      height: 60px;
      display: flex;
      justify-content: center;
      align-items: center;
      padding-bottom: 2px;

      &::after {
        content: '';
        position: absolute;
        top: -5px;
        left: -5px;
        right: -5px;
        bottom: -5px;
        border-radius: 50%;
        filter: blur(5px);
        background: radial-gradient(circle, #0d5585, transparent 60%);
      }
    }

    .rate-circle {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      z-index: 1;

      &::before {
        content: '';
        width: 36px;
        height: 36px;
        background-color: #041126;
        border-radius: 50%;
      }

      .rate-text-wrapper {
        position: absolute;

        .rate-text {
          font-size: 12px;
          font-weight: bold;
        }

        .rate-percent {
          font-size: 12px;
          margin-left: 0px;
        }
      }
    }

    .online-content {
      margin-top: -5px;
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 80%;
      justify-content: center;
      margin-left: 10px;

      .text-content {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        margin-bottom: 2px;

        .online-num {
          font-size: 16px;
          font-weight: bold;
          color: #23DEE9;
        }

        .total-num {
          font-size: 16px;
          font-weight: bold;
          color: #555657;

        }
      }
    }

    .progress-bar-wrapper {
      flex: 1;
    }

    .progress-bar {
      width: 100%;
      height: 10px;
      border-radius: 1px;
      overflow: hidden;
      box-shadow: #082846 0px 0px 0px 2px;

      .progress {
        height: 100%;
        border-radius: 1px;
        background: linear-gradient(to right, #0A5987, #71D8FE);

      }
    }

  }

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


    .header-item {
      text-align: left;
      padding-left: 10px;

      &:nth-child(1) {
        flex: 2;
      }

      &:nth-child(2) {
        flex: 2;
      }

      &:nth-child(3) {
        flex: 2;
      }

      &:nth-child(4) {
        flex: 1;
      }
    }
  }

  .table-body {
    flex: 1;
    overflow-y: auto;
    margin-top: 5px;

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

    scrollbar-width: none;

    .table-row {
      display: flex;
      align-items: center;
      padding: 0 10px;
      margin-bottom: 3px;
      border-radius: 1px;
      border-bottom: 1px solid #29333C;

      &:last-child {
        border-bottom: none;
      }

      .row-item {
        text-align: left;
        padding-left: 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

        &:nth-child(1) {
          flex: 2;
        }

        &:nth-child(2) {
          flex: 2;
        }

        &:nth-child(3) {
          flex: 2;
        }

        &:nth-child(4) {
          flex: 1;
        }
      }

      .time-wrapper {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        padding-right: 10px;

        .time {
          padding: 1px 6px;
          border-radius: 5px;
        }
      }
    }
  }
}
</style>
