<template>
    <view class="comment">
        <view class="top">
            <image class="touxiang" :src="tx"></image>
            <view class="pingfen">
                <image v-for="(i,j) in 5" :key="j" :src="j<fen?'../../static/img/xingz.png':'../../static/img/xingw.png'" @click="pingfen(j)"></image>
                <!-- <image></image>
                <image></image>
                <image></image>
                <image></image> -->
            </view>
        </view>
        <view class="cent">
            <textarea v-model="pingjia" class="text " name="" id="" maxlength="-1" placeholder="快来分享你的使用体验吧..."></textarea>
            <view class="photo" style="margin-top:10upx">
                <view class="img" v-for="(i,j) in img" :key="j">
                    <image class="updateimg" :src="host + i">

                    </image>
                    <image class="x" src="../../static/img/delimg.png" @click="del(j)"></image>
                </view>
                <view class="update" @click="update" v-if="img.length<4">
                    <image src="../../static/img/uphoto.png"></image>
                    <view>{{img.length}}/4</view>
                </view>
            </view>
        </view>
        <view class="button" @click="fabu">
            发           布
        </view>
    </view>
</template>
<style lang="scss" scoped>
.comment{
    .top{
        display: flex;
        align-items: center;
        margin-left: 30upx;
        margin-top: 30upx;
 .touxiang{
        width: 100upx;
        height: 100upx;
        // background-color: #000;
    }
    .pingfen{
        >image{
            width: 31upx;
            height: 31upx;
            margin-left: 20upx;
        }
        height: 31upx;
        display: flex;
    }
    }
    .cent{
        margin-top: 28upx;
        width: 100%;
        border: 1upx solid #E6E6E6;
        font-size: 24upx;
        padding-top: 30upx;
        padding-bottom: 20upx;

        .text{
            width: 690upx;
            margin-left: 30upx;
            height: 90upx;
        }
        .photo{
            display: flex;
            .update{
                width: 150upx;
                height: 150upx;
                border: 1upx dashed #CCCCCC;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                color: #CCCCCC;
                font-size: 20upx;
                margin-left: 30upx;
                >image{
                    width: 48upx;
                    height: 40upx;
                    margin-bottom: 20upx;
                    
                }
            }
            .img{
               width: 150upx;
                margin-left: 30upx;
                height: 150upx;
                position: relative;
                .updateimg{
                    width: 100%;
                    height: 100%;
                }
                .x{
                    width: 28upx;
                    height: 28upx;
                    position: absolute;
                    left: 129upx;
                    top:-9upx;
                    // content: url('../../static/img/delimg.png')
                }
                // :before{
                //     width: 28upx;
                //     height: 28upx;
                //     position: absolute;
                //     left: 129upx;
                //     top:9upx;
                //     content: url('../../static/img/delimg.png')
                // }
            }
        }
    }
    .button{
        width: 550upx;
        height: 72upx;
        border-radius: 36upx;
        background: #DF3347;
        color: #fff;
        font-size: 36upx;
        line-height: 72upx;
        text-align: center;
        margin: 145upx auto 0 auto;
    }
   
}
</style>
<script>
import {requestP} from "../../static/js/request"
export default {
    data(){
        return {
            fen:1,
            img:[],
            host:"",
            pingjian:"",
            tx:"",
            orderid:""
        }
    },
    onLoad(e){
            wx.getUserInfo({
          success: res => {
            console.log(res);
            this.tx = res.userInfo.avatarUrl;
            this.username = res.userInfo.nickName;
            this.iflogin = true;
          }
        });
        this.orderid=e.orderid

    },
    methods:{
        update(){
            var t =  this
            var num = this.img.length
            uni.chooseImage({
                count: 4 - num, //默认9
                // sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
                // sourceType: ['album'], //从相册选择
                success: function (res) {
                    console.log(res.tempFilePaths);
                    for(let i in res.tempFilePaths){
                        uni.uploadFile({
                            url: 'https://car.zgwl66.com/index.php/Api/goods/upimgdo', //仅为示例，非真实的接口地址
                            filePath: res.tempFilePaths[i],
                            name: 'image',
                            formData: {
                                'openid':  uni.getStorageSync("openid")
                            },
                            success: (uploadFileRes) => {
                                // console.log(JSON.parse(uploadFileRes.data));
                                var a = JSON.parse(uploadFileRes.data)
                                t.img.push(a.path)
                                t.host = a.host
                            }
                        }); 
                    }
                }
            });
        },
        del(i){
            console.log(i)
            var a = this.img
            a.splice(i,1)
        },
        pingfen(a){
            this.fen = a + 1
           
        },
        fabu(){
             requestP({
                url:"order/pingjia",
                method:"post",
                data:{
                    order_id:this.orderid,
                    xing:this.fen,
                    comment:this.pingjia,
                    imgs:this.img
                }
            }).then((res)=>{
                 uni.showToast({
              title: "发布成功",
              icon: "success",
              duration: 2000
            });
            uni.navigateTo({
                url:"/pages/orderlist/orderlist"
            })
            })
        }
    }
}
</script>