<template>
  <div class="input-wrapper">
    <div class="input-section">
      <div class="example-tags">
        <span class="tag" @click="selectTag('适合礼裙的款式图')">适合礼裙的款式图</span>
        <span class="tag" @click="selectTag('用于童装的猫咪图')">用于童装的猫咪图</span>
        <span class="tag" @click="selectTag('常见的球服设计图')">常见的球服设计图</span>
      </div>
      <div class="input-container">
        <input type="text" class="prompt-input" placeholder="输入您想要创作的图片描述" v-model="inp"
          @keyup.enter="$emit('send', inp)" />
        <div class="button-group">
          <button class="upload-btn">
            <img src="@/assets/imageGeneraterView/imageGeneraterIcon.svg" alt="upload" />
          </button>
          <el-button native-type="submit" type="primary" @click="$emit('send', inp)" :disabled="is">发送</el-button>

        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
const inp = defineModel('modelValue', {
  type: String,
  required: true
})
const props = defineProps({
  isSending: {
    type: Boolean,
    default: false
  },
  handleUserMessage: {
    type: Function
  }
})
const emits = defineEmits(['send'])
const selectTag = (tag) => {
  emits('send', tag)
}
const is = ref(false)
watch(() => props.isSending, (newVal) => {
  console.log(`output->isSending`, newVal)
  is.value = newVal
}, { immediate: true })
</script>

<style scoped>
.input-wrapper {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 830px;
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.input-section {
  width: 100%;
  max-width: 800px;
}

.example-tags {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}

.tag {
  font-size: 14px;
  color: #666;
  cursor: pointer;
  transition: color 0.3s;
}

.tag:hover {
  color: #333;
}

.input-container {
  display: flex;
  align-items: center;
  gap: 12px;
  background-color: #f5f5f5;
  border-radius: 12px;
  padding: 12px;
}

.prompt-input {
  flex: 1;
  border: none;
  background: none;
  outline: none;
  font-size: 14px;
  color: #333;
}

.prompt-input::placeholder {
  color: #999;
}

.button-group {
  display: flex;
  gap: 8px;
}

.upload-btn {
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.upload-btn img {
  width: 20px;
  height: 20px;
}

.send-btn {
  background-color: #007AFF;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.send-btn:hover {
  background-color: #0056b3;
}
</style>
