<template>
  <u-popup :show="visible" mode="bottom" :round="24" :closeable="false" :custom-style="{ height: '90vh' }"
    @close="handleClose">
    <view class="date-note-popup">
      <!-- 顶部导航栏 -->
      <view class="popup-header">
        <view class="close-btn" @click="handleClose">
          <text class="close-icon">×</text>
        </view>
        <text class="popup-title"> {{ isEdit ? '编辑日程备注' : '新增日程备注' }}</text>
        <button class="save-btn" @click="handleSave">保存</button>
      </view>

      <!-- 颜色选择区 -->
      <view class="color-section">
        <text class="section-title">选择显示颜色</text>
        <view class="color-list">
          <view v-for="(color, index) in colorList" :key="index" class="color-item"
            :class="{ active: selectedColorIndex === index }" :style="{ backgroundColor: color }"
            @click="selectedColorIndex = index" />
        </view>
      </view>

      <!-- 输入框区域 -->
      <view class="input-section">
        <text class="section-title">日程标题</text>
        <textarea v-model="noteContent" class="note-textarea" placeholder="输入当天的日程情况，如休息日、生病受伤了、经期等"
          placeholder-class="placeholder" maxlength="20" show-count />
      </view>

      <!-- 历史备注区域 -->
      <view class="history-section">
        <view class="history-header">
          <text class="section-title history-title">历史备注</text>
          <text class="history-tip">点击填充到文本内容</text>
        </view>
        <view v-if="props.historyList.length" class="history-section">
          <view class="history-tags">
            <view v-for="(item, idx) in props.historyList" :key="idx" class="history-tag"
              :style="{ backgroundColor: item.backgroundColor }" @click="selectHistoryNote(item)">
              {{ item.content }}
            </view>
          </view>
        </view>
      </view>
    </view>
  </u-popup>
</template>

<script setup>
import { ref, watch, computed } from 'vue';
import dailytemplateApi from '@/sheep/api/Template/Dailytemplate';

const props = defineProps({
  visible: { type: Boolean, default: false },
  date: { type: String, required: true },
  noteId: { type: [Number, String], default: null },
  historyList: { type: Array, default: () => [] }
});

const emit = defineEmits(['update:visible', 'save', 'close', 'refreshMain']);

const isEdit = computed(() => {
  return !!props.noteId;
});

watch(() => props.visible, (val) => {
  if (val && isEdit.value) {
    // 打开弹窗 + 是编辑模式 → 去获取详情
    getNoteDetail();
  }
});

// 响应式数据
const noteContent = ref('');
const selectedColorIndex = ref(0);

const colorList = ref([
  '#ff9944',
  '#ff7766',
  '#ddaaff',
  '#aabbff',
  '#cccccc'
]);

const getNoteDetail = async () => {
  try {
    let res = await dailytemplateApi.getNoteDetail(props.noteId);
    // 在这里回填数据
    noteContent.value = res.data.content;
    // 颜色也要回填（找到对应下标）
    selectedColorIndex.value = colorList.value.findIndex(c => c === res.data.backgroundColor);
  } catch (e) {
    uni.showToast({ title: "获取详情失败" });
  }
};

const selectHistoryNote = (item) => {
  // 1. 填充文字到输入框
  noteContent.value = item.content;

  // 2. 匹配颜色，更新选中的颜色下标
  const colorIndex = colorList.value.findIndex(c => c === item.backgroundColor);
  if (colorIndex !== -1) {
    selectedColorIndex.value = colorIndex;
  }
};

// 事件处理
const handleClose = () => {
  emit('update:visible', false);
  emit('close');
};
const handleSave = async () => {
  if (!noteContent.value.trim()) return uni.showToast({ title: "请输入内容" });
  let data = {
    content: noteContent.value,
    backgroundColor: colorList.value[selectedColorIndex.value]
  };
  try {
    if (isEdit.value) {
      // 编辑：必须传 ID
      data.id = props.noteId;
      await dailytemplateApi.updateNote(data);
      emit('refreshMain')
    } else {
      // 新增：必须传日期
      data.noteDate = props.date;
      await dailytemplateApi.AddOrUpdateDateNote(data);
      emit('refreshMain')
    }

    uni.showToast({ title: "保存成功" });
    emit("save"); // 通知父组件刷新
    handleClose();
  } catch (e) {
    uni.showToast({ title: "保存失败" });
  }
};
const fillNote = (text) => {
  noteContent.value = text;
};
</script>

<style scoped lang="scss">
.date-note-popup {
  width: 100vw;
  min-height: 75vh;
  background-color: #fff;
  box-sizing: border-box;
  padding: 24rpx 32rpx;
  display: flex;
  flex-direction: column;
}

/* 顶部导航 */
.popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40rpx;

  .close-btn {
    width: 48rpx;
    height: 48rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    .close-icon {
      font-size: 40rpx;
      color: #333;
      line-height: 1;
    }
  }

  .popup-title {
    font-size: 34rpx;
    // font-weight: 600;
    // color: #111;
    text-align: center;
    display: block;
    flex: 1;
  }

  .save-btn {
    margin-right: 0;
    background: #ffd100;
    color: #000;
    border: none;
    border-radius: 40rpx;
    padding: 2rpx 25rpx;
    font-size: 25rpx;
    font-weight: 500;
  }
}

/* 通用标题 */
.section-title {
  font-size: 30rpx;
  color: #111;
  font-weight: 500;
  display: block;
  margin-bottom: 24rpx;
}

/* 颜色选择区 */
.color-section {
  margin-bottom: 40rpx;

  .color-list {
    display: flex;
    gap: 40rpx;

    .color-item {
      width: 80rpx;
      height: 80rpx;
      border-radius: 12rpx;
      border: 4rpx solid transparent;

      &.active {
        border-color: #ada6a6;
      }
    }
  }
}

/* 输入框区域 */
.input-section {
  margin-bottom: 40rpx;

  .note-textarea {
    width: 100%;
    height: 200rpx;
    background: #f7f8fa;
    border-radius: 12rpx;
    padding: 20rpx;
    font-size: 28rpx;
    color: #333;
    line-height: 1.5;
    box-sizing: border-box;

    .placeholder {
      color: #999;
    }
  }
}

.history-title {
  margin-bottom: 0 !important;
  /* 覆盖原来的 margin-bottom */
}

/* 历史备注区域 */
.history-section {
  flex: 1;
  display: flex;
  flex-direction: column;

  .history-header {
    display: flex;
    align-items: center;
    gap: 16rpx;
    margin-bottom: 24rpx;
    margin-top: 0;

    .history-tip {
      font-size: 24rpx;
      color: #999;
    }
  }

  .history-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 20rpx;

    .history-tag {
      border-radius: 8rpx;
      font-size: 26rpx;
      padding: 10rpx 20rpx;
      align-items: center;
    }
  }
}
</style>