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

<template>
  <div class="group tw-mb-[20px]">
    <div class="element tw-grid tw-grid-cols-1 md:tw-grid-cols-[166px_auto_auto] xl:tw-grid-cols-[166px_auto_auto] tw-gap-[10px]">
        <div class="tw-flex tw-items-center">
            <label class="tw-mb-[10px] tw-font-normal t14 md:t16">
                <span>{{ $t("Select an extension")}}：</span>
            </label>
        </div>
      <elementSelectNew
        :select="{
          id: 'SelectYear',
          label: '',
          required: true,
        }"
        :isRow="true"
        :itemsCenter="true"
        :labelWidth="0"
        :selectWidth="200"
        :selectList="selectYearList"
        :default="formData.select_year"
        :validation="validation.select_year"
        @change="selectYear($event)"
      ></elementSelectNew>
      <elementSelectNew
        :select="{
          id: 'selectMonth',
          label: '',
          required: false,
        }"
        :isRow="true"
        :itemsCenter="true"
        :labelWidth="0"
        :selectWidth="200"
        :selectList="selectMonthList"
        :default="formData.select_month"
        :validation="validation.select_month"
        @change="selectMonth($event)"
      ></elementSelectNew>
    </div>
    <div class="element tw-mt-[20px] tw-grid tw-grid-cols-1 md:tw-grid-cols-[166px_auto] xl:tw-grid-cols-[166px_auto] tw-gap-[10px]">
      <div class="tw-flex tw-items-center">
          <label class="tw-mb-[10px] tw-font-normal t14 md:t16">
            <span>{{ $t("Exhibition Name")}}：</span><span class="required t12 md:t14">*</span>
          </label>
      </div>
      <elementSelectNew
        :select="{
          id: 'ExhibitionName',
          label: 'Exhibition Name',
          required: true,
        }"
        :isRow="true"
        :itemsCenter="true"
        :labelWidth="0"
        :selectWidth="200"
        :selectList="selectExhibitionList"
        :default="formData.exhibition_name"
        :validation="validation.exhibition_name"
        @change="selectExhibition($event)"
      ></elementSelectNew>
    </div>
  </div>
</template>
  <script>
import elementSelectNew from "@/components/newComponent/form/ElementSelectNew";
import is from "is_js";
export default {
  name: 'selectExhibition',
  components: {
    elementSelectNew,
  },
  props: {
    selectYearList: {
      type: Array,
    },
    selectMonthList: {
      type: Array,
    },
  },
  data() {
    return {
      selectExhibitionList: [],
      formData: {
        select_year: "0",
        select_month: "0",
        exhibition_name: "0",
        exhibition: {id:'0',name: ''},
      },
      validation: {
        select_year: true,
        select_month: true,
        exhibition_name: true,
      },
      errors: null,
    };
  },
  methods: {
    reset() {
      this.formData = {
        select_year: "0",
        select_month: "0",
        exhibition_name: "0",
        exhibition: {id:'0',name: ''},
      };
    },
    validators() {
      // if (is.empty(this.formData.select_year) || this.formData.select_year =="0") {
      //   this.validation.select_year = false;
      // } else {
      //   this.validation.select_year = true;
      // }
      // if (is.empty(this.formData.select_month) || this.formData.select_month =="0") {
      //   this.validation.select_month = false;
      // } else {
      //   this.validation.select_month = true;
      // }
      if (is.empty(this.formData.exhibition_name) || this.formData.exhibition_name =="0") {
        this.validation.exhibition_name = false;
      } else {
        this.validation.exhibition_name = true;
      }

      this.errors = Object.entries(this.validation).filter(
        (e) => e[1] == false
      );
      if (this.errors.length > 0) {
        return false;
      } else {
        return true;
      }
    },
    selectYear(value){
      this.formData.select_year = value;
      this.getExhibitions();
    },
    selectMonth(value){
      this.formData.select_month = value;
      this.getExhibitions();
    },
    selectExhibition(value){
      if(this.selectExhibitionList.length>0){
        for(let i=0;i<this.selectExhibitionList.length;i++){
          if(this.selectExhibitionList[i].id == value){
            this.formData.selectPackape = this.selectExhibitionList[i];
            break;
          }
        }
      }
      this.formData.exhibition_name = value;
    },
    getExhibitions(){
      this.selectExhibitionList = [];
      if((this.formData.select_year && this.formData.select_year!="0") && (this.formData.select_month && this.formData.select_month !="0")){
        this.$axios.get(`/trending/api/Onsite/Exhibitions?Lang=${this.$i18n.localeProperties["langQuery"]}&ServiceID=${this.$route.params.id}&Year=${this.formData.select_year}&Month=${this.formData.select_month}`)
        .then((response) => {
          if(response && response.data && response.data.DATA && response.data.DATA.rel){
            let data = response.data.DATA.rel
            if(data.length>0){
              this.selectExhibitionList = data.map((item) => {
                return {
                  id: item.ArgumentID,
                  name: item.ArgumentValue,
                };
              });
            }
          }
        })
        .catch((error) => console.log(error));
      }
    }
  },
};
</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>