<template>
    <div>
<!--标题-->
        <h1 class="food">饭菜类</h1>
        <el-divider><i class="el-icon-tableware"></i></el-divider>

        <span style="float: right!important;" @click="foodShopClick">
            <i class="el-icon-shopping-cart-full"></i> 购物车</span>
        <div>
<!--批量删除-->
            <el-button type="danger"
                       @click="handleSelectionChangeDel"
            ><i class="el-icon-delete"></i> 批量删除</el-button>
<!--增加食物-->
            <el-button type="primary" @click="addFood"><i class="el-icon-burger"></i> 增加食物</el-button>
            &nbsp
<!--&lt;!&ndash; 分类查询 &ndash;&gt;-->
<!--            <el-select v-model="form.typename" placeholder="请选择食物类型" clearable @change="changeType">-->
<!--                <el-option label="热菜" value="热菜"></el-option>-->
<!--                <el-option label="凉菜" value="凉菜"></el-option>-->
<!--                <el-option label="汤类" value="汤类"></el-option>-->
<!--                <el-option label="炒饭" value="炒饭"></el-option>-->
<!--                <el-option label="盖饭" value="盖饭"></el-option>-->
<!--                <el-option label="米饭" value="米饭"></el-option>-->
<!--            </el-select>-->
<!--多级联查-->
            <!--Cascader 级联动选择器-->
                <el-cascader
                        v-model="ceshi.value"
                        :options="ceshi.options"
                        clearable
                        :show-all-levels="false"
                        @change="handleChange">
                </el-cascader>
            &nbsp
<!--模糊查询-->
            <el-input
                    placeholder="关键字查询"
                    v-model="input"
                    maxlength="15"
                    show-word-limit
                    style="width: 15%"
                    clearable>
            </el-input>
            &nbsp
            <el-button type="primary"  icon="el-icon-search" size="small" @click="fuzzySearch" round>搜索</el-button>
        </div>
        <br>
        &nbsp
<!--数据条数-->
        <span style="float: right!important;">共有数据：<strong>{{totalNum}}</strong> 条</span>
<!--form表单-->
        <div>
            <el-table
                    ref="multipleTable"
                    stripe border fit highlight-current-row
                    @selection-change="handleSelectionChange"
                    :data="list"
                    :default-sort = "{prop: 'price', order: 'descending'}"
                    height="800"
                    style="width: 100%">
                <el-table-column type="selection" width="55" align="center"></el-table-column>
                <el-table-column type="index"    label="序号" align="left" width="60"></el-table-column>
                <el-table-column prop="name"     label="名字" width="120"></el-table-column>
                <el-table-column prop="price"    label="单价" sortable width="100"></el-table-column>
                <el-table-column prop="typename" label="食物分类" width="120"></el-table-column>
                <el-table-column prop="desc"     label="食物描述" width="120"></el-table-column>
                <el-table-column    label="食物图片" width="200">
                    <template slot-scope="scope">
                        <el-image  :src="scope.row.img" style="width: 100px;height: 100px"></el-image>
                    </template>
                </el-table-column>
<!--添加到购物车-->
                <el-table-column label="购物车" width="200">
                    <template slot-scope="scope">
                        <el-button
                                type="primary"
                                @click="addToShoppingCart(scope.$index, scope.row)">
                            添加到购物车<i class="el-icon-shopping-cart-2"></i></el-button>
                    </template>
                </el-table-column>
<!--编辑、删除-->
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                                size="small"
                                type="info"
                                @click="handleEdit(scope.$index, scope.row)">
                            <i class="el-icon-edit"></i>编辑</el-button>
                        <el-button
                                size="small"
                                type="danger"
                                @click="handleDelete(scope.$index, scope.row)">
                            <i class="el-icon-delete"></i>_删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="block">
            <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page="querData.page"
                    @size-change="handleSizeChange"
                    :page-sizes="[5,7,10,100]"
                    small:true
                    background
                    :page-size="querData.pageSize"
                    :page-count="allPage"
                    :total="totalNum"
                    layout="sizes,prev, pager, next,jumper">
            </el-pagination>
        </div>
<!--底部说明-->
        <footer>
            <p>{{CopyRight}}</p>
        </footer>
<!--食物表编辑弹窗层-->
        <el-dialog
                title="更新菜单"
                :visible.sync="dialogVisible"
                width="75%">
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
<!--食物名字-->
                <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: 15%"></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>
