<template>
    <view>
        <!-- 底部弹出层 -->
        <uni-popup ref="timepopup" type="bottom" :safe-area="false">
            <!-- 账单分类 -->
            <view v-if="data.popupType == 'billClassify'" class="bill-classify-box">
                <view class="title-box">
                    <view class="title">
                        账单分类
                    </view>
                    <view class="btn" @click="closeTimePicker">
                        <image class="close-image" src="/static/image/common/close.png"></image>
                    </view>
                </view>
                <view class="bill-classify-content">
                    <view class="bill-classify-item" v-for="item in billClassifyOptions" :key="item.id"
                        @click="data.currentClassifyName = item.name">
                        <view class="bill-classify-item-text"
                            :class="{ 'active-item': data.currentClassifyName == item.name }">
                            {{ item.name }}
                        </view>
                    </view>
                </view>
                <view class="confirm-btn" @click="confirmClassify">
                    确定
                </view>
            </view>
            <!-- 标签和备注 -->
            <view v-if="data.popupType == 'tagAndNote'" class="bill-classify-box">
                <view class="title-box">
                    <view class="title">
                        标签
                        <text class="text">(最多10个标签)</text>
                    </view>
                    <view class="btn" @click="closeTimePicker">
                        <image class="close-image" src="/static/image/common/close.png"></image>
                    </view>
                </view>
                <view class="bill-classify-content tag-content flex-wrap">
                    <view class="tag-item" v-for="(tag, index) in data.tempTags" :key="index">
                        <text>{{ tag }}</text>
                        <view class="delete-tag" @click="deleteTag(index)">
                            <image src="/static/image/common/close.png" mode="widthFix" class="close-icon-img">
                            </image>
                        </view>
                    </view>
                    <view class="add-tag-box" v-if="!data.showTagInput && data.tempTags.length < 10"
                        @click="showTagInputFunc">
                        <text class="add-symbol">+</text>
                    </view>
                    <view class="input-box" v-if="data.showTagInput">
                        <input class="tag-input-field" v-model="data.tagInputValue" :focus="data.showTagInput"
                            @confirm="confirmAddTag" @blur="confirmAddTag" placeholder="请输入标签" maxlength="5" />
                    </view>
                </view>
                <view class="title-box">
                    <view class="title">
                        备注
                    </view>
                </view>
                <view class="bill-classify-content note-content">
                    <textarea class="note-textarea" auto-height v-model="data.tempNote.text" placeholder="随便说点什么..."
                        maxlength="50" disable-default-padding></textarea>
                </view>
                <view class="title-box">
                    <view class="title">
                        备注图片
                    </view>
                    <switch :checked="data.tempNote.isImage" color="#1676FE" style="transform: scale(0.7);"
                        @change="(e) => data.tempNote.isImage = e.detail.value"></switch>
                </view>
                <!-- <view class="bill-classify-content" v-if="data.tempNote.isImage"> -->
                <!-- 此处展示图片上传或其他逻辑，暂时留空或添加提示 -->
                <!-- </view> -->
                <view class="confirm-btn" @click="confirmClassify">
                    确定
                </view>
            </view>
        </uni-popup>
    </view>
</template>
<script setup>
import {
    reactive,
    toRefs,
    ref
} from 'vue'
import addBillJson from '@/static/json/add-bill.json'

const props = defineProps({
    billClassifyOptions: {
        type: Array,
        default: () => addBillJson.billClassify
    }
})

const emit = defineEmits(['confirm', 'update:show'])

const timepopup = ref(null)

const data = reactive({
    popupType: '', // 'billClassify' or 'tagAndNote'
    currentClassifyName: '',
    tempTags: [],
    tagInputValue: '',
    showTagInput: false,
    tempNote: {
        text: '',
        isImage: false
    }
})

/**
 * 打开弹窗
 * @param {String} type 弹窗类型 'billClassify' | 'tagAndNote'
 * @param {Object} initData 初始化数据
 */
const open = (type, initData = {}) => {
    data.popupType = type
    if (type === 'billClassify') {
        data.currentClassifyName = initData.classifyName || ''
    } else if (type === 'tagAndNote') {
        // Deep copy to prevent direct mutation of prop data before confirm
        data.tempTags = initData.tags ? JSON.parse(JSON.stringify(initData.tags)) : []
        data.tempNote = initData.note ? JSON.parse(JSON.stringify(initData.note)) : { text: '', isImage: false }
        data.showTagInput = false
        data.tagInputValue = ''
    }
    timepopup.value.open()
}

/**
 * 关闭弹窗
 */
const closeTimePicker = () => {
    timepopup.value.close()
}

/**
 * 确认操作
 */
const confirmClassify = () => {
    if (data.popupType === 'billClassify') {
        const selected = props.billClassifyOptions.find(item => item.name === data.currentClassifyName)
        emit('confirm', { type: 'billClassify', value: data.currentClassifyName, id: selected ? selected.id : 0 })
    } else if (data.popupType === 'tagAndNote') {
        emit('confirm', {
            type: 'tagAndNote',
            tags: data.tempTags,
            note: data.tempNote
        })
    }
    closeTimePicker()
}

/**
 * 删除标签
 */
const deleteTag = (index) => {
    data.tempTags.splice(index, 1)
}

/**
 * 显示标签输入框
 */
const showTagInputFunc = () => {
    data.showTagInput = true
}

/**
 * 确认添加标签
 */
const confirmAddTag = () => {
    if (data.tagInputValue.trim()) {
        data.tempTags.push(data.tagInputValue.trim())
    }
    data.tagInputValue = ''
    data.showTagInput = false
}

defineExpose({
    open,
    close: closeTimePicker
})
</script>

<style lang="less" scoped>
@import "@/common/specify-style.less";

.bill-classify-box {
    padding-bottom: calc(32rpx + constant(safe-area-inset-bottom)) !important;
    padding-bottom: calc(32rpx + env(safe-area-inset-bottom)) !important;


    .tag-content {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        padding: 20rpx 16rpx 0 16rpx;
        margin-bottom: 24rpx;

        .tag-item {
            position: relative;
            background-color: #E6F2FF;
            color: #2788D1;
            font-size: 26rpx;
            height: 60rpx;
            line-height: 60rpx;
            padding: 0 24rpx;
            border-radius: 8rpx;
            margin-right: 24rpx;
            margin-bottom: 24rpx;
            display: flex;
            align-items: center;

            .delete-tag {
                position: absolute;
                top: -12rpx;
                right: -12rpx;
                width: 32rpx;
                height: 32rpx;
                background-color: #FE4141;
                border-radius: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
                border: 2rpx solid #ffffff;
                z-index: 10;

                .close-icon-img {
                    width: 14rpx;
                    height: 14rpx;
                    filter: brightness(0) invert(1);
                }
            }
        }

        .add-tag-box {
            height: 52rpx;
            line-height: 52rpx;
            background-color: #F4F9FF;
            border-radius: 8rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 24rpx;
            padding: 0 16rpx;

            .add-symbol {
                color: #2788D1;
                font-size: 40rpx;
                line-height: 52rpx;
                font-weight: 300;
            }
        }

        .input-box {
            width: 160rpx;
            height: 60rpx;
            background-color: #F4F9FF;
            border-radius: 8rpx;
            margin-bottom: 24rpx;
            padding: 0 16rpx;
            display: flex;
            align-items: center;

            .tag-input-field {
                width: 100%;
                font-size: 26rpx;
                color: #2788D1;
            }
        }
    }

    .note-content {

        border-bottom: 1rpx solid #EDEDED;
        margin-bottom: 24rpx;

        .note-textarea {
            width: 100%;
            height: 160rpx;
            // background-color: #F9F9F9;
            font-size: 28rpx;
            color: #333;
        }
    }
}

.flex-wrap {
    flex-wrap: wrap;
}
</style>