<template>
  <q-dialog v-model="show" persistent seamless>
    <q-card style="width:40vw;min-width:375px;max-width:800px" class="light-shadow q-pb-md">
      <q-card-section class="row items-center dialog-close">
       <div class="text-h6 col">{{$t('v101.hotelTips')}}</div>
       <div class="dialog-close" @click="show=false">
        <svg-icon icon="Navigation/Close.svg" :size="30" color="nav"></svg-icon>
       </div>
      </q-card-section>
      <div style="max-height:50vh;overflow-y:auto;">
        <div class="bg-grey-1 q-px-lg q-pt-sm rounded-borders q-mx-md">
          <q-timeline color="primary" layout="dense">
            <q-timeline-entry
              :subtitle="x.CreateTimeStr"
              color="orange"
              icon="done_all"
              v-for="x in tips"
            >
              <div v-html="x.TipContent"></div>
            </q-timeline-entry>
            <!-- <q-timeline-entry
              subtitle="February 22, 1986"
              color="orange"
              icon="done_all"
            >
              <div>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
              </div>
            </q-timeline-entry> -->
          </q-timeline>
        </div>
      </div>
      <div class="text-center">
        <q-btn color="primary" unelevated class="q-px-xl" :label="$t('v101.iknow')" v-close-popup/>
      </div>
    </q-card>
  </q-dialog>
</template>

<script lang="ts">
import { date } from "quasar";
import { ApiResult } from "src/@types/enumHelper";
import HotelService from "src/api/hotel";
import svgIcon from "src/components/global/svg-icon.vue";
import { DirtionmaryHelper } from "src/config/dictionary";
import { defineComponent, reactive, toRefs } from "vue";

export default defineComponent({
  components: { svgIcon },
  setup(props) {

    const data=reactive({
      show:false,
      tips:[] as Array<any>
    })

    const methods = {
      getHotelTips(){
        let startDate = date.addToDate(new Date,{days:-20})
        if(localStorage[DirtionmaryHelper.HOTEL_TIPS_LASTDATE]){
          startDate = new Date(localStorage[DirtionmaryHelper.HOTEL_TIPS_LASTDATE])
        }
        HotelService.GetHotelTips(date.formatDate(startDate,'YYYY/MM/DD HH:mm:ss')).then(r=>{
          if(r.data.resultCode==ApiResult.SUCCESS){
            data.tips=r.data.data.pageData
            data.tips.forEach((x:any)=>{
              x.CreateTimeStr = date.formatDate(x.CreateTimeStr,'dddd  MM/DD HH:mm')
            })
            data.show = data.tips.length>0
            localStorage.setItem(DirtionmaryHelper.HOTEL_TIPS_LASTDATE,date.formatDate(new Date(),'YYYY/MM/DD HH:mm:ss'))
          }
        })
      },
    }

    methods.getHotelTips()
    return {
      ...toRefs(data),
      ...methods
    }
  }
})
</script>

<style>
.dialog-close svg g [fill]{
  fill: rgb(161,165,183) !important;
  cursor: pointer;
}
.dialog-close:hover svg g [fill]{
  fill:var(--q-primary) !important;
}
</style>
