<template>
  <div class="container">
    <!-- 雷达图区域 -->
    <div class="top">
      <div class="top_chart" ref="radarChart"></div>
    </div>

    <!-- 日常轨迹区域 -->
    <div class="bottom">
      <div class="bottom_title">
        <img src="@/assets/images/box-icon.png" />
        日常轨迹
      </div>

      <!-- 轨迹线展示区域 -->
      <div class="bottom_box">
        <div
          v-for="(item, index) in 7"
          :key="index"
          :class="index % 2 === 0 ? 'bottom_line' : 'bottom_line2'"
        >
          <div class="circle">
            <!-- 详细信息区域 -->
            <div class="detail">
              <div class="detail_img">
                <el-image
                  style="width: 38px; height: 45px"
                  src="https://img1.baidu.com/it/u=1398895526,1958525606&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"
                  :preview-src-list="[
                    'https://img1.baidu.com/it/u=1398895526,1958525606&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800',
                  ]"
                  fit="cover"
                />
              </div>
              <div>
                <div>地址：</div>
                <div
                  class="detail_address"
                  title="江西省南昌市经开区黄家湖文化大道"
                >
                  江西省南昌市经开区黄家湖文化大道
                </div>
              </div>
            </div>

            <!-- 时间区域 -->
            <div class="img">
              <span class="span">
                <el-icon size="12"><Clock /></el-icon>
              </span>
              <span class="text">9.20&nbsp;&nbsp;08:00</span>
            </div>
          </div>
          <span>—</span>
          <div class="small"></div>
          <span>—</span>
          <div class="small"></div>
          <span>—</span>
          <div class="small"></div>
          <span>—</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import * as Echarts from "echarts";

let myRaChart: any;

const radarChart = ref(null);

onMounted(() => {
  myRaChart = Echarts.init(radarChart.value);
  initRaChart();
});

// 初始化雷达图
const initRaChart = () => {
  const options = {
    tooltip: {
      trigger: "item",
    },
    radar: {
      indicator: [
        { name: "勤", max: 100 },
        { name: "能", max: 100 },
        { name: "德", max: 100 },
        { name: "扣", max: 100 },
        { name: "绩", max: 100 },
      ],
      axisName: {
        color: "#fff",
        fontSize: 19.5,
      },
      splitArea: {
        areaStyle: {
          color: "none",
        },
      },
      axisLine: {
        lineStyle: {
          color: "rgba(255, 255, 255, 1)",
        },
      },
      splitLine: {
        lineStyle: {
          color: "rgba(255, 255, 255, 1)",
        },
      },
    },
    series: [
      {
        type: "radar",
        name: "综合评价",
        data: [
          {
            value: [100, 92, 99, 78, 52],
            areaStyle: {
              color: "rgba(0, 209, 200, 0.5)",
            },
            symbol: "none",
          },
        ],
      },
    ],
    color: "rgba(0, 209, 200, 1)",
  };

  myRaChart.setOption(options);
};
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 800px;
  height: 834px;
  color: #fff;

  .top {
    height: 530px;
    background-image: url(@/assets/images/box-bg6.png);
    background-size: 100% 100%;

    .top_chart {
      height: 530px;
    }
  }

  .bottom {
    padding: 17px 10px 0 22px;
    height: 272px;
    background-image: url(@/assets/images/box-bg4.png);
    background-size: 100% 100%;

    .bottom_title {
      display: flex;
      align-items: center;
      font-size: 16px;
      font-weight: bold;

      img {
        margin-right: 12px;
        width: 24px;
        height: 24px;
      }
    }

    .bottom_box {
      display: flex;
      height: 220px;
      overflow-x: auto;
      overflow-y: hidden;

      .bottom_line {
        display: inline-flex;
        align-items: center;
        height: 220px;

        .circle {
          position: relative;
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 2px;
          width: 18px;
          height: 18px;
          border-radius: 50%;
          border: 1px solid #70b7fa;
          background-color: #70b7fa;
          background-clip: content-box;

          .img {
            position: absolute;
            top: 82px;
            left: 0;
            display: flex;
            align-items: center;
            width: 121px;
            height: 18px;
            font-size: 10px;
            background-image: url(@/assets/images/line-bg.png);
            background-size: 100% 100%;

            .span {
              margin-top: 2px;
              margin-left: 20px;
              margin-right: 10px;
              color: #fff;
            }

            .text {
              color: #fff;
            }
          }

          .detail {
            position: absolute;
            top: 22px;
            left: 8px;
            display: flex;
            padding: 6px;
            width: 111px;
            height: 57px;
            color: #fff;
            font-size: 10px;
            background-color: rgba(112, 183, 250, 0.4);

            .detail_img {
              margin-right: 4px;
              width: 38px;
              height: 45px;
            }

            .detail_address {
              margin-top: 4px;
              cursor: pointer;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              overflow: hidden;
            }
          }
        }
        .circle::after {
          content: "";
          position: relative;
          top: 37px;
          left: 0;
          height: 74px;
          border-left: 1px solid #70b7fa;
        }

        span {
          color: #70b7fa;
        }

        .small {
          margin-top: 4px;
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background-color: #70b7fa;
        }
      }

      .bottom_line2 {
        display: inline-flex;
        align-items: center;
        height: 220px;

        .circle {
          position: relative;
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 2px;
          width: 18px;
          height: 18px;
          border-radius: 50%;
          border: 1px solid #70b7fa;
          background-color: #70b7fa;
          background-clip: content-box;

          .img {
            position: absolute;
            top: -82px;
            left: 0;
            display: flex;
            align-items: center;
            width: 121px;
            height: 18px;
            font-size: 10px;
            background-image: url(@/assets/images/line-bg.png);
            background-size: 100% 100%;

            .span {
              margin-top: 2px;
              margin-left: 20px;
              margin-right: 10px;
              color: #fff;
            }

            .text {
              color: #fff;
            }
          }

          .detail {
            position: absolute;
            top: -61px;
            left: 8px;
            display: flex;
            padding: 6px;
            width: 111px;
            height: 57px;
            color: #fff;
            font-size: 10px;
            background-color: rgba(112, 183, 250, 0.4);

            .detail_img {
              margin-right: 4px;
              width: 38px;
              height: 45px;
            }

            .detail_address {
              margin-top: 4px;
              cursor: pointer;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              overflow: hidden;
            }
          }
        }
        .circle::after {
          content: "";
          position: relative;
          top: -37px;
          left: 0;
          height: 74px;
          border-left: 1px solid #70b7fa;
        }

        span {
          color: #70b7fa;
        }

        .small {
          margin-top: 4px;
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background-color: #70b7fa;
        }
      }
    }
  }
}

/*定义滚动条样式（高宽及背景）*/
::-webkit-scrollbar {
  height: 10px;
}

/*定义滑块 样式*/
::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background-color: rgba(2, 27, 41, 0.8);
}
</style>
