<template>
  <view class="hs_year_picker">
    <picker mode="date" fields="year" @change="onChange">
      <view class="hs_day_picker">
        <text v-if="selectValue === '全部账单'">{{ selectValue }}</text>
        <text v-else>{{ selectValue }}年账单</text>
        <uni-icons v-if="selectValue === '全部账单'" type="down" color="#333" size="12" />
      </view>
    </picker>
    <view class="close_btn" v-if="selectValue !== '全部账单'" @click="handleClose">
      <uni-icons type="close" color="#666" size="18" />
    </view>
  </view>
</template>
<style lang="scss" scoped>
.hs_year_picker {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.hs_day_picker {
  color: #333;
  font-size: 28rpx;
  display: flex;
  align-items: center;
  text {
    padding-right: 10rpx;
  }
}
</style>
<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
import { currentYear } from '@/common/libraries/day'

interface EnumItem {
  text?: string
  value?: string
}
const props = defineProps([
  'Enums',
  'title',
  'pickerIndex',
  'value',
  'borderTop',
  'required',
  'valueModel',
  'icon',
  'iconSize'
])

const selectValue = ref('全部账单')
const emit = defineEmits(['change', 'update:valueModel'])
const onChange = (e: any) => {
  selectValue.value = e?.detail?.value
  emit('update:valueModel', e?.detail?.value)
  emit('change', e?.detail?.value)
}

const handleClose = () => {
  selectValue.value = '全部账单'
  emit('update:valueModel', undefined)
  emit('change', undefined)
}
</script>
