<template>
  <div class="wrap12 flex mx-5 items-center">
    <div class="word8 font-semibold">{{ title }}</div>
    <div v-if="subtitle" class="ml-3 info2">{{ subtitle }}</div>
    <div class="flex-grow"></div>
    <span class="word9" v-if="iconName === 'icon-gengduo'">更多</span>
    <icon
      v-if="iconName === 'icon-gengduo'"
      name="icon-gengduo"
      color="#979BB6"
      size="10"
      @click="$emit('seeMore')"
    />
    <icon
      v-else-if="iconName === 'icon-shaixuan'"
      :name="iconName"
      color="#979BB6"
      size="16"
      @click="clickFilter"
    />
    <icon v-else-if="iconName" :name="iconName" color="#979BB6" size="16" />
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import Icon from "../common/Icon.vue";
export default defineComponent({
  emits: ["filter", "seeMore"],
  components: { Icon },
  props: {
    title: {
      type: String,
    },
    subtitle: {
      type: String,
    },
    iconName: {
      type: String,
      default: "icon-gengduo",
    },
  },
  methods: {
    clickFilter() {
      this.$emit("filter");
    },
  },
});
</script>
<style scoped>
.word8 {
  overflow-wrap: break-word;
  color: rgba(27, 31, 55, 1);
  font-size: 16px;
  letter-spacing: 0.19200000166893005px;
  font-family: PingFangSC-Medium;
  white-space: nowrap;
  text-align: center;
}

.word9 {
  display: block;
  overflow-wrap: break-word;
  color: rgba(27, 31, 55, 1);
  font-size: 12px;
  letter-spacing: 0.14399999380111694px;
  white-space: nowrap;
  text-align: left;
}

.info2 {
  z-index: 80;
  width: 102px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(141, 146, 175, 1);
  font-size: 12px;
  letter-spacing: 0.14399999380111694px;
  white-space: nowrap;
  text-align: center;
  margin: 0 0 0 14px;
}
</style>