<template>
  <div class="bg-el-color" style="position: relative;height: 100%;width: 100%;">
    <MapShipHistoricalTrackMap ref="mapShipHistoricalTrackMap" v-loading="loading" :style="$store.state.settings.sideTheme == 'theme-dark'? 'opacity: .8;' : ''" :coordinates="coordinates" v-model:routeIndex="routeIndex" :timerDuration="timerDuration" />
    <div class="bg-el-color text-sm" style="position: absolute;left: 0.5em;top: 0.5em;min-width: 200px;">
      <div class="bg-el-color-primary padding-sm padding-tb-xs text-df flex justify-between align-center text-white">
        <div class="text-bold">
          航行轨迹
        </div>
        <div class="pointer">
          <el-icon @click="showShipInfo = true" v-show="!showShipInfo">
            <FullScreen />
          </el-icon>
          <el-icon @click="showShipInfo = false" v-show="showShipInfo">
            <Minus />
          </el-icon>
          <el-icon @click="handleCloseShipHistoricalTrack" class="margin-left-xs">
            <Close />
          </el-icon>
        </div>
      </div>
      <div class="padding-sm" v-show="showShipInfo">
        <!-- <div>船舶名称：{{ curAnalog.iboatName }}</div> -->
        <div class="flex align-center">
          航行快进：
          <div class="flex-sub padding-lr-xs">
            <el-slider v-model="timerDuration" :min="100" :max="1000" />
          </div>
        </div>
        <div class="flex align-center">
          航行轨迹：
          <span class="pointer text-xxl text-theme flex align-center" @click="handleStart">
            <el-icon>
              <VideoPlay />
            </el-icon>
          </span>
          <span class="pointer text-xxl margin-left-xs text-theme flex align-center" @click="handlePause">
            <el-icon>
              <VideoPause />
            </el-icon>
          </span>
        </div>
        <div class="padding-lr-xs" v-if="$store.state.app.device == 'desktop'">
          <el-slider v-model="routeIndex" :max="coordinates.length - 1" :show-tooltip="false"/>
        </div>
        <div class="flex align-center">
          选择日期：
          <el-date-picker v-if="$store.state.app.device == 'desktop'" :disabled-date="disabledDate" v-model="selectedDate" type="date" format="YYYY年M月D日" value-format="YYYY-MM-DD" placeholder="选择日期" :clearable="false" @change="handleGetHistoricalTrack">
          </el-date-picker>
          <template v-else>
            <span class="flex justify-center align-center solid text-xs" style="border-radius:4px">
              <span class="padding-xs" @click="showSelectedDatePicker = true">
                {{ parseTime(selectedDate,'{y}年{m}月{d}日') }}
              </span>
            </span>
          </template>
        </div>
      </div>
    </div>

    <div class="" style="position: absolute;left: 15px;right: 15px;bottom: 0.5em;" v-if="$store.state.app.device != 'desktop'">
      <el-slider v-model="routeIndex" :max="coordinates.length - 1" :show-tooltip="false"/>
    </div>

    <van-popup v-model:show="showSelectedDatePicker" position="bottom">
      <van-date-picker type="date" v-model="currentDate" @confirm="handleVanDatePickerSelected" @cancel="showSelectedDatePicker = false" :max-date="maxDate" />
    </van-popup>

  </div>
</template>
  
  <script setup>
import MapShipHistoricalTrackMap from "@/components/Map/ShipHistoricalTrack/map";
import { getHistoricalTrack } from "@/api/ship/ship";

const { proxy } = getCurrentInstance();
const emit = defineEmits();

const routeIndex = ref(0);
const timerDuration = ref(500);
const coordinates = ref([
  {
    lat: 113.1047683,
    lng: 22.1617233,
    time: proxy.parseTime(new Date(), "{y}-{m}-{d} {h}:{i}:{s}"),
    x0a9: 0,
    x0aA: 0,
  },
]);
const showShipInfo = ref(true);
const selectedDate = ref(proxy.parseTime(new Date(), "{y}-{m}-{d}"));
const currentDate = ref([
  proxy.parseTime(new Date(), "{y}"),
  proxy.parseTime(new Date(), "{m}"),
  proxy.parseTime(new Date(), "{d}"),
]);
const loading = ref(true);
const showSelectedDatePicker = ref(false);
const maxDate = ref(new Date());

const curAnalog = computed(
  () =>
    proxy.$store.state.data.analogList.find(
      (item) => item.sn == proxy.$store.state.data.curAnalogSn
    ) || {}
);

watch(
  () => proxy.$store.state.data.curAnalogSn,
  (newValue) => {
    handleGetHistoricalTrack(newValue);
  }
);

const disabledDate = (time) => {
  return time.getTime() > Date.now();
};

const handleCloseShipHistoricalTrack = () => {
  emit("handleCloseShipHistoricalTrack");
};

const handleStart = () => {
  proxy.$refs["mapShipHistoricalTrackMap"].timeStart();
};

const handlePause = () => {
  proxy.$refs["mapShipHistoricalTrackMap"].timePause();
};

const handleGetHistoricalTrack = () => {
  loading.value = true;
  let query = {
    sn: proxy.$store.state.data.curAnalogSn,
    startDate: `${selectedDate.value} 00:00:00`,
    endDate: `${selectedDate.value} 23:59:59`,
  };
  //// console.log(query);
  getHistoricalTrack(query)
    .then((response) => {
      coordinates.value = response;
      loading.value = false;
    })
    .catch((response) => {
      proxy.$modal.error(response.msg);
      loading.value = false;
    });
};

const handleVanDatePickerSelected = (e) => {
  console.log(e);
  selectedDate.value = e.selectedValues.join("-");
  handleGetHistoricalTrack();
  showSelectedDatePicker.value = false;
};

handleGetHistoricalTrack();
</script>