<template>
  <div class="content-box">
    <div class="left">
      <!-- <el-icon :size="23" class="camera"><VideoCameraFilled /></el-icon> -->
      <div class="left_title">轨迹查询</div>
    </div>
    <div class="middle">
      <div class="filter">
        <div class="condition">
          <el-select
            v-model="searchInput.keyWord"
            popper-class="more-tag-data"
            filterable
            clearable
            remote
            :remote-method="keyWordMethod"
            :loading="conteactLoading"
            placeholder="请选择姓名"
            style="width: 200px"
            @change="searchBtn"
          >
            <el-option
              v-for="item in gradeData"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
              <span style="float: left">{{ item.name }}</span>
            </el-option>
            <template #footer>
              <div class="addStudentMore">
                <el-button
                  v-if="currentPage < totalPage && totalPage != 0"
                  @click="addGradeMore"
                  >加载更多+</el-button
                >
              </div>
            </template>
          </el-select>
        </div>
        <div class="condition">
          <el-date-picker
            v-model="searchInput.createTime"
            type="daterange"
            range-separator="-"
            start-placeholder="起始时间"
            end-placeholder="结束时间"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            :prefix-icon="Calendar"
            placeholder="请选择日期"
            style="width: 280px"
            @change="searchBtn"
            :clearable="false"
          />
        </div>
      </div>
    </div>
    <div class="trackInfo">
      <el-timeline style="max-width: 600px">
        <el-timeline-item
          v-for="i in tableData.list"
          center
          color="rgba(30, 125, 251, 1)"
          :timestamp="`${i.type} ( ${i.dateTime} )`"
          placement="top"
        >
          <el-card>
            <h4>{{ i.location }}</h4>
            <p>{{ i.name }}</p>
            <div v-viewer v-if="i.image">
              <img :src="i.image" alt="" />
            </div>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>
    <div class="scroll" v-loading="loading">
      <div class="map" @click="xy">
        <svg width="1620" height="974" viewBox="0 0 1620 974">
          <!-- 绘制地铁线路 -->
          <path
            id="biking-road"
            :d="route"
            stroke="#409EFF"
            stroke-width="3"
            fill="none"
          />
          <!-- 绘制站点 -->
          <circle
            cx="582"
            cy="372"
            r="6"
            fill="white"
            stroke="#409EFF"
            stroke-width="2"
          />
          <circle
            cx="652"
            cy="402"
            r="6"
            fill="white"
            stroke="#409EFF"
            stroke-width="2"
          />
          <circle
            cx="650"
            cy="562"
            r="6"
            fill="white"
            stroke="#409EFF"
            stroke-width="2"
          />
          <circle
            cx="760"
            cy="233"
            r="6"
            fill="white"
            stroke="#409EFF"
            stroke-width="2"
          />
          <circle
            cx="832"
            cy="407"
            r="6"
            fill="white"
            stroke="#409EFF"
            stroke-width="2"
          />
          <circle
            cx="810"
            cy="590"
            r="6"
            fill="white"
            stroke="#409EFF"
            stroke-width="2"
          />
          <circle
            cx="760"
            cy="539"
            r="6"
            fill="white"
            stroke="#409EFF"
            stroke-width="2"
          />
          <circle
            cx="1002"
            cy="573"
            r="6"
            fill="white"
            stroke="#409EFF"
            stroke-width="2"
          />
          <!-- <text x="452" y="434" fill="#fff">探理楼</text>
          <text x="544" y="326" fill="#fff">探问楼</text>
          <text x="870" y="385" fill="#fff">探真楼</text>
          <text x="845" y="245" fill="#fff">探学楼</text>
          <text x="800" y="573" fill="#fff">学校大门</text>
          <text x="561" y="241" fill="#fff">地下停车场出口</text> -->
        </svg>
        <img
          id="circle"
          style="width: 24px; height: 24px"
          src="@/assets/man.png"
          alt=""
        />
        <!-- <svg
          t="1685007462176"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          id="circle"
          width="24"
          height="24"
          
        >
          <path
            d="M512 1024C229.248 1024 0 794.752 0 512S229.248 0 512 0s512 229.248 512 512-229.248 512-512 512z m200.746667-478.506667l1.749333-1.664 30.165333-30.165333-330.496-330.581333a42.837333 42.837333 0 0 0-60.288 0 42.538667 42.538667 0 0 0 0 60.330666l270.08 270.165334-270.08 269.952a42.496 42.496 0 0 0 0 60.288c16.64 16.64 43.861333 16.469333 60.288 0.042666l298.581334-298.368z"
            fill="#ff3000"
            p-id="5616"
          ></path>
        </svg> -->
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  ref,
  reactive,
  watch,
  nextTick,
  onBeforeMount,
  onUnmounted,
} from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { Calendar } from "@element-plus/icons-vue";
import vidiconsApi from "@/api/vidicons.js";
import { dayjs } from "element-plus";
import lodash from "lodash";
import axios from "axios";
import eds from "@/utils/eds.js";
import { useStore } from "vuex";
const store = useStore();
const api = ref("");
const router = useRouter();
// 表格数据
const loading = ref(false);
const tableData = reactive({
  list: [],
});
const classId = ref(); // 获取所管理的班级的id（0是所有班级）
const searchInput = reactive({
  keyWord: "",
  createTime: [], // 创建时间
}); // 搜索按钮数据
const keyWord = ref();
const gsapAnimate = ref(); // gsap动画
const route = ref(); // 路径

