<template>
  <div class="showMoreButton" @click="toggle">
    <span>Read {{ text }}</span>
    <i class="lofty_iconfont lofty-icon-arrow_01_right" :class="{rotate: showMore}"></i>
  </div>
</template>

<script setup>
import store from './store.js'
const props = defineProps({ id: String })
const {
  module
} = store[props.id]
const showMore = ref(false)
const text = computed(()=>{
  return showMore.value ? 'Less': 'More'
})
const div = module.$('.lofty-other-fields')
function toggle() {
  showMore.value = !showMore.value
  div.style.display = showMore.value ? 'block': 'none'
}
</script>
<style>
.showMoreButton  {
  width: 100%;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #505050;
  .lofty_iconfont {
    margin-left: 6px;
  }
  .rotate {
    transform: rotate(-90deg);
  }
}
</style>