﻿<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>
    </div>

    <v-dialog v-model="picker.show" class="dialog_width">
        <template>
            <v-card>
                <v-card-title>
                    <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"
                                  show-select
                                  hide-default-footer
                                  :page.sync="picker.data_table.page"
                                  :items-per-page.sync="picker.data_table.pageSize"
                                  class="elevation-1">
                        </v-data-table>
                </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>
</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: true,
                        list: [],
                        selected: [],
                        singleSelect: false,
                        count: 0,
                        page: 1,
                        pageSize: 10,
                        header: [

                        ],
                        footer: {
                            showFirstLastPage: true,
                            itemsPerPageOptions: [5, 10, 20, 30],
                        },
                    }
                }
            }
        },
        methods: {
            savePreOrder() {

            },
            back01() {
                this.$emit('custom-event', { action: 'list' });
            },
            pickFollower() {
                this.picker.show = true;
                this.picker.target = "follower";
                this.picker.data_table.header = [
                    { text: '信眾編號', value: 'num' },
                    { text: '姓名', value: 'u_name' },
                    { text: '電話', value: 'phone' },
                    { text: '行動電話', value: 'cellphone' },
                    { text: '', value: 'slot_btn', sortable: false, align: 'end' }
                ]
            },
            pickAct() {
                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' }
                ]
            },
            picker_confirm() {

            }
        }
    };
</script>