<template>
    <div>
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
<!--测试-->
<!--Cascader 级联动选择器-->
            <el-form-item label="食物类型" >
                <el-cascader
                        v-model="ceshi.value"
                        :options="ceshi.options"
                        clearable
                        :show-all-levels="false"
                        @change="handleChange"></el-cascader>
            </el-form-item>
<!--食物名字-->
            <el-form-item label="食物名称" prop="name">
                <el-input v-model="form.name" style="width: 15%"></el-input>
            </el-form-item>
<!--食物价格-->
            <el-form-item label="食物价格" prop="price">
                <el-input v-model="form.price" style="width: 5%"></el-input>
            </el-form-item>
<!--食物描述-->
            <el-form-item label="食物描述">
                <el-input type="textarea" v-model="form.desc" style="width: 50%"></el-input>
            </el-form-item>
<!--图片上传-->
            <el-form-item label="上传图片">
                <el-upload
                        :headers="header"
                        name="file"
                        action="https://mz.tshe.cn/restauantCH/uploadAli/image"
                        accept="image/jpeg,image/gif,image/png"
                        :before-upload="onBeforeUpload"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :on-exceed="handleExceed"
                        :on-success="handleSuccess"
                        :limit="1"
                        style="width: 20%"
                        list-type="picture"
                        :file-list="fileList">
                    <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
            </el-form-item>
<!--立即创建/取消-->
            <el-form-item>
                <el-button type="primary" @click="addFoodClick" round>添加食物</el-button>
                <el-button type="warning" @click="cancelBtnClick" round>取&nbsp消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    const axios=require('axios');
    export default {
        data() {
            return {
                header:{
                    'Access-Control-Allow-Origin':'*',
                },

                valueA:'',
                fileList:[],
                CascaderLastInfo:'',
                form: {
                    name: '',
                    price: '',
                    typename: '',
                    desc:'',
                    img:''
                },
                rules:{
                    name:[
                        {required:true,message:'请填写食物名称',trigger:'blur'}
                    ],
                    price:[
                        {required:true,message:'请填写食物价格',trigger:'blur'}
                    ]
                },
                ceshi:{
                    options: [
                        {
                            value: '饭菜类',
                            label: '饭菜类',
                            children: [
                                {value: '菜品', label: '菜品',
                                    children:[
                                        {value:'热菜',label:'热菜',
                                        children:[
                                            {value:'炖菜',label:'炖菜'},
                                            {value:'炒菜',label:'炒菜'}
                                        ]},
                                        {value:'凉菜',label:'凉菜'},
                                    ]},
                                {value: '饭类', label: '饭类',children:[
                                        {value:'炒饭',label:'炒饭'},
                                        {value:'盖浇饭',label:'盖浇饭'},
                                        {value:'拌饭',label:'拌饭'},
                                        {value:'米饭',label:'米饭'}
                                    ]},
                                {value: '面类', label: '面类',children:[
                                        {value:'炒面',label:'炒面'},
                                        {value:'汤面',label:'汤面'},
                                    ]},
                                {value: '汤类', label: '汤类'},
                            ]
                        },
                        //--
                        {value:'酒水饮料', label:'酒水饮料',children:[
                                {value:'碳酸饮料',label:'碳酸饮料'},
                                {value:'果汁',label:'果汁'},
                                {value:'奶茶',label:'奶茶'},
                            ]},
                        //--
                        {
                            value:'小吃类',
                            label:'小吃类',
                            children:[
                                {value:'经典美味',label:'经典美味'},
                                {value:'网红小吃',label:'网红小吃'},
                            ]
                        },
                    ]//options的
                },
            }
        },
        methods: {
            //测试
            handleChange(value) {
                if(value.length>0){
                    console.log(value[value.length-1],'最后一个');
                    this.CascaderLastInfo=value[value.length-1];
                }
                if(value.length==0){
                    this.CascaderLastInfo='';
                }
            },
            addFoodClick() {
                //axios获取后端的api数据，传参，让用户绑定输入的值 赋值给传过去的参数，最后重定向
                axios.post('https://mz.tshe.cn/restauantCH/food/create',{
                    name:this.form.name,
                    price:this.form.price,
                    typename:this.CascaderLastInfo,
                    desc:this.form.desc,
                    img:this.form.img
                })
                    .then((res)=>{
                    this.$message.success('添加成功！');
                    this.$router.go(-1);
                    })
                    .catch(err=>{
                        console.log(err);
                    })
            },
            cancelBtnClick(){
                this.$router.go(-1);
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },
            handleExceed(files, fileList) {
                this.$message.warning(`当前限制选择1个文件`);
            },
            handleSuccess(response, file, fileList){
                console.log(file,'file');
                this.form.img=file.response.data;
            },
            onBeforeUpload(file)
            {
                const isIMAGE = file.type === 'image/jpeg'||'image/gif'||'image/png';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isIMAGE) {
                    this.$message.error('上传文件只能是图片格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传文件大小不能超过 2MB!');
                }
                return isIMAGE && isLt2M;
            },
        }
    }
</script>

<style>
    template {

    }
</style>