<!--&lt;!&ndash;食物类别&ndash;&gt;-->
<!--                <el-form-item label="食物类型">-->
<!--                    <el-select v-model="form.typename" placeholder="请选择食物类型">-->
<!--                        <el-option label="热菜" value="热菜"></el-option>-->
<!--                        <el-option label="凉菜" value="凉菜"></el-option>-->
<!--                        <el-option label="汤类" value="汤类"></el-option>-->
<!--                        <el-option label="炒饭" value="炒饭"></el-option>-->
<!--                        <el-option label="盖饭" value="盖饭"></el-option>-->
<!--                        <el-option label="米饭" value="米饭"></el-option>-->
<!--                    </el-select>-->
<!--                </el-form-item>-->
<!--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="上传图片">
                    <el-upload
                            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="updateFoodClick" round>更新食物</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script type="text/ecmascript-6">
    const axios = require('axios');
    import Cookies from 'js-cookie';
    export default {
        data() {
            return {
                status:false,
                fileList:[],
                dialogVisible: false,
                _id:null,
                list: [],
                page:null,
                allPage:null,
                totalNum:null,
                pageSize:null,
                CascaderLastInfo:'',
                querData:{
                    page:1,
                    pageSize:5,
                },
                CopyRight: '2020  Food  Vue  Demo!',
                input: '',
                checked: 'true',
                multipleTable:[],
                multipleSelection: [],
                isdisable: false,

                form: {
                    _id:'',
                    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的
                },
            }
        },
        mounted() {
            this.tabelData();
        },
        methods: {
            //测试--------------------------
            handleChange(value) {
                if(value.length>0){
                    console.log(value[value.length-1],'最后一个');
                    this.CascaderLastInfo=value[value.length-1];
                    console.log(this.CascaderLastInfo,'CascaderLastInfo的值')
                    this.form.typename=this.CascaderLastInfo;
                }
                if(value.length==0){
                    this.CascaderLastInfo='';
                    console.log(this.CascaderLastInfo,'CascaderLastInfo的值')
                    this.form.typename=this.CascaderLastInfo;
                }
            },
//分页
            tabelData() {
                axios.post('https://mz.tshe.cn/restauantCH/food/getInfoByPage')
                    .then((res) => {
                        this.list = res.data.list;
                        this.allPage = res.data.allPage;
                        this.totalNum = res.data.totalNum;
                        this.pageSize = res.data.pageSize;
                        this.page = res.data.page;
                    })
                    .catch((err) => {
                        console.log(err);
                    })
            },
//编辑
            handleEdit(index, row) {
                this.dialogVisible = true;
                this.form = row;  //把这一行的值赋值给form
                console.log(row,'row!!!')
                this.ceshi.value=row.typename;
            },
//弹窗-更新食物
            updateFoodClick() {
                axios.post('https://mz.tshe.cn/restauantCH/food/updateOne', {
                    _id: this.form._id,
                    name: this.form.name,
                    price: this.form.price,
                    typename: this.form.typename,
                    desc: this.form.desc,
                    img: this.form.img,
                })
                    .then((res) => {
                        alert('更新信息成功!');
                        this.$router.go(0);
                    })
            },
//单个删除
            handleDelete(index, row) {
                if (confirm('确定要删除吗') == true) {
                    axios.post('https://mz.tshe.cn/restauantCH/food/delete', {_id: row._id})
                        .then((res) => {
                            this.$message.success('删除成功!')
                            this.tabelData();
                        })
                }
            },
//val 为选中数据的集合
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
//批量删除
            handleSelectionChangeDel() {
                if (this.multipleSelection.length == 0) {
                    this.$message.error('请至少选择一项');
                } else {
                    if (confirm('确定要删除吗') == true) {
                        for (var i = 0; i < this.multipleSelection.length; i++) {
                            const delIdArray = this.multipleSelection[i]._id;
                            axios.post('https://mz.tshe.cn/restauantCH/food/delete', {_id: delIdArray})
                                .then((res) => {
                                    this.tabelData();
                                })
                        }
                        this.$message.success('删除成功！');
                    }

                }
            },
//分页改变当前页
            handleCurrentChange(val) {
                    this.querData.page = val;
                axios.post('https://mz.tshe.cn/restauantCH/food/getInfoByPage', this.querData)
                    .then((res) => {
                        this.list = res.data.list;
                    })
            },
//分页改变每页数据条数
            handleSizeChange(val) {
                this.querData.pageSize = val;    //动态改变
                this.querData.page = 1;
                axios.post('https://mz.tshe.cn/restauantCH/food/getInfoByPage', this.querData)
                    .then((res) => {
                        this.list = res.data.list;
                    })
            },
//添加食物
            addFood() {
                this.$router.push('/foodRestaurant/food/addFood')
            },
//跳转到购物车
            foodShopClick() {
                this.$router.push('/food/shoppingCart');
            },
//模糊查询
            fuzzySearch() {
                //如果没选择type类型
                if(this.form.typename.length==0 && this.input.length!=0){
                    axios.post('https://mz.tshe.cn/restauantCH/food/getInfoByKw', {Kw: this.input})
                        .then((res) => {
                            this.list = res.data.data;
                            this.totalNum=res.data.data.length;
                        })
                }
                //没关键字
                else if(this.input.length==0 && this.form.typename.length!=0 ){
                    axios.post('https://mz.tshe.cn/restauantCH/food/getInfoByType',{
                        typename:this.form.typename
                    })
                        .then((res)=>{
                            this.list=res.data.data;
                            this.totalNum=res.data.data.length;

                        })
                }
                //如果都为空
                else if(this.form.typename.length==0 && this.input.length==0 ){
                    this.tabelData();
                }
                //都有
                else{
                    axios.post('https://mz.tshe.cn/restauantCH/food/getInfoByTypeKw',{
                        type:this.form.typename,
                        Kw:this.input
                    })
                        .then((res)=>{
                            const that=this;
                            that.list=res.data.data;
                            that.totalNum=res.data.data.length;
                        })
                }
            },
//添加到购物车
            addToShoppingCart(index, row) {  //添加到购物车
                row.foodNum++;

                axios.post('https://mz.tshe.cn/restauantCH/shoppingCart/getInfoByKw',{
                    Kw: Cookies.get('username'),
                })
                    .then((res)=>{
                        for(var i=0;i<res.data.msg.length;i++){
                            if(res.data.msg[i].shoppingCartName==row.name){
                                this.status=true;
                            }
                        }
                        if(this.status!=true){//如果购物车表里 【不存在要添加的信息,则添加】

                            axios.post('https://mz.tshe.cn/restauantCH/shoppingCart/add', {
                                _id: row._id,
                                userName: Cookies.get('username'),
                                shoppingCartName: row.name,  //商品名字
                                shoppingCatNum:row.foodNum, //数量
                                shoppingCartPrice: row.price,//单价
                                shoppingCartPriceTotal: row.price //总价
                            })
                                .then(() => {
                                    this.$message.success('添加购物车成功！');
                                })
                        }
                        else{//如果存在则修改数量
                            //修改数量之前需要做个判断，因为你不知道是修改购物车数组里面的哪条数据，
                            // 只有【名字】符合点击添加的那条数据，才可以进行修改
                            for(var j=0;j<res.data.msg.length;j++){
                                //if(修改数量数据.name==row.name)，则进行修改操作
                                if(res.data.msg[j].shoppingCartName==row.name){
                                    axios.post('https://mz.tshe.cn/restauantCH/shoppingCart/updateOne',{
                                        _id:res.data.msg[j]._id,
                                        userName:Cookies.get('username'),
                                        shoppingCartName:row.name,
                                        shoppingCatNum:res.data.msg[j].shoppingCatNum+1,
                                        shoppingCartPrice:row.price
                                    })
                                        .then((res)=>{
                                            this.$message.success('添加购物车成功！');
                                        })
                                }
                            }
                        }
                        this.status=false; //每次执行完逻辑，重置状态；否则第二个添加不进去，就变成了覆盖
                    })
            },
//图片上传-操作
            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');
                console.log(fileList,'fileList');
                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;
            },
//分类查询
            changeType(){
                axios.post('https://mz.tshe.cn/restauantCH/food/getInfoByType',{
                    typename:this.form.typename
                })
                    .then((res)=>{
                        this.totalNum=res.data.getTypeListLength;
                        this.list=res.data.data;
                    })
            }
        }
    }
</script>

<style>

    h1 {
        text-align: center;
        color: #fbac1a;
    }
    .demonstration {
        color: #d13005;
        font-family: 楷体;
    }
    .block {
        text-align: center;
    }
    footer {
        background-color: #222222;
        padding: 10px ;
        color: skyblue;
        text-align: center;
    }
    .el-dropdown-link {
        cursor: pointer;
        color: #409EFF;
    }
    .el-icon-arrow-down {
        font-size: 12px;
    }
</style>