const gradeData = ref([{ name: "刘晓晓-七年级-学生", id: 1 }]); // 下拉学生数据
const currentPage = ref(1); // 当前页
const pageCount = ref(10);
const total = ref(5); // 当前总数
const totalPage = ref(100); // 总页数

// 预约记录分页数据
const getList = async () => {
  loading.value = true;
  let data = {
    // currentPage: currentPage.value,
    // pageCount: pageCount.value,
    userId: searchInput.keyWord,
  };
  if (searchInput.createTime) {
    data.startTime = searchInput.createTime[0];
    data.endTime = searchInput.createTime[1];
  }
  let res = await axios({
    method: "get",
    url: api.value + "/wanzai/api/smartFaceDiscern/selectTrack",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: data,
  });
  if (res.data.code == 200) {
    console.log(res, JSON.parse(eds.decryptDes(res.data.data)), "轨迹查询");
    tableData.list = JSON.parse(eds.decryptDes(res.data.data));
    // total.value = JSON.parse(eds.decryptDes(res.data.data)).totalCount;
    if (gsapAnimate.value) {
      console.log("移出动画");
      gsapAnimate.value.kill(); // 停止动画
      // gsapAnimate.value.restart();// 重置动画
      gsapAnimate.value = null; // 清除动画实例
    }
    if (tableData.list.length) {
      let arr = [];
      tableData.list.forEach((i, ind) => {
        if (ind == 0) {
          let str = "M" + i.x + "," + i.y;
          arr.push(str);
        } else {
          let str = "L" + i.x + "," + i.y;
          arr.push(str);
        }
      });
      console.log(arr.join(" "));
      route.value = arr.join(" ");
      loading.value = false;
      nextTick(() => {
        let num = tableData.list.length / 2;
        console.log(num, "秒数");

        let timer = setTimeout(() => {
          gsap.registerPlugin(MotionPathPlugin);
          // bikingRoad.animation = "dash 10s linear forwards";
          gsapAnimate.value = gsap.to("#circle", {
            duration: num, // 多少时间完成动画
            repeat: 0, // 重复次数 -1为无限次
            ease: Linear.easeNone, //动画的运动方式(匀速)
            motionPath: {
              path: "#biking-road",
              align: "#biking-road",
              autoRotate: true,
              alignOrigin: [0.5, 0.5],
            },
          });
        },100);
      });
    } else {
      loading.value = false;
      route.value = "";
      if (gsapAnimate.value) {
        console.log("移出动画");
        // gsapAnimate.value.kill(); // 停止动画
        // gsapAnimate.value = null; // 清除动画实例
      }
    }
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};

// 搜索功能
const searchBtn = lodash.debounce(async () => {
  getList();
}, 300);
const gradeList = async () => {
  let data = {
    currentPage: currentPage.value,
    pageCount: pageCount.value,
    keyWord: keyWord.value,
  };
  if (classId.value != 0) {
    data.schoolClass = classId.value;
  }
  let res = await axios({
    method: "get",
    url: api.value + "/wanzai/api/smartUser/getPage",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: data,
  });
  console.log(res, JSON.parse(eds.decryptDes(res.data.data)), "用户下拉数据");
  let dataList = JSON.parse(eds.decryptDes(res.data.data));
  gradeData.value = dataList.list;
  totalPage.value = dataList.pages;
  if (!searchInput.keyWord) {
    searchInput.keyWord = gradeData.value[0].id;
  }
  getList();
};
// 联系人下拉框搜索时加载
const keyWordMethod = (query) => {
  console.log(query);
  if (query) {
    keyWord.value = query;
    currentPage.value = 1;
    gradeList();
  }
};
// 搜索框加载更多
const addGradeMore = async () => {
  if (currentPage.value < totalPage.value) {
    currentPage.value++;
    let data = {
      currentPage: currentPage.value,
      pageCount: pageCount.value,
      keyWord: keyWord.value,
    };
    let res = await axios({
      method: "get",
      url: api.value + "/wanzai/api/smartUser/getPage",
      headers: {
        token: sessionStorage.getItem("token"),
        user_head: sessionStorage.getItem("userhead"),
      },
      params: data,
    });
    console.log(
      res,
      JSON.parse(eds.decryptDes(res.data.data)).records,
      "加载更多用户下拉数据"
    );
    gradeData.value = [
      ...gradeData.value,
      ...JSON.parse(eds.decryptDes(res.data.data)).records,
    ];
  } else {
    console.log("数据全部加载完成");
  }
};

// 判断为班主任 还是 超级管理员
const getAdminId = async () => {
  // 获取所管理的班级的id（0是所有班级）
  let res = await axios({
    method: "get",
    url: api.value + "/wanzai/api/smartAuthorGroup/getClassById",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: {
      userHead: sessionStorage.getItem("userhead"),
    },
  });
  // console.log(res,JSON.parse(eds.decryptDes(res.data.data)),"获取所管理的班级的id（0是所有班级）");
  if (res.data.code == 200) {
    let classIds = JSON.parse(eds.decryptDes(res.data.data)).schoolClass;
    classId.value = classIds;
    gradeList();
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};

const xy = (event) => {
  console.log("X:" + event.offsetX);
  console.log("Y:" + event.offsetY);
};

onBeforeMount(async () => {
  api.value = store.state.user.api;
  let dateEnd = dayjs().format("YYYY-MM-DD");
  let dateStart = dayjs(dateEnd).subtract(7, "day").format("YYYY-MM-DD");
  searchInput.createTime = [dateStart, dateEnd];
  console.log(dateStart, dateEnd);
  getAdminId();
});
onUnmounted(() => {
  // document.removeEventListener("keyup", Enters);
});
</script>

<style scoped lang="scss">
.content-box {
  width: calc(100vw - 260px);
  min-width: 1660px;
  height: calc(100vh - 105px);
  min-height: 806px;
  margin: 20px auto;
  background-color: #fff;
  color: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: 0px 3px 10px rgba(0, 97, 255, 0.2);
  position: relative;

  .left {
    // width: calc(100wh - 40px);
    display: flex;
    align-items: center;
    height: 60px;
    margin: 0 20px;
    border-bottom: 1px solid #ccc;
    color: rgb(0, 0, 0);
    font-size: 18px;
    font-weight: 600;
    .left_title {
      height: 60px;
      line-height: 60px;
    }
  }

  .middle {
    width: calc(100% - 60px);
    margin: 0 auto;
    position: absolute;
    top: 100px;
    left: 50px;
    color: #000;

    // border-bottom: 1px solid rgb(231, 231, 231);
    .filter {
      display: flex;
      flex-wrap: wrap;
      align-items: center;

      .search {
        color: #fff;
      }

      .condition {
        display: flex;
        align-items: center;
        margin: 0 25px 0 0;
        :deep(.el-select) {
          .el-select__wrapper {
            box-shadow: none;
            background-color: rgba(133, 191, 242, 0.8);
          }
          .el-select__selected-item {
            color: rgba(255, 255, 255, 0.9);
          }
          .el-select__suffix {
            .el-icon {
              color: rgba(255, 255, 255, 0.9);
            }
          }
        }
        :deep(.el-date-editor) {
          background-color: rgba(133, 191, 242, 0.8);
          box-shadow: none;
          .el-icon {
            color: rgba(255, 255, 255, 0.7);
          }
          .el-range-input {
            color: #fff;
            &::placeholder {
              color: rgba(255, 255, 255, 0.7); /* 更改为你想要的颜色代码 */
            }
          }
          .el-range-separator {
            color: rgba(255, 255, 255, 0.7);
          }
        }
      }
    }

    .gongneng {
      margin: 10px 0 10px 0;
    }
  }

  .trackInfo {
    position: absolute;
    width: 357px;
    height: calc(100% - 141px);
    background: rgba(0, 0, 0, 0.5);
    right: 40px;
    top: 101px;
    display: flex;
    align-items: center;
    justify-content: center;
    :deep(.el-timeline) {
      height: calc(100% - 30px);
      overflow: auto;
      padding-left: 5px;
      padding-right: 25px;
      max-width: 335px !important;
      // 整个滚动条
      &::-webkit-scrollbar-track {
        background-color: rgba(255, 255, 255, 1);
        border-radius: 4px;
      }
      // 滚动条的滚动区域（轨道）
      &::-webkit-scrollbar {
        background-color: #0888f8;
        height: 3px;
        width: 4px;
        border-radius: 4px;
      }
      // 滚动条的可拖拽部分（滑块）
      &::-webkit-scrollbar-thumb {
        background: rgba(30, 125, 251, 1);
        border-radius: 4px;
      }
      .el-timeline-item__tail {
        border-left: 2px dashed rgba(173, 173, 173, 1);
      }
      h4 {
        margin: 0 0 10px 0;
        color: rgba(255, 255, 255, 0.6);
      }
      .el-timeline-item__wrapper {
        .el-timeline-item__timestamp {
          color: #fff;
          font-size: 16px;
        }
        h4 {
          color: rgba(255, 255, 255, 0.6);
          font-size: 14px;
        }
        p {
          color: rgba(255, 255, 255, 0.6);
          font-size: 14px;
        }
        img {
          width: 100px;
        }
      }
      .el-card {
        background-color: transparent;
        border: none;
        .el-card__body {
          padding: 10px;
        }
      }
    }
  }
  .scroll {
    width: calc(100% - 40px);
    height: calc(100% - 61px);
    overflow: auto;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    .map {
      width: 1620px;
      height: 715px;
      overflow: hidden;
      background: url("@/assets/trackImg.jpg");
      background-repeat: no-repeat; //是否平铺
      background-position: 70% 50%; //设置背景图像的起始位置
      background-size: 100% 100%; //规定背景图像的尺寸
      svg {
        // border: 3px solid rgba(255, 255, 255, 1);
      }
    }
  }

  .pageSize {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 30px;

    span {
      color: #000;
    }

    .el-pagination {
      // width: 1600px;
      :deep(.el-pagination__total) {
        color: #000;
      }

      :deep(.el-pagination__goto) {
        color: #000;
      }

      :deep(.el-pagination__classifier) {
        color: #000;
      }

      :deep(.el-input__wrapper) {
        border: 1px solid rgba(0, 0, 0, 1);
        border-radius: 5px;
        box-shadow: none;
      }

      :deep(.el-pager li) {
        margin: 0 5px;
        border: 1px solid rgba(0, 0, 0, 1);
        border-radius: 5px;
        background-color: transparent;
      }

      :deep(.el-pager li.is-active) {
        // background-color: rgba(0, 97, 255, 0.8);
        border: 1px solid rgba(0, 97, 255, 1);
        color: rgba(0, 97, 255, 1);
      }

      :deep(.btn-prev) {
        margin-right: 5px;
        border: 1px solid rgba(0, 0, 0, 1);
        border-radius: 5px;
        background-color: transparent;
      }

      :deep(.btn-next) {
        margin-left: 5px;
        border: 1px solid rgba(0, 0, 0, 1);
        border-radius: 5px;
        background-color: transparent;
      }
    }
  }
}
.bgImg {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 99999999;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  :deep(.el-carousel__arrow) {
    display: none;
  }
  // border-radius: 50px;
  :deep(.el-carousel__container) {
    width: 100%;
    height: calc(100vh);

    .el-carousel__item {
      display: flex;
      justify-content: center;

      img {
        height: 100%;
      }
    }
  }
}

.el-input {
  width: 192px;
}
</style>
