﻿<template>
    <div class="container-fluid">
        <v-card>
            <v-card-title class="bg-primary white--text text-center">
                        <v-expansion-panels accordion>
                            <v-expansion-panel v-for="(item,i) in 1"
                                               :key="i">
                                <v-expansion-panel-header color="#006fc9"
                                                          class="white--text">
                                    <v-row>
                                        <v-col cols="4" sm="4" md="10">
                                            <label>查詢條件</label>
                                        </v-col>
                                        <v-col cols="8" sm="8" md="2">
                                            <!--<v-btn @click.prevent='fast_signup' class="ms-auto">快速報名</v-btn>-->
                                            <v-btn @click.prevent="back01()" class="ms-auto">返回</v-btn>
                                        </v-col>
                                    </v-row>
                                </v-expansion-panel-header>
                                <v-expansion-panel-content>
                                    <v-row>
                                        <v-col cols="12" sm="12"  md="2">
                                            <v-text-field label="姓名" v-model="search.u_name">

                                            </v-text-field>
                                        </v-col>
                                        <v-col cols="12"  sm="12" md="2">
                                            <v-text-field label="電話" v-model="search.phone">

                                            </v-text-field>
                                        </v-col>
                                        <v-col cols="12"  sm="12" md="2">
                                            <v-text-field label="行動電話" v-model="search.cellphone">

                                            </v-text-field>
                                        </v-col>
                                        <v-col cols="12" sm="12"  md="2">
                                            <v-text-field label="身分證號" v-model="search.id_code">

                                            </v-text-field>
                                        </v-col>
                                        <v-col cols="12"  sm="12" md="4">
                                            <v-btn @click.prevent="getDetail()">查詢</v-btn>
                                            <v-btn @click.prevent="clearSearch()">清空條件</v-btn>
                                        </v-col>
                                    </v-row>
                                </v-expansion-panel-content>
                            </v-expansion-panel>
                        </v-expansion-panels>
            </v-card-title>
            <v-card-text>
                <v-data-table v-model="detail_table.selected"
                              :items="detail_table.list"
                              :search-props="search"
                              item-key="order_no"
                              :options.sync="options"
                              :headers="detail_table.header"
                              :footer-props="detail_table.footer"
                              :server-items-length="detail_table.count"
                              :loading="detail_table.loading"
                              :single-select="detail_table.singleSelect"
                              hide-default-footer
                              :page.sync="detail_table.page"
                              :items-per-page.sync="detail_table.pageSize"
                              disable-sort
                              class="elevation-1">
                   
                    <template #item.slot_btn="{ item }">
                        <!--<a :href="'reg.aspx?order_no='+item.order_no" class="btn btn-outline-secondary btn-sm"><i class="mdi mdi-pencil-box-outline"></i>修改</a>
        <a @click="$root.currentView='step-three';$root.selected_order=item.order_no" class="btn btn-outline-secondary btn-sm">明細</a>
        <a @click="deleteItem(item)" class="btn btn-outline-secondary btn-sm"><i class="mdi mdi-trash-can"></i>刪除</a>-->
                    </template>
                </v-data-table>
                <v-container>
                    <v-row class="align-baseline" wrap>
                        <v-col cols="12" md="9">
                            <v-pagination v-model="detail_table.page"
                                          :length="pageCount">
                            </v-pagination>
                        </v-col>
                        <v-col class="text-truncate text-right" cols="12" md="2">
                            共 {{ detail_table.count }} 筆, 頁數:
                        </v-col>
                        <v-col cols="6" md="1">
                            <v-text-field v-model="detail_table.page"
                                          type="number"
                                          hide-details
                                          dense
                                          min="1"
                                          :max="pageCount"
                                          @input="detail_table.page = parseInt($event, 10)"></v-text-field>
                        </v-col>
                    </v-row>
                </v-container>
                </v-card-text>
</div>
</template>

<script>

    module.exports = {
        props: {
            num: {
                type: Number }
        },
        activated() {
            this.getDetail();
        },

        mounted() {
            this.getDetail();
        },
        data() {
            return {
                options: { multiSort: false },
                search_options: { multiSort: false },
                detail_table: {
                    loading: true,
                    list: [],
                    selected: [],
                    singleSelect: false,
                    count: 0,
                    page: 1,
                    pageSize: 10,
                    header: [
                        { text: '單號', value: 'order_no' },
                        { text: '姓名', value: 'u_name' },
                        { text: '報名日期', value: 'uptime' },
                        { text: '單據狀態', value: 'keyin1_txt', align: 'start' },
                        { text: '', value: 'slot_btn', sortable: false, align: 'end' }
                    ],
                    footer: {
                        showFirstLastPage: true,
                        itemsPerPageOptions: [5, 10, 20, 30],
                    },
                },
                search: {
                    u_name: '',
                    phone: '',
                    cellphone: '',
                    id_code:''
                }
            };
        },
        watch: {
            options: {
                handler() {
                    this.getDetail()
                },
                deep: true,
            },

        },
        filters: {
            timeString(value, myFormat) {
                console.log("timeString:", value, myFormat)
                return value == null || value == "" ? "" : moment(value).format(myFormat || 'YYYY-MM-DD, HH:mm:ss');
            },
        },
        methods: {
            back01() {
                this.$emit('custom-event', { action: 'signup1', item: this.num });
            },
            fast_signup() {
                this.$emit('custom-event', { action: 'add', item: this.num });
            },
            clearSearch() {

            },
            getDetail(clearpage=false) {
                const { sortBy, sortDesc, page, itemsPerPage } = this.options
                const params = {
                    sortBy: sortBy[0], sortDesc: sortDesc[0],
                    page: clearpage ? '1' : page, pageSize: itemsPerPage
                };
                let newsearch = {
                    activity_num: this.num, f_user: {
                        u_name: this.search.u_name, phone: this.search.phone,
                        cellphone: this.search.cellphone, id_code: this.search.id_code
                    }
                }
                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))
            },
        },
        computed: {
            pageCount() {
                return Math.ceil(this.detail_table.count / this.detail_table.pageSize)
            },
        }
    }
</script>