<template>
  <div class="q-mt-lg">
    <div class="top-title">{{ cityInfo.AreaName }}旅遊指南</div>
    <div class="q-mt-md rounded-borders q-pa-lg bg-white light-shadow">
        <div class="text-h6 text-weight-bold">關於{{ cityInfo.AreaName }}</div>
        <div class="q-my-md f12 text-grey-9" v-html="cityInfo.Introduction"></div>
        <q-separator class="q-my-xl" color="grey-2" />
        <div class="text-h6 q-my-md text-weight-bold">實用訊息</div>
        <div class="q-mt-md" :class="{'row justify-between q-mr-lg':$q.platform.is.desktop,'column q-gutter-md':$q.platform.is.mobile}">
            <div>
                <div class="f12 text-grey-9">時區：</div>
                <div class="q-my-md text-subtitle1">{{ cityInfo.TimeZones }}</div>
                <div class="text-body2 text-grey-6">出行注意時差，安排好休息時間哦</div>
            </div>
            <div>
                <div class="f12 text-grey-9">貨幣：</div>
                <div class="q-my-md text-subtitle1">{{ cityInfo.CurrencyName }}</div>
                <div class="text-body2 text-grey-6">建議您出行錢準備充足的當地貨幣</div>
            </div>
            <div>
                <div class="f12 text-grey-9">电压：</div>
                <div class="q-my-md text-subtitle1">{{ cityInfo.Voltage }}</div>
            </div>
            <div>
                <div class="f12 text-grey-9">最佳出行月份</div>
                <div class="q-mt-md" v-for="(x,i) in cityInfo.BestTravelTimeList" :key="i">
                    <div class="q-mb-sm text-subtitle1">{{ x.Month }}</div>
                    <div class="text-body2 text-grey-6">{{ x.Description }}</div>
                </div>
                
            </div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
    props:['city'],
    data() {
        return {
            cityInfo:{}
        }
    },
    created() {
        this.cityInfo = this.city
        this.cityInfo.Introduction=this.cityInfo.Introduction?.replace(/\n/g,"<br>")
    },
}
</script>

<style>
.top-title {
    font-size: 26px;
    font-weight: bold;
    color: #000000;
    line-height: 44px;
  }
</style>