<template>
    <el-dialog :title="title"  v-if="visible" :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()"  v-if="!isDetails">新增</el-button>
            
             <span>&nbsp;&nbsp;&nbsp;&nbsp;委外总数： {{  totalCount }}</span>
             
            <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="请选择日期">
                            </el-date-picker>
                        </el-form-item>
                    </template></el-table-column>

                <el-table-column label="操作" prop="action" width="80" v-if="!isDetails">
                    <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" v-if="!isDetails">
            <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: {
    },

    props: {
    
    },
    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'
                }
            },

            totalCount: 0,
            isDetails: false



        }
    },

    watch: {

    },
    methods: {



        open(row, type) {
        
            this.totalCount = row.totalCount
            this.form.timeList = []

            this.visible = true
            this.isDetails = false
            if(type == 'details') {
                this.form.timeList = row.timeList
                this.isDetails = true
                this.$forceUpdate()
            }
           

        },


        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) {
                    this.$emit('chooseTime', this.form.timeList)
                    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>
  