<template>
  <view 
    :class="[
      'home-title',
      showMore ? 'has-more' : '',
      inWing ? 'wing-l in-wing' : '',
    ]"
  >
    <text>{{ title }}</text>
    <text v-if="showMore" class="more" @click="$emit('clickMore')">
      查看全部
      <text class="iconfont icon-arrow-right ml-2" />
    </text>
  </view>
</template>

<script setup lang="ts">
defineProps({	
  title: {
    type: String,
    default: '',
  },
  inWing: {
    type: Boolean,
    default: false,
  },
  showMore: {
    type: Boolean,
    default: false,
  }
})
defineEmits(['clickMore'])
</script>

<style lang="scss">
.home-title {
  font-size: 32rpx;
  margin: 40rpx 0 20rpx 0;
  color: #432A04;
  font-family: "SongtiSCBlack";

  .more {
    font-size: 28rpx;
  }
  text {
    font-family: "SongtiSCBlack";
  }

  &.has-more {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
  }
  &.in-wing {
    margin-bottom: 0;
  }
}
</style>