ShowEasyFrontEnd/FrontEnd/components/exhibition/ExhibitionExhibitProfile.vue

<template>
  <v-row class="mb-6">
    <v-col cols="12">
      <div v-if="exhibition.categories">
        <b>{{ $t('Categories')}}：</b>
        <span
            v-for="(category, index) in exhibition.categories"
            :key="category.id"
        >
          <nuxt-link
          class="black--text"
          :to="localePath('/exhibition?category=' + category.id)"
          >
        <span class="text-decoration-underline">
        {{ category.name }}</span>
        </nuxt-link> <span v-if="index < exhibition.categories.length - 1">、</span>
        </span>
      </div>
      <p></p>
      <div v-if="exhibition.subcategories">
        <b>{{ $t('Subcategories')}}：</b>
        <span
            v-for="(subcategory, index) in exhibition.subcategories"
            :key="subcategory.id"
        >
        <nuxt-link
          class="black--text"
          :to="localePath('/exhibition?subcategory=' + subcategory.id)"
          >
        <span class="text-decoration-underline">{{ subcategory.name }}</span>
        </nuxt-link><span v-if="index < exhibition.subcategories.length - 1">,&nbsp;</span>
        </span>
      </div>
      <p></p>
      <div ref="profiletextarea" :class=" expand ? 'lineProfileClamp' : ''" v-html="exhibition.profile"></div>
      <p></p>
      <div class="tw-hidden lg:tw-block">
        <div
          v-if="hide"
          class="d-flex justify-center primary--text"
          @click="expand = !expand"
        >
          <a
            >{{ expand ? $t("See more") : $t("See less") }} &nbsp;&nbsp;<v-icon
              color="primary"
              >{{ expand ? "mdi-chevron-down" : "mdi-chevron-up" }}</v-icon
            ></a
          >
        </div>
      </div>
      <div class="lg:tw-hidden">
        <button v-if="hide" 
        class="d-flex justify-center primary--text tw-w-full tw-body-3 tw-rounded-lg tw-text-primary-1 tw-border-solid tw-border-[1px] tw-border-primary-1 tw-py-[10px] tw-px-[130px] tw-whitespace-nowrap" 
        @click="$modal.show('SeeMoreExhibitProfile')">
          See more
        </button>

      </div>
      
      <SeeMoreExhibitProfile v-bind:SeeMoreExhibitProfile="exhibition.profile" v-bind:Exhibit="exhibition"></SeeMoreExhibitProfile>
    </v-col>
  </v-row>
  
</template>

<script>
import VClamp from 'vue-clamp'
import SeeMoreExhibitProfile from "@/components/exhibition/SeeMoreExhibitProfile.vue";
export default {
  name: "ExhibitionExhibitProfile",
  components: {
    VClamp,
    SeeMoreExhibitProfile,

  },
  props: {
    exhibition: {
      type: Object,
      default:  () => ({
        categories: [],
        subcategories:[],
      })
    },
  },
  
  data() {
    return {
      expand: true,
      hide: false,
      SeeMoreExhibitProfile: {
        type:Object,
    },
      Exhibit: {
        type:Object,
        categories: {
          name: "categories.name",
          id: "categories.id"
        },
        subcategories: {
          name: "subcategories.name",
          id: "subcategories.id"
        }
      }
    };
  },
  mounted () {
    this.$refs.profiletextarea.scrollHeight > 120 ? this.hide = true : this.hide = false;
  },
  updated () {
    this.$refs.profiletextarea.scrollHeight > 120 ? this.hide = true : this.hide = false;
  },
  methods: {

  },
};
</script>

<style lang="scss" scoped>
.lineProfileClamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
}

a:hover{
  color: #ee9546;
}


</style>