<template>
<a-space direction="vertical" style="width:100%">
    <a-card title="商品规格" style="width: 100%">
        <a-row :gutter="[6,38]" v-for="(item, index) in specsData" :key="item.id">
            <a-col :span="4">
                <a-input placeholder="商品规格" v-model="item.specs"></a-input>
            </a-col>
            <a-col :span="4">
                <a-input-number :min="0.0" style="width:100%" v-model="item.number"></a-input-number>
            </a-col>
            <a-col :span="2">
                <a-button @click="delSpecs(index)">删除</a-button>
            </a-col>
        </a-row>
        <a-row>
            <a-col>
                <a-button @click="addSpecs">添加规格</a-button>
            </a-col>
        </a-row>
    </a-card>
    <a-card title="商品口味" style="width: 100%">
        <a-row :gutter="[6,38]" v-for="(item, index) in specsData" :key="item.id">
            <a-col :span="4">
                <a-input placeholder="商品规格" v-model="item.specs"></a-input>
            </a-col>
            <a-col :span="4">
                <a-input-number :min="0.0" style="width:100%" v-model="item.number"></a-input-number>
            </a-col>
            <a-col :span="2">
                <a-button @click="delSpecs(index)">删除</a-button>
            </a-col>
        </a-row>
        <a-row>
            <a-col>
                <a-button @click="addTasta">添加口味</a-button>
            </a-col>
        </a-row>
    </a-card>
    <a-card title="商品加料" style="width: 100%">
        <a-row :gutter="[6,38]" v-for="(item, index) in specsData" :key="item.id">
            <a-col :span="4">
                <a-input placeholder="商品规格" v-model="item.specs"></a-input>
            </a-col>
            <a-col :span="4">
                <a-input-number :min="0.0" style="width:100%" v-model="item.number"></a-input-number>
            </a-col>
            <a-col :span="2">
                <a-button @click="delSpecs(index)">删除</a-button>
            </a-col>
        </a-row>
        <a-row>
            <a-col>
                <a-button @click="addMaterial">选择加料</a-button>
            </a-col>
        </a-row>
    </a-card>
    <a-card style="width: 100%">
        <a-row>
            <a-col :span="2">是否启用厨打</a-col>
            <a-col :span="22">
                <a-switch checked-children="是" un-checked-children="否" v-model="modelData.beat" />
            </a-col>
        </a-row>
        <a-row>
            <a-col :span="2">是否计重</a-col>
            <a-col :span="22">
                <a-switch checked-children="是" un-checked-children="否" v-model="modelData.weighDown" />
            </a-col>
        </a-row>
    </a-card>
    <a-button>确认</a-button>
    <j-modal :title="'口味选择'" :width="'70%'" :visible="tastaVisible" switchFullscreen @ok="handleOk" :okButtonProps="{ class:{'jee-hidden': disableSubmit} }" @cancel="tastaVisible=false" cancelText="关闭">
        <tastaTable />
    </j-modal>
    <j-modal :title="'加料选择'" :width="'70%'" :visible="materialVisible" switchFullscreen @ok="handleMateriaOk" :okButtonProps="{ class:{'jee-hidden': disableSubmit} }" @cancel="materialVisible=false" cancelText="关闭">
        <materialTableVue />
    </j-modal>
</a-space>
</template>

<script>
import materialTableVue from './materialTable.vue';
import tastaTable from './tastaTable.vue';
export default {
    components:{
        tastaTable,
        materialTableVue
    },
    data() {
        return {
            specsData: [],
            tastaVisible:false,
            materialVisible:false,
            modelData:{
                beat:true,
                weighDown:false
            },
            disableSubmit: false,
        }
    },
    methods: {
        //删除规格
        delSpecs(index) {
            console.log(index);
            this.specsData.splice(index, 1)
        },
        //添加规格
        addSpecs() {
            this.specsData.push({
                specs: '',
                number: null
            })
        },
        addTasta() {
            this.tastaVisible = true
        },
        handleOk(){
            this.tastaVisible = false
        },
        handleCancel(){},
        //加料
        addMaterial(){
            this.materialVisible = true
        },
        handleMateriaOk(){
            this.materialVisible = false
        }
    }
}
</script>

<style>

</style>
