<template>
    <div class="proj-editor-left full-height column">
        <div class="q-pa-lg row items-center">
            <div class="col text-info">行程总览</div>
            <el-link :underline="false">
                <IconEdit></IconEdit>
                <span style="margin-left: 5px;" class="text-small">编辑</span>
            </el-link>
        </div>
        <el-divider class="q-ma-none" />
        <el-scrollbar class="full-width col">
            <div class="day-item" :class="{'active':activeDayItem==-1}" @click="setCurrentDayItemHandle(-1)">
                <span class="day-title">行程总览</span>
            </div>
            <div class="day-item" v-for="(x,i) in days" :key="i" :class="{'active':activeDayItem==i}" @click="setCurrentDayItemHandle(i)">
                <div class="row">
                    <span class="day-title col">{{ x.day }}</span>
                    <span class="text-info">{{ x.dateStr }}</span>
                </div>
                <div style="margin-top: 8px;" v-for="(city,index) in x.cities" :key="index">
                    <IconMark class="q-mr-md" v-if="city==startCity || city==endCity"></IconMark>
                    <span>{{ city }}</span>
                </div>
            </div>
            <div class="day-item" :class="{'active':activeDayItem==-2}" @click="setCurrentDayItemHandle(-2)">
                <span class="day-title">行程备注</span>
            </div>
        </el-scrollbar>
    </div>
</template>
<script lang="ts" setup>
import { dateFormat } from '@/utils/common';
import { ref } from 'vue';

const emit = defineEmits<{
  (event: 'update:value', payload: number): void
}>()
const days = ref<any[]>() 
const startCity = '北京'
const endCity = '北京'
const cities = [['北京','巴黎'],['巴黎'],['巴黎'],['巴黎','尼斯'],['尼斯','威尼斯'],['威尼斯'],['威尼斯'],['威尼斯','佛罗伦萨'],['佛罗伦萨'],['佛罗伦萨','罗马'],['罗马'],['罗马','伊斯坦布尔'],['伊斯坦布尔','北京']]
const activeDayItem = ref(-1)
const startDate = new Date('2024/11/11')
days.value = cities.map((x,i)=>{
    const newDate = new Date(startDate)
    newDate.setDate(newDate.getDate()+i)
    const formatDate = dateFormat(newDate,'M月D日 ww')
    return {
        day:`D${i+1}`,
        dateStr:formatDate,
        dayNum:i,
        cities:x
    }
})

const setCurrentDayItemHandle = (i:number)=>{
    activeDayItem.value = i
    emit('update:value',i)
}
</script>
<style>
.proj-editor-left{
    width: 184px;
    font-size: 13px;
}
.proj-editor-left .day-item{
    padding:15px 12px;
    font-size: 12px;
    position: relative;
    cursor: pointer;
}
.proj-editor-left .day-item.active{
    color: var(--el-color-primary);
}
.proj-editor-left .day-item:hover{
    color: var(--el-color-primary);
}
.proj-editor-left .day-item.active::before{
    display: block;
    content: ' ';
    width: 4px;
    height: 16px;
    background-color: var(--el-color-primary);
    position: absolute;
    top: 17px;
    left: 0;
}
.proj-editor-left .day-item .day-title{
    font-size: 14px;
    font-weight: bold;
}
</style>