﻿<template>
    <div class="container-fluid">
        <v-card>
            <v-card-title class="bg-primary white--text text-center">
                <h4>批次報名</h4>
                <div class="ms-auto">
                    <v-btn @click.prevent="batchSave()">儲存</v-btn>
                    <v-btn @click.prevent="back01()">返回</v-btn>
                </div>
            </v-card-title>
            <v-card-text>
                <v-select :items="data_table.list"
                          label="選擇法會"
                          item-text="subject"
                          item-value="num" v-model="selected">
                </v-select>
                <v-data-table v-model="detail_table.selected"
                              :items="detail_table.list"
                              :headers="detail_table.header"
                              :footer-props="detail_table.footer"
                              :server-items-length="detail_table.count"
                              :loading="detail_table.loading"
                              show-select
                              item-key="order_no"
                              hide-default-footer
                              :page.sync="detail_table.page"
                              :items-per-page.sync="detail_table.pageSize"
                              class="elevation-1">
                    <template #item.slot_btn="{ item }">
                    </template>
                </v-data-table>
            </v-card-text>
        </v-card>
        <v-dialog v-model="message_dialog.show" class="dialog_width">
            <template>
                <v-card>
                    <v-card-title>
                        {{ message_dialog.message }}
                    </v-card-title>
                    <v-card-text>
                        <v-btn @click.prevent="message_dialog.show=false" v-if="!message_dialog.show_confirm">關閉</v-btn>
                    </v-card-text>
                </v-card>
            </template>
        </v-dialog>
    </div>
</template>
<script>
    module.exports = {
        props: {
            num: {
                type: Number
            }
        },
        data() {
            return {
                options: { multiSort: false },
                search_options: { multiSort: false },
                message_dialog: { show: false, show_confirm: false, message: "" },
                data_table: {
                    loading: true,
                    list: [],
                    selected: [],
                    singleSelect: false,
                    count: 0,
                    page: 1,
                    pageSize: -1,
                },
                selected: null,
                detail_table: {
                    loading: false,
                    list: [],
                    selected: [],
                    singleSelect: false,
                    count: 0,
                    page: 1,
                    pageSize: -1,
                    header: [
                        { text: '單號', value: 'order_no' },
                        { text: '信眾號碼', value: 'f_num' },
                        { text: '姓名', value: 'u_name' },
                        { text: '報名日期', value: 'up_time' },
                        { text: '單據狀態', value: 'keyin1_txt', align: 'start' },
                        { text: '', value: 'slot_btn', sortable: false, align: 'end' }
                    ],
                    footer: {
                        showFirstLastPage: true,
                        itemsPerPageOptions: [5, 10, 20, 30],
                    },
                },
                search: {subject:""}
            }
        },
        activated() {
            this.getActivity()
        },
        watch: {
            selected: {
                handler() {
                    this.getProOrder()
                },
                deep: true,
            },
        },
        methods: {
            batchSave() {//批次存檔
                const orders = []
                this.detail_table.selected.forEach(x => {
                    orders.push(x.order_no)
                })
                const po = {
                    old_activity_num: this.selected,
                    activity_num: this.num,
                    orders: orders
                }
                axios
                    .post(HTTP_HOST + 'api/order/BatchSave', po)
                    .then(response => {
                        this.message_dialog.show = true;
                        
                        if (response.data.result == "Y") {
                            let rp = response.data.data;
                            let other = ""
                            if (rp && rp.length>0) {
                                other = rp.join(",")
                                other = ",以下信眾號碼已經報過名:" + other;
                            }
                            this.message_dialog.message = response.data.message + other;
                            if (rp.length > 0) {
                            } else {
                                this.$emit('custom-event', { action: 'signup1', item: this.num });
                            }
                        } else {
                            this.message_dialog.message = response.data.message
                        }
                    }).catch(error => console.log(error))
            },
            back01() {//返回
                this.$emit('custom-event', { action: 'signup1', item: this.num });
            },
            getActivity() {//撈法會資料
                //const { sortBy, sortDesc, page, itemsPerPage } = this.options
                const params = {
                    sortBy: "startDate_solar", sortDesc: true,
                    page: 1, pageSize: -1
                };
                this.data_table.loading = true
                const self = this
                axios
                    .post(HTTP_HOST + 'api/activity/GetListNew', this.search, { params: params })
                    .then(response => {
                        this.data_table.list = response.data.list
                        this.data_table.list=this.data_table.list.filter(x=>x.num!=self.num)

                        this.data_table.count = response.data.count;
                        this.data_table.loading = false
                    })
                    .catch(error => console.log(error))
            },
            getProOrder() {//撈報名資料，勾選要報名的人
                const { sortBy, sortDesc, page, itemsPerPage } = this.options
                const params = {
                    sortBy: "order_no", sortDesc: true,
                    page: 1, pageSize: -1
                };
                let newsearch = {
                    activity_num: this.selected
                }
                this.detail_table.loading = true
               // sessionStorage.setItem('orderpage', '1');// clearpage ? '1' : page
                axios
                    .post(HTTP_HOST + 'api/order/GetList', newsearch, { params: params })
                    .then(response => {
                        this.detail_table.list = response.data.list
                        this.detail_table.count = response.data.count;
                        this.detail_table.loading = false
                    })
                    .catch(error => console.log(error))
            }
        }
    }
</script>
<style>
    .v-dialog{
        width:80% !important;
    }
</style>