<template>
  <div class="container">
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="incidentList">
          <div class="head">
            <div class="head-text">选择设备（SN列表）</div>
          </div>
          <div class="list">
            <div class="list-item" :class="`${index == 0 ? 'active' : ''}`" v-for="(item, index) in 5" :key="item">
              <div class="img">
                <img :src="handcuffs" alt="" />
              </div>
              <div class="content">
                <div class="content-name">设备序号：10</div>
                <div class="content-time">2025/03/26 18:33:32</div>
              </div>
              <el-icon v-if="index == 0"><View /></el-icon>
              <el-icon v-else><Hide /></el-icon>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="18" class="container-right">
        <div class="editTool">
          <span>时间区间：</span>

          <el-radio-group v-model="sectionType">
            <el-radio-button :value="1">小时</el-radio-button>
            <el-radio-button :value="2">天</el-radio-button>
            <el-radio-button :value="3">周</el-radio-button>
          </el-radio-group>

          <div class="editTool-time">
            <el-date-picker
              v-if="sectionType != 3"
              style="width: 300px"
              type="datetimerange"
              range-separator="-"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
            />
            <el-date-picker v-else type="week" value-format="YYYY-MM-DD/ww" placeholder="请选择周" @change="weekChange" />
          </div>
          <span>位置样式：</span>
          <el-radio-group v-model="styleType">
            <el-radio-button :value="1">点</el-radio-button>
            <el-radio-button :value="2">线</el-radio-button>
          </el-radio-group>
        </div>
        <div id="mapcontainer" style="flex: 1"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import handcuffs from "@/assets/img/handcuffs.png";
import { onMounted } from "vue";
import { MapCustom } from "@/utils/mapCustom";
import { ref } from "vue";

let tabs = [
  { label: "全部", value: "0" },
  { label: "未处理", value: "1" },
  { label: "已处理", value: "2" },
];
let sectionType = ref(1);
let styleType = ref(1);

//处理展示数据
const weekChange = (value: any) => {};

onMounted(() => {
  new MapCustom({ dom: "mapcontainer" });
});
</script>

<style scoped lang="less">
.incidentList {
  .head {
    background-color: #fff;
    height: 70px;
    line-height: 70px;

    .head-text {
      color: #061451;
      font-size: 20px;
      display: flex;
      align-items: center;
      &::before {
        margin-right: 18px;
        content: "";
        display: block;
        width: 2px;
        height: 14px;
        border-radius: 20px;
        background: #061451;
      }
    }
  }
  .list {
    .list-item {
      cursor: pointer;
      padding: 0 15px;
      box-sizing: border-box;
      height: 100px;
      background-color: #fff;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #dedede;
      &.active {
        background-color: #e6e7ed;
      }
      .img {
        width: 60px;
        height: 60px;
        flex-shrink: 0;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .content {
        flex: 1;
        margin: 0 10px;
        .content-name {
          color: #061451;
          font-size: 20px;
        }
        .content-time {
          color: #787878;
          font-size: 18px;
        }
      }
    }
  }
}

.container-right {
  display: flex;
  flex-direction: column;
  .editTool {
    min-width: 761px;
    background: #fff;
    padding: 0 20px;
    height: 70px;
    display: flex;
    align-items: center;
    font-size: 14px;
    margin-bottom: 20px;
  }

  .editTool-time {
    margin: 0 10px;
  }
}
</style>
