﻿<template>
    <div class="container-fluid">
          <v-expansion-panels accordion>
              <v-expansion-panel v-for="(item,i) in 1"
                                 :key="i">
                  <v-expansion-panel-header>查詢條件</v-expansion-panel-header>
                  <v-expansion-panel-content>
                      <v-row>
                         <!-- <v-col cols="2" md="2">-->
                      
                              <!--<v-text-field label="法會分類">

                              </v-text-field>-->
                          <!--</v-col>-->
                          <v-col cols="2" md="2">
                              <v-text-field label="法會名稱" v-model="search.subject">

                              </v-text-field>
                          </v-col>
                          <v-col cols="2" md="2">
                              <!--<v-text-field label="開始日期" v-model="search.uptime1">

                              </v-text-field>-->
                              <v-menu v-model="startmenu"
                                      :close-on-content-click="false"
                                      :nudge-right="40"
                                      transition="scale-transition"
                                      offset-y
                                      min-width="auto">
                                  <template v-slot:activator="{ on, attrs }">
                                      <v-text-field v-model="search.up_time1"
                                                    label="法會日期"
                                                    prepend-icon="mdi-calendar"
                                                    readonly
                                                    v-bind="attrs"
                                                    v-on="on"></v-text-field>
                                  </template>
                                  <v-date-picker v-model="search.up_time1"
                                                 @input="startmenu = false"></v-date-picker>
                              </v-menu>
                          </v-col>
                          <v-col cols="2" md="2">
                              <v-btn @click.prevent="getDefault()">查詢</v-btn>
                              <v-btn @click.prevent="clearSearch()">清空條件</v-btn>
                          </v-col>
                      </v-row>
                  </v-expansion-panel-content>
              </v-expansion-panel>
          </v-expansion-panels>
        <v-data-table v-model="data_table.selected"
                      :items="data_table.list"
                      item-key="order_no"
                      :options.sync="options"
                      :headers="data_table.header"
                      :footer-props="data_table.footer"
                      :server-items-length="data_table.count"
                      :loading="data_table.loading"
                      :single-select="data_table.singleSelect"
                      hide-default-footer
                      :page.sync="data_table.page"
                      :items-per-page.sync="data_table.pageSize"
                      class="elevation-1">
            <template #item.up_time="{ item }">
                {{ item.up_time|timeString('YYYY/MM/DD') }}
            </template>
            <template #item.u_name="{ item }">
                <a v-if="item.f_num != null && item.activity_num != null" @click="checkInMsg(item)" class="btn btn-outline-secondary btn-sm"><i class="mdi mdi-account-check"></i>報到</a>
                {{ item.u_name }}
            </template>
            <template #item.slot_btn="{ item }">
                <a @click="gotoSignup(item)" class="btn btn-outline-secondary btn-sm">報名</a>
                <a @click="gotoSignupList(item)" class="btn btn-outline-secondary btn-sm">明細</a>
               
            </template>
        </v-data-table>
        <v-container class="container-fluid">
            <v-row class="align-baseline" wrap>
                <v-col cols="12" md="9">
                    <v-pagination v-model="data_table.page"
                                  :length="pageCount">
                    </v-pagination>
                </v-col>
                <v-col class="text-truncate text-right" cols="12" md="2">
                    共 {{ data_table.count }} 筆, 頁數:
                </v-col>
                <v-col cols="6" md="1">
                    <v-text-field v-model="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>
</template>

