<template>
    <div>
        <a-card>
            <h3 style="font-weight: bold;">餐点信息</h3>
            <a-form-model ref="ruleForm" :model="form" :rules="rules">
                <a-row>
                    <a-col :span="8">
                        <a-form-model-item ref="staffId" label="餐点编号">
                            <a-input :disabled="true" style="width: 250px" v-model="form.staffId" />
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-model-item ref="staffId" label="创建时间">
                            <a-date-picker v-model="form.startValue" show-time format="YYYY-MM-DD HH:mm:ss"
                                value-format="YYYY-MM-DD HH:mm:ss" placeholder="创建时间" />
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-model-item label="状态" prop="staffId">
                            <a-select v-model="form.staffId" style="width: 250px;" placeholder="请选择">
                                <a-select-option v-for="(item,i) in provinceData" :key="item.id">
                                    {{ item.name }}
                                </a-select-option>
                            </a-select>
                        </a-form-model-item>
                    </a-col>
                </a-row>
                <a-row>
                    <a-col :span="8">
                        <a-form-model-item ref="staffId" label="餐点" prop="staffId">
                            <a-input style="width: 250px;" v-model="form.staffId" />
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-model-item label="线上售餐" prop="staffId">
                            <a-select v-model="form.staffId" style="width: 250px;" placeholder="请选择">
                                <a-select-option v-for="(item,i) in provinceData" :key="item.id">
                                    {{ item.name }}
                                </a-select-option>
                            </a-select>
                        </a-form-model-item>
                    </a-col>

                </a-row>

            </a-form-model>
        </a-card>
        <a-card>
            <h3 style="font-weight: bold;">线上售餐设置</h3>
            <a-form-model ref="ruleForm" :model="form" :rules="rules">
                <a-col :span="8">
                    <a-form-model-item ref="staffId" label="餐点编号" prop="staffId">
                        <a-input style="width: 250px" v-model="form.staffId" />
                    </a-form-model-item>
                </a-col>
                <a-col :span="8">
                    <a-form-model-item ref="staffId" label="预定时间" prop="staffId">
                        <a-time-picker value-format="HH:mm:ss" v-model="form.strDate" @change="selectStr()" /> ---
                        <a-time-picker value-format="HH:mm:ss" v-model="form.entDate" @change="selectStr()" />
                    </a-form-model-item>
                </a-col>
                <a-col :span="8">
                    <a-form-model-item ref="staffId" label="备餐时间（分钟数）" prop="staffId">
                        <a-input :disabled="true" style="width: 250px" v-model="form.minutes" />
                    </a-form-model-item>
                </a-col>
            </a-form-model>
        </a-card>


        <div style="float: right; margin:20px;">
            <a-button @click="$router.back(-1)">
                返回
            </a-button>
            <a-button type="primary" style="margin-left: 10px;" @click="onSubmit">
                保存
            </a-button>
        </div>

    </div>

</template>

<script>
    import '@/assets/less/TableExpand.less'
    import moment from 'moment';
    // import { JeecgListMixin } from '@/mixins/JeecgListMixin'

    export default {
        name: "",
        // mixins: [JeecgListMixin],
        components: {

        },
        created() {

        },

        data() {
            return {
                form: {
                    staffId: '123',
                    startValue: "",
                    strDate: "",
                    entDate: "",
                    minutes: "",
                },
                provinceData: [
                    { id: 0, name: "启用" },
                    { id: 1, name: "禁用" }
                ],

                rules: {
                    staffId: [
                        { required: true, message: '请输入姓名', trigger: 'blur' },

                    ],
                },
                url: {
                    list: "/veri/veriDetail/list",
                    delete: "/veri/veriDetail/delete",
                    deleteBatch: "/veri/veriDetail/deleteBatch",
                    exportXlsUrl: "veri/veriDetail/exportXls",
                    importExcelUrl: "veri/veriDetail/importExcel",
                },
            }
        },
        computed: {

        },
        methods: {
            moment,

            onSubmit() {
                this.$refs.ruleForm.validate(valid => {
                    if (valid) {
                        console.log(this.form)
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            selectStr() {
                console.log(this.form.strDate)

                if (this.form.strDate && this.form.entDate) {
                    if (this.form.strDate > this.form.entDate) {
                        this.$message.error("开始时间不得大于结束时间")
                        this.form.entDate = ""
                        this.form.strDate = ""
                    }
                    var time1 = this.form.strDate;
                    var time2 = this.form.entDate;
                    var begin1 = time1.substr(0, 8).split(":");
                    var begin2 = time2.substr(0, 8).split(":");
                    console.log((begin2[0] - begin1[0]) * 60)
                    var fenzhong = ((begin2[0] - begin1[0]) * 60) + (begin2[1] - begin1[1])
                    console.log("fenzhong", fenzhong)
                    this.form.minutes = fenzhong
                }

            }

        }
    }
</script>
<style scoped>
    @import '~@assets/less/common.less';
</style>