<template>
    <view class="complaints">

        <view class="complaints-content">

            <view class="complaints-content-unit" v-for="(unit, i) in complaintsRecord" :key="i"
                @click="goDetail(unit)">

                <view class="cp-u-left">

                    <text class="cp-u-type">
                        <text>{{ unit.date }}</text>
                        <text class="colorOr">{{ unit.SUGGESTION_STATE }}</text>
                    </text>
                    <text class="cp-u-title">{{ unit.SUGGESTION_REASON }} </text>
                    <view class="cp-u-type">
                        <text class="fwq">{{ unit.SERVERPART_NAME }}</text>
                    </view>
                    <view class="cp-u-type">
                        <view style="display:flex;align-items:center;justify-content:flex-end;">
                            <text class="ry">{{ unit.SUGGESTION_NAME }}</text>
                            <text class="dh">{{ unit.PHONE_NUMBER }}</text>
                        </view>
                    </view>
                </view>
                <view class='cp-u-right'>
                    <image mode="aspectFill" v-if="unit.IMAGELIST && unit.IMAGELIST.length > 0"
                        :src="unit.IMAGELIST[0].IMAGE_URL"></image>
                    <image mode="aspectFill" v-else src='https://eshangtech.com/ShopICO/no-picture.png'></image>
                </view>
            </view>
            <view class="loading-text" v-if="complaintsRecord.length > 0">{{ pageMsg.isLoadMore ? '正在加载数据...' : `———
                我是有底线的 ———`}}</view>
        </view>
        <view v-if="loadingType == 0 && complaintsRecord.length === 0" class="empty-state">
            <view class="empty-icon">📋</view>
            <view class="empty-title">暂无投诉建议</view>
            <view class="empty-desc">您还没有提交过任何投诉建议</view>
        </view>
        <view class="rate-box" @click="goNew">
            <text class="yj-ico">💬</text>
            <view class="rate-ico">投诉建议</view>
        </view>
    </view>
</template>

<script>
import noData from '@/components/noData.vue'
import { mapGetters } from 'vuex'
export default {
    data() {
        return {
            loadingType: 1,
            complaintsRecord: [],

            pageMsg: {
                pageSize: 10,
                pageIndex: 1,
                isLoadMore: true,
                isScreen: false
            }
        }
    },
    components: {
        noData
    },
    computed: {
        ...mapGetters(['user', 'serverPart'])
    },
    methods: {

        getConsuptionRecord() {
            let _this = this

            _this.$api.getCoop({
                action_type: 'GetSuggestionList',
                wechatOpenid: _this.user.WECHATAPP_OPENID,
                provinceCode: _this.user.PROVINCE_CODE,
                suggestionType: '2000,1000,4000',
                pageSize: _this.pageMsg.pageSize,
                pageIndex: _this.pageMsg.pageIndex,
                publicParticipation: true

            }).then(function (res) {
                // 安全检查：确保返回数据结构正确
                if (res && res.Data && Array.isArray(res.Data.List)) {
                    if (_this.pageMsg.pageIndex === 1) {
                        _this.complaintsRecord = res.Data.List
                    } else {
                        _this.complaintsRecord = _this.complaintsRecord.concat(res.Data.List)
                    }

                    // 检查是否还有更多数据
                    if (res.Data.TotalCount && res.Data.TotalCount > _this.complaintsRecord.length) {
                        _this.pageMsg.isLoadMore = true
                    } else {
                        _this.pageMsg.isLoadMore = false
                    }

                    // 处理状态和日期
                    res.Data.List.forEach(v => {
                        if (v.SUGGESTION_STATE === 1000) {
                            v.SUGGESTION_STATE = '待处理'
                        } else if (v.SUGGESTION_STATE === 2000) {
                            v.SUGGESTION_STATE = '待反馈'
                        } else if (v.SUGGESTION_STATE === 3000) {
                            v.SUGGESTION_STATE = '已处理'
                        }

                        // 安全处理日期
                        if (v.SUGGESTION_CREATEDATE) {
                            v.date = _this.$utils.cutDate(new Date(v.SUGGESTION_CREATEDATE), 'YYYY-MM-DD hh:mm:ss')
                        } else {
                            v.date = '--'
                        }

                        // 确保图片列表存在
                        if (!v.IMAGELIST || !Array.isArray(v.IMAGELIST)) {
                            v.IMAGELIST = []
                        }
                    })
                } else {
                    // 如果返回数据格式不正确，初始化为空数组
                    console.warn('API返回数据格式异常:', res)
                    if (_this.pageMsg.pageIndex === 1) {
                        _this.complaintsRecord = []
                    }
                    _this.pageMsg.isLoadMore = false
                }

                _this.loadingType = 0
            }).catch(function (error) {
                console.error('获取投诉建议列表失败:', error)
                if (_this.pageMsg.pageIndex === 1) {
                    _this.complaintsRecord = []
                }
                _this.pageMsg.isLoadMore = false
                _this.loadingType = 0

                // 显示错误提示
                uni.showToast({
                    title: '加载失败，请稍后重试',
                    icon: 'none'
                })
            })
        },
        goDetail(item) {
            console.log('itemitemitemitem', item);

            uni.navigateTo({ url: `/pages/complaints/addComplaints?SUGGESTIONID=${item.SUGGESTION_ID}` })
        },
        goNew() {
            uni.navigateTo({ url: '/pages/complaints/addComplaints' })
        }
    },
    onPullDownRefresh() {
        let _this = this
        // _this.complaintsRecord = []
        _this.pageMsg.isLoadMore = true
        _this.pageMsg.pageIndex = 1
        _this.getConsuptionRecord()

        setTimeout(function () {
            uni.stopPullDownRefresh()
        }, 1000)
    },
    onReachBottom() {
        if (this.pageMsg.isLoadMore) {
            this.pageMsg.pageIndex += 1
            this.getConsuptionRecord()
        }
    },
    onShow() {
        this.pageMsg.pageIndex = 1
        this.pageMsg.isLoadMore = true
        this.getConsuptionRecord()
    }
}
</script>

