ShowEasyFrontEnd/FrontEnd/components/service/content/pickupService.vue

<template>
  <div class="tw-mb-[20px] tw-rounded-[20px] tw-px-[20px] tw-py-[30px] tw-border tw-border-solid tw-border-slate-200">
    <div class="element tw-grid tw-grid-cols-1 md:tw-grid-cols-[90px_auto] xl:tw-grid-cols-[90px_auto] tw-gap-[10px]">
      <div class="tw-flex tw-items-center">
          <label class="tw-font-normal tw-mb-[10px] md:tw-mb-0">
            <span>{{ $t("Package")}}</span><span class="required">*</span>
          </label>
      </div>
      <elementSelectNew
        :select="{
          id: 'Package',
          label: 'Package',
          required: true,
        }"
        :isRow="true"
        :itemsCenter="true"
        :labelWidth="0"
        :selectWidth="200"
        :selectList="selectPackageList"
        :default="formData.package"
        :validation="validation.package"
        @change="formData.package = $event"
      ></elementSelectNew>
    </div>
    <div class="element tw-grid tw-grid-cols-1 md:tw-grid-cols-[90px_auto_auto_auto] xl:tw-grid-cols-[90px_auto_auto_auto] tw-gap-[10px] tw-mt-[20px]">
      <div class="tw-flex tw-items-center">
          <label class="tw-font-normal tw-mb-[10px] md:tw-mb-0">
            <span>{{ $t("Size (cm)")}}</span><span class="required">*</span>
          </label>
      </div>
      <elementSelectNew
        :select="{
          id: 'Length',
          label: '',
          required: true,
        }"
        :isRow="true"
        :itemsCenter="true"
        :labelWidth="0"
        :selectWidth="200"
        :selectList="selectLengthList"
        :default="formData.length"
        :validation="validation.length"
        @change="formData.length = $event"
      ></elementSelectNew>
      <elementSelectNew
        :select="{
          id: 'Width',
          label: '',
          required: true,
        }"
        :isRow="true"
        :itemsCenter="true"
        :labelWidth="0"
        :selectWidth="200"
        :selectList="selectWidthList"
        :default="formData.width"
        :validation="validation.width"
        @change="formData.width = $event"
      ></elementSelectNew>
      <elementSelectNew
        :select="{
          id: 'Height',
          label: '',
          required: true,
        }"
        :isRow="true"
        :itemsCenter="true"
        :labelWidth="0"
        :selectWidth="200"
        :selectList="selectHeightList"
        :default="formData.height"
        :validation="validation.height"
        @change="formData.height = $event"
      ></elementSelectNew>
    </div>
    <div class="element tw-grid tw-grid-cols-1 md:tw-grid-cols-2 xl:tw-grid-cols-2 tw-gap-[10px] tw-mt-[20px]">
      <div class="element tw-grid tw-grid-cols-1 md:tw-grid-cols-[90px_auto] xl:tw-grid-cols-[90px_auto] tw-gap-[10px]">
        <div class="tw-flex tw-items-center">
          <label class="tw-font-normal tw-mb-[10px] md:tw-mb-0">
            <span>{{ $t("Weight (kg)")}}</span><span class="required">*</span>
          </label>
        </div>
        <elementInputNew
            :input="{
              id: 'Weight',
              required: true,
              type: 'text',
              placeholder: '',
            }"
            :maxlength="11"
            :validation="validation.weight"
            @change="formData.weight = $event"
        ></elementInputNew>
      </div>
      <div class="element tw-grid tw-grid-cols-1 md:tw-grid-cols-[90px_auto] xl:tw-grid-cols-[90px_auto] tw-gap-[10px]">
        <div class="tw-flex tw-items-center">
            <label class="tw-font-normal tw-mb-[10px] md:tw-mb-0 tw-ml-[20px]">
              <span>{{ $t("Quantity")}}</span><span class="required">*</span>
            </label>
        </div>
        <elementSelectNew
          :select="{
            id: 'Quantity',
            label: 'Quantity',
            required: true,
          }"
          :isRow="true"
          :itemsCenter="true"
          :labelWidth="0"
          :selectWidth="200"
          :selectList="selectQuantityList"
          :default="formData.quantity"
          :validation="validation.quantity"
          @change="formData.quantity = $event"
        ></elementSelectNew>
      </div>
    </div>
    <div class="tw-border-0 tw-border-b tw-border-solid tw-border-neutrals-200 tw-mt-[20px]"></div>
    <div class="group tw-mt-[30px]">
      <h3 class="t14 tw-font-bold tw-mb-[20px] md:t16">
        {{ $t("Service Type") }}
      </h3>
      <typeGroup :packages="packages" @type="changeType($event)"></typeGroup>
    </div>
  </div>
