<template>
    <view class="content">
        <form @submit="writeform" class="site-form">
            <view class="issue-block">
                <view class="issue-textarea">
                    <textarea placeholder="请输入您要发布的内容~" name="content"></textarea>
                </view>
                <view class="album-list">
                    <view class="album-list-li" v-for="(item, index) in albumArr" :key="index">
                        <image class="album-list-img" :src="item.showpath" mode="aspectFill" @click="openImg(index)"></image>
                        <view class="album-remove" @click="removeImg(index)">删除</view>
                    </view>
                    <view class="album-list-li">
                        <view class="album-list-li-add" @click="addAlbum()">
                            <image class="album-list-add-icon" src="@/static/icons/circle_add.png"></image>
                            <view>添加</view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="site-btn">
        		<button form-type="submit" size="mini" :disabled="disabled">立即发布</button>
        	</view>
        </form>
        
        <!-- 提示弹出框 start -->
        <view class="publicBack" v-if="popStatus"></view>
        <view class="publicPop" v-if="popStatus">
            <view class="publicPop-cont">
                <image class="publicPop-img" src="@/static/imgs/Water_drop.png" mode="widthFix"></image>
                <view class="publicPop-text">
                    <view class="number">+{{score}}</view>
                    <text>水滴</text>
                </view>
                <image class="publicPop-left publicPop-right" src="@/static/imgs/Water_img.png" mode="widthFix"></image>
                <view class="publicPop-tips">
                    <image src="@/static/imgs/Water_icon.png" mode="widthFix"></image>水滴已发放!
                </view>
                <image class="publicPop-left" src="@/static/imgs/Water_img.png" mode="widthFix"></image>
            </view>
            <image src="@/static/icons/waterPop_close.png" mode="widthFix" class="publicPop-close" @click="knowClick"></image>
        </view>
    </view>
</template>

<script>
    import { surveysForm } from '@/apis/interfaces/gout'
    import { uploads } from '@/apis/interfaces/uploading'
    export default {
    	data() {
    		return {
                score    : '',   //水滴值
                albumArr : [],    //图片
                disabled : false, //按钮状态
                popStatus: false, //获得水滴弹出层状态
            }    
    	},
        methods:{
            // 上传商品封面图片
            addAlbum(key){
                let count = 9 - this.albumArr.length
                uni.chooseImage({
                	success	: res => {
                		let path = res.tempFiles.map((val, index) => {
                			return {
                				name: 'uploads' + index,
                				uri : val.path
                			}
                		})
                		uploads(path).then(updRes => {
                			for(let i in updRes.path){
                				this.albumArr.push({
                					path	: updRes.path[i],
                					showpath: updRes.url[i]
                				})
                			}
                		}).catch(err => {
                			uni.showToast({
                				title: err.message,
                				icon : 'none'
                			})
                		})
                	}
                })
            },
            
            // 图片预览
            openImg(index){
            	let paths = this.albumArr.map(val => {
            		return val.showpath
            	})
            	uni.previewImage({
            		urls	 : paths,
            		current	 : index,
            		indicator: 'number'
            	})
            },
            // 删除图片
            removeImg(index){
            	this.albumArr.splice(index, 1)
            },
            
            // 发布反馈
            writeform(e) {
                let newPictures = this.albumArr.map(val => {
                    return val.path
                })
                if(this.albumArr.length <= 0) {
                	uni.showToast({
                		title: '缺少反馈图片',
                		icon : 'none'
                	})
                	return
                }
                let data = {
                    content   : e.detail.value.content,
                    pictures  : newPictures
                }
                surveysForm(data).then(res => {
                    this.disabled = true
                    if(res.score > 0) {
                        this.score     = res
                        this.popStatus = true
                        return
                    }
                    this.$Router.replaceAll({ name: 'IndexFeeling'})
                }).catch(err => {
                	uni.showToast({
                		title: err.message,
                		icon : 'none'
                	})
                })
            },
            
            // 我知道了
            knowClick() {
                this.popStatus = false
                this.$Router.replaceAll({ name: 'IndexFeeling'})
            }
        }
        
    }
</script>

<style lang="scss" scoped>
    .content{
        height: 100vh;
    	overflow: hidden;
        background-color: #f5f5f5;
        padding: $padding;
        box-sizing: border-box;
    }
    
    .issue-block {
        background: white;
        padding: $padding;
        box-sizing: border-box;
        border-radius: $radius-m;
    }
    
    .issue-textarea {
        textarea {
            width: 100%;
            height: 200rpx;
        }
    }
    .album-list{
        display: flex;
        flex-wrap:wrap;
        .album-list-li {
            margin-right: 10rpx;
            position: relative;
            width: calc(25% - 10rpx);
            padding-top: calc(25% - 10rpx);
            box-sizing: border-box;
            .album-list-img,
            .album-list-li-add{
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: #f5f5f5;
                border-radius: 6rpx;
            }
            .album-list-li-add {
                text-align: center;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-box-pack: center;
                color: #666;
                font-size: 26rpx;
                .album-list-add-icon{
                    width: 34rpx;
                    height: 34rpx;
                }
            }
            .album-remove{
                position: absolute;
                right: 0;
                bottom: 0;
                background: rgba(0, 0, 0, .5);
                color: white;
                font-size: 28rpx;
                text-align: center;
                line-height: 50rpx;
                width: 100%;
                z-index: 9;
            }
            &:last-child {
                margin: 0;
            }
        }
    }
    
    .site-btn {
        margin-top: 120rpx;
        button[size="mini"] {
            width: 100%;
            background: #1d37e2;
            height: 88rpx;
            line-height: 88rpx;
            font-size: $title-size-lg;
            color: white;
            padding: 0;
            &[disabled] {
                background: #7789ff !important;
                color: #fff !important;
            }
        }
    }
    
    // 获得水滴弹出层提示
    .publicBack {
        position: fixed;
        width: 100vw;
        height: 100vh;
        left: 0;
        top: 0;
        background-color: rgba(0,0,0,.5);
        z-index: 99;
    }
    .publicPop {
        left: 50%;
        top: 50%;
        width: 440rpx;
        height: 300rpx;
        margin-left: -220rpx;
        margin-top: -200rpx;
        position: fixed;
        z-index: 100;
        background-color: #ffffff;
        border-radius: $radius;
        text-align: center;
        .publicPop-close {
            position: absolute;
            top: -20rpx;
            right: -20rpx;
            z-index: 102;
            width: 54rpx;
            height: 54rpx;
        }
        .publicPop-img {
            width: 70%;
            margin: -30rpx auto 0;
        }
        .publicPop-text {
            padding-bottom: 20rpx;
            box-sizing: border-box;
            font-weight: 600;
            color: #e56653;
            padding-top: 40rpx;
            .number {
                font-size: $title-size + 40;
                display: inline-block;
                padding-right: 10rpx;
            }
            text {
                font-size: $title-size + 4;
                display: inline-block;
                line-height: 86rpx;
                vertical-align: bottom;
            }
        }
        .publicPop-tips {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            background-color: #fdfae7;
            color: #e6a950;
            line-height: 80rpx;
            font-weight: 600;
            border-top: 2rpx solid #f6ede6;
            border-radius: 0 0 $radius $radius;
            image {
                width: 54rpx;
                height: 54rpx;
                vertical-align: -14rpx;
            }
        }
        .publicPop-left {
            width: 90rpx;
            position: absolute;
            top: 46%;
            right: 2rpx;
        }
        .publicPop-right {
            transform:rotate(180deg);
            left: 2rpx;
        }
    }
</style>
