<!--
 * 严肃声明：
 * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
 * 本系统已申请软件著作权，受国家版权局知识产权以及国家计算机软件著作权保护！
 * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！
 * Copyright (c) 2020 陈尼克 all rights reserved.
 * 版权所有，侵权必究！
 *
-->

<template>
    <div>
        <LHeader v-bind:text="text"></LHeader>
        <van-form @submit="onSubmit" @failed="onFailed">
            <van-field
                v-model="problemName"
                name="问题名称"
                label="问题名称"
                placeholder="问题名称"
                :rules="[{ required: true, message: '请填写问题名称' }]"
            />
            <van-field
                v-model="problemPosition"
                name="问题位置"
                label="问题位置"
                placeholder="问题位置"
                :rules="[{ required: true, message: '请填写问题位置' }]"
            />
            <van-field
                readonly
                clickable
                name="picker"
                :value="value"
                label="责任单位"
                placeholder="请选择部门"
                @click="showPicker = true"
                :rules="[{ required: true, message: '请填写问题位置' }]"
            />
            <van-popup v-model="showPicker" position="bottom">
                <van-picker
                    show-toolbar
                    :columns="columns"
                    @confirm="onConfirm"
                    @cancel="showPicker = false"
                />
            </van-popup>
            <van-field
                v-model="problemDescribe"
                name="问题描述"
                label="问题描述"
                placeholder="问题描述"
                :rules="[{ required: true, message: '请填写问题描述' }]"
            />
            <van-field name="uploader" label="图像上传" :rules="[{ required: true, message: '请上传图像' }]">
                <template #input>
                    <van-uploader v-model="uploaderImg" />
                </template>
            </van-field>
            <van-field name="uploader" label="视频上传" :rules="[{ required: true, message: '请上传视频' }]">
                <template #input>
                    <van-uploader v-model="uploaderVideo" />
                </template>
            </van-field>
            <div style="margin: 0.5rem">
                <van-button round block type="info" native-type="submit">提交</van-button>
            </div>
        </van-form>
    </div>
</template>

<script>
import LHeader from '@/components/header.vue'
export default {
    name: 'list',
    components: {
        "LHeader":LHeader
    },
    data() {
        return {
            /* form表单 */
            problemName:'',//问题名称
            problemPosition:'',//问题位置
            value:'',//责任单位
            problemDescribe:'',//问题描述
            uploaderImg:[],//图像上传
            uploaderVideo:[],//视频上传
            showPicker:false,
            columns: ['研发二组', '研发一组', '能源石油化', '平台应用事业前端组', '项目经理部'],
            text:'检查问题',
        }
    },
    mounted() {
        
    },
    methods: {
        //失败的回调
        onFailed(errorInfo){
            this.$notify({
                message:'失败',
                background:'red',
                duration: 1000
            })

        },
        onSubmit(value){
            this.$notify({
                message:'成功',
                background:'green',
                duration: 1000
            })
            history.go(-1)
        },
        onConfirm(value){
            this.value = value;
            this.showPicker = false;
        }
    }
}
</script>
<style lang="less" scoped>
    .card{
        width:90%;
        box-shadow: 0px 0px 10px 2px #F3F3F3;
        padding: 0.25rem;
        margin:0.4rem auto;
        background: white;
    }
    .card div{
        font-size: 0.4rem;
    }
</style>
