<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')">关闭</view>-->
<!--                        </template>-->
<!--                        <template v-if="pageData.status === '2'">-->
<!--                            <view class="title-btn mr10" @click="updateFeedBackStatus('0')">关闭</view>-->
<!--                        </template>-->
<!--                        <view class="title-btn" @click="open">回复</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"
                                       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",
                }
            ],
            pageData: {},
            pageOption: {}
        }
    },
    onLoad(o) {
        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.$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: 32rpx;
            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>