</template>
  <script>
import elementSelectNew from "@/components/newComponent/form/ElementSelectNew";
import elementInputNew from "@/components/newComponent/form/ElementInputNew";
import typeGroup from "@/components/service/content/typeGroup.vue";
import is from "is_js";
export default {
  components: {
    elementSelectNew,
    elementInputNew,
    typeGroup
  },
  props: {
    selectPackageList: {
      type: Array,
    },
    selectLengthList: {
      type: Array,
    },
    selectWidthList: {
      type: Array,
    },
    selectHeightList: {
      type: Array,
    },
    selectQuantityList: {
      type: Array,
    },
  },
  data() {
    return {
      formData: {
        package: "",
        length: "",
        width: "",
        height: "",
        weight: "",
        quantity: "",
      },
      validation: {
        package: true,
        length: true,
        width: true,
        height: true,
        weight: true,
        quantity: true,
      },
      errors: null,
      packages: [{
          package_id: '1',
          name: '嘉義',
          is_customize: 1,
          choices:[{title: '接機服務',text: 'qweqweq'},{title: '送機服務',text: '13123'}],
          plan_title: '接送機服務',
          specifications: [{
            title: '賓士7人座車',
          }]
        },{
          package_id: '1',
          name: '臺南',
          is_customize: 1,
          choices:[{title: '接機服務',text: 'qweqweq'},{title: '送機服務',text: '13123'}],
          plan_title: '接送機服務',
          specifications: [{
            title: '賓士7人座車',
          }]
        }],
    };
  },
  methods: {
    reset() {
      this.formData = {
        package: "",
        length: "",
        width: "",
        height: "",
        weight: "",
        quantity: "",
      };
    },
    save() {
      this.validators();
      if (this.validators()) {
        const patchData = JSON.parse(JSON.stringify(this.formData));
      }
    },
    validators() {
      if (is.empty(this.formData.package)) {
        this.validation.package = false;
      } else {
        this.validation.package = true;
      }
      if (is.empty(this.formData.length || is.not.email(this.formData.length))) {
        this.validation.length = false;
      } else {
        this.validation.length = true;
      }
      if (is.empty(this.formData.width || is.not.email(this.formData.width))) {
        this.validation.width = false;
      } else {
        this.validation.width = true;
      }
      if (is.empty(this.formData.height || is.not.email(this.formData.height))) {
        this.validation.height = false;
      } else {
        this.validation.height = true;
      }
      if (is.empty(this.formData.weight || is.not.email(this.formData.weight))) {
        this.validation.weight = false;
      } else {
        this.validation.weight = true;
      }
      if (is.empty(this.formData.quantity || is.not.email(this.formData.quantity))) {
        this.validation.quantity = false;
      } else {
        this.validation.quantity = true;
      }

      this.errors = Object.entries(this.validation).filter(
        (e) => e[1] == false
      );
      if (this.errors.length > 0) {
        return false;
      } else {
        return true;
      }
    },
    changeType(index) {
      let vm = this;
      vm.activePackage = index;
      vm.packageId = vm.content.packages[index].package_id
        ? vm.content.packages[index].package_id
        : "";
      vm.packageName = vm.content.packages[index].name
        ? vm.content.packages[index].name
        : "";
    },
  },
};
</script>
<style lang="scss" scoped>
  select {
    -moz-appearance: none;
    /* Firefox */
    -webkit-appearance: none;
    /* Safari and Chrome */
    appearance: none;
    background-image: url("~/assets/svg/down-arrow.svg");
    background-size: 9px 6px;
    background-position: right 20px center;
    background-repeat: no-repeat;
  }
</style>