<template>
    <div>
        <span align="center"><h2>Uploaded Supplier Bank Slip</h2></span><br>
        <div align="right">
            <el-button type="primary" icon="el-icon-plus" @click="AddNewDialogVisible = true">Add New</el-button>
        </div><br>
            <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column label="Ref No" sortable></el-table-column>
            <el-table-column label="Amount (RMB)" sortable></el-table-column>
            <el-table-column label="Date" sortable></el-table-column>
            <el-table-column label="Bank Slip File"></el-table-column>
        </el-table><br><br>

    <!-- popup add new dialog -->
    <el-dialog align="center" :visible.sync="AddNewDialogVisible">
        <el-form :label-position="right" label-width="150px">
            <el-form-item label="Select bank slip : " align="left">
                <el-upload class="upload-slip" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" list-type="picture">
                <el-button size="small" type="primary">Click to upload</el-button></el-upload>
            </el-form-item>
            <el-form-item label="For Order No : "><el-input></el-input></el-form-item>
            <el-form-item label="Amount : "><el-input></el-input></el-form-item>
            <el-form-item label="Date : " align="left"><el-date-picker v-model="date" type="date" placeholder="Pick a date"></el-date-picker></el-form-item>
        </el-form>
        <div align="center">
            <el-button type="text" @click="AddNewDialogVisible = false">Cancel</el-button>
            <el-button type="primary" @click="AddNewDialogVisible = false; DoneAddNewDialogVisible = true">Submit</el-button>
        </div>
    </el-dialog>
<!-- popup add new dialog end -->
<!-- popup done upload -->
      <el-dialog align="center" :visible.sync="DoneAddNewDialogVisible" width="30%">
        <span>Bank Slip Successfully Updated</span><br><br>
        <div align="center">
            <el-button type="primary" @click="DoneAddNewDialogVisible = false">Close</el-button>
        </div>
      </el-dialog>
<!-- popup done upload end -->
    </div>
</template>

<script>
export default {
    data() {
      return {
        AddNewDialogVisible: false,
        DoneAddNewDialogVisible: false,
        date: ''
      }
    },
    methods: {
        handlePreview(file) {
        console.log(file);
      }
    }
}
</script>

<style>

</style>
