<template>
  <view :class="`m-content-title ${props.customClass}`">
    <view class="title">{{ title }}</view>
    <slot name="right" @click="emits('right-click')">
      <view class="right">
        <text class="text-24rpx text-color-place">查看更多</text>
        <text class="i-custom-arrow-right wh-28rpx" />
      </view>
    </slot>
  </view>
</template>

<script setup lang="ts">
  defineOptions({
    name: 'MContentTitle',
    options: {
      styleIsolation: 'shared',
      virtualHost: true,
    },
  })

  const props = withDefaults(
    defineProps<{
      customClass?: string
      title: string
    }>(),
    {
      title: '',
      customClass: '',
    }
  )
  const emits = defineEmits<{
    (e: 'right-click'): void
  }>()
</script>

<style scoped lang="scss">
  .m-content-title {
    @apply mb-24rpx flex items-center justify-between;
    .title {
      @apply text-color-1 text-32rpx font-600 relative;
      &::after {
        @apply rounded-12rpx h-10rpx absolute bottom-0 left-0 inline-block w-full;
        content: '';
        background: linear-gradient(270deg, rgba(21, 107, 247, 0) 0%, #156bf7 100%);
        opacity: 0.4;
      }
    }
    .right {
      @apply flex items-center justify-between;
    }
  }
</style>
