<template>
    <div class="feedback">

        <div class="required-title">
            <van-cell-group title="1.请选择您的游戏">
                <van-cell title="游戏" :value="gameName" is-link @click="showPicker = true"/>
                <van-popup v-model="showPicker" position="bottom">
                    <van-picker
                            show-toolbar
                            :columns="fruitColumns"
                            @cancel="showPicker = false"
                            value-key="gameAlias"
                            @confirm="handleConfirmGame"
                    />
                </van-popup>
            </van-cell-group>
        </div>

        <div class="required-title">
            <van-cell-group title="2.请描述您在游戏中遇到的问题(建议填写上游戏ID和区服)">
                <van-field
                        style="touch-action: none; "
                        v-model="feedbackForm.content"
                        type="textarea"
                        placeholder="请输入问题"
                        rows="6"
                        autosize
                />
            </van-cell-group>
        </div>


        <div :class="{'required-title':requiredList && requiredList.find(f => f == 'contact')}">
            <van-cell-group title="3.请留下您的联系方式">
                <van-field
                        v-model="userContact"
                        center
                        clearable
                        :type="contactType"
                        placeholder="请输入联系方式"
                >
                    <van-dropdown-menu slot="label">
                        <van-dropdown-item v-model="value1" :options="option1" @change="handelContactChange"/>
                    </van-dropdown-menu>

                </van-field>

            </van-cell-group>
        </div>


        <div :class="{'required-title':requiredList && requiredList.find(f => f == 'image')}">
            <van-cell-group title="4.请上传对应的游戏截图(图片大小在10M以内,最多9张)">
                <van-uploader

                        required
                        v-model="fileList"
                        multiple
                        :max-count="9"
                        :max-size="10485760"
                />
            </van-cell-group>
        </div>


        <van-cell-group>
            <van-button type="primary" size="large" @click="handelSubmit">提交</van-button>
        </van-cell-group>


    </div>
</template>

<script>
    import {uploadFiles} from '@/utils/util'
    import feedbackApi from '@/api/feedback'

    export default {
        name: 'feedback',
        data() {
            return {
                userContact:'',
                contactType: 'tel',
                value1: 2,
                option1: [
                    {text: '手机号', value: 2, inputType: 'tel'},
                    {text: 'QQ', value: 1, inputType: 'number'},
                    {text: '微信', value: 0, inputType: 'text'},
                    {text: '邮箱', value: 3, inputType: 'email'}
                ],
                gameName: '',
                fileList: [],
                fileUrlList: [],
                showPicker: false,
                feedbackForm: {
                    content: '',
                    userContact: ''
                },
                fruitPickerShow: false,
                fruitColumns: [],
                requiredList: []
            }
        },

        mounted() {
            this.getGameList()
        },

        methods: {

            getGameList() {
                feedbackApi.getGameList().then(res => {
                    this.fruitColumns = res
                })
            },

            /**
             * 点击确定选择游戏
             * @param value
             */
            handleConfirmGame(value) {
                this.gameName = value.gameAlias;
                this.feedbackForm.gameId = value.gameId;
                this.requiredList = value.required.split(',');
                this.showPicker = false
            },
            /**
             * 选择联系方式
             * @param val
             */
            handelContactChange(val) {
                let type = this.option1.find(f => f.value === val);
                this.contactType = type.inputType;
                this.feedbackForm.userContactType = type.value
            },

            /**
             * 提交反馈
             */
            handelSubmit() {

                if (!this.feedbackForm.gameId) {
                    this.$toast.fail('请选择游戏');
                    return
                }

                if (!this.feedbackForm.content) {
                    this.$toast.fail('请描述遇到的问题');
                    return
                }

                if (this.requiredList && this.requiredList.find(f => f == 'contact') && !this.userContact) {
                    this.$toast.fail('请输入您的联系方式');
                    return
                }

                if (this.requiredList && this.requiredList.find(f => f == 'image') && !this.fileList.length) {
                    this.$toast.fail('请上传游戏截图');
                    return
                }


                let that = this;
                this.$dialog.confirm({
                    title: '提交反馈',
                    message: '您确认已经填写好反馈信息了吗?',
                    closeOnClickOverlay: true
                }).then(() => {
                    that.$toast.loading({
                        duration: 0,       // 持续展示 toast
                        forbidClick: true, // 禁用背景点击
                        mask: true,
                        message: '正在上传截图...'
                    });
                    that.handelUploadFile(that.uploadCallback)
                    // on confirm
                }).catch(() => {
                    // on cancel
                })
            },

            /**
             * 批量上传截图
             * @param callback
             */
            handelUploadFile(callback) {
                if (this.fileList.map(m => m.file).length) {
                    uploadFiles(this.fileList.map(m => m.file), callback);
                } else {
                    this.submitFeedback();
                }

            },

            /**
             * 上传成功之后的回调
             * @param fileUrl
             */
            uploadCallback(fileUrl) {
                //将文件url放入新的list中
                this.fileUrlList.push(fileUrl);
                //判断是否上传完成
                if (this.fileUrlList.length >= this.fileList.length) {
                    this.submitFeedback()
                }
            },

            submitFeedback() {
                let that = this;
                if (this.userContact) {
                    this.feedbackForm.userContact = this.userContact
                }
                if (this.fileUrlList.length) {
                    this.feedbackForm.imageUrl = this.fileUrlList.join(',')
                }
                feedbackApi.addFeedback(this.feedbackForm).then(res => {
                    this.$toast.clear();
                    this.$toast.success({
                        duration: 1500,       // 持续展示 toast
                        forbidClick: true, // 禁用背景点击
                        mask: true,
                        message: '提交成功',
                        onClose: () => {
                            that.$router.replace('/success');
                        }
                    })


                })
            }
        },
        watch: {
            userContact(v) {
                this.userContact = v.replace(/[\u4e00-\u9fa5]/ig,'')
            }
        }
    }
</script>

<style lang="less" scoped>
    .feedback {
        background-color: #f8f8f8;

        .title {
            padding: 2.6rem 1.8rem;
            font-size: 2rem;
            font-weight: 300;
            font-family: PingFangSC-Medium, SourceHanSansSC-Medium;
            color: #484848;
            line-height: 1.5;
            margin-bottom: 3.8rem;
        }
    }

    /deep/ .van-dropdown-menu {
        height: .7rem;
    }

    /deep/ .van-dropdown-menu__item {
        justify-content: flex-start;
    }

    /*/deep/ .van-field__label {*/
    /*    width: 1.8rem;*/
    /*}*/

    /deep/ .van-hairline--top-bottom::after, .van-hairline-unset--top-bottom::after {
        border-width: 0;
    }

    .required-title {
        /deep/ .van-cell-group__title::before {
            position: absolute;
            left: 0.21333rem;
            color: #ee0a24;
            font-size: 0.37333rem;
            content: '*';
        }
    }

</style>
