<template>
    <div>
        <form-wizard color="#7367F0" :title="null" :subtitle="null" layout="vertical" finish-button-text="完成" next-button-text="下一頁"
            back-button-text="前一頁" class="wizard-vertical mb-3" @on-complete="formSubmitted">

            <tab-content title="新增活動">

                <b-form @submit.prevent>
                    <b-row>
                        <b-col cols="12">
                            <b-form-group label="活動名稱" label-for="activity-name" label-cols-md="4">
                                <b-form-input v-model="activity_name" id="activity-name" placeholder="活動名稱" />
                            </b-form-group>
                        </b-col>
                        <b-col cols="12">
                            <b-form-group label="活動時間" label-for="date" label-cols-md="4">
                                <b-form-input v-model="date" id="date" type="date" placeholder="活動時間" />
                            </b-form-group>
                        </b-col>
                        <b-col cols="12">
                            <b-form-group label="活動地點" label-for="place" label-cols-md="4">
                                <b-form-input v-model="place" id="place" placeholder="活動地點" />
                            </b-form-group>
                        </b-col>
                        <b-col cols="12">
                            <b-form-group label="報名截止時間" label-for="deadline" label-cols-md="4">
                                <b-form-input v-model="deadline" id="deadline" type="time" placeholder="報名截止時間" />
                            </b-form-group>
                        </b-col>

                        <!-- submit and reset -->
                        <b-col offset-md="4">
                            <b-button v-ripple.400="'rgba(255, 255, 255, 0.15)'" type="submit" variant="primary"
                                class="mr-1" @click="postData">
                                送出
                            </b-button>
                            <b-button v-ripple.400="'rgba(186, 191, 199, 0.15)'" type="reset" variant="outline-secondary">
                                取消
                            </b-button>
                        </b-col>
                    </b-row>
                </b-form>

            </tab-content>

            <tab-content title="匯入獎項列表">
                <b-row>
                    <b-col>
                        <b-card title="匯入獎項列表">
                            <b-form-file ref="prizeList" placeholder="請將檔案拉至此處或是點擊欄位選擇檔案"
                                drop-placeholder="Drop file here..." accept=".xls, .xlsx, .csv"
                                @change="importFile($event, 'prize')"></b-form-file>
                        </b-card>
                    </b-col>
                </b-row>
            </tab-content>

            <tab-content title="匯入來賓列表">
                <b-row>
                    <b-col>
                        <b-card title="匯入來賓列表">
                            <b-form-file ref="guestList" placeholder="請將檔案拉至此處或是點擊欄位選擇檔案"
                                drop-placeholder="Drop file here..." accept=".xls, .xlsx, .csv"
                                @change="importFile($event, 'guest')"></b-form-file>
                        </b-card>
                    </b-col>
                </b-row>
            </tab-content>

        </form-wizard>

        <b-modal ref="confirm-modal" title="成功設定活動" centered ok-only ok-title="確認">
            <b-card-text>
                已成功設定活動資訊!
            </b-card-text>
        </b-modal>

        <b-modal ref="insert-success-modal" title="成功上傳" ok-only ok-title="確認">
            <b-card-text>
                成功上傳資料。
            </b-card-text>
        </b-modal>

        <b-modal ref="insert-fail-modal" title="沒有中獎" ok-only ok-title="確認">
            <b-card-text>
                上傳資料失敗，{{ errorText }}。
            </b-card-text>
        </b-modal>
</div>
</template>

<script>
import { FormWizard, TabContent } from 'vue-form-wizard'
import vSelect from 'vue-select'
import 'vue-form-wizard/dist/vue-form-wizard.min.css'
import ToastificationContent from '@core/components/toastification/ToastificationContent.vue'
import BCardCode from '@core/components/b-card-code'
import {
    BRow, BCol, BFormGroup, BFormInput, BFormCheckbox, BForm, BButton, BFormFile, BModal, BCardText, BCard
} from 'bootstrap-vue'
import Ripple from 'vue-ripple-directive'
import useJwt from '@/auth/jwt/useJwt'
import { getUserData } from '@/auth/utils'


export default {
    components: {
        FormWizard,
        TabContent,
        BCardCode,
        BRow,
        BCol,
        BFormGroup,
        BFormInput,
        BFormCheckbox,
        BForm,
        BButton,
        BFormFile,
        BModal,
        BCardText,
        BCard,
        vSelect,
        ToastificationContent,
    },
    directives: {
        Ripple,
    },
    data() {
        return {
            userData: getUserData(),
            activity_name: '',
            date: '',
            place: '',
            deadline: '',
            isSuccess: false,
            errorText: '',
        }
    },
    created() {
        useJwt.postData('/api/activity/show', { 'activity_id': this.$route.params.activity_id }).then(response => {
            this.activity_name = response.data.activity_name;
            this.date = response.data.date;
            this.place = response.data.place;
            this.deadline = response.data.deadline.split(' ')[1];
        }).catch(error => {
            console.log(error);
        })
    },
    methods: {
        postData() {
            useJwt.postData('/api/activity/update',
                {
                    'activity_id': this.$route.params.activity_id,
                    'activity_name': this.activity_name,
                    'date': this.date,
                    'place': this.place,
                    'user_id': this.userData.user_id,
                    'deadline': this.date + ' ' + this.deadline
                }).then(response => {
                    this.$refs['confirm-modal'].toggle();
                }).catch(error => {
                    console.log("error: " + error);
                })
        },
        importFile(event, option) {
            let refOption = option + 'List';
            let formData = new FormData();
            formData.append('file', event.target.files[0]);
            formData.append('option', option);
            formData.append('activity_id', this.$route.params.activity_id);
            useJwt.postData('/api/activity/uploadFile', formData).then(response => {
                this.isSuccess = response.data.isSuccess;
                if (this.isSuccess == true) {
                    this.$refs['insert-success-modal'].toggle();
                } else if (this.isSuccess == false) {
                    this.errorText = '匯入Excel檔案錯誤';
                    this.$refs['insert-fail-modal'].toggle();
                }
                this.$refs[refOption].reset();
            }).catch(error => {
                console.log(error);
                this.errorText = error;
                this.$refs['insert-fail-modal'].toggle();
                this.$refs[refOption].reset();
            });
        },
        formSubmitted() {
            this.$toast({
                component: ToastificationContent,
                props: {
                    title: '資料上傳完成',
                    icon: 'EditIcon',
                    variant: 'success',
                },
            })
        },
    }
}
</script>

<style lang="scss">
@import '~@resources/scss/vue/libs/vue-wizard.scss';
@import '~@resources/scss/vue/libs/vue-select.scss';
</style>
