<template>
    <!-- pages/oneselfCenter/page/feedback/feedback.wxml -->
    <view class="feedback-wrapper">
        <view class="feed-title">反馈问题类型</view>
        <view class="type-content">
            <view class="type-basis" v-for="(item, index) in problemTypeList" :key="index">
                <view @tap="onProblemType" :class="'basic-style ' + (problemType.id == item.id ? 'clickType' : defaultID == item.id ? 'clickType' : '')" :data-item="item">
                    {{ item.descripts }}
                </view>
            </view>
        </view>
        <view class="feed-title">反馈内容</view>
        <view class="feedback-area">
            <textarea
                :value="connect"
                placeholder="请针对您所遇到的问题，输入至少6个字以上的内容，请尽量详细地描述操作步骤，并附上相关页面截图，以便我们更好地定位与解决问题，非常感谢。"
                maxlength="300"
                @input="connectFun"
            ></textarea>
        </view>
        <view class="photos">
            <!-- <text class="optional">相关截图（选填，最多上传3张）</text> -->
            <text class="optional">选填,提供问题截图（最多3张）</text>
            <view>
                <view style="background-color: white; padding: 20rpx 30rpx">
                    <van-uploader :file-list="fileList" max-count="3" @after-read="afterRead" :multiple="true" accept="image" @delete="deleteImage" />
                </view>
            </view>
        </view>
        <view class="multiBtn-content">
            <button class="multiBtn-right" @tap="subFeedback" :disabled="saveState">{{ saveState ? '提交中...' : '提交反馈' }}</button>
        </view>
    </view>
</template>

<script>
import Cache from '../../../../utils/cache';
// pages/oneselfCenter/page/feedback/feedback.js
import { $http } from '../../../../config/https.js';
import { httpconfig } from '../../../../config/httpconfig';
import Toast from '../../../../utils/toast';
export default {
    data() {
        return {
            feedbackList: new Array(10).fill(0),
            problemTypeList: [],

            problemType: {
                id: ''
            },

            connect: '',
            fileList: [],
            saveState: false,
            defaultID: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {
        this.queryBaseData();
    },
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        connectFun: function (event) {
            this.setData({
                connect: event.detail.value
            });
        },

        /**
         * 提交反馈内容
         */
        subFeedback: function () {
            this.setData({
                saveState: true
            }); //请求前禁用标记改为true,防止重复请求
            const userData = Cache.get('userData');
            let { problemType, defaultID, connectFun: connect } = this;
            if (connect.length < 6) {
                uni.showToast({
                    title: '输入内容少于6个字',
                    icon: 'none'
                });
                this.setData({
                    saveState: false
                });
                return;
            }
            let arr = [];
            if (this.fileList.length > 0) {
                for (var i = 0; i < this.fileList.length; i++) {
                    arr.push(this.fileList[i].url);
                }
            }
            let str = arr.length > 0 ? arr.join(',').split(',').join('&') : '';
            let data = {
                params: [
                    {
                        typeID: problemType.id || defaultID,
                        feedbackUserID: userData.userID,
                        userTypeCode: 'D',
                        pictures: str,
                        mobile: '',
                        connect: connect,
                        userID: userData.userID
                    }
                ]
            };
            $http.post('urlDeault', this, {
                code: '03100099',
                data: data,
                success: function (res) {
                    if (res.errorCode == '0') {
                        this.setData({
                            saveState: false,
                            problemTypeList: res.data,
                            defaultID: res.defID
                        });
                        Toast.success(res.errorMessage);
                        setTimeout(function () {
                            uni.navigateBack();
                        }, 2000);
                    } else {
                        this.setData({
                            saveState: false
                        });
                        Toast.fail('提交失败');
                    }
                }
            });
            uni.navigateTo({
                url: '../feedbackSuc/feedbackSuc'
            });
            // wx.showModal({
            //   title: '提示',
            //   content: '感谢您的反馈!!!',
            //   showCancel: false,
            //   success: function() {

            //   }
            // })
        },

        /**
         * 获取基础数据
         */
        queryBaseData: function () {
            let data = {
                params: [
                    {
                        type: 'ProblemType'
                    }
                ]
            };
            $http.post('urlDeault', this, {
                code: '01010013',
                data: data,
                success: function (res) {
                    if (res.errorCode == '0') {
                        this.setData({
                            problemTypeList: res.data,
                            defaultID: res.defID
                        });
                    }
                }
            });
        },

        /**
         * 点击反馈类型
         */
        onProblemType: function (event) {
            let item = event.currentTarget.dataset.item;
            this.setData({
                problemType: item,
                defaultID: ''
            });
        },

        ///图片上传
        afterRead(event) {
            const { file } = event.detail;
            var _this = this;
            for (var i = 0; i < file.length; i++) {
                uni.uploadFile({
                    url: httpconfig.domain + '/uploadFile?fileType=consult',
                    filePath: file[i].path,
                    name: 'file',
                    // formData: { user: 'test' },
                    success(res) {
                        // 上传完成需要更新 fileList
                        if (res.statusCode === 200) {
                            let imgName = JSON.parse(res.data).filePath;
                            let path = httpconfig.imgDomain + '/images/consult/' + imgName;
                            _this.fileList.push({
                                url: path,
                                isImage: true
                            });
                            _this.setData({
                                fileList: _this.fileList
                            });
                        }
                    }
                });
            }
        },

        ///删除图片
        deleteImage(event) {
            this.fileList.splice(event.detail.index, 1);
            this.setData({
                fileList: this.fileList
            });
        }
    }
};
</script>
<style>
/* @import '../help/help.css'; */

.feedback-wrapper {
    padding: 0rpx;
}

.type-content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    background-color: #fff;
    padding: 20rpx;
}

.type-basis {
    flex: 0 0 25%;
}

.basic-style {
    margin: 10rpx;
    height: 60rpx;
    background-color: #fff;
    line-height: 60rpx;
    text-align: center;
    border-radius: 60rpx;
    border: 1rpx solid #999;
}

.clickType {
    border: 1rpx solid #1890ff;
    color: #1890ff;
}

.feed-title {
    padding: 30rpx 23rpx;
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: rgba(51, 51, 51, 1);
    background: #f5f4f4;
}

.feedback-area {
    background-color: #fff;
    font-size: 24rpx;
    padding: 24rpx;
}

textarea {
    box-sizing: border-box;
    font-size: 26rpx !important;
    height: 100px;
    border: 1px solid #eeeeee;
    width: 100%;
    border-radius: 7px;
    padding: 20rpx;
}

.photos .optional {
    display: inline-block;
    width: 100%;
    height: 60rpx;
    line-height: 60rpx;
    padding: 30rpx 23rpx;
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: rgba(51, 51, 51, 1);
    background: #f5f4f4;
}

.multiBtn-right {
    margin-top: 80rpx;
    border-radius: 10rpx !important;
}
</style>
