<template>
    <u-navbar :title="'互动专区'" placeholder="true" bg-color="#F1F3F9" :auto-back="true" />
    <view class="container">
        <u-tabs :list="list1" @click="click" :current="current"></u-tabs>
        <scroll-view class="cardbox" scroll-y="true" @scrolltolower="scrolltolower">
            <view class="dhone" v-for="(item, index) in datalist" :key="index">
                <view class="head">
                    <image style="height: 96rpx; width: 96rpx; border-radius: 50%" :src="url + '/' + item.member_head_pic" mode=""></image>
                    <view class="namepart">
                        <text class="name">{{ item.member_nickname }}</text>
                        <text class="date">{{ item.create_time }}</text>
                    </view>
                </view>
                <text class="pl">{{ item.content }}</text>
                <view class="ypl" v-if="item.comments">
                    <view class="head">
                        <view class="left">
                            <image
                                style="height: 40rpx; width: 40rpx; border-radius: 50%"
                                :src="url + '/' + item.comments?.member_head_pic"
                                mode=""
                            ></image>
                            <text class="name">{{ item.comments?.member_nickname }}</text>
                        </view>
                        <view class="right">
                            <text class="value">{{ item.comments?.like_count }}</text>
                            <image
                                style="width: 24rpx; height: 24rpx; margin-left: 8rpx"
                                :src="item.comments.is_like ? '/static/img/ydz.png' : '/static/img/dz.png'"
                                mode=""
                                @click="pldzClick(item.posts_id, item.comments.is_like, item.comments.comments_id)"
                            ></image>
                        </view>
                    </view>
                    <text class="pl">{{ item.comments?.content }}</text>
                </view>
                <view class="bottom">
                    <view class="left">
                        <image
                            style="width: 36rpx; height: 34rpx"
                            :src="item.is_like ? '/static/img/ydz.png' : '/static/img/dz.png'"
                            @click="dzClick(item.is_like, item.posts_id)"
                            mode=""
                        ></image>
                        <text class="value">{{ item.like_count }}</text>
                    </view>
                    <view class="right">
                        <image style="width: 36rpx; height: 36rpx" src="@/static/img/pl.png" mode="" @click="godetail(item.posts_id)"></image>
                        <text class="value">{{ item.comment_count }}</text>
                    </view>
                </view>
            </view>
        </scroll-view>
    </view>
    <liuDragButton :width-px="'145rpx'">
        <image class="hdzq" src="@/static/img/fbhd.png" mode="" @click="goxzhdzq"></image>
    </liuDragButton>
</template>

<script setup>
import { postsList, likesPosts } from '@/api/shop'
import liuDragButton from '@/uni_modules/liu-drag-button/components/liu-drag-button/liu-drag-button.vue'
import useUserStore from '@/store/user'
const userStore = useUserStore()

const url = ref(import.meta.env.VITE_APP_BASE_URL)


const current = ref(0)
// 创建响应式数据
const list1 = reactive([
    {
        name: '查政策',
        id: 1
    },
    {
        name: '金融帮',
        id: 2
    },
    {
        name: '媒体帮',
        id: 3
    },
    {
        name: '提诉求',
        id: 4
    },
    {
        name: '法律帮',
        id: 5
    }
])

const typeid = ref(0)
const typename = ref('')
// 定义方法
const click = async (item) => {
    page.value = 1
    typeid.value = item.id
    typename.value = item.name
    datalist.value = []
    await getpostsList()
}

const dzClick = (like, id) => {
    if (userStore.userInfo.moblie === undefined) {
        uni.showToast({
            title: '请登录后操作！',
            icon: 'none'
        })
    } else {
        datalist.value.forEach((ele) => {
            if (ele.posts_id === id) {
                ele.is_like = !ele.is_like
                if (ele.is_like) {
                    ele.like_count++
                } else {
                    ele.like_count--
                }
                likesPosts({ target_id: id, type: 'posts' })
            }
        })
    }
}

const scrolltolower = async () => {
    page.value++
    await getpostsList()
}

const goxzhdzq = () => {
    uni.navigateTo({
        url: '/pages/index/shoppage/makeAssistance?id='+typeid.value+'&name='+typename.value
    })
}

const godetail = (id) => {
    uni.navigateTo({
        url: '/pages/index/shoppage/interactiveDetail?id=' + id
    })
}

const page = ref(1)
const limit = ref(4)
const datalist = ref([])
const getpostsList = async () => {
    await postsList({ page: page.value, limit: limit.value, type_id: typeid.value }).then((res) => {
        if (res.code === 1) {
            datalist.value = [...datalist.value, ...res.data.data]
        }
    })
}

const pldzClick = (postid, like, id) => {
    if (userStore.userInfo.moblie === undefined) {
        uni.showToast({
            title: '请登录后操作！',
            icon: 'none'
        })
    } else {
        datalist.value.forEach((ele) => {
            if (ele.posts_id === postid) {
                ele.comments.is_like = !like
                if (ele.comments.is_like) {
                    ele.comments.like_count++
                } else {
                    ele.comments.like_count--
                }
                likesPosts({
                    target_id: id,
                    type: 'comments'
                })
            }
        })
    }
}

onLoad(async (e) => {
	typeid.value = list1[e.tabid].id
	typename.value = list1[e.tabid].name
	current.value = e.tabid
    page.value = 1
    datalist.value = []
    await getpostsList()
})
onShow(async()=> {
	if(datalist.value.length !== 0) {
		page.value = 1
		datalist.value = []
		await postsList({ page: page.value, limit: limit.value, type_id: typeid.value }).then((res) => {
		    if (res.code === 1) {
		        datalist.value = [...datalist.value, ...res.data.data]
		    }
		})
	}
   
})
</script>

<style scoped lang="scss">
.container {
    background-color: #f1f3f9;
    height: calc(100vh - 192rpx);
    overflow: hidden;
    width: 100%;

    .cardbox {
        max-height: calc(100vh - 300rpx);

        .dhone {
            margin-top: 30rpx;
            width: 100%;
            padding: 40rpx;
            display: grid;
            align-items: center;
            box-sizing: border-box;
            background: #ffffff;

            .head {
                display: flex;
                align-items: center;

                .namepart {
                    margin-left: 20rpx;
                    display: grid;

                    .name {
                        font-family: Source Han Sans;
                        font-size: 28rpx;
                        font-weight: 350;
                        line-height: 26rpx;
                        letter-spacing: normal;
                        color: #0c092a;
                    }

                    .date {
                        margin-top: 18rpx;
                        font-family: Source Han Sans;
                        font-size: 28rpx;
                        font-weight: 350;
                        line-height: 30rpx;
                        letter-spacing: normal;
                        color: #858494;
                    }
                }
            }

            .pl {
                margin-top: 24rpx;
                font-family: Source Han Sans;
                font-size: 28rpx;
                font-weight: 350;
                text-align: justify;
                /* 浏览器可能不支持 */
                letter-spacing: normal;
                color: #0c092a;
            }

            .bottom {
                margin-top: 20rpx;
                display: flex;
                align-items: center;
                justify-content: space-between;

                .left {
                    display: flex;
                    align-items: center;

                    .value {
                        margin-left: 8rpx;
                        font-family: Source Han Sans;
                        font-size: 36rpx;
                        font-weight: 350;
                        line-height: 72rpx;
                        display: flex;
                        align-items: center;
                        letter-spacing: normal;
                        color: #858494;
                    }
                }

                .right {
                    display: flex;
                    align-items: center;

                    .value {
                        margin-left: 8rpx;
                        font-family: Source Han Sans;
                        font-size: 36rpx;
                        font-weight: 350;
                        line-height: 72rpx;
                        display: flex;
                        align-items: center;
                        letter-spacing: normal;
                        color: #858494;
                    }
                }
            }
        }
    }

    .ypl {
        width: 100%;
        border-radius: 8rpx;
        background: #f8f9fa;
        padding: 24rpx;
        margin-top: 22rpx;

        .head {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .left {
                display: flex;
                align-items: center;

                .name {
                    margin-left: 8rpx;
                    font-family: Source Han Sans;
                    font-size: 28rpx;
                    font-weight: 350;
                    line-height: 26rpx;
                    letter-spacing: normal;
                    color: #333333;
                }
            }

            .right {
                display: flex;
                align-items: center;

                .value {
                    font-family: Source Han Sans;
                    font-size: 24rpx;
                    font-weight: 350;
                    line-height: 20rpx;
                    letter-spacing: normal;
                    color: #858494;
                }
            }
        }

        .pl {
            font-family: Source Han Sans;
            font-size: 24rpx;
            font-weight: 350;
            line-height: normal;
            text-align: justify;
            /* 浏览器可能不支持 */
            display: flex;
            align-items: center;
            letter-spacing: normal;
            color: #0c092a;
        }
    }
}

.hdzq {
    width: 108rpx;
    height: 108rpx;
    position: fixed;
    right: 0;
    top: 75%;
}
</style>
