<template>
  <div>
    <div class="box-header">
      <div class="box-title boldtext">位置 <span style="margin-left: 14px;">{{ currentDate }}</span></div>
      <div>
        <!-- <el-button @click="exportData" size="small" style="margin-right: 20px">导出</el-button> -->
        <el-date-picker size="small" v-model="currentDatePicker" type="date" placeholder="选择日期"
          value-format="yyyy-MM-dd" @change="datePickerchange">
        </el-date-picker>
      </div>
    </div>
    <div v-show="!detailsType">
        <!-- <div class="mapbox">地图</div> -->
      <div class="tab-content-map">
        <div id="mapContainer" style="width: 100%; height: 650px;"></div>
      </div>
    </div>

    <!-- 列表展示 -->
    <div v-show="detailsType">
      <el-table :data="dataList" style="width: 100%">
        <el-table-column prop="time" label="时间" />
        <el-table-column prop="lng" label="经度" />
        <el-table-column prop="lat" label="纬度" />
        <template #empty>
            <div>
                今日暂无数据，请选择其他日期
            </div>
        </template>
      </el-table>
      <pagination v-show="(total>0) && detailsType" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getDataPage"/>
    </div>
    
  </div>
</template>

<script>
import { queryGnss,queryLocPageByDate} from "@/api/watch/deviceInfo";
import AMapLoader from '@amap/amap-jsapi-loader';

export default {
  props: {
    detailsType: { 
      type: Boolean,
      default: false
    },
    deviceId: {
      type: String || Number,
      default: "",
    }
  },


  data() {
    return {
      total:0,
      dataList:[],
      queryParams:{
        pageNum: 1,
        pageSize: 10,
        deviceId:"",
        starTime:"",
        endTime:""
      },
      path: [],
      center: [116.397428, 39.90923], // 北京天安门的经纬度,
      currentDate: this.parseTime(new Date(), "{y}-{m}-{d}"),
      currentDatePicker: "",
    }
  },
  methods: {
    getDataPage(){
      this.loading = true;
      this.queryParams.deviceId = this.deviceId;
      this.queryParams.starTime = this.currentDate + " 00:00:00";
      this.queryParams.endTime = this.currentDate + " 23:59:59";
      queryLocPageByDate(this.queryParams)
        .then((response) => {
          if (response) {
            this.dataList = response.rows;
            this.total = response.total;
            this.loading = false;
          } else {
            console.warn("地理分页数据返回为空或格式不正确:", response);
          }
        })
        .catch((error) => {
          console.error("获取地理分页数据失败:", error);
        });
    },
    getDetailsData() {
      queryGnss({ date: this.currentDate, deviceId: this.deviceId }).then((response) => {
        if (response && response.data) {
          this.path = response.data.map(point => ({
            position: new AMap.LngLat(point.lng, point.lat),
            time: point.time
          }));
          this.center = this.path.length > 0 ? this.path[this.path.length - 1].position : this.center;
          this.initializeMap();
        }
      });
    },

    initializeMap() {
      AMapLoader.load({
        key: '71a29e186f52c9adc69964ce38d22237',
        version: '2.0',
        plugins: ['AMap.Polyline', 'AMap.Marker', 'AMap.InfoWindow']
      })
        .then(AMap => {
          this.map = new AMap.Map('mapContainer', {
            center: this.center,
            zoom: 18,
          });

          const polyline = new AMap.Polyline({
            path: this.path.map(point => point.position),
            strokeColor: '#FF0000',
            strokeWeight: 10, // 增加线的宽度
            isOutline: true,
            outlineColor: '#ffffff',
            strokeOpacity: 0.4, // 降低线的透明度
            strokeStyle: 'solid',
            lineJoin: 'round',
            lineCap: 'round',
            zIndex: 50,
            showDir: true, // 显示方向箭头
          });

          this.map.add(polyline);

          const infoWindow = new AMap.InfoWindow({
            offset: new AMap.Pixel(0, -30),
          });

          this.path.forEach((point, index) => {
            const marker = new AMap.Marker({
              position: point.position,
              map: this.map,
              content: `<div style="width: 8px; height: 8px; background-color: #FF0000; border-radius: 50%;"></div>`,
            });

            marker.on('mouseover', () => {
              infoWindow.setContent(`${point.time}`);
              infoWindow.open(this.map, point.position);
            });

            marker.on('mouseout', () => {
              infoWindow.close();
            });
          });
        })
        .catch(e => {
          console.error('AMap API 加载失败:', e);
        });
    },
    datePickerchange() {
      this.currentDate = this.currentDatePicker || this.parseTime(new Date(), "{y}-{m}-{d}");
      if(this.detailsType){
          this.getDataPage();
        } else{
          this.getDetailsData();
      }
    },
    exportData() {

    }
  }
}
</script>

<style lang="scss" scoped>
@mixin u-flex($flexD, $alignI, $justifyC) {
  display: flex;
  flex-direction: $flexD;
  align-items: $alignI;
  justify-content: $justifyC;
}

.boldtext {
  font-size: 16px;
  color: #292929;
  line-height: 30px;
  font-weight: 700;
}

.box-header {
  padding: 0 15px;
  @include u-flex(row, center, space-between);
  height: 50px;
}

.box-title {
  color: #292929;
  font-size: 16px;
  font-family: PingFang SC-Medium;
  padding-left: 10px;
  border-left: 4px solid #2284ff;
  line-height: 13px;
}

.mapbox {
  padding: 50px 15px 15px 15px;
}
</style>