<template>
  <div class="content-page order-preview">
    <q-stepper
      v-model="step"
      ref="stepper"
      color="primary"
      inactive-color="grey-5 "
      class="bg-transparent"
      flat
      animated
    >
      <q-step
        :name="1"
        title="確認訂單"
        icon="settings"
        :done="step > 1"
      ></q-step>

      <q-step
        :name="2"
        title="付款"
        icon="iconfont iconPayment-1"
        :done="step > 2"
      ></q-step>

      <q-step
        :name="3"
        title="訂購完成"
        icon="iconfont iconicon_finish_R"
        :done="step == 3"
      ></q-step>
    </q-stepper>
    <div
      class="row q-pa-md"
      style="min-width: 375px; margin: 0 auto"
      :class="{
        'row': $q.screen.width >= 1200 && $q.platform.is.desktop,
        'column': $q.screen.width < 1200 || $q.platform.is.mobile,
      }"
    >
      <div class="col">
        <q-card flat class="q-pa-md">
            <div class="text-subtitle1 text-weight-bolder">訂購人資訊</div>
            <q-separator color="grey-2" class="q-my-md"/>
            <div class="row q-col-gutter-md">
                <div :class="filedWidth">
                    <q-input standout v-model="userInfo.lastName" label="名字"  :rules="[val => !!val || '請輸入名字']"/>
                </div>
                <div :class="filedWidth">
                    <q-input standout v-model="userInfo.firstName" label="姓氏"  :rules="[val => !!val || '請輸入姓氏']"/>
                </div>
                <div  :class="filedWidth">
                    <q-select v-model="userInfo.country" @input="changeCountry" :options="countrys" emit-value option-label="Name" option-value="ID" map-options label="國家/地區" standout />
                </div>
                <div  :class="filedWidth">
                    <q-input standout v-model="userInfo.firstName" label="電話"  :rules="[val => !!val || '請輸入行動電話']">
                        <template v-slot:prepend>
                            <div class="text-subtitle2">+{{ userInfo.areaCode }}</div>
                        </template>
                    </q-input>
                </div>
                <div  :class="filedWidth">
                    <q-input standout v-model="userInfo.mail" label="郵箱地址"  :rules="[val => !!val || '請輸入郵箱地址']" />
                </div>
                <div  :class="filedWidth">
                    <q-toggle v-model="isUpdateUserInfo" label="同步更新會員資料" />
                </div>
            </div>
        </q-card>
        
        <q-card flat class="q-pa-md q-mt-lg">
            <div class="text-subtitle1 text-weight-bolder q-mb-md">旅客資料</div>
            
            <div class="row">
                <q-img src="https://image.kkday.com/v2/image/get/s1.kkday.com/product_138437/20230217083232_t5rcO/jpg" class="rounded-borders" spinner-color="grey-3" style="width:80px;" />
                <div class="q-ml-md col">
                    <div class="text-subtitle1 ellipsis">【夏季限定】加拿大三日游 | 班夫&贾斯珀国家公园&哥伦比亚冰原 | 卡加利出发卡加利出发卡加利出发</div>
                    <div class="text-caption text-grey-6 ellipsis q-mt-sm">加拿大三日游 | 班夫&贾斯珀国家公园&哥伦比亚冰原</div>
                </div>
            </div>
            <div class="q-mt-md row">
                <div class="text-grey-9">
                    <q-icon name="iconfont iconrili" size="20px" class="q-mr-sm" />
                    <span>2023-02-27</span>
                </div>
                <div class="text-grey-9 q-ml-md">
                    <q-icon name="iconfont iconpeople" size="20px" class="q-mr-sm" />
                    <span class="q-mr-sm" >成人 x 2</span>
                    <span class="q-mr-sm" >兒童 x 2</span>
                </div>
            </div>
            <q-separator color="grey-2" class="q-my-md"/>
        </q-card>
        
      </div>
      <div
        :class="{
          'q-ml-lg': !($q.screen.width < 1200 || $q.platform.is.mobile),
          'q-mt-lg': $q.screen.width < 1200 || $q.platform.is.mobile,
        }"
      >
        <div
          class="rounded-borders bg-white q-pa-md"
          style="width: 300px"
          :style="{
            width:
              $q.screen.width < 1200 || $q.platform.is.mobile
                ? '100%'
                : '300px',
          }"
        >222</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      step: 1,
      userInfo:{
        lastName:'',
        firstName:'',
        country:0,
        phone:'',
        areaCode:'',
        mail:''
      },
      isUpdateUserInfo:false,
      countrys:[],
      areaCodes:[]
    };
  },
  computed:{
    filedWidth(){
        return {
            'col-12': this.$q.screen.width < 1200,
            'col-6':this.$q.screen.width >= 1200
        }
    }
  },
  created() {

  },
  mounted() {
    this.initCountry()
  },
  methods: {
    initCountry(){
        this.apipost(
        "GetCountryInfo_post",
        {},
        (r) => {
            this.countrys = r.data.data.countList
            this.userInfo.country = this.countrys[0].ID
            
            this.areaCodes = r.data.data.phoneCountList
            this.changeCountry(this.userInfo.country)
            this.areaCodes.forEach(x=>{
                let temp = this.countrys.find(y=>y.ID==x.ID)
                x.EnName=`${temp.EnName}(${x.PhoneCode})`
            })
        });
    },
    changeCountry(id){
        this.userInfo.areaCode = this.areaCodes.find(x=>x.ID==id).PhoneCode
        
    }
  },
};
</script>

<style>
.order-preview .q-stepper__content {
  display: none !important;
}
.order-preview .q-toggle__track{
    height: 0.7em;
    border-radius: 0.35em;
    opacity: .38;
    width: 50px;
}
.order-preview .q-toggle__thumb{
    top: 0.42em;
    left: 0.45em;
    width: 0.5em;
    height: 0.5em;
    transition: left 0.22s ease-in-out;
    user-select: none;
    z-index: 0;
}
.order-preview .q-toggle__inner--truthy .q-toggle__thumb{
    left: 0.94em;
}
.order-preview .q-toggle__inner{
    width: 1.9em;
}
.order-preview .q-toggle__label{
    margin-top: 12px;
}
</style>
