﻿<template>
    <div class="container-fluid">

        <v-card>
            <v-card-title class="bg-primary white--text text-center">
                <h5 class="mb-0">客堂登錄</h5>
                <div class="ms-auto">
                    <v-btn @click.prevent="savePreOrder()">儲存</v-btn>
                    <v-btn @click.prevent="back01()">返回</v-btn>
                </div>
            </v-card-title>
            <v-card-text>
                <v-row>
                    <v-col cols="12" md="4">

                        <v-text-field v-model="formData.f_name"
                                      :readonly="true"
                                      label="信眾">
                            <v-icon slot="append" style="cursor:pointer" @click.prevent="pickFollower"
                                    color="red">
                                mdi-account
                            </v-icon>
                        </v-text-field>
                    </v-col>

                    <v-col cols="12" md="4">
                        <v-text-field v-model="formData.item_count"
                                      label="功德項目數"></v-text-field>
                    </v-col>
                    <v-col cols="12" md="4">
                        <v-text-field v-model="formData.total_amt"
                                      label="總金額"></v-text-field>
                    </v-col>
                    <v-col cols="12" md="8">
                        <v-text-field v-model="formData.act_name"
                                      :readonly="true"
                                      label="法會/活動">
                            <v-icon slot="append" style="cursor:pointer" @click.prevent="pickAct"
                                    color="red">
                                mdi-selection-search
                            </v-icon>
                        </v-text-field>
                    </v-col>
                    <v-col cols="12" md="4">
                        <v-text-field v-model="formData.order_no"
                                      :readonly="true" :disabled="true"
                                      label="報名單號"></v-text-field>
                    </v-col>
                </v-row>
            </v-card-text>
        </v-card>

        <v-dialog v-model="picker.show" class="container-fluid">
            <template>
                <v-card>
                    <v-card-title>
                        <div class="row">
                            <div class="col-12">
                                <v-data-table v-model="picker.data_table.selected"
                                              :items="picker.data_table.list"
                                              :options.sync="options"
                                              :headers="picker.data_table.header"
                                              :footer-props="picker.data_table.footer"
                                              :server-items-length="picker.data_table.count"
                                              :loading="picker.data_table.loading"
                                              :single-select="picker.data_table.singleSelect"
                                              hide-default-footer
                                              :page.sync="picker.data_table.page"
                                              :items-per-page.sync="picker.data_table.pageSize"
                                              class="elevation-1"
                                              @click:row="handleRowClick">
                                </v-data-table>
                            </div>
                            <div class="col-12">
                                <v-container>
                                    <v-row class="align-baseline">
                                        <v-col cols="12" md="9">
                                            <v-pagination v-model="picker.data_table.page"
                                                          :length="pageCount">
                                            </v-pagination>
                                        </v-col>
                                        <v-col class="text-truncate text-right" cols="12" md="2">
                                            共 {{ picker.data_table.count }} 筆, 頁數:
                                        </v-col>
                                        <v-col cols="6" md="1">
                                            <v-text-field v-model="picker.data_table.page"
                                                          type="number"
                                                          hide-details
                                                          dense
                                                          min="1"
                                                          :max="pageCount"
                                                          @input="data_table.page = parseInt($event, 10)"></v-text-field>
                                        </v-col>
                                    </v-row>
                                </v-container>
                            </div>
                        </div>

                    </v-card-title>
                    <v-card-text>
                        <v-btn @click.prevent="picker.show=false">關閉</v-btn>
                        <v-btn @click.prevent="picker_confirm()">確認</v-btn>
                    </v-card-text>
                </v-card>
            </template>
        </v-dialog>


        <v-snackbar v-model="snackbar.show">
            {{ snackbar.text }}

            <template v-slot:action="{ attrs }">
                <v-btn color="pink"
                       text
                       v-bind="attrs"
                       @click="snackbar.show = false">
                    Close
                </v-btn>
            </template>
        </v-snackbar>
    </div>

   
</template>

