<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" v-if="chosenObj.crCount > 0"
                >成人 x {{ chosenObj.crCount }}</span
              >
              <span class="q-mr-sm" v-if="chosenObj.etzcCount"
                >兒童占床 x {{ chosenObj.etzcCount }}</span
              >
              <span class="q-mr-sm" v-if="chosenObj.etbzcCount"
                >兒童不占床 x {{ chosenObj.etbzcCount }}</span
              >
              <span class="q-mr-sm" v-if="chosenObj.yeCount"
                >婴儿 x {{ chosenObj.yeCount }}</span
              >
              <span class="q-mr-sm" v-if="chosenObj.df"
                >单房间 x {{ chosenObj.df }}</span
              >
            </div>
          </div>
          <q-separator color="grey-2" class="q-mt-md" />
          <div
            class="bg-grey-1 rounded-borders q-pa-md q-mt-md guest-item"
            v-for="(x, i) in guests"
            :key="i"
          >
            <div class="text-subtitle1 q-pb-md text-weight-bold">{{ x.FormatTypeName }}</div>
            <div class="row q-col-gutter-md">
              <div :class="filedGuestWidth">
                <q-input
                  standout
                  v-model="x.FirstName"
                  label="本國姓"
                  placeholder="例：張"
                  :rules="[(val) => !!val || '請輸本國姓']"
                />
              </div>
              <div :class="filedGuestWidth">
                <q-input
                  standout
                  v-model="x.LastName"
                  label="本國名"
                  placeholder="例：三"
                  :rules="[(val) => !!val || '請輸本國名']"
                />
              </div>
              <div :class="filedGuestWidth">
                <div class="row items-center q-mt-md">
                  <span>選擇性別：</span>
                  <q-radio
                    v-model="x.Sex"
                    dense
                    :val="1"
                    label="男"
                    class="q-mr-lg"
                  />
                  <q-radio v-model="x.Sex" dense :val="2" label="女" />
                </div>
              </div>
              <div :class="filedGuestWidth">
                <q-input
                  standout
                  v-model="x.PassFirstName"
                  label="護照英文姓"
                  placeholder="例：ZHANG"
                  :rules="[(val) => !!val || '請輸護照英文姓']"
                />
              </div>
              <div :class="filedGuestWidth">
                <q-input
                  standout
                  v-model="x.PassLastName"
                  label="護照英文名"
                  placeholder="例：SAN"
                  :rules="[(val) => !!val || '請輸護照英文名']"
                />
              </div>
              <div :class="filedGuestWidth">
                <q-input
                  standout
                  v-model="x.Passport"
                  label="護照號"
                  :rules="[(val) => !!val || '請輸護照號']"
                />
              </div>
              <div :class="filedGuestWidth">
                <q-input
                  standout
                  v-model="x.PassValidate"
                  label="護照有效期"
                  readonly
                >
                  <template v-slot:append>
                    <q-icon name="event" class="cursor-pointer"></q-icon>
                  </template>
                  <q-popup-proxy :offset="[0, 0]" ref="qDateProxy7">
                    <q-date
                      mask="YYYY-MM-DD"
                      :title="$t('search_date_begin')"
                      subtitle="選擇"
                      v-model="x.PassValidate"
                      @input="() => $refs.qDateProxy7.hide()"
                    />
                  </q-popup-proxy>
                </q-input>
              </div>
              <div :class="filedGuestWidth" v-if="x.GuestType == 1">
                <q-input
                  standout
                  v-model="x.PassFirstName"
                  label="聯絡電話"
                  placeholder="格式：國家區號+號碼，例如：+81 25xxxx"
                />
              </div>

              <div :class="filedGuestWidth" v-if="x.EnableSignRoom">
                <q-toggle v-model="x.IsSignRoom" :disable="disableSign && !x.IsSignRoom" @input="changeRoomHandler" label="入住單房" />
              </div>
            </div>
          </div>
          <div class="text-subtitle1 q-my-md text-weight-bold">特殊需求備註：</div>
          <q-input standout v-model="chosenObj.remark" input-style="height:170px;" type="textarea"  placeholder="此欄位僅限資料備註。不在商品規範內的個人需求，不保證提供" maxlength="200" counter />
        </q-card>

        <coupon></coupon>
      </div>
      <div class="relative-position"
        :class="{
          'q-ml-lg': !($q.screen.width < 1200 || $q.platform.is.mobile),
          'q-mt-lg  full-width': $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
                ? 'unset'
                : '300px',
            position:$q.platform.is.mobile?'unset':'sticky',
            top:$q.platform.is.mobile?'unset':'50px',
          }"
        >
          <div class="text-subtitle1 text-weight-bolder">付款明細</div>
          <div class="row q-mt-md">
            <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 text-grey-6">
            <div class="row">
              <div style="width: 80px">出發城市：</div>
              <div class="q-ml-md">武漢起止</div>
            </div>
            <div class="row">
              <div style="width: 80px">出發日期：</div>
              <div class="q-ml-md">2024-02-02</div>
            </div>
          </div>
          <q-separator color="grey-2" class="q-my-md"/>
          <div class="text-grey-9">
            <div class="row q-mb-sm" v-if="chosenObj.crCount>0">
              <div class="col">成人佔床 x {{ chosenObj.crCount }}</div>
              <div>CNY {{ moneyFormat(9999,2) }}</div>
            </div>
            <div class="row q-mb-sm" v-if="chosenObj.etzcCount>0">
              <div class="col">兒童佔床 x {{ chosenObj.etzcCount }}</div>
              <div>CNY {{ moneyFormat(9999,2) }}</div>
            </div>
            <div class="row q-mb-sm" v-if="chosenObj.etbzcCount>0">
              <div class="col">兒童不佔床 x {{ chosenObj.etbzcCount }}</div>
              <div>CNY {{ moneyFormat(9999,2) }}</div>
            </div>
            <div class="row q-mb-sm" v-if="chosenObj.yeCount>0">
              <div class="col">嬰兒不佔床 x {{ chosenObj.yeCount }}</div>
              <div>CNY {{ moneyFormat(9999,2) }}</div>
            </div>
            <hr style="border:none;border-top:1px dashed #EEE !important;" class="bg-transparent q-mb-sm" />
            <div class="row q-mb-sm" v-if="(chosenObj.etCount)>0">
              <div class="col">兒童附加費 x {{ chosenObj.etCount }}</div>
              <div>CNY {{ moneyFormat(9999,2) }}</div>
            </div>
            <div class="row q-mb-sm" v-if="(chosenObj.df)>0">
              <div class="col">單房差價 x {{ chosenObj.df }}</div>
              <div>CNY {{ moneyFormat(9999,2) }}</div>
            </div>
            <div class="row q-mb-sm items-center" v-if="(chosenObj.df)>0">
              <div class="col">總金額</div>
              <div class="text-subtitle2 text-weight-bolder text-primary">CNY {{ moneyFormat(9999,2) }}</div>
            </div>
            <hr style="border:none;border-top:1px dashed #EEE !important;" class="bg-transparent q-mb-sm" />
            <div class="row q-mb-sm items-center" v-if="(chosenObj.df)>0">
              <div class="col">優惠金額</div>
              <div class="text-subtitle2 text-weight-bolder text-teal">CNY - {{ moneyFormat(9999,2) }}</div>
              <div class="text-grey-5">暫無優惠</div>
            </div>
            <div class="row q-mb-sm items-center" v-if="(chosenObj.df)>0">
              <div class="col">支付金額</div>
              <div class="text-h6 text-weight-bolder text-primary product-price">CNY {{ moneyFormat(9999,2) }}</div>
            </div>
          </div>
          <div class="text-right q-mt-md">
            <q-btn unelevated color="primary" label="立即支付" />
          </div>
          
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { json } from "body-parser";
import coupon from '../../components/common/coupon.vue'
export default {
  components:{
    coupon
  },
  data() {
    return {
      step: 1,
      userInfo: {
        lastName: "",
        firstName: "",
        country: 0,
        phone: "",
        areaCode: "",
        mail: "",
      },
      chosenObj: {
        startDate: "",
        crCount: 4,
        etCount: 6,
        yeCount: 0,
        lrCount: 0,
        etbzcCount: 4,
        etzcCount: 2,
        df: 1,
        dcf: 0,
        srf: 0,
        isUnico: false,
        unicoDep: {
          city: null,
          date: null,
          price: 0,
          isSup: -2,
        },
        unicoArr: {
          city: null,
          date: null,
          price: 0,
          isSup: -2,
        },
        remark: "",
      },
      isUpdateUserInfo: false,
      countrys: [],
      areaCodes: [],
      guest: {
        FirstName: "",
        LastName: "",
        Passport: "",
        PassFirstName: "",
        PassLastName: "",
        GuestType: 0,
        EnableSignRoom: false,
        PassValidate: "",
        FormatTypeName: "",
        MobilePhone: "",
        RoomType:0,
        IsSignRoom:false,
        Sex: 0,
      },
      guests: [],
      disableSign:false
    };
  },
  computed: {
    filedWidth() {
      return {
        "col-12": this.$q.screen.width < 1200,
        "col-6": this.$q.screen.width >= 1200,
      };
    },
    filedGuestWidth() {
      return {
        "col-12": this.$q.screen.width < 1200,
        "col-4": this.$q.screen.width >= 1200,
      };
    },
  },
  created() {},
  mounted() {
    this.initCountry();
    this.initGuestHandler();
  },
  methods: {
    changeRoomHandler(){
      let currentSign = this.guests.filter(x=> x.IsSignRoom)
      this.disableSign=currentSign==this.chosenObj.df
    },
    initGuestHandler() {
      for (let i = 0; i < this.chosenObj.crCount; i++) {
        let obj = JSON.parse(JSON.stringify(this.guest));
        obj.GuestType = 1;
        obj.FormatTypeName = `成人 ${i + 1}：`;
        if (this.chosenObj.df > 0) {
          obj.EnableSignRoom = true;
        }
        this.guests.push(obj);
      }
      for (let i = 0; i < this.chosenObj.etzcCount; i++) {
        let obj = JSON.parse(JSON.stringify(this.guest));
        obj.GuestType = 2;
        obj.FormatTypeName = `儿童占床 ${i + 1}：`;
        if (this.chosenObj.df > 0) {
          obj.EnableSignRoom = true;
        }
        this.guests.push(obj);
      }
      for (let i = 0; i < this.chosenObj.etbzcCount; i++) {
        let obj = JSON.parse(JSON.stringify(this.guest));
        obj.GuestType = 3;
        obj.FormatTypeName = `儿童不占床 ${i + 1}：`;
        this.guests.push(obj);
      }
      for (let i = 0; i < this.chosenObj.yeCount; i++) {
        let obj = JSON.parse(JSON.stringify(this.guest));
        obj.GuestType = 4;
        obj.FormatTypeName = `婴儿 ${i + 1}：`;
        this.guests.push(obj);
      }
    },
    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: 0.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;
}
.guest-item:hover{
  background: rgba(241,65,108,.04) !important;
}
</style>
