ShowEasyFrontEnd/FrontEnd/components/service/BookingInfoItem.vue

<template>
  <div
    class="booking-info-item tw-p-[15px] lg:tw-p-[20px] tw-mb-[30px] tw-bg-white tw-rounded-xl md:tw-mb-[40px]"
  >
    <div
      :class="[
        'info-content',
        'collapse',
        'tw-cursor-pointer',
        'tw-grid tw-items-start tw-grid-cols-[52px_auto] tw-gap-[15px] md:tw-grid-cols-[160px_auto] md:tw-gap-[20px] xl:tw-grid-cols-[56px_105px_520px_30px] xl:tw-gap-[16px] xl:tw-items-center',
        show ? 'show' : 'hide',
      ]"
      @click="show = !show"
    >
      <img
        class="element content-img tw-rounded-[4px] tw-h-1/5 md:tw-rounded-[12px] md:tw-h-3/5 xl:tw-h-3/5"
        :src="info.preview_image"
      />
      <div class="element content-text">
        <h3
          class="t12 tw-font-bold tw-mb-[10px] tw-text-base-primary md:tw-text-[16px] md:tw-leading-[21px] xl:tw-mb-[12px]"
        >
          {{ info.service_name }}
        </h3>
        <div v-for="(item, key) in info.order_item" :key="key"
          class="detail tw-body-5 tw-mb-[10px] xl:tw-text-neutrals-600 xl:tw-mb-[4px]"
        >
          {{ item }}
        </div>
        <div class="tw-mb-[10px] tw-my-[12px] xl:tw-mb-0 tw-flex t-12 tw-text-[#232323]"
        >
          <div>{{ $t("Select Exhibition") }}：</div>
          <div class="tw-ml-[10px]">{{ info.selectExhibition }}</div>
        </div>
        <!-- <div
          v-for="(item, key) in info.order_as" :key="key"
          class="detail tw-body-5 tw-mb-[10px] xl:tw-mb-0 xl:tw-text-neutrals-600"
        >
          {{ item.as_name + "&nbsp;x&nbsp;" + item.quantity }}
        </div> -->
        <!-- <div
          class="date tw-body-5 tw-mb-[10px] xl:tw-mt-[12px]"
          v-if="info.service_date != null || info.service_time != null"
        >
          Service Date: {{ info.service_date +"&nbsp;"+ info.service_time }}
        </div> -->
        <!-- <div
          class="total t14 tw-font-bold tw-text-primary-1 tw-mb-[10px] xl:tw-hidden"
        >
          $3,500 {{ info.currency
          }}<span class="tw-font-normal tw-text-neutrals-400 tw-ml-[10px]"
            >(Tax included)</span
          >
        </div>
        <div class="element xl:tw-hidden">
          <button
            class="tw-transition tw-flex tw-justify-center tw-items-center tw-btn-md tw-text-primary-1 tw-border tw-border-solid tw-border-primary-1 tw-px-[30px] tw-py-[8.5px] tw-w-full tw-rounded-xl hover:tw-bg-primary-3"
          >
            {{ $t("Enter Required info") }}
            <span
              v-if="questionValidation == true"
              class="status-check-icon tw-inline-block tw-items-center tw-w-[16px] tw-h-[16px] tw-ml-[10px]"
            ></span>
          </button>
        </div> -->
      </div>
      <div class="element content-status tw-hidden xl:tw-block xl:tw-ml-[20px]">
        <span
          class="status-check-icon tw-inline-block tw-w-[30px] tw-h-[30px]"
        ></span>
      </div>
    </div>

    <Transition name="bounce">
      <div v-show="show" :class="['info-form']">
        <div
          :class="[
            'bookingdetails',
            'tw-border-0 tw-border-t tw-border-solid tw-border-neutrals-200',
            'tw-pt-[20px] tw-mt-[20px]',
          ]"
        >
          <h3 class="tw-mb-[40px] t18 tw-font-bold tw-text-black">{{ $t("Ordering details") }}</h3>
          <table class="table-auto">
            <template v-for="(item,index) in questions">
              <template v-if="windewWidth>414">
                <tr v-if="item.type != 'MultilineText'" class="element tw-my-[10px]" :key="index">
                  <td class="tw-pr-[20px]">
                    <div class="tw-items-center">
                      <label class="tw-font-normal "><span>{{ item.name }}
                      <span v-if="item.requiredFlag=='1'" class="required t12 md:t14">*</span></span></label>
                    </div>
                  </td>
                  <td>
                    <div class="element tw-my-[10px]">
                      <div class="md:tw-flex tw-items-center" v-if="item.type == 'DateText'">
                        <selectDate @selected="item.value = $event"></selectDate>
                        <span v-if="item.validation==false" class="required md:tw-ml-[20px] t12 md:t14">{{ $t("Required.") }}</span>
                      </div>
                      <div class="md:tw-flex tw-items-center"  v-else-if="item.type == 'TimeText'">
                        <elementTimePicker @change="item.value = $event"></elementTimePicker>
                        <span v-if="item.validation==false" class="required md:tw-ml-[20px] t12 md:t14">{{ $t("Required.") }}</span>
                      </div>
                      <elementInputNew v-else-if="item.type == 'SingleText'"
                        :input="{
                          id: item.id,
                          required: item.requiredFlag=='1' ? true : false,
                          type: 'text', 
                          placeholder: '',
                        }"
                        :validation="item.validation"
                        @change="item.value = $event"
                      >
                      </elementInputNew>
                    </div>
                  </td>
                </tr>
              </template>
              <template v-else>
                <template v-if="item.type != 'MultilineText'">
                  <tr class="element" :key="index">
                    <div class="tw-items-center">
                      <label class="tw-font-normal "><span>{{ item.name }}
                      <span v-if="item.requiredFlag=='1'" class="required t12 md:t14">*</span></span></label>
                    </div>
                  </tr>
                  <tr class="element" :key="item.id+index">
                    <div class="element tw-my-[10px]">
                      <div class="md:tw-flex tw-items-center" v-if="item.type == 'DateText'">
                        <selectDate @selected="item.value = $event"></selectDate>
                        <span v-if="item.validation==false" class="required md:tw-ml-[20px] t12 md:t14">{{ $t("Required.") }}</span>
                      </div>
                      <div class="md:tw-flex tw-items-center"  v-else-if="item.type == 'TimeText'">
                        <elementTimePicker @change="item.value = $event"></elementTimePicker>
                        <span v-if="item.validation==false" class="required md:tw-ml-[20px] t12 md:t14">{{ $t("Required.") }}</span>
                      </div>
                      <elementInputNew v-else-if="item.type == 'SingleText'"
                        :input="{
                          id: item.id,
                          required: item.requiredFlag=='1' ? true : false,
                          type: 'text', 
                          placeholder: '',
                        }"
                        :validation="item.validation"
                        @change="item.value = $event"
                      >
                      </elementInputNew>
                    </div>
                  </tr>
                </template>
              </template>
            </template>
          </table>
          <template v-for="item in questions">
            <div v-if="item.type == 'MultilineText'" class="element tw-my-[10px]" :key="item.id">
              <elementTextarea
                  :input="{
                  id: item.id,
                  label: item.name,
                  required: false,
                  placeholder: '',
                  }"
                  :default="''"
                  :validation="true"
                  @change="item.value = $event"
              ></elementTextarea>
            </div>
          </template>
          <!-- <template v-for="(item,index) in questions">
            <div v-if="item.type == 'CustomDate'" class="element tw-mt-[16px]">
              <div class="element tw-flex">
                  <div class="tw-flex element tw-grid tw-grid-cols-1 md:tw-grid-cols-[190px_215px_auto] xl:tw-grid-cols-[190px_215px_auto] tw-gap-[10px]">
                    <div class="tw-items-center"></div>
                    <label class="tw-font-normal "><span>{{ item.name }}
                    <span class="required">*</span></span></label>
                  </div>
                  <selectDate @selected="item.value = $event"></selectDate>
              </div>
            </div>
            <div v-else-if="item.type == 'TimeText'" class="element tw-mt-[16px]">
              <div class="element tw-flex">
                <label class="tw-font-normal "><span>{{ item.name }}
                  <span class="required">*</span></span></label>
                <elementTimePicker></elementTimePicker>
              </div>
            </div>
            <div v-else-if="item.type == 'Email'" class="element tw-mt-[16px]">
              <div class="element tw-flex">
                <div class="tw-flex tw-items-center">
                  <label class="tw-font-normal ">
                    <span>{{ item.name }}</span><span class="required">*</span>
                  </label>
                </div>
                <elementInputNew
                  :input="{
                    id: item.id,
                    required: true,
                    type: 'text', 
                    placeholder: '',
                  }"
                  :validation="item.validation"
                  @change="item.value = $event"
                >
                </elementInputNew>
              </div>
            </div>
            <div v-else-if="item.type == 'MultilineText'" class="element tw-mt-[16px]" >
              <elementTextarea
                  :input="{
                  id: item.id,
                  label: item.name,
                  required: false,
                  placeholder: '',
                  }"
                  :default="''"
                  :validation="true"
                  @change="item.value = $event"
              ></elementTextarea>
            </div>
          </template> -->
          <!-- <div
            v-for="(item, key) in content.booking_questions" :key="key"
            class="element tw-mb-[20px]"
          >
            <elementTextarea
              :input="{
                id: item.question_id,
                label: item.question,
                required:
                  item.required === 1 || item.required === 'required'
                    ? true
                    : false,
                placeholder: '',
              }"
              :default="''"
              :validation="question[key].validation"
              @change="setQuestion($event, key, item)"
            ></elementTextarea>
          </div> -->
          <!-- <OrderingDetails ref="child_Ordering"></OrderingDetails> -->
        </div>
        <!-- <div
          :class="[
            'contact-info',
            'tw-border-0 tw-border-t tw-border-solid tw-border-neutrals-200',
            'tw-pt-[20px] tw-mt-[20px]',
          ]"
        > -->
          <!-- <h3 class="tw-mb-[20px]">{{ $t("Contact information") }}</h3>
          <Contact></Contact> -->
          <!-- <div
            class="element element-button-group tw-flex tw-justify-start tw-flex-wrap -tw-mx-[8px]"
          >
            <button
              v-for="(item, index) in contact"
              :key="index"
              :class="[
                'tw-transition',
                'tw-btn-md',
                'tw-text-[14px]',
                'tw-leading-[18px]',
                'tw-text-complementary-1',
                'tw-bg-neutrals-0',
                'tw-px-[12px]',
                'tw-py-[11px]',
                'tw-mx-[8px]',
                'tw-mb-[16px]',
                'tw-rounded-2xl',
                'tw-border tw-border-solid',
                'tw-bg-complementary-3',
                activeLabel == index + 1
                  ? 'tw-border-complementary-1 tw-bg-complementary-1/20'
                  : 'tw-border-transparent',
              ]"
              @click="onLabelClick(index + 1, item)"
            >
              {{ item.first_name }} {{ item.last_name }}
            </button>
            <button
              class="btn-add-icon tw-transition tw-btn-md tw-text-[14px] tw-leading-[18px] tw-text-complementary-1 tw-bg-complementary-3 tw-pr-[12px] tw-pl-[36px] tw-py-[11px] tw-mx-[8px] tw-mb-[16px] tw-rounded-[10px]"
              @click="$modal.show('add-contact-modal')"
            >
              {{ $t("Add") }}
            </button>
          </div> -->
          <!-- <div class="company-info-list">
            <template v-for="(item, index) in contact">
              <div
                :key="index"
                v-if="index + 1 === activeLabel"
                class="tw-grid tw-grid-cols-1 tw-gap-y-[16px]"
              >
                <div
                  class="element tw-grid tw-grid-cols-[140px_auto] tw-gap-x-[12px]"
                >
                  <div class="label t14 tw-font-bold">
                    {{ $t("First Name") }}
                  </div>
                  <div class="content tw-body-4">
                    {{ item.first_name }}
                  </div>
                </div>
                <div
                  class="element tw-grid tw-grid-cols-[140px_auto] tw-gap-x-[12px]"
                >
                  <div class="label t14 tw-font-bold">
                    {{ $t("Last Name") }}
                  </div>
                  <div class="content tw-body-4">
                    {{ item.last_name }}
                  </div>
                </div>
                <div
                  class="element tw-grid tw-grid-cols-[140px_auto] tw-gap-x-[12px]"
                >
                  <div class="label t14 tw-font-bold">{{ $t("Email") }}</div>
                  <div class="content tw-body-4">
                    {{ item.email }}
                  </div>
                </div>
                <div
                  class="element tw-grid tw-grid-cols-[140px_auto] tw-gap-x-[12px]"
                >
                  <div class="label t14 tw-font-bold">{{ $t("Phone") }}</div>
                  <div class="content tw-body-4">
                    {{ item.phone_number }}
                  </div>
                </div>
                <button
                  class="btn-edit-icon tw-w-[28px] tw-h-[28px]"
                  @click="$modal.show('edit-contact-modal')"
                ></button>
              </div>
            </template>
          </div> -->
        <!-- </div> -->
        <!-- <div
          :class="[
            'promo-code',
            'tw-border-0 tw-border-t tw-border-solid tw-border-neutrals-200',
            'tw-pt-[20px] tw-mt-[20px]',
          ]"
        >
          <h3 class="tw-mb-[10px]">{{ $t("Promo code") }}</h3>
          <elementPromoCode></elementPromoCode>
        </div> -->
        <div class="element tw-text-right tw-mt-[40px]">
          <button
            class="tw-transition tw-btn-md tw-bg-primary-1 tw-px-[30px] tw-py-[8.5px] tw-rounded-2xl hover:tw-bg-primary-2"
            @click="updateInfo()"
          >
            {{ $t("Next") }}
          </button>
        </div>
      </div>
    </Transition>
    <!-- <Transition name="bounce">
      <div v-show="show" :class="['info-form']">
        <div
          :class="[
            'bookingdetails',
            'tw-border-0 tw-border-t tw-border-solid tw-border-neutrals-200',
            'tw-pt-[20px] tw-mt-[20px]',
          ]"
        >
          {{ content.booking_questions }}
          <h3 class="tw-mb-[40px]">{{ $t("Booking Details") }}</h3>
          <div
            v-for="(item, key) in content.booking_questions"
            class="element tw-mb-[20px]"
          >
            <elementTextarea
              :input="{
                id: item.question_id,
                label: item.question,
                required:
                  item.required === 1 || item.required === 'required'
                    ? true
                    : false,
                placeholder: '',
              }"
              :default="''"
              :validation="true"
              @change="
                setQuestion($event, key, item.question_id, item.question)
              "
            ></elementTextarea>
          </div>
        </div>
        <div
          :class="[
            'contact-info',
            'tw-border-0 tw-border-t tw-border-solid tw-border-neutrals-200',
            'tw-pt-[20px] tw-mt-[20px]',
          ]"
        >
          <h3 class="tw-mb-[20px]">{{ $t("Contact Info") }}</h3>
          <div
            class="element element-button-group tw-flex tw-justify-start tw-flex-wrap -tw-mx-[8px]"
          >
            <button
              v-for="(item, index) in contact"
              :key="index"
              :class="[
                'tw-transition',
                'tw-btn-md',
                'tw-text-[14px]',
                'tw-leading-[18px]',
                'tw-text-complementary-1',
                'tw-bg-neutrals-0',
                'tw-px-[12px]',
                'tw-py-[11px]',
                'tw-mx-[8px]',
                'tw-mb-[16px]',
                'tw-rounded-2xl',
                'tw-border tw-border-solid',
                'tw-bg-complementary-3',
                activeLabel == index + 1
                  ? 'tw-border-complementary-1 tw-bg-complementary-1/20'
                  : 'tw-border-transparent',
              ]"
              @click="onLabelClick(index + 1, item)"
            >
              {{ item.first_name }} {{ item.last_name }}
            </button>
            <button
              class="btn-add-icon tw-transition tw-btn-md tw-text-[14px] tw-leading-[18px] tw-text-complementary-1 tw-bg-complementary-3 tw-pr-[12px] tw-pl-[36px] tw-py-[11px] tw-mx-[8px] tw-mb-[16px] tw-rounded-[10px]"
              @click="$modal.show('add-contact-modal')"
            >
              {{ $t("Add") }}
            </button>
          </div>
          <div class="company-info-list">
            <template v-for="(item, index) in contact">
              <div
                :key="index"
                v-if="index + 1 === activeLabel"
                class="tw-grid tw-grid-cols-1 tw-gap-y-[16px]"
              >
                <div
                  class="element tw-grid tw-grid-cols-[140px_auto] tw-gap-x-[12px]"
                >
                  <div class="label t14 tw-font-bold">
                    {{ $t("First Name") }}
                  </div>
                  <div class="content tw-body-4">
                    {{ item.first_name }}
                  </div>
                </div>
                <div
                  class="element tw-grid tw-grid-cols-[140px_auto] tw-gap-x-[12px]"
                >
                  <div class="label t14 tw-font-bold">
                    {{ $t("Last Name") }}
                  </div>
                  <div class="content tw-body-4">
                    {{ item.last_name }}
                  </div>
                </div>
                <div
                  class="element tw-grid tw-grid-cols-[140px_auto] tw-gap-x-[12px]"
                >
                  <div class="label t14 tw-font-bold">{{ $t("Email") }}</div>
                  <div class="content tw-body-4">
                    {{ item.email }}
                  </div>
                </div>
                <div
                  class="element tw-grid tw-grid-cols-[140px_auto] tw-gap-x-[12px]"
                >
                  <div class="label t14 tw-font-bold">{{ $t("Phone") }}</div>
                  <div class="content tw-body-4">
                    {{ item.phone_number }}
                  </div>
                </div>
                <button
                  class="btn-edit-icon tw-w-[28px] tw-h-[28px]"
                  @click="$modal.show('edit-contact-modal')"
                ></button>
              </div>
            </template>
          </div>
        </div>
        <div
          :class="[
            'promo-code',
            'tw-border-0 tw-border-t tw-border-solid tw-border-neutrals-200',
            'tw-pt-[20px] tw-mt-[20px]',
          ]"
        >
          <h3 class="tw-mb-[10px]">{{ $t("Promo code") }}</h3>
          <elementPromoCode></elementPromoCode>
        </div>
        <div class="element tw-text-right tw-mt-[40px]">
          <button
            class="tw-transition tw-btn-md tw-bg-primary-1 tw-px-[30px] tw-py-[8.5px] tw-rounded-2xl hover:tw-bg-primary-2"
            @click="updateInfo()"
          >
            {{ $t("Next") }}
          </button>
        </div>
      </div>
    </Transition> -->
  </div>
