<template>
  <div class="bg-el-color" style="position: relative;height: 100%;width: 100%;">
	  <el-card class="box-card" :body-style="{ padding: '0' }" style="position: absolute;left: 0.5em;top: 0.5em;z-index: 1;">
		 <el-table :data="hisData"
			max-height="200px"
			ref="singleTable"
			highlight-current-row
			:cell-style="{ padding: '3px 0' }"
		    @current-change="handleCurrentChange"
			:row-style="setRowStyle"
			:header-cell-style="{ padding: '2px 0',background: '#30B08E' }"
			header-cell-class-name="text-white text-bold bg-red">
			  <el-table-column align="center" type="index" width="50" label="序号"></el-table-column>
		      <el-table-column align="center" prop="setoutPort" label="出发港"></el-table-column>
		      <el-table-column align="center" prop="reachPort" label="到达港"></el-table-column>
		      <el-table-column align="center" prop="averageSpeed" label="平均航速"></el-table-column>
			  <el-table-column align="center" prop="setoutTime" label="出发时间" width="130"></el-table-column>
			  <el-table-column align="center" prop="reachTime" label="到时间" width="130"></el-table-column>
		    </el-table>
		<div class="text-xs text-right padding-lr-xs padding-top padding-bottom-sm">历史轨迹：<span class="text-blue pointer" @click="handleOpenShipHistoricalTrack">查看</span></div>
	  </el-card>
    <MapShipHistoricalSailMap ref="mapShipHistoricalSailMap" v-loading="loading" :style="$store.state.settings.sideTheme == 'theme-dark'? 'opacity: .8;' : ''" :coordinates="coordinates" v-model:routeIndex="routeIndex" :timerDuration="timerDuration" />
  </div>
</template>
  
  <script setup>
import MapShipHistoricalSailMap from "@/components/Map/ShipHistoricalSail/map";
import { getHistoricalTrack } from "@/api/ship/ship";
const { proxy } = getCurrentInstance();
const emit = defineEmits();

const hisData = ref([]);
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 handleOpenShipHistoricalTrack = () => {
  emit("handleOpenShipHistoricalTrack");
};

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;
};
const handleCurrentChange = (e) => {
	// this.currentRow = val;
}
const setRowStyle = (row) => {
	console.log(row.row.isPart)
	if (row.row.isPart == true) {
		return 'color:blue;'
	}
}
handleGetHistoricalTrack();
hisData.value = [{
	setoutPort: "南通",
	reachPort: "东莞",
	averageSpeed: 12.4,
	setoutTime: "2023/9/16 14:12",
	reachTime: "2023/9/16 16:44",
},{
	setoutPort: "南通",
	reachPort: "广州",
	averageSpeed: 28.9,
	setoutTime: "2023/9/16 18:38",
	reachTime: "2023/9/16 20:02",
},{
	setoutPort: "佛山",
	reachPort: "东莞",
	averageSpeed: 56.4,
	setoutTime: "2023/9/17 09:18",
	reachTime: "2023/9/17 11:53",
},{
	setoutPort: "南通",
	reachPort: "东莞",
	averageSpeed: 136.4,
	setoutTime: "2023/9/19 10:16",
	reachTime: "2023/9/19 12:53",
},{
	setoutPort: "上海",
	reachPort: "东莞",
	averageSpeed: 176.4,
	setoutTime: "2023/9/20 06:16",
	reachTime: "2023/9/20 15:43",
},{
	setoutPort: "东莞",
	reachPort: "南通",
	averageSpeed: 112.4,
	setoutTime: "2023/9/21 13::04",
	reachTime: "2023/9/21 15:34",
},{
	setoutPort: "南通",
	reachPort: "东莞",
	averageSpeed: 82.3,
	setoutTime: "2023/9/22 10:02",
	reachTime: "2023/9/22 11:25",
}];
onMounted(async () => {
	proxy.$refs.singleTable.setCurrentRow(hisData.value[0]);
})
</script>