<template>
	<view>
        <view class="helpCont">
            <view class="helpCont-list" :class="{active : item.spread}" v-for="(item, index) in helpList" :key="index" @click="showClick(item, index)">
                <view class="helpCont-name">
                    <view class="helpCont-tips">{{ index + 1 }}</view>
                    {{ item.title }}
                    <image class="helpCont-img" src="/static/user/user-more.png" :class="{active : item.spread}" mode="aspectFill"></image>
                </view>
                <view class="helpCont-text">
                    {{ item.description }}
                </view>
            </view>
        </view>
	</view>
</template>

<script>
    import { userHelp } from '@/apis/interfaces/user'
	export default {
		data() {
			return {
				helpList: [],   //帮助中心列表
                showList: false // 显示子内容
			};
		},
        onLoad() {
            // 获取帮助中心
            this.helpInfo()
        },
        methods: {
            // 帮助中心
            helpInfo(){
                userHelp().then(res => {
                    console.log(res)
                    res.forEach((value, index) => {
                        res[index].spread = false
                        res[0].spread = true
                    });
                    this.helpList = res
                }).catch(err => {
                    uni.showToast({
                        icon: 'none',
                        title: err.message
                    })
                })
            },
            
            // 展开帮助中心-内容
            showClick(item, index) {
                this.helpList.forEach(i => {
                    if (i.spread !== this.helpList[index].spread) {
                        i.spread = false;
                    }
                })
                item.spread = !item.spread
            }
        }
	}
</script>

<style lang="scss">
    .helpCont {
        margin: $margin;
        background-color: $uni-bg-color;
        padding: $padding + 10 $padding + 10 5rpx $padding + 10;
        box-sizing: border-box;
        border-radius: $radius;
        .helpCont-list {
            margin-bottom: $margin;
            border-bottom: 1rpx solid #f3f3f3;
            font-size: $uni-font-size-base;
            height: 60rpx;
            overflow: hidden;
            &.active {
                height: auto;
            }
            &:last-child {
                border-bottom: none;
                margin-bottom: 0;
            }
            .helpCont-name {
                font-weight: 700;
                display: flex;
                line-height: 40rpx;
                margin-bottom: $margin;
                position: relative;
                .helpCont-tips {
                    width: 40rpx;
                    height: 40rpx;
                    line-height: 40rpx;
                    margin-right: 10rpx;
                    text-align: center;
                    background-image: linear-gradient(to left, #7c52fc, #976dff);
                    color: $uni-text-color-inverse;
                    transform: scale(0.83);
                     border-radius: $uni-border-radius-base;
                }
                .helpCont-img {
                    position: absolute;
                    right: 0;
                    top: 8rpx;
                    width: 26rpx;
                    height: 26rpx;
                    &.active {
                        transform:rotate(90deg);
                    }
                }
            }
            .helpCont-text {
                font-size: $title-size-sm;
                line-height: 40rpx;
                color: $text-gray;
                padding-bottom: $padding;
            }
        }
    }
</style>