<!-- z-paging聊天输入框 -->

<template>
  <view class="chat-input-bar-container">
    <view class="chat-input-bar">
      <view class="chat-input-container">
        <!-- :adjust-position="false"必须设置，防止键盘弹窗自动上顶，交由z-paging内部处理 -->
        <input
          v-model="msg"
          :focus="focus"
          class="chat-input"
          :adjust-position="false"
          confirm-type="send"
          type="text"
          placeholder=""
          @confirm="sendClick"
          @focus="hidedKeyboard"
        >
      </view>
      <!-- 表情图标（如果不需要切换图片面板则不用写） -->
      <view class="container">
        <image
          class="add-img"
          src="../../static/images/chat/add.png"
          @click="imageChange"
        />
      </view>
      <view
        class="chat-input-send"
        @click="sendClick"
      >
        <text class="chat-input-send-text">
          发送
        </text>
      </view>
    </view>
    <!--  图片面板，这里使用height控制隐藏显示是为了有高度变化的动画效果（如果不需要切换图片面板则不用写） -->
    <view
      class="image-panel-container"
      :style="[{height: imageType === 'keyboard' ? '200rpx' : '0px'}]"
    >
      <view
        class="more-layer"
      >
        <view class="list">
          <view
            class="box"
            @tap="chooseImage"
          >
            <image
              class="icon"
              src="@/static/images/chat/pic.png"
            />
          </view>
          <view
            class="box"
            @tap="camera"
          >
            <image
              class="icon"
              src="@/static/images/chat/camera.png"
            />
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
const msg = ref('')
const focus = ref(false)
const imageType = ref('')

const emit = defineEmits(['imageTypeChange', 'send', 'sendImage'])

const updateKeyboardHeightChange = (res) => {
  if (res.height > 0) {
    // 键盘展开，将imageType设置为image
    imageType.value = 'image'
  }
}

// 用户尝试隐藏键盘，此时如果图片面板在展示中，应当隐藏图片面板，如果是键盘在展示中不用处理，z-paging内部已经处理（如果不需要切换图片面板则不用写）
const hidedKeyboard = () => {
  if (imageType.value === 'keyboard') {
    imageType.value = ''
  }
}

// 点击了切换图片面板/键盘（如果不需要切换图片面板则不用写）
const imageChange = () => {
  emit('imageTypeChange', imageType.value)
  if (imageType.value === 'keyboard') {
    // 点击了键盘，展示键盘
    focus.value = true
  } else {
    // 点击了切换图片面板
    focus.value = false
    // 隐藏键盘
    uni.hideKeyboard()
  }
  imageType.value = (!imageType.value || imageType.value === 'image') ? 'keyboard' : 'image'
}

// 点击了发送按钮
const sendClick = () => {
  if (!msg.value.length) return
  emit('send', msg.value)
  msg.value = ''
}

/**
 * 选择图片发送
 */
const chooseImage = () => {
  hidedKeyboard()
  emit('sendImage', 'album')
}

/**
 * 拍照发送
 */
const camera = () => {
  hidedKeyboard()
  emit('sendImage', 'camera')
}

// 暴露给父组件使用的方法
defineExpose({
  updateKeyboardHeightChange,
  hidedKeyboard
})
</script>

<style scoped lang="scss">
@use "./chat-input-bar.scss";
</style>