<script>

    module.exports = {
        props: ['formData'],
        data() {
            return {
                this_act:'',
                options: { multiSort: false },
                search_options: { multiSort: false },
                startmenu: false,
                endmenu: false,
                itemKindList:[],
                data_table: {
                    loading: true,
                    list: [],
                    selected: [],
                    singleSelect: false,
                    count: 0,
                    page: 1,
                    pageSize: 10,
                    header: [
                        { text: '活動分類', value: 'kindsTxt' },
                        { text: '活動名稱', value: 'subject' },
                        { text: '開始日期', value: 'startDate_solar' },
                        { text: '結束日期', value: 'endDate_solar', align: 'start' },
                        { text: '報名人數', value: 'orderCounts' },
                        { text: '', value: 'slot_btn', sortable: false, align: 'end' }
                    ],
                    footer: {
                        showFirstLastPage: true,
                        itemsPerPageOptions: [5, 10, 20, 30],
                    },
                },
                select_act_list: [],
                select_items: {
                    month: [{
                        text: "請選擇",
                        val: 0
                    },],
                    season: [{
                        text: "請選擇",
                        val: 0
                    },],
                },
                search: {
                    keyin1: '',
                    order_no: '',
                    subject: '',
                    u_name: '',
                    up_time1: '',
                    up_time2: '',
                    actItemTxt: '',
                    introducerTxt: '',
                    activity_num: '',
                    country: '',
                    country2: '',
                    hasPrice: '',
                },
                keyin1_items: [//狀態
                    //{ 
                    //text: "請選擇",
                    //val: 0
                    //},
                ],
            };
        },
        mounted() {
            const navEntries = performance.getEntriesByType("navigation");
            const isReload = navEntries.length > 0 && navEntries[0].type === "reload";
            if (isReload) {
                sessionStorage.removeItem("orderpage");
            }
            else {
                const savedPage = parseInt(sessionStorage.getItem('orderpage'));
                if (savedPage) {
                    this.options.page = savedPage;
                }
            }
            this.initKindList()
        },
        watch: {
            options: {
                handler() {
                    this.getDefault()
                },
                deep: true,
            },
            search_options: {
                handler() {
                    this.search_get()
                },
                deep: true,
            },
        },
        methods: {
            initKindList() {
                axios
                    //.get(HTTP_HOST + 'api/activity_kind')
                    .get(HTTP_HOST + 'api/actItem_kind/GetAll')
                    .then(response => {
                        this.itemKindList = response.data

                    })
                    .catch(error => console.log(error))
            },
            clearSearch() {
                this.search.subject = ""
                this.search.up_time1=""
            },
            gotoSignup(item) {
                this.$emit('custom-event', { action: 'add', item: item });
            },
            gotoSignupList(item) {
                this.$emit('custom-event', { action:'detail', item:item });
            },
            getDetail(clearpage = false) {
                //console.log("test");
                const { sortBy, sortDesc, page, itemsPerPage } = this.options
                const params = {
                    sortBy: sortBy[0], sortDesc: sortDesc[0],
                    page: clearpage ? '1' : page, pageSize: itemsPerPage
                };
                this.detail_table.loading = true
                sessionStorage.setItem('orderpage', clearpage ? '1' : page);
                axios
                    //.post(HTTP_HOST + 'api/order/GetList', this.search, { params: params })
                    .post(HTTP_HOST + 'api/order/GetList', this.search, { 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))
            },
            getDefault(clearpage = false) {
                const { sortBy, sortDesc, page, itemsPerPage } = this.options
                const params = {
                    sortBy: sortBy[0], sortDesc: sortDesc[0],
                    page: clearpage ? '1' : page, pageSize: itemsPerPage
                };
                this.data_table.loading = true
                sessionStorage.setItem('orderpage', clearpage ? '1' : page);
                axios
                    //.post(HTTP_HOST + 'api/order/GetList', this.search, { params: params })
                    .post(HTTP_HOST + 'api/activity/GetListNew', this.search, { params: params })
                    .then(response => {
                        this.data_table.list = response.data.list
                        this.data_table.count = response.data.count;
                        this.data_table.loading = false
                    })
                    .catch(error => console.log(error))
            },
    editItem(item) {
        console.log("edit", item);
    },
    btn_search() {
        this.this_act = '';
        this.search.activity_num = '';

        this.getDefault(true)
    },
    btn_all() {
        this.this_act = '';
        this.search.activity_num = '';
        clearObjProps(this.search);
        this.btn_search()
    },
    initActivity() {
        axios.get(HTTP_HOST + 'api/activity')
            .then(response => {
                this.select_act_list = response.data
            })
            .catch(error => {
                console.log(error)
            })
    }
  },
    computed: {
        pageCount() {
            return Math.ceil(this.data_table.count / this.data_table.pageSize)
        },
    }
    };

</script>