<style lang="less" scoped>
.complaints {
    background: linear-gradient(135deg, #E8F5E8 0%, #F8F9FA 50%, #FFFFFF 100%);
    min-height: 100vh;
    padding-bottom: 120rpx;
    box-sizing: border-box;
}

.complaints-content {
    padding: 24rpx 32rpx;
}

.complaints-content-unit {
    display: flex;
    align-items: stretch;
    background: #ffffff;
    border-radius: 24rpx;
    margin-bottom: 32rpx;
    padding: 32rpx;
    box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
    border: 1rpx solid #f5f7fa;
    transition: all 0.3s ease;

    &:active {
        transform: translateY(2rpx);
        box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
    }
}

.cp-u-left {
    flex: 1;
}

.cp-u-right {
    margin-left: 24rpx;

    image {
        height: 160rpx;
        width: 160rpx;
        border-radius: 16rpx;
        background: linear-gradient(135deg, #f5f7fa, #ecf0f1);
        object-fit: cover;
        box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
    }
}

.cp-u-type {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 24rpx;
    color: #5d6d7e;
    margin-bottom: 16rpx;

    &:last-child {
        margin-bottom: 0;
        margin-top: 20rpx;
    }
}

.cp-u-title {
    font-size: 28rpx;
    color: #2c3e50;
    font-weight: 600;
    line-height: 1.4;
    width: 100%;
    max-width: 420rpx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 12rpx 0 16rpx 0;
}

.fwq {
    font-size: 22rpx;
    border-radius: 16rpx;
    height: 40rpx;
    line-height: 40rpx;
    padding: 0 16rpx;
    border: 2rpx solid #f8f9fa;
    color: #34495e;
    background: #fafbfc;
    font-weight: 500;
}

.ry,
.dh {
    display: flex;
    align-items: center;
    font-size: 24rpx;
    color: #34495e;
    font-weight: 500;
}

.dh {
    margin-left: 20rpx;
}

.ry:before {
    content: '';
    background: url("https://eshangtech.com/ShopICO/icos/tsjy_ry.png") no-repeat center;
    background-size: contain;
    height: 28rpx;
    width: 28rpx;
    margin-right: 8rpx;
    opacity: 0.7;
}

.dh:before {
    content: '';
    background: url("https://eshangtech.com/ShopICO/icos/tsjy_sjh.png") no-repeat center;
    background-size: contain;
    height: 28rpx;
    width: 28rpx;
    margin-right: 8rpx;
    opacity: 0.7;
}

.colorOr {
    color: #e67e22;
    background: rgba(230, 126, 34, 0.1);
    padding: 8rpx 16rpx;
    border-radius: 16rpx;
    font-size: 22rpx;
    font-weight: 600;
    border: 2rpx solid rgba(230, 126, 34, 0.2);
    margin-left: 16rpx;
}

.colorGr {
    color: #52C88A;
    background: rgba(82, 200, 138, 0.1);
    padding: 8rpx 16rpx;
    border-radius: 16rpx;
    font-size: 22rpx;
    font-weight: 600;
    border: 2rpx solid rgba(82, 200, 138, 0.2);
}

/* 空状态样式 */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 200rpx 40rpx 160rpx;
    text-align: center;
}

.empty-icon {
    font-size: 160rpx;
    margin-bottom: 40rpx;
    opacity: 0.3;
    filter: grayscale(1);
}

.empty-title {
    font-size: 36rpx;
    color: #2c3e50;
    font-weight: 600;
    margin-bottom: 16rpx;
}

.empty-desc {
    font-size: 28rpx;
    color: #5d6d7e;
    line-height: 1.6;
    margin-bottom: 60rpx;
}

.empty-action {
    background: linear-gradient(135deg, #52C88A, #3B9F6B);
    color: #ffffff;
    padding: 24rpx 48rpx;
    border-radius: 40rpx;
    font-size: 28rpx;
    font-weight: 600;
    box-shadow: 0 8rpx 24rpx rgba(82, 200, 138, 0.4);
    transition: all 0.3s ease;

    &:active {
        transform: translateY(2rpx);
        box-shadow: 0 4rpx 16rpx rgba(82, 200, 138, 0.4);
    }
}

.rate-box {
    position: fixed;
    bottom: 160rpx;
    right: 30rpx;
    width: 200rpx;
    height: 88rpx;
    background: linear-gradient(135deg, #52C88A, #3B9F6B);
    border-radius: 44rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 32rpx;
    box-shadow: 0 8rpx 24rpx rgba(82, 200, 138, 0.4);
    z-index: 1000;
    transition: all 0.3s ease;

    &:active {
        transform: scale(0.95);
        box-shadow: 0 4rpx 16rpx rgba(82, 200, 138, 0.5);
    }

    .rate-ico {
        font-size: 26rpx;
        color: #ffffff;
        font-weight: 600;
        letter-spacing: 1rpx;
    }

    .yj-ico {
        font-size: 32rpx;
        margin-right: 12rpx;
        display: flex;
        align-items: center;
    }
}

.loading-text {
    text-align: center;
    font-size: 26rpx;
    color: #5d6d7e;
    line-height: 80rpx;
    margin: 40rpx 0;
    font-weight: 500;
}

// 响应式适配
@media (max-width: 750rpx) {
    .complaints-content {
        padding: 20rpx 24rpx;
    }

    .complaints-content-unit {
        padding: 24rpx;
        margin-bottom: 24rpx;
        border-radius: 20rpx;
    }

    .cp-u-title {
        font-size: 26rpx;
        max-width: 280rpx;
    }

    .cp-u-right image {
        height: 140rpx;
        width: 140rpx;
        border-radius: 12rpx;
    }

    .empty-state {
        padding: 160rpx 32rpx 120rpx;
    }

    .empty-icon {
        font-size: 120rpx;
        margin-bottom: 32rpx;
    }

    .empty-title {
        font-size: 32rpx;
    }

    .empty-desc {
        font-size: 26rpx;
        margin-bottom: 48rpx;
    }
}
</style>
