<!-- 我要反馈 -->
<template>
    <nav-bar :navbar-data="navbarData" />
	<!-- #ifdef MP -->
    <view :style="{ marginTop: (height + 9) +'px' }" class="help">
	<!-- #endif -->
	<!-- #ifdef H5 -->
	<view :style="{ paddingTop: (height + 9) +'px', height: '100vh' }" class="help">
	<!-- #endif -->
        <form @submit="saveList">
            <view>
                <view class="question">发生问题的场合</view>
                <radio-group :value="radio" @change="onChangeRadio">
                    <van-cell-group>
                        <van-cell v-for="(item, index) in questionList" :key="index" :title="item.descripts" clickable @click="onClick(item.id)">
                            <radio solt="right-icon" :name="item.id" />
                        </van-cell>
                    </van-cell-group>
                </radio-group>
            </view>
            <view class="value">
				<textarea v-model="value" style="height: 200rpx" name="textarea" placeholder="请详细描述您在使用过程中遇到的问题"/>
            </view>
            <view class="photos">
                <text class="optional">选填,提供问题截图（最多3张）</text>
                <view class="photos-box">
                    <!-- <van-uploader file-list="{{ fileList }}" max-count="3" bind:after-read="afterRead" multiple="true"
                        accept="image" bind:delete="deleteImage" /> -->
                    <uni-file-picker :value="fileList" fileMediatype="image" limit="3" mode="grid" @select="afterRead" @delete="deleteImage" />
                </view>
            </view>
            <van-cell-group style="margin-top: 20rpx">
                <view class="row">
                    <label>联系人</label>
                    <view class="row-right">
                        <input type="text" v-model="userName" placeholder="请输入联系人" @input="onChangeUserName">
                    </view>
                </view>
                <view class="row">
                    <label>联系方式</label>
                    <view class="row-right">
                        <input type="text" v-model="phone" placeholder="请输入手机号" @input="onChangePhone">
                    </view>
                </view>
            </van-cell-group>
            <view class="button">
                <button form-type="submit" :disabled="saveState">{{ saveState ? '提交中...' : '提交' }}</button>
            </view>
        </form>
    </view>
</template>

<script>
import $http from "@/utils/https";
import httpConfig from '@/utils/httpConfig';
import Utils from '@/utils/utils';
import navBar from '@/components/navBar/index'
import VanCellGroup from '@/components/cell-group/index'
import VanCell from '@/components/cell/index'
const app = getApp()
export default {
    components: {
        'nav-bar': navBar,
        'van-cell-group': VanCellGroup,
        'van-cell': VanCell
    },
    data() {
        return {
			windowHost: httpConfig?.ipDeault || '',
            height: app.globalData.height,
            navbarData: {
                isGoHome: true,
                homePath: '../../../pages/tabBar/index/index',
                isGoBack: true,
                title: "反馈"
            },
            userName: '',
            value: '',
            phone: '',
            fileList: [],
            radio: '',
            mobileModel: '',
            mobileePixelRatio: '',
            windowWidth: '',
            windowHeight: '',
            language: '',
            version: '',
            imagesList: [],
            questionList: [],
            saveState: false,
        }
    },
    onLoad: function () {
        var that = this;
        uni.getSystemInfo({
            success: function (res) {
                that.setData({
                    mobileModel: res.model,
                    mobileePixelRatio: res.pixelRatio,
                    windowWidth: res.windowWidth,
                    windowHeight: res.windowHeight,
                    language: res.language,
                    version: res.version
                })
            }
        })
    },
    onReady: function () {
        this.qusetionList();
    },
    methods: {
        onChange: function (event) {
            this.setData({
                value: event.detail.value
            })
        },

        onChangePhone: function (event) {
            this.setData({
                phone: event.detail.value
            })
        },

        onChangeUserName: function (event) {
            this.setData({
                userName: event.detail.value
            })
        },

        // 下拉
        qusetionList: function (val) {
            let data = {
                params: [{}]
            }
            $http.post("urlS", this, {
                code: "03100100",
                data: data,
                namespace: 'Y',
                success: function (res) {
                    if (+res.errorCode === 0) {
                        this.setData({
                            questionList: res.result
                        })
                    }
                }
            });
        },
		
        onClick(event) {
            const {
                name
            } = event.currentTarget.dataset;
            this.setData({
                radio: name,
            });
        },
        // 图片上传
        afterRead(e) {
            console.log(e)
            const file = e.tempFiles;
            var self = this;
            let newUserData = this.$cache.get('userData');
            for (var i = 0; i < file.length; i++) {
                uni.uploadFile({
                    url: newUserData && newUserData.upLoadUrl ? newUserData.upLoadUrl : this.windowHost +'/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;
                            self.imagesList.push(imgName);
                            let path = (newUserData && newUserData.downLoadUrl ? newUserData.downLoadUrl : this.windowHost +"/images/consult/") + imgName;
                            self.fileList.push({
                                url: path,
                                isImage: true
                            });
                            self.setData({
                                imagesList: self.imagesList,
                                fileList: self.fileList
                            })
                        }
                    }
                });
            }
        },

        // 删除图片
        deleteImage(event) {
            this.fileList.splice(event.detail.index, 1);
            this.setData({
                fileList: this.fileList
            })
        },
        
		/**提交 **/
        saveList: function (val) {
            this.setData({ saveState: true })
            let userData = this.$cache.get('userData') ? this.$cache.get('userData') : {};
            let arr = [];
            // console.log('this.imagesList[i]',this.imagesList)
            // if(this.fileList.length>0){
            //   for(var i=0; i<this.fileList.length; i++){
            //     arr.push(this.fileList[i].url)
            //   }
            // }
            let str = this.imagesList.length > 0 ? this.imagesList.join(',').split(",").join("&") : '';
            let data = {
                params: [{
                    mobileModel: this.mobileModel, //手机型号
                    version: this.version, //微信版本
                    mobileePixelRatio: this.mobileePixelRatio, //手机像素比
                    windowWidth: this.windowWidth, //手机窗口宽度
                    windowHeight: this.windowHeight, //手机窗口高度
                    userTypeCode: 'P',
                    typeCode: '',
                    typeID: this.radio, //问题场合
                    connect: val.detail.value.textarea, //描述内容
                    pictures: str, //相片
                    contacts: this.userName, //联系人
                    mobile: this.phone,
                    userID: userData.openID, //用户ID
                    feedbackUserID: userData.openID, //反馈人ID
                }]
            }
            $http.post("urlS", this, {
                code: "03100099",
                data: data,
                namespace: 'Y',
                success: function (res) {
                    if (+res.errorCode === 0) {
                        this.setData({ saveState: false })
                        Utils.showToast(res.errorMessage, 'success')
                        setTimeout(function () {
                            uni.navigateBack();
                        }, 2000)
                    } else {
                        this.setData({ saveState: false })
                        Utils.showToast('提交失败', 'error')
                    }
                }
            });
        },
    }
}
</script>

<style lang="scss">
.help{
	box-sizing: border-box;
  padding-bottom: 130rpx;
  margin-bottom: 20rpx;
  overflow-y: auto;
}
.help .value .van-field__body{
  height: 300rpx;
  border: 2rpx solid #E1E1E1;
  padding: 10rpx;
}
.help .button{
  text-align: center;
  margin-top: 50rpx;
  position: fixed;
  bottom: 0;
  /* #ifdef MP */
  bottom: calc(env(safe-area-inset-bottom) + 0rpx);
  /* #endif */
  width: 100%;
  z-index: 10;
}
.help .button button{
  width: 100%;
  height: 100rpx;
  background-color: #1989fa;
  color: #fff;
  border-radius: 0;
}
.help .userName{
  margin-top: 15rpx;
}
.help .value{
  margin-top: 25rpx;
  background-color: #fff;
  padding: 15rpx 30rpx;
}
.photos {
    margin-bottom: 20rpx;
	.optional{
	  display: inline-block;
	  width: 100%;
	  height: 60rpx;
	  line-height: 60rpx;
	  padding-left: 33rpx;
	  background-color: #fff;
	  color: #666;
	}
	.photos-box {
		background-color: white;
		padding: 6rpx 30rpx 20rpx;
	}
}
.question{
  height: 74rpx;
  line-height: 74rpx;
  padding-left: 30rpx;
}
.help .van-uploader__upload{
  margin-left: 15rpx;
}
.help textarea{
  width: 97%;
  border: 2rpx solid #dedede;
  padding: 10rpx;
}
</style>