<script>
    module.exports = {
        props: {
            num: {
                type: Number // num
            }
        },
        data() {
            return {
                options: { multiSort: false },
                formData: {
                    f_num: 0,
                    order_no: "自動編號",
                    item_count: 0,
                    total_amt: 0,
                    act_num: 0,
                    admin_num: 0,
                    receipt_no: "",
                    f_name: "",
                    act_name:""
                },
                picker: {
                    show: false,
                    target: "",
                    data_table: {
                        loading: false,
                        list: [],
                        selected: [],
                        singleSelect: false,
                        count: 0,
                        page: 1,
                        pageSize: 10,
                        header: [

                        ],
                        footer: {
                            showFirstLastPage: true,
                            itemsPerPageOptions: [5, 10, 20, 30],
                        },
                    }
                },
                snackbar: {
                    show: false,
                    text: "",
                },
            }
        },
        watch: {
            options: {
                handler() {
                    if (this.picker.target === "follower") {
                        this.getFollowers()
                    } else if (this.picker.target === "act") {
                        this.getActivity()
                    }
                },
                deep: true,
            },

        },
        methods: {
            handleRowClick(item, row) {
                if (this.picker.target === "follower") {
                    this.formData.f_num = item.num;
                    this.formData.f_name = item.u_name;
                } else if (this.picker.target === "act") {
                    this.formData.act_num = item.num;
                    this.formData.act_name = item.subject;
                }
                this.picker.show = false;
            },
            savePreOrder() { 
                axios
                    .post(HTTP_HOST + 'api/preOrder/SavePreOrder', this.formData)
                    .then(response => {
                        this.snackbar.text = response.data.message;
                        this.snackbar.show = true;
                        if (response.data.result=="Y") {
                            this.$emit('custom-event', { action: 'list' });
                        }
                    }).catch(error => console.log(error));
            },
            back01() {
                this.$emit('custom-event', { action: 'list' });
            },
            getFollowers(clearPage=false) {
                const { sortBy, sortDesc, page, itemsPerPage } = this.options
                const params = {
                    sortBy: "num", sortDesc: false,
                    page: page, pageSize: itemsPerPage
                };
                this.picker.data_table.loading = true;
                let search = {}
                axios
                    .post(HTTP_HOST + 'api/follower/GetList', search, { params: params })
                    .then(response => {
                        console.log(response)
                        this.picker.data_table.list = response.data.list
                        this.picker.data_table.count = response.data.count;
                        this.picker.data_table.loading = false

                        const dataToStore = JSON.stringify(this.data_table);
                        //sessionStorage.setItem("order_list_cache", dataToStore);
                    })
                    .catch(error => console.log(error))
            },
            getActivity(clearPage=false) {
                const { sortBy, sortDesc, page, itemsPerPage } = this.options
                const params = {
                    sortBy: "num", sortDesc: false,
                    page: page, pageSize: itemsPerPage
                };
                this.picker.data_table.loading = true;
                let search = {}
                axios
                    .post(HTTP_HOST + 'api/activity/GetListNew', search, { params: params })
                    .then(response => {
                        console.log(response)
                        this.picker.data_table.list = response.data.list
                        this.picker.data_table.count = response.data.count;
                        this.picker.data_table.loading = false

                        const dataToStore = JSON.stringify(this.data_table);
                        //sessionStorage.setItem("order_list_cache", dataToStore);
                    })
                    .catch(error => console.log(error))
            },
            pickFollower() {
                this.picker.data_table.list.length = 0;
                this.picker.show = true;
                this.picker.target = "follower";
                this.picker.data_table.header = [
                    { text: '信眾編號', value: 'num' },
                    { text: '姓名', value: 'u_name' },
                    { text: '電話', value: 'phoneDes' },
                    { text: '行動電話', value: 'cellphoneDes' },
                    { text: '', value: 'slot_btn', sortable: false, align: 'end' }
                ]
                this.getFollowers(false);
            },
            pickAct() {
                this.picker.data_table.list.length = 0;
                this.picker.show = true;
                this.picker.target = "act";
                this.picker.data_table.header = [
                    { text: '活動編號', value: 'num' },
                    { text: '名稱', value: 'subject' },
                    { text: '報名截止日', value: 'dueDate' },
                    { text: '', value: 'slot_btn', sortable: false, align: 'end' }
                ]
                this.getActivity(false);
            },
            picker_confirm() {

            }
        },
        computed: {
            pageCount() {
                return Math.ceil(this.picker.data_table.count / this.picker.data_table.pageSize)
            },
        }
    };
</script>