<template>
    <view class="publish-container">
        <u-navbar title="发布动态" :autoBack="true">
            <view slot="right">
                <u-button type="success" size="small" text="发表" @click="submit" :disabled="loading"></u-button>
            </view>
        </u-navbar>

        <view class="content-body" :style="{ marginTop: '44px' }">
            <view class="text-area">
                <u--textarea v-model="content" placeholder="这一刻的想法..." border="none" height="150" count></u--textarea>
            </view>

            <view class="media-area">
                <u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="1"
                    :multiple="mediaType === 'image'" :maxCount="maxCount" :accept="mediaType" width="200rpx"
                    height="200rpx"></u-upload>
            </view>

            <view class="tips">
                <text v-if="fileList.length === 0">支持上传图片(最多9张)或视频(1个)</text>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            content: '',
            fileList: [],
            mediaType: 'image', // 默认为图片模式，上传第一个文件后确定类型
            loading: false
        };
    },
    computed: {
        maxCount() {
            return this.mediaType === 'video' ? 1 : 9;
        }
    },
    methods: {
        // 删除图片/视频
        deletePic(event) {
            this.fileList.splice(event.index, 1);
            // 如果清空了，重置类型允许用户重新选择
            if (this.fileList.length === 0) {
                this.mediaType = 'image'; // 重置为默认，实际上u-upload接受image时也能选视频(取决于accept)，这里为了逻辑清晰
            }
        },

        // 读取文件后的回调
        async afterRead(event) {
            // event.file 可能是数组（多选）或对象
            let lists = [].concat(event.file);

            // 1. 确定媒体类型 (根据第一个文件的类型)
            if (this.fileList.length === 0 && lists.length > 0) {
                // 简单判断：如果包含 thumb 属性或者 type 包含 video 则为视频
                // 注意：uni.chooseMedia 返回的 type 可能是 'image' 或 'video'
                // uView 的 event.file 在不同端表现不同，需根据实际情况判断
                // 这里假设我们先判断第一个文件的后缀或类型
                const isVideo = lists[0].url.endsWith('.mp4') || lists[0].type === 'video';
                this.mediaType = isVideo ? 'video' : 'image';
            }

            // 2. 模拟上传 (实际开发需调用 uni.uploadFile)
            let fileListLen = this.fileList.length;
            lists.map((item) => {
                this.fileList.push({
                    ...item,
                    status: 'uploading',
                    message: '上传中'
                });
            });

            for (let i = 0; i < lists.length; i++) {
                // 模拟上传成功
                const result = await this.uploadFilePromise(lists[i].url);
                let item = this.fileList[fileListLen];
                this.fileList.splice(fileListLen, 1, Object.assign(item, {
                    status: 'success',
                    message: '',
                    url: result // 后端返回的真实地址
                }));
                fileListLen++;
            }
        },

        uploadFilePromise(url) {
            return new Promise((resolve, reject) => {
                // 模拟网络请求
                setTimeout(() => {
                    resolve(url); // 实际应返回后端地址
                }, 1000);
            });
        },

        submit() {
            if (!this.content && this.fileList.length === 0) {
                uni.showToast({ title: '内容不能为空', icon: 'none' });
                return;
            }

            this.loading = true;

            // 构造提交数据
            const postData = {
                content: this.content,
                type: this.fileList.length === 0 ? 'text' : this.mediaType,
                files: this.fileList.map(f => f.url)
            };

            console.log('提交数据:', postData);

            setTimeout(() => {
                this.loading = false;
                uni.showToast({ title: '发布成功' });
                setTimeout(() => {
                    uni.navigateBack();
                }, 800);
            }, 1000);
        }
    }
};
</script>

<style lang="scss" scoped>
.publish-container {
    padding: 30rpx;
}

.content-body {
    padding: 20rpx;
}

.text-area {
    margin-bottom: 30rpx;
}

.media-area {
    margin-bottom: 20rpx;
}

.tips {
    font-size: 24rpx;
    color: #999;
}
</style>