<template>
    <view class="content">
        <view class="lists" v-if="surveyArr.length > 0">
            <view class="lists-item" v-for="(item, index) in surveyArr" :key="index">
                <view class="lists-top" v-if="item.user">
                    <image class="lists-head" :src="item.user.avatar" mode="aspectFill"></image>
                    <view class="lists-cont">
                        <view class="lists-name">
                            {{item.user.nickname}}
                        </view>
                        <image v-if="item.user.identity.order == '1'" class="lists-identity" src="@/static/icons/member_01.png" mode="widthFix"></image>
                        <image v-else-if="item.user.identity.order == '2'" class="lists-identity" src="@/static/icons/member_02.png" mode="widthFix"></image>
                        <image v-else-if="item.user.identity.order == '3'" class="lists-identity" src="@/static/icons/member_03.png" mode="widthFix"></image>
                        <image v-else-if="item.user.identity.order == '4'" class="lists-identity" src="@/static/icons/member_04.png" mode="widthFix"></image>
                        <image v-else-if="item.user.identity.order == '5'" class="lists-identity" src="@/static/icons/member_05.png" mode="widthFix"></image>
                        <image v-else src="@/static/icons/member_06.png" class="lists-identity" mode="widthFix"></image>
                    </view>
                </view>
                <view class="lists-text">
                    <text>{{item.content}}</text>
                </view>
                <view class="lists-img" v-if="item.pictures.length > 0">
                    <block v-if="item.pictures.length >= 3">
                        <view class="lists-label lists-three" v-for="(items, index) in item.pictures" :key="index">
                            <image :src="items" mode="aspectFill" @click="openImg(item.pictures, index)"></image>
                        </view>
                    </block>
                    <block v-else-if="item.pictures.length == 1">
                        <view class="lists-label lists-one" v-for="(items, index) in item.pictures" :key="index">
                            <image :src="items" mode="aspectFill" @click="openImg(item.pictures, index)"></image>
                        </view>
                    </block>
                    <block v-else>
                        <view class="lists-label lists-two" v-for="(items, index) in item.pictures" :key="index">
                            <image :src="items" mode="aspectFill" @click="openImg(item.pictures, index)"></image>
                        </view>
                    </block>
                </view>
            </view>
        </view>
        <view class="pack-center pages-hint" v-else>
            <image src="/static/imgs/coupon_null.png"></image>
            <view>暂无数据</view>
        </view>
        <view class="write" @click="$Router.push({name: 'IndexWrite'})">
            <image src="@/static/icons/white.png"></image>
        </view>
    </view>
</template>

<script>
    import { surveys } from '@/apis/interfaces/gout'
    export default {
    	data() {
    		return {
                userData    : '',     //用户信息
                surveyArr   : [],     //反馈列表
                page        : {},     //分页信息
                lodingStats : false,  //加载状态
    		}
    	},
        onShow() {
            // 获取反馈列表
            this.surveysInfo();
        },
    	methods: {
            // 反馈列表
            surveysInfo(page) {
            	surveys({
                    page : page || 1
                }).then(res => {
                    let listArr = this.surveyArr,
                        newData = []
                        if(page == 1 || page == undefined) listArr = []
                        newData = listArr.concat(res.data)
                    this.surveyArr   = newData
                    this.page        = res.page
                    this.lodingStats = false
                    uni.stopPullDownRefresh()
            	}).catch(err => {
            		uni.showToast({
            			title: err.message,
            			icon: "none"
            		})
            	})
            },
            
            // 图片预览
            openImg(pictures, index){
                uni.previewImage({
                    current: index,
                    urls: pictures
                });
            },
            
            // 页面相关事件处理函数--监听用户下拉动作
            onPullDownRefresh() {
                // 获取反馈列表
                this.surveysInfo()
            },
                    
            // 上拉加载
            onReachBottom(){
                this.lodingStats = true
                let pageNumber = this.page.current
                if(this.page.has_more){
                    pageNumber++
                    // 获取反馈列表
                    this.surveysInfo(pageNumber)
                }
            }
    	}
    }
</script>

<style lang="scss" scoped>
    .content{
    	overflow: hidden;
        background-color: #f5f5f5;
    }
    /* 列表 */
    .lists{
        padding: $padding;
        box-sizing: border-box;
    	.lists-item {
            padding: $padding $padding $padding - 10;
            box-sizing: border-box;
            margin-bottom: $margin;
            border-radius: $radius;
            background-color: #ffffff;
            box-shadow: 0 0 6rpx rgb(232, 232, 232);
            .lists-top {
                position: relative;
                .lists-head {
                    width: 120rpx;
                    height: 120rpx;
                    border-radius: 50%;
                }
                .lists-cont {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    box-sizing: border-box;
                    padding-left: 140rpx;
                    .lists-name {
                        font-weight: 600;
                        margin: 15rpx 0;
                    }
                    .lists-identity {
                        width: 130rpx;
                    }
                }
            }
            .lists-text {
                font-size: $title-size-m;
                padding: $padding - 10 0 10rpx;
                line-height: 42rpx;
                color: #383838;
                box-sizing: border-box;
            }
            .lists-img {
                margin: 0 -10rpx;
                .lists-label {
                    display: inline-block;
                    width: calc(100% - 20rpx);
                    margin: 10rpx;
                    padding-top: calc(100% - 20rpx);
                    position: relative;
                    border-radius: 4rpx;
                    overflow: hidden;
                    &.lists-two {
                        width: calc(50% - 20rpx);
                        padding-top: calc(50% - 20rpx);
                    }
                    &.lists-three {
                        width: calc(33.33% - 20rpx);
                        padding-top: calc(33.33% - 20rpx);
                    }
                    image {
                        position: absolute;
                        left: 0;
                        top: 0;
                        width: 100%;
                        height: 100%;
                    }
                }
            }
        }
    }
    .write {
        position: fixed;
        right: $margin;
        bottom: 100rpx;
        z-index: 1000;
        background-color: #ffffff;
        width: 90rpx;
        height: 90rpx;
        border-radius: 50%;
        box-shadow: 0 2rpx 10rpx rgba(98, 112, 255,.4);
        padding: 20rpx;
        box-sizing: border-box;
        image {
            width: 100%;
            height: 100%;
        }
    }
</style>
