<template>
  <div class="my-sub">
    <div
      class="title"
      :class="{ 'click-able': clickAble }"
      @click="handleClick"
    >
      <span />
      <p><slot /></p>
      <div v-if="addition" class="addition">
        <MyCount
          v-if="addition.value"
          class="count orange-count"
          :value="addition.value"
        />
        <span v-if="addition.unit">{{ addition.unit }}</span>
        <!-- <img src="@/assets/images/title-dec.png" /> -->
      </div>
      <div v-if="searchAble" class="search-container">
        <input
          v-model="inputValue"
          :class="{ open: isOpened }"
          class="search-bar"
          type="text"
          @keypress.enter="handleSearch"
        />
        <img
          v-show="isOpened"
          class="close-btn"
          src="@/assets/images/close-btn2.png"
          draggable="false"
          @click.prevent="handleClose"
        />
        <img
          class="search-btn"
          src="@/assets/images/search.png"
          draggable="false"
          @click.prevent="handleOpenSearchBar"
        />
      </div>
    </div>
    <!-- <img src="@/assets/images/sub-dot.png" draggable="false" /> -->
    <span class="dot" />
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType, ref } from 'vue'
import MyCount from '../MyCount/my-count.vue'

export interface AdditionProp {
  name?: string
  value?: number
  unit?: string
}
export default defineComponent({
  name: 'MySub',
  displayName: 'm-sub',
  components: { MyCount },
  props: {
    addition: {
      type: Object as PropType<AdditionProp>,
      default: null,
    },
    searchAble: {
      type: Boolean as PropType<boolean>,
      default: false,
    },
    clickAble: {
      type: Boolean as PropType<boolean>,
      default: false,
    },
  },
  emits: ['search', 'close', 'select'],
  setup(props, ctx) {
    const isOpened = ref(false)
    const inputValue = ref('')
    const handleSearch = () => {
      ctx.emit('search', inputValue.value.trim())
    }
    const handleClose = () => {
      inputValue.value = ''
      ctx.emit('close')
    }
    const handleOpenSearchBar = () => {
      if (!isOpened.value) {
        isOpened.value = true
      } else {
        if (inputValue.value) {
          handleSearch()
        } else {
          isOpened.value = false
        }
      }
    }
    const handleClick = () => {
      if (props.clickAble) {
        ctx.emit('select')
      }
    }
    return {
      isOpened,
      inputValue,
      handleSearch,
      handleClose,
      handleOpenSearchBar,
      handleClick,
    }
  },
})
</script>

<style lang="stylus" scoped>
@import '../main.styl'
.my-sub
  display flex
  align-items center
  border-bottom .01rem solid rgba(105,110,114,.5)
  margin-bottom .03rem
  >.title
    display flex
    align-items center
    // color $secondary-color
    font-weight bold
    flex 1
    &.click-able
      cursor pointer
      &:hover
        color $yellow
    .addition
      display flex
      align-items center
      margin-left .1rem
      .count
        // color $orange
        font-size .15rem
        font-family $font-barlow
        padding-bottom .03rem
      span
        color #aaa
        font-size .08rem
        margin-left .05rem
      img
        width .3rem
        margin-left .1rem
    .search-container
      display flex
      align-items center
      position relative
      &:hover
        .close-btn
          display inline-block
      .search-bar
        display block
        width 0
        height .16rem
        background rgba(0,0,0,0.1)
        border-radius .02rem
        outline none
        margin 0 .05rem
        padding 0
        box-sizing border-box
        font-family $font-din
        font-size .1rem
        transition all .3s ease-in-out
        opacity 0
        &.open
          width 1.6rem
          padding .02rem .16rem .02rem .05rem
          border .01rem solid $blue
          opacity 1
      .search-btn
        width .14rem
        height @width
        cursor pointer
        transition transform .2s ease-in-out
        &:hover
          transform scale(1.3) rotate(360deg)
      .close-btn
        display none
        width .08rem
        height @width
        cursor pointer
        position absolute
        right .24rem
        transition transform .2s ease-in-out
        &:hover
          transform scale(1.3) rotate(360deg)
  >.dot
    display inline-block
    width 0
    height @width
    border .05rem solid transparent
    border-right-color #FFB560
</style>