</template>
<script>
import elementTextarea from "@/components/newComponent/form/ElementTextarea";
  import elementInputNew from "@/components/newComponent/form/ElementInputNew";
  import selectDate from "@/components/service/content/selectDate.vue";
  import elementTimePicker from "@/components/newComponent/form/ElementTimePicker";
// import elementPromoCode from "@/components/newComponent/form/ElementPromoCode";
import Contact from "@/components/service/Contact";
// import OrderingDetails from "@/components/service/OrderingDetails";

import is from "is_js";
export default {
  components: {
    elementTextarea,
    elementInputNew,
    selectDate,
    // elementPromoCode,
    elementTimePicker,
    is,
    Contact,
    // OrderingDetails,
  },
  props: {
    info: {
      type: Object,
    },
    content: {
      type: Object,
    },
    questions: {
      type: Array,
      default: [],
    },
    active: {
      type: Number,
    },
  },
  data() {
    return {
      show: true,
      // question: [],
      contactData: {
        first_name: "",
        last_name: "",
        email: "",
        phone_number: "",
      },
      questionValidation: false,
      errors: null,
      windewWidth: null,
    };
  },

  computed: {
    activeLabel() {
      return this.active;
    },
  },

  mounted() {
    let vm = this;
    vm.$nextTick(function () {
      // if (vm.contact.length > 0) {
      //   vm.contactData.first_name = vm.contact[0].first_name;
      //   vm.contactData.last_name = vm.contact[0].last_name;
      //   vm.contactData.email = vm.contact[0].email;
      //   vm.contactData.phone_number = vm.contact[0].phone_number;
      // }
    });
  },
  created(){
    if (process.browser) {
      window.addEventListener("resize", this.handleResize);
    }
    this.handleResize();
  },
  destroyed() {
    if (process.browser) {
      window.removeEventListener("resize", this.handleResize);
    }
  },
  watch: {
    // contact: {
    //   handler: function () {
    //     let vm = this;
    //     if (vm.contact.length > 0) {
    //       vm.contactData.first_name = vm.contact[0].first_name;
    //       vm.contactData.last_name = vm.contact[0].last_name;
    //       vm.contactData.email = vm.contact[0].email;
    //       vm.contactData.phone_number = vm.contact[0].phone_number;
    //     }
    //   },
    // },
    // questions: {
    //   handler: function () {
    //     this.getContent();
    //   },
    // },
    questionValidation: {
      handler: function () {
        if (this.questionValidation == true) {
          this.show = false;
        }else{
          this.show = true;
        }
      },
    },
  },

  methods: {
    handleResize() {
      if (process.browser) {
        this.windewWidth = window.innerWidth;
      }
    },
    // onLabelClick(label) {
    //   let index = label - 1;

    //   if (index <= 0) {
    //     index = 0;
    //   }
    //   this.contactData.first_name = this.contact[index].first_name;
    //   this.contactData.last_name = this.contact[index].last_name;
    //   this.contactData.email = this.contact[index].email;
    //   this.contactData.phone_number = this.contact[index].phone_number;
    //   this.$emit("changeActiveLabel", label);
    // },
    updateInfo() {
      // 需要先校驗
      this.questions.forEach((item) => {
        if (item.requiredFlag !== "0") {
          if (item.value == "") {
            item.validation = false;
          } else {
            item.validation = true;
            this.$emit("answer", this.questions);
            // this.$emit("contact", this.contactData);
          }
        } else {
          this.$emit("answer", this.questions);
        }
      });
      this.questionValidation = this.questions.every(function (item) {
        if(item.type=="MultilineText"){
            item.validation = true;
        }
        return item.validation == true;
      });
      this.$emit("bookingDetail_validation", this.questionValidation);
    },
    getValidation(){
      this.updateInfo();
      // let isPass = this.$refs.child_Ordering.save();
      this.questionValidation = this.questions.every(function (item) {
        return item.validation == true;
      });
      if(this.questionValidation==false){
        this.show = true;
      }
      return this.questionValidation;
    },
    // getContent() {
    //   this.questions.forEach((item) => {
    //     item.validation = true;
    //   });
    //   // this.question = JSON.parse(JSON.stringify(this.questions));
    //   this.questions.forEach((item) => {
    //     item.answer = "";
    //   });
    // },

    // setQuestion(val, index, item) {
    //   this.question[index].answer = val;
    // },
  },
};
</script>
<style lang="scss" scoped>
.collapse {
  @media (min-width: 1366px) {
    &::before {
      content: "";
      display: inline-block;
      position: relative;
      padding-left: auto;
      padding-right: auto;
      left: 25px;
      top: 0;
      background-image: url("~/assets/svg/down-arrow.svg");
      background-repeat: no-repeat;
      background-position: center;
      background-size: 100%;
      width: 16px;
      height: 10px;
      margin-right: 45px;
      transform: rotate(-90deg);
      transition: all 0.2s linear;
    }

    &.disabled {
      pointer-events: none;

      &::before {
        background-image: url("~/assets/svg/down-arrow-disabled.svg");
      }
    }

    &.show {
      &::before {
        transform: rotate(0);
        transition: all 0.2s linear;
      }
    }
  }
}

.status-check-icon {
  background-image: url("~/assets/svg/status-check.svg");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
}

.btn-add-icon {
  background-image: url("~/assets/svg/plus-blue.svg");
  background-repeat: no-repeat;
  background-position: left 12px center;
  background-size: 16px 16px;
}

.btn-edit-icon {
  background-image: url("~/assets/svg/edit-info.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}

.bounce-enter-active {
  animation: bounce-in 0.3s ease-out;
}

.bounce-leave-active {
  animation: bounce-in 0.3s cubic-bezier(1, 0.5, 0.8, 1) reverse;
}

@keyframes bounce-in {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }

  50% {
    opacity: 0.5;
    transform: translateY(-5px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>