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>
      <div class="element content-status tw-hidden xl:tw-block xl:tw-ml-[20px]">
        <span
          v-if="questionValidation == true"
          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>

        </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 Contact from "@/components/service/Contact";

import is from "is_js";
export default {
  components: {
    elementTextarea,
    elementInputNew,
    selectDate,
    elementTimePicker,
    is,
    Contact,
  },
  props: {
    info: {
      type: Object,
    },
    content: {
      type: Object,
    },
    questions: {
      type: Array,
      default: [],
    },
    active: {
      type: Number,
    },
    orderingPerson_Validation: {
      type: Boolean,
    }
  },
  data() {
    return {
      show: false,
      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 () {
    });
  },
  created(){
    if (process.browser) {
      window.addEventListener("resize", this.handleResize);
    }
    this.handleResize();
  },
  destroyed() {
    if (process.browser) {
      window.removeEventListener("resize", this.handleResize);
    }
  },
  watch: {
    orderingPerson_Validation: {
      handler: function () {
        if (this.orderingPerson_Validation == true) {
          this.show = true;
        } else {
          this.show = false;
        }
      },
    },
    questionValidation: {
      handler: function () {
        if (this.questionValidation == true) {
          this.show = false;
        }else{
          this.show = true;
        }
      },
    },
  },

  methods: {
    handleResize() {
      if (process.browser) {
        this.windewWidth = window.innerWidth;
      }
    },
    updateInfo() {
      // 需要先校驗
      this.questions.forEach((item) => {
        if (item.requiredFlag !== "0") {
          if (item.value == "") {
            item.validation = false;
          } else {
            item.validation = true;
            this.$emit("answer", this.questions);
          }
        } 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);
      this.questionValidation == true;
    },
    getValidation(){
      this.updateInfo();

      this.questionValidation = this.questions.every(function (item) {
        return item.validation == true;
      });
      if(this.questionValidation==false){
        this.show = true;
      }
      return this.questionValidation;
    },
  },
};
</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>