<template>
    <div>
        <navbar title="问题反馈"></navbar>
        <div class="main">
            <van-form ref="form">
                <van-field v-model="baseform.problemType" label="问题类型" is-link readonly placeholder="请选择问题类型"
                    @click="showPicker = true"></van-field>
                <van-popup v-model="showPicker" position="bottom" :style="{ height: '40%' }">
                    <van-picker show-toolbar :columns="options" @cancle="showPicker = false"
                        @confirm="onConfirm"></van-picker>
                </van-popup>
                <div class="ms">问题描述</div>
                <van-field v-model="baseform.problemDescr" label="" type="textarea" :row="3"
                    placeholder="请输入问题描述"></van-field>
                <van-field v-model="baseform.phone" label="联系方式" placeholder="请输入联系方式"></van-field>
            </van-form>

        </div>
        <div class="btn_wapper">

            <van-button plain color="#2372eb" class="btn" @click="handleCommit">提交</van-button>
        </div>
    </div>
</template>
<script>
import navbar from '../../components/navbar/navbar.vue';
import { feedbackAdd } from "@/service/api/home";
import {
    Form,
    Field,
    Picker,
    Button,
    Popup,
    Toast
} from 'vant';
import { height } from 'dom7';
export default {
    components: {
        navbar: navbar,
        VanForm: Form,
        VanField: Field,
        VanPicker: Picker,
        VanPopup: Popup,
        VanButton: Button
    },
    data() {
        return {
            baseform: {
                problemType: '',
                problemDescr: '',
                phone: ''
            },

            showPicker: false,
            options: ['数据问题', '操作问题', '界面问题', '其他问题'],

        }
    },
    methods: {
        onConfirm(value) {
            this.baseform.problemType = value
            this.showPicker = false
        },
        async handleCommit() {
            let result = await feedbackAdd(this.baseform);
            console.log(result, 'baseformbaseform')
            Toast.success('提建议成功');
            this.$router.go(-1)
        }
    }
}
</script>
<style scoped>
.main {
    margin-top: 52px;
    background-color: #fff;
}

/deep/ .van-cell__value {
    /* background-color: rgb(242,243,245); */
}

.ms {
    padding: 6px 16px;
    font-size: 14px;
    color: #646566
}

.btn_wapper {
    text-align: center;
    margin-top: 15px;
}

.btn {
    width: 70%;
    border-radius: 5px;
    background-color: rgb(70, 130, 255);

}
</style>