<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 iconjiaotong" size="20px" class="q-mr-sm" />
                <span class="q-mr-sm" v-if="chosenObj.Count > 0"
                  >豪华车 x {{ chosenObj.Count }} (4人+{{chosenObj.Count}}行李)</span
                >
                <span class="q-mr-sm"
                  ></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"
            >
              <div class="text-subtitle1 q-pb-md text-weight-bold"></div>
              <div class="row q-col-gutter-md">
                <div :class="filedGuestWidth">
                  <q-input
                    standout
                    v-model="parameters.SurName"
                    label="本國姓"
                    placeholder="例：張"
                    :rules="[(val) => !!val || '請輸本國姓']"
                  />
                </div>
                <div :class="filedGuestWidth">
                  <q-input
                    standout
                    v-model="parameters.Name"
                    label="本國名"
                    placeholder="例：三"
                    :rules="[(val) => !!val || '請輸本國名']"
                  />
                </div>
                <div :class="filedGuestWidth">
                  <div class="row items-center q-mt-md">
                    <span>選擇性別：</span>
                    <q-radio
                      v-model="parameters.Sex"
                      dense
                      :val="1"
                      label="男"
                      class="q-mr-lg"
                    />
                    <q-radio v-model="guests.Sex" dense :val="2" label="女" />
                  </div>
                </div>
                <div :class="filedGuestWidth">
                  <q-input
                    standout
                    v-model="parameters.PassFirstName"
                    label="護照英文姓"
                    placeholder="例：ZHANG"
                    :rules="[(val) => !!val || '請輸護照英文姓']"
                  />
                </div>
                <div :class="filedGuestWidth">
                  <q-input
                    standout
                    v-model="parameters.PassLastName"
                    label="護照英文名"
                    placeholder="例：SAN"
                    :rules="[(val) => !!val || '請輸護照英文名']"
                  />
                </div>
                <div :class="filedGuestWidth">
                  <q-input
                    standout
                    v-model="parameters.Passport"
                    label="護照號"
                    :rules="[(val) => !!val || '請輸護照號']"
                  />
                </div>
                <div :class="filedGuestWidth">
                  <q-input
                    class="q-pb-md"
                    standout
                    v-model="parameters.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="parameters.PassValidate"
                        @input="() => $refs.qDateProxy7.hide()"
                      />
                    </q-popup-proxy>
                  </q-input>
                </div>
              </div>
            </div>
            <div class="text-subtitle1 text-weight-bolder q-my-md">抵达 班机資料</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"
            >
              <div class="text-subtitle1 q-pb-md text-weight-bold"></div>
              <div class="row q-col-gutter-md">
                <div :class="filedGuestWidth">
                  <q-input
                    standout
                    v-model="parameters.AirportTerminal"
                    label="航廈"
                    placeholder="例：航廈"
                    :rules="[(val) => !!val || '請輸航廈']"
                  />
                </div>
                <div :class="filedGuestWidth">
                  <q-input
                    standout
                    v-model="parameters.AirLine"
                    label="航空公司"
                    placeholder=""
                    :rules="[(val) => !!val || '請輸航空公司名稱']"
                  />
                </div>
                <div :class="filedGuestWidth">
                    <q-input
                      standout
                      v-model="parameters.FlightNumber"
                      label="航班編號"
                      placeholder="例：CA123"
                      :rules="[(val) => !!val || '請輸航班編號']"
                    />
                </div>
                <div :class="filedGuestWidth">
                    <q-input
                      class="q-pb-md"
                      standout
                      v-model="parameters.FlightTime"
                      label="航班抵达时间"
                      readonly
                    >
                      <template v-slot:append>
                        <q-icon name="event" class="cursor-pointer"></q-icon>
                      </template>
                      <q-popup-proxy :offset="[0, 0]" ref="qDateProxy7">
                        <div class="row">
                            <q-date
                            mask="YYYY-MM-DD HH:mm"
                            :title="$t('search_date_begin')"
                            subtitle="選擇"
                            v-model="parameters.FlightTime"
                            />
                            <div class="q-px-sm"></div>
                            <q-time v-model="flightTime" mask="YYYY-MM-DD HH:mm" 
                            @input="() => $refs.qDateProxy7.hide()"/>
                        </div>
                      </q-popup-proxy>
                    </q-input>
                </div>
              </div>
            </div>
            <div class="text-subtitle1 text-weight-bolder q-my-md">接送資料</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"
            >
              <div class="text-subtitle1 q-pb-md text-weight-bold"></div>
              <div class="row q-col-gutter-md">
                <div :class="filedGuestWidth">
                    <q-input
                      standout
                      v-model="parameters.OrderDate"
                      label="接駁日期"
                      readonly
                      disable
                    >
                      <template v-slot:append>
                        <q-icon name="event" class="cursor-pointer"></q-icon>
                      </template>
                    </q-input>
                </div>
                <div :class="filedGuestWidth">
                    <q-input
                      standout
                      v-model="parameters.GetonAddress"
                      label="上車地點"
                      placeholder=""
                      :rules="[(val) => !!val || '請輸上車地點和地址供司機參考']">
                      <template v-slot:append>
                        <q-icon name="iconfont iconaddress" size="20px" class="q-mr-sm" />
                      </template>
                    </q-input>
                </div>
                <div :class="filedGuestWidth">
                  <q-input
                    standout
                    v-model="parameters.GetoffAddress"
                    label="下車地點"
                    placeholder=""
                    :rules="[(val) => !!val || '請輸下車地點和地址供司機參考']">
                    <template v-slot:append>
                      <q-icon name="iconfont iconaddress" size="20px" class="q-mr-sm" />
                    </template>
                  </q-input>
                </div>
                
              </div>
            </div>
            <div class="text-subtitle1 text-weight-bolder q-my-md">乘客資料</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"
            >
                <div class="text-subtitle1 q-pb-md text-weight-bold">乘客数量</div>
                <div class="row q-col-gutter-md">
                <div :class="filedGuestWidth">
                    <q-input
                        type="Number"
                        standout
                        v-model="parameters.ManNum"
                        label="成人數(18-99岁)"
                    />
                </div>
                <div :class="filedGuestWidth">
                    <q-input
                        type="Number"
                        standout
                        v-model="parameters.ChildNum"
                        label="兒童數(3-17岁)"
                    />
                </div>
                <div :class="filedGuestWidth">
                    <q-input
                        type="Number"
                        standout
                        v-model="parameters.BabyNum"
                        label="嬰幼兒數(0-2岁)"
                    />
                </div>
                
                </div>
                <div class="text-subtitle1 q-py-md text-weight-bold">行李数量</div>
                <div class="row q-col-gutter-md">
                <div :class="filedGuestWidth">
                    <q-input
                        type="Number"
                        standout
                        v-model="parameters.HandLuggageNum"
                        label="手提行李"
                    />
                </div>
                <div :class="filedGuestWidth">
                    <q-input
                        type="Number"
                        standout
                        v-model="parameters.RegisteredLuggageNum"
                        label="托运行李"
                    />
                </div>
                
                </div>
            </div>
            <div class="text-subtitle1 text-weight-bolder q-my-md">旅遊期間聯絡方式</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"
            >
                <div class="text-subtitle1 q-pb-md text-weight-bold"></div>
                <div class="row q-col-gutter-md">
                <div :class="filedGuestWidth">
                    <q-input
                        standout
                        v-model="parameters.Name"
                        label="名字"
                        :rules="[(val) => !!val || '請輸入名字']"
                    />
                </div>
                <div :class="filedGuestWidth">
                    <q-input
                        standout
                        v-model="parameters.SurName"
                        label="姓氏"
                        :rules="[(val) => !!val || '請輸入姓氏']"
                    />
                </div>
                <div :class="filedGuestWidth">
                    <q-input
                        standout
                        v-model="parameters.Mobile"
                        label="電話"
                        :rules="[(val) => !!val || '請輸入行動電話']"
                    >
                        <template v-slot:prepend>
                        <div class="text-subtitle2">+{{ userInfo.areaCode }}</div>
                        </template>
                    </q-input>
                </div>
                
                </div>
            </div>
            <div class="text-subtitle1 q-my-md text-weight-bold">特殊需求備註：</div>
            <q-input standout v-model="parameters.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.Count>0">
                <div class="col">豪华车 x {{ chosenObj.Count }}</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 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: "",
          Count: 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,
        parameters: {
            OrderId: 0,
            OrderType: 0,
            OrderDate:'',//预定日期
            Unit_Price: '',//单价
            Num: '',//数量
            Money: 0.0,
            Sex: '1',//1男2女
            SurName: '',//姓
            Name: '',//名
            Remark: '',
            AirportId: '',
            AirportTerminal: '',//航厦
            AirLine: '',//航空公司名称
            FlightNumber: '',//航班号
            FlightTime: '',//航班时间
            GetonAddress: '',//上车点
            GetoffAddress: '',//下车点
            ManNum: null,//成人数
            ChildNum: null,//儿童数
            BabyNum: null,//婴儿数
            HandLuggageNum: null,//手提行李数量
            RegisteredLuggageNum: null,//托运行李数量
            ContactWay: '',//联络方式 WeChat
            Mobile:'',//电话
            ProductId: '',
            CarId: '',//产品类型ID
            PassFirstName: '',//英文姓
            PassLastName: '',//英文名
            Passport: '',//护照
            PassValidate: '',
        },
        flightTime: null,//航班起飞抵达时间
        getBusTime: null,//预约车时间
      };
    },
    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() {
       
      },
      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>
  