<template>
    <el-dialog :title="title" :visible.sync="visible" :before-close="handleClose" :close-on-click-modal="false"
        :close-on-press-escape="false" append-to-body width="35%">

        <el-form :model="form" ref="tableForm" class="tableForm" :rules="tableFormRules">
            <el-button type="primary" size="small" style="margin-bottom: 10px" @click="handleAdd()">新增</el-button>
            <el-table ref="multipleTable" :data="form.timeList" tooltip-effect="dark" style="width: 100%" stripe
                :header-cell-style="{ background: '#EEEEEE', border: 'none' }">



                <el-table-column label="数量" prop="purchaseQuantity">
                    <template slot-scope="{ row, $index }">
                        <el-form-item :prop="'timeList.' + $index + '.purchaseQuantity'"
                            :rules="tableFormRules.purchaseQuantity">

                            <el-input placeholder="请输入" clearable v-model="row.purchaseQuantity"></el-input>
                        </el-form-item>

                    </template>
                </el-table-column>



                <el-table-column label="到货时间">
                    <template slot-scope="{ row, $index }">
                        <el-form-item :prop="'timeList.' + $index + '.requireDeliveryTime'"
                            :rules="tableFormRules.requireDeliveryTime">
                            <el-date-picker clearable v-model="row.requireDeliveryTime" value-format="timestamp"
                                placeholder="请选择日期" :pickerOptions="{
                                    disabledDate: (time) =>
                                        time.getTime() <
                                        new Date(new Date().setHours(0, 0, 0, 0)).getTime()
                                }">
                            </el-date-picker>
                        </el-form-item>
                    </template></el-table-column>

                <el-table-column label="操作" prop="action" width="80">
                    <template slot-scope="{ $index }">
                        <el-link type="primary" :underline="false" @click="handleDel($index)">删除</el-link>
                    </template>
                </el-table-column>


            </el-table>

        </el-form>




        <div class="btns">
            <el-button type="primary" size="small" @click="handleOk">确认</el-button>
            <el-button size="small" @click="handleClose">取消</el-button>
        </div>
    </el-dialog>
</template>

<script>




export default {
    components: {
    },
    data() {
        return {
            visible: false,
            title: '设置分批时间',

            current: null,
            form: {
                timeList: [
                    {
                        requireDeliveryTime: null,
                        purchaseQuantity: null
                    }
                ]
            },

            tableFormRules: {
                purchaseQuantity: {
                    required: true,
                    message: '请输入数量',
                    trigger: 'blur'
                },

                requireDeliveryTime: {
                    required: true,
                    message: '请选择日期',
                    trigger: 'change'
                }
            },
            currentIndex: ''


        }
    },

    watch: {

    },
    methods: {

        open(row, index) {
            console.log(row, 'row', index)
            if (row) {
                let row1 = JSON.parse(JSON.stringify(row))
                this.form.timeList = row1.timeList || []
                this.current = row1;
                this.currentIndex = index;
            }
            this.visible = true
        },


        handleAdd() {
            this.form.timeList.push({
                requireDeliveryTime: null,
                purchaseQuantity: null
            })
        },

        handleDel(index) {
            this.form.timeList.splice(index, 1)
        },


        handleOk() {
            this.$refs.tableForm.validate((valid) => {
                if (valid) {
                    const clonedTimeList = JSON.parse(JSON.stringify(this.form.timeList));
                    this.$emit('chooseTime', this.current, clonedTimeList, this.currentIndex);
                    this.handleClose();
                }
            });
        },




        handleClose() {
            this.visible = false
            this.form.timeList = [{
                requireDeliveryTime: null,
                purchaseQuantity: null
            }];
        },


    }
}
</script>

<style lang="scss" scoped>
.btns {
    margin-top: 20px;
    text-align: center;
}

.el-form-item {
    margin-bottom: 20px !important;
}
</style>