<template>
    <view class="notification">
        <view class="notification-block">
            <view class="notification-title">
                <view class="" style="display: flex;flex-direction: row;">
                    <image class="answer-img" src="/static/news/news.png" mode="widthFix" />官方客服回复
                </view>
                <view class="date" v-if="notificationInfo.detail"> {{notificationInfo.detail.created_at}}</view>
            </view>
            <view class="notification-radiobox">
                <view class="answer show"> A : {{notificationInfo.content}}</view>
            </view>
        </view>
        <view class="notification-block">
            <view class="notification-title">
                我的意见与建议 
                <view class="date"> {{notificationInfo.created_at}}</view>
            </view>
            <view class="notification-radiobox">
                <view class="notification-radiobox-item" :class="{'show': radioValue === '页面闪退'}">页面闪退</view>
                <view class="notification-radiobox-item" :class="{'show': radioValue === '操作体验'}">操作体验</view>
                <view class="notification-radiobox-item" :class="{'show': radioValue === '账号问题'}">账号问题</view>
                <view class="notification-radiobox-item" :class="{'show': radioValue === '功能异常'}">功能异常</view>
                <view class="notification-radiobox-item" :class="{'show': radioValue === '产品建议'}">产品建议</view>
                <view class="notification-radiobox-item" :class="{'show': radioValue === '其他问题'}">其他问题</view>
            </view>
        </view>
        <view class="notification-block" v-if="notificationImg.length>0">
            <view class="notification-title">上传应用截图({{notificationImg.length}}/8)</view>
            <view class="notification-sbutitle">上传出现问题的应用图片；</view>
            <view class="notification-imgs">
                <view class="notification-imgs-item" v-for="(item, index) in notificationImg" :key="index">
                    <image :src="item" mode="aspectFill" @click="prieve(index)"></image>
                </view>
            </view>
        </view>

        <view class="notification-block" v-if="description.length>0">
            <view class="notification-title"> 问题说明</view>
            <view class="notification-sbutitle">请对您所遇到的问题进行尽可能详细的描述</view>
            <view class="notification-textarea">
                <textarea maxlength="200" v-model="description" :disabled="true" />
                <view class="notification-textarea-size">{{description.length}}/200</view>
            </view>
        </view>
        <view class="notification-block" v-if="mobile.length>0">
            <view class="notification-title">联系方式</view>
            <input class="notification-input" type="number" :disabled="true" v-model="mobile" maxlength="11"
                placeholder="输入手机号码" />
        </view>
        <!-- 微信客服 -->
        <u-modal :show="wechatCode" title="微信客服" confirmColor="#34CE98" :showCancelButton="true" cancelText="关闭"
            confirmText="保存二维码" @cancel="wechatCode = false" @confirm="dowQrCode">
            <slot>
                <view class="wechat-content">
                    <image class="wechat-qrcode" :src="require('@/static/user/qrCode.png')" mode="widthFix"></image>
                    <view class="wechat-text">扫描企业微信二维码，添加微信客服</view>
                </view>
            </slot>
        </u-modal>
    </view>
</template>

<script>
    import {
        notifications
    } from '@/apis/interfaces/versions'
    import {
        detail
    } from '@/apis/interfaces/news'
    export default {
        data() {
            return {
                radioValue: "页面闪退",
                description: "",
                mobile: "",
                systemInfo: {},
                notificationImg: [],
                wechatCode: false,
                notificationInfo: {}
            }
        },
        onLoad() {
            uni.getSystemInfo({
                success: systemRes => {
                    this.systemInfo = {
                        brand: systemRes.brand,
                        models: systemRes.model,
                        pixel: systemRes.pixelRatio,
                        width: systemRes.windowWidth,
                        height: systemRes.windowHeight,
                        version: systemRes.system,
                        platform: systemRes.platform,
                        font_size: systemRes.fontSizeSetting,
                        client_id: systemRes.deviceId,
                    }
                }
            })
            detail(this.$Route.query.id).then(res => {
                this.notificationInfo = res;
                this.radioValue = res.detail.type || ''
                this.notificationImg = res.detail.pictures || []
                this.description = res.detail.description || ''
                this.mobile = res.detail.mobile || ''

            }).catch(err => {
                uni.showToast({
                    title: err.message,
                    icon: 'none',
                    mask: true,
                })
            })
        },
        onNavigationBarButtonTap() {
            this.wechatCode = true
        },
        methods: {
            dowQrCode() {
                uni.saveImageToPhotosAlbum({
                    filePath: require('@/static/user/qrCode.png'),
                    success(res) {
                        uni.showToast({
                            title: '二维码已保存到系统相册',
                            icon: 'none'
                        })
                    },
                    fail(err) {
                        uni.showToast({
                            title: err.message,
                            icon: 'none'
                        })
                    }
                })
            },
            prieve(index) {
                uni.previewImage({
                    urls: this.notificationImg,
                    current:index
                });
            }
        }
    }
</script>

<style scoped lang="scss">
    .notification-block {
        padding: 30rpx;
        border-top: solid 20rpx #F8F8F8;
    }

    .notification-title {
        font-size: 34rpx;
        font-weight: bold;
        line-height: 40rpx;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        .date{
            color: grey;
            font-size: 26rpx;
            font-weight: normal;
        }
    }

    .notification-title text {
        color: #e6576b;
        padding-left: 5rpx;
    }

    .notification-radiobox {
        display: flex;
        flex-wrap: wrap;
        margin: 20rpx -10rpx 0;
    }

    .notification-radiobox-item {
        position: relative;
        width: calc(33.33% - 20rpx);
        display: inline-block;
        margin: 10rpx;
        background: #F8F8F8;
        text-align: center;
        line-height: 70rpx;
        border-radius: 30rpx;
        font-size: 30rpx;
    }

    .answer {
        position: relative;
        width: calc(100% - 20rpx);
        display: inline-block;
        margin: 10rpx;
        background: rgba($color: #34ce98, $alpha: 0.1);
        text-align: center;
        line-height: 70rpx;
        border-radius: 10rpx;
        font-size: 30rpx;
        text-align: left;
        padding: 10rpx 20rpx;
    }

    .notification-radiobox-item.show {
        background: #34CE98;
        color: white;
    }

    .notification-imgs {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin: 10rpx -10rpx 0;
    }

    .notification-imgs-item {
        position: relative;
        width: calc(25% - 20rpx);
        padding-top: calc(25% - 20rpx);
        margin: 20rpx 10rpx 0 10rpx;
    }

    .notification-imgs-item image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: solid 1rpx #f8f8f8;
    }

    .notification-sbutitle {
        font-size: 28rpx;
        padding-top: 10rpx;
        color: gray;
    }

    .notification-textarea {
        background: #F8F8F8;
        border-radius: 20rpx;
        padding: 20rpx;
        margin-top: 20rpx;
    }

    .notification-textarea textarea {
        width: 100%;
        height: 200rpx;
        font-size: 32rpx;
    }

    .notification-textarea-size {
        text-align: right;
        font-size: 28rpx;
        color: gray;
    }

    .notification-input {
        background: #F8F8F8;
        border-radius: 20rpx;
        height: 90rpx;
        line-height: 90rpx;
        margin-top: 20rpx;
        font-size: 32rpx;
        padding: 0 20rpx;
    }

    .btn {
        padding: 30rpx;
    }

    .btn button {
        height: 90rpx;
        line-height: 90rpx;
        border-radius: 45rpx;
        background: #34CE98;
        font-size: 34rpx;
        font-weight: bold;
        color: white;
        border: none;
        padding: 0;
    }

    .btn button:after {
        display: none;
    }

    /* 弹出层 */
    .wechat-content {
        text-align: center;
        padding: 30rpx 0;
    }

    .wechat-qrcode {
        width: 248rpx;
        height: 248rpx;
    }

    .wechat-text {
        text-align: center;
        font-size: 28rpx;
        color: gray;
        padding-top: 30rpx;
    }

    .answer-img {
        width: 50rpx;
        height: 50rpx;
        margin-right: 10rpx;
    }
</style>
