<template>
    <Cn-page :loading='loading'>
        <view slot='body'>
            <view class='detail'>
                <view class="detail-content ">
                    <view class="detail-content-title mb20">{{ pageData.title }}</view>
                    <view> {{ pageData.createTime }}</view>
                    <view class="mt10 mb10">{{ pageData.description }}</view>
                    <uni-file-picker readonly v-model="imageValue" mode="grid" />
                </view>
                <view class="detail-content " style="margin-bottom:0">
                    <view class="detail-content-title ">
                        <view class="title">进度</view>
                        <template v-if="pageData.status === '1'">
                            <view class="title-btn mr10" @click="updateFeedBackStatus('2')">解决</view>
                            <view class="title-btn mr10" @click="updateFeedBackStatus('0')" v-if="userInfo.authorities === 'app_vip_user'">关闭</view>
                        </template>
                        <template v-if="pageData.status === '2'">
                            <view class="title-btn mr10" @click="updateFeedBackStatus('0')" v-if="userInfo.authorities === 'app_vip_user'">关闭</view>
                        </template>
                        <view class="title-btn" @click="open"  v-if="pageData.status != '0'">回复</view>
                    </view>
                </view>
                <uni-list>
                    <uni-list-item :title="item.userName" :note="item.chatContent" :rightText="item.createTime"
                        v-for="(item, index) in pageData.csFeedbackChatPOList" :key="index" />
                    <Cn-empty
                        v-if="pageData.csFeedbackChatPOList && pageData.csFeedbackChatPOList.length == 0"></Cn-empty>
                </uni-list>
                <!-- 输入框示例 -->
                <uni-popup ref="inputDialog" type="dialog">
                    <uni-popup-dialog ref="inputClose" type="info" mode="input" title="输入内容" value="对话框预置提示内容!"
                        placeholder="请输入内容" @confirm="dialogInputConfirm">
                        <uni-easyinput type="textarea" :maxlength="250" autoHeight v-model="chatContent" clearable
                            placeholder="请输入内容"></uni-easyinput>
                    </uni-popup-dialog>
                </uni-popup>
            </view>
        </view>
    </Cn-page>
</template>
<script>
import { queryFeedBackDetail, AddFeedbackChat, updateChatStatus, updateFeedBackStatus } from '../../common/api/feedback'

export default {
    data() {
        return {
            loading: false,
            chatContent: "",
            imageValue: [
                {
                    "name": "file.png",
                    "extname": "png",
                    "url": "/static/logo.png",
                }
            ],
            userInfo: {},
            pageData: {},
            pageOption: {}
        }
    },
    onLoad(o) {
        this.userInfo = uni.getStorageSync(this.$cacheKey.userInfo)
        this.pageOption = o
        this.init()
        updateChatStatus({
            id: o.id,
        })
    },
    methods: {
        updateFeedBackStatus(status) {
            updateFeedBackStatus({
                id: this.pageOption.id,
                status: status
            }).then(res => {
                this.init()
            })
        },
        init() {
            this.loading = true
            queryFeedBackDetail(this.pageOption.id).then(res => {
                // 反转数组
                res.data.csFeedbackChatPOList.reverse()
                this.pageData = res.data
                this.imageValue = res.data.imageUrls.map(item => {
                    return {
                        "name": item,
                        "extname": item.split('.')[1],
                        "url": this.$config.static + item,
                    }
                })
                this.loading = false
                console.log(res);
            })
        },
        dialogInputConfirm() {
            AddFeedbackChat({ chatContent: this.chatContent, id: this.pageOption.id }).then(res => {
                console.log(res);
                this.$util.toast('回复成功')
                this.init()
                this.chatContent = ''
            })
        },
        open() {
            this.chatContent = ''
            this.$refs.inputDialog.open()
            
        },
        over() {
        },
        close() {
        },
    }
}
</script>
<style lang='scss'>
.detail {
    padding: 0 0 20rpx;

    .detail-content {
        padding: 20rpx 30rpx;
        background: #fff;
        margin-bottom: 20rpx;
        font-size: 26rpx;

        .detail-content-title {
            font-size: 28rpx;
            color: #111;
            font-weight: 700;
            display: flex;
            justify-content: space-between;

            .title {
                flex: 1;
            }

            .title-btn {
                padding: 0 20rpx;
                height: 50rpx;
                background-color: #007aff;
                font-size: 24rpx;
                color: #fff;
                text-align: center;
                line-height: 50rpx;
                border-radius: 10rpx;
            }
        }
    }
}
</style>