<script setup lang="ts">
  import { computed, reactive, ref } from '../../../../adapter-vue'
  import ToolbarItemContainer from '../toolbar-item-container/index.vue'
  import custom from '../../../../assets/icon/red-packet.svg'
  import { isUniFrameWork } from '../../../../utils/env'

  const placeholderStyle = `font-family: PingFang SC, PingFang SC; font-weight: 500; color: #666666; font-size: 32rpx; font-style: normal; text-transform: none;`

  const evaluateIcon = custom

  /** 提示框 */
  const message = ref()
  const container = ref()
  const formData = reactive({
    //  积分
    integral: '',
    // 红包标题
    title: ''
  })

  /** 监听积分输入值 */
  const monitorPoints = computed(() => {
    const data = {
      valid: false,
      message: ''
    }
    if (!formData.integral) {
      data.valid = true
      data.message = '请输入积分'
      message.value.open()
      return data
    }
    if (Number(formData.integral) > 2000) {
      data.valid = true
      data.message = '积分不能大于2000'
      message.value.open()
      return data
    }

    return data
  })

  const onDialogShow = () => {
    console.log('弹出窗口')
    formData.integral = ''
    formData.title = ''
  }

  const onDialogClose = () => {
    console.log('关闭窗口')
  }

  const closeDialog = () => {
    container?.value?.toggleDialogDisplay(false)
  }

  const onSubmit = () => {
    if (!formData.integral) return
    console.log('确认')
  }
</script>

<template>
  <ToolbarItemContainer
    ref="container"
    needBottomPopup
    :iconFile="evaluateIcon"
    :iconWidth="isUniFrameWork ? '26px' : '20px'"
    :iconHeight="isUniFrameWork ? '26px' : '20px'"
    title="红包"
    @onDialogShow="onDialogShow"
    @onDialogClose="onDialogClose"
  >
    <view class="red-envelope">
      <view class="top-title">
        <text class="title">发红包</text>
        <uni-icons
          type="closeempty"
          color="#333333"
          size="24"
          @click.stop="closeDialog"
        ></uni-icons>
      </view>
      <!-- 输入框 -->
      <view
        :class="{ 'on-reminder': monitorPoints.valid }"
        class="input-box"
      >
        <text>积分</text>
        <input
          v-model="formData.integral"
          :placeholder-style="placeholderStyle"
          confirm-type="done"
          type="number"
          placeholder="0.00"
          @confirm="onSubmit"
        />
      </view>

      <view class="input-box title-box">
        <input
          v-model="formData.title"
          :placeholder-style="placeholderStyle"
          placeholder="恭喜发财，大吉大利"
        />
      </view>

      <!-- 底部显示 -->
      <view class="bottom-box">
        <view class="text-box">
          <text>积分：</text>
          <text v-if="formData.integral">{{ formData.integral }}</text>
          <text v-else>0.00</text>
        </view>
        <button class="btn" @click.stop="onSubmit">塞进红包</button>
      </view>
    </view>

    <!-- 提示框 -->
    <uni-popup ref="message" type="message">
      <uni-popup-message
        type="error"
        :message="monitorPoints.message"
        :duration="2000"
      ></uni-popup-message>
    </uni-popup>
  </ToolbarItemContainer>
</template>

<style scoped lang="scss" src="./style/index.scss"></style>
