<template>
  <div class="maincontainer">
    <div class="container_item">
      <!-- 文件名显示 -->
      <div class="filename_display">
        <img src="../assets/文件图标-面.png">
        {{ currentItem?.environmentData?.fileName || '暂无文件' }}
      </div>

      <!-- 轮播内容区域 -->
      <div class="carousel-container">
        <!-- 左侧导航按钮 -->
        <button class="nav-button left" @click="prevItem">
          <svg t="1754038374827" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="5034" width="200" height="200">
            <path
              d="M481.233 904c8.189 0 16.379-3.124 22.628-9.372 12.496-12.497 12.496-32.759 0-45.256L166.488 512l337.373-337.373c12.496-12.497 12.496-32.758 0-45.255-12.498-12.497-32.758-12.497-45.256 0l-360 360c-12.496 12.497-12.496 32.758 0 45.255l360 360c6.249 6.249 14.439 9.373 22.628 9.373z"
              p-id="5035"></path>
          </svg>
        </button>

        <!-- 主要内容展示 -->
        <div class="contemer_content">
          <ul style="width:175px">
            <li>时间：</li>
            <li>温度：</li>
            <li>湿度：</li>
            <li>距离：</li>
          </ul>
          <ul style="flex:1">
            <li>{{ currentItem?.environmentData?.date || '--' }}</li>
            <li>{{ currentItem?.environmentData?.temperature || '--' }}</li>
            <li>{{ currentItem?.environmentData?.humidity || '--' }}</li>
            <li>{{ currentItem?.environmentData?.height == 0 ? 0 : currentItem?.environmentData?.height || '--' }}</li>
          </ul>
        </div>

        <!-- 右侧导航按钮 -->
        <button class="nav-button right" @click="nextItem">
          <svg style="transform: rotateZ(180deg);left: 10px;" t="1754038374827" class="icon" viewBox="0 0 1024 1024"
            version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5034" width="200" height="200">
            <path
              d="M481.233 904c8.189 0 16.379-3.124 22.628-9.372 12.496-12.497 12.496-32.759 0-45.256L166.488 512l337.373-337.373c12.496-12.497 12.496-32.758 0-45.255-12.498-12.497-32.758-12.497-45.256 0l-360 360c-12.496 12.497-12.496 32.758 0 45.255l360 360c6.249 6.249 14.439 9.373 22.628 9.373z"
              p-id="5035"></path>
          </svg>
        </button>
      </div>

      <!-- 轮播指示器 -->
      <!-- <div class="carousel-indicators" v-if="tableData.length > 1">
        <span 
          v-for="(item, index) in tableData" 
          :key="index"
          :class="{ active: currentIndex === index }"
          @click="goToItem(index)"
        ></span>
      </div> -->
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const tableData = ref([])
const currentIndex = ref(0)

// 计算当前显示的项目
const currentItem = computed(() => {
  return tableData.value[currentIndex.value] || {}
})

// 加载数据方法
const onloaddata = (jsondata) => {
  tableData.value = jsondata
  currentIndex.value = 0 // 重置到第一项
}

// 上一项
const prevItem = () => {
  if (tableData.value.length <= 1) return
  currentIndex.value = (currentIndex.value - 1 + tableData.value.length) % tableData.value.length
}

// 下一项
const nextItem = () => {
  if (tableData.value.length <= 1) return
  currentIndex.value = (currentIndex.value + 1) % tableData.value.length
}

// 跳转到指定项
const goToItem = (index) => {
  if (index >= 0 && index < tableData.value.length) {
    currentIndex.value = index
  }
}

defineExpose({
  onloaddata
})
</script>

<style scoped lang="less">
.maincontainer {
  width: 100%;
  height: 100%;
  background: #FDFDFD;
  position: relative;
  border-radius: 4px;

  .container_item {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    .filename_display {
      width: 100%;
      height: 70px;
      font-size: 20px;
      color: #434959;
      font-weight: 600;
      display: flex;
      justify-content: center;
      align-items: center;

      &>img {
        width: 16px;
        height: 20px;
        margin-right: 6px;
      }
    }

    .carousel-container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: calc(100% - 100px);
      position: relative;



      .contemer_content {
        flex: 1;
        padding: 0 20px;
        font-size: 16px;
        color: #6B7181;
        width: 100%;
        display: flex;
        padding-top: 20px;

        &>ul {

          &>li {
            text-align: right;
            margin-bottom: 20px;
          }
        }

        &>ul:nth-child(2) {
          &>li {
            text-align: left;
          }
        }

        ul,
        li {
          margin: 0;
          padding: 0;
          list-style: none;
        }



        div {
          margin: 10px 0;

          &>span {
            color: #434959;
          }
        }
      }

      .nav-button {
        width: 60px;
        height: 90px;
        background: rgba(243, 245, 250, 1);
        font-size: 24px;
        cursor: pointer;
        display: flex;
        align-items: center;
        border-radius: 4px;
        justify-content: center;
        color: #6B7181;
        box-shadow: none;
        cursor: pointer;
        position: absolute;

        &>svg {
          position: absolute;
          width: 30px;
          height: 30px;
          left: 20px;

          &>path {
            fill: rgba(107, 113, 129, 1);
          }
        }

        &:hover:not(:disabled) {
          background: rgba(66, 113, 238, 0.10);
          border: 1.4px solid #4271EE;

          &>svg {
            position: absolute;
            width: 30px;
            height: 30px;
            left: 20px;

            &>path {
              fill: rgba(66, 113, 238, 1);
            }
          }
        }

        &:disabled {
          opacity: 0.3;
          cursor: not-allowed;
        }

        &.left {
          left: 16px;
        }

        &.right {
          right: 16px;
        }
      }

      
    }

    .carousel-indicators {
      display: flex;
      justify-content: center;
      height: 40px;
      align-items: center;

      span {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #ccc;
        margin: 0 5px;
        cursor: pointer;

        &.active {
          background: #434959;
        }
      }
    }
  }
}
</style>