﻿<template>
    <v-container>
        <v-card>
            <v-card-title class="bg-primary white--text text-center">
                <h5 class="mb-0">快速報名</h5>
                <v-btn class="ms-auto" @click.prevent="saveOrder()">儲存</v-btn>
            </v-card-title>
            <v-card-text>
                <v-row>
                    <v-col cols="12" md="2">
                        <v-text-field v-model="name"
                                      :counter="20"
                                      label="姓名"></v-text-field>
                    </v-col>
                    <v-col cols="12" md="2">
                        <v-text-field v-model="idNo"
                                      :counter="20"
                                      label="身分證號"></v-text-field>
                    </v-col>
                    <v-col cols="12" md="2">
                        <v-text-field v-model="phoneNum"
                                      :counter="20"
                                      label="行動電話/市話"></v-text-field>
                    </v-col>
                    <v-col cols="12" md="2">
                        <v-btn @click.prevent="getFollower">查詢</v-btn>
                    </v-col>
                </v-row>
                <v-divider></v-divider>
                <v-row>
                    <v-col cols="12" md="2">
                        <v-text-field v-model="follower.f_number" readonly
                                      label="信眾編號"></v-text-field>
                    </v-col>
                    <v-col cols="12" md="2">
                        <v-text-field v-model="follower.u_name" readonly
                                      label="信眾姓名"></v-text-field>
                    </v-col>
                    <v-col cols="12" md="2">
                        <v-text-field v-model="follower.phoneDes" readonly
                                      label="電話"></v-text-field>
                    </v-col>
                    <v-col cols="12" md="2">
                        <v-text-field v-model="follower.cellphoneDes" readonly
                                      label="行動電話"></v-text-field>
                    </v-col>
                    <v-col cols="12" md="2">
                        <v-text-field v-model="follower.id_code" readonly
                                      label="身分證號"></v-text-field>
                    </v-col>
                    <v-col cols="12" md="2">
                        <v-text-field v-model="follower.passport" readonly
                                      label="護照號碼"></v-text-field>
                    </v-col>
                </v-row>
                <v-row>
                    <v-col cols="12" md="12">
                        <v-text-field v-model="follower.address" readonly
                                      label="地址"></v-text-field>
                    </v-col>
                </v-row>

                <hr class="hr-text" data-content="前次法會功德">
                <v-row v-show="tablet_show">
                    <v-col cols="12" sm="12">
                        <v-data-iterator :items="tablet_list" :items-per-page="-1"
                                         hide-default-footer>
                            <template v-slot:default="{ items }">
                                <v-row>
                                    <v-col cols="3" md="3" v-for="(item, i) in items" :key="i">
                                        <v-card-title>

                                            <v-checkbox v-model="item.actitem_num_checked"
                                                        :disabled="item.disabled" class="custom-checkbox">
                                                <template v-slot:label>
                                                    <h5 :class="renderDisabled(item)">{{ item.actitem_num_selected.text }}</h5>
                                                </template>
                                            </v-checkbox>

                                        </v-card-title>
                                        <v-card-text>
                                            <div v-html="renderTabletContent(item)" style="font-size:20px;"></div>
                                            <v-divider></v-divider>
                                        </v-card-text>
                                    </v-col>
                                </v-row>
                            </template>
                            <template v-slot:no-data>
                                <v-alert :value="true" color="error" icon="warning">
                                    無資料可顯示，可能此信眾未曾參加過。
                                </v-alert>
                            </template>
                        </v-data-iterator>
                    </v-col>
                </v-row>
            </v-card-text>
        </v-card>

        <v-dialog v-model="message_dialog.show" style="width: 300px !important; height: 300px !important;">
            <template>
                <v-card>
                    <v-card-title>
                        {{ message_dialog.message }}
                    </v-card-title>
                    <v-card-text>
                        <v-btn @click.prevent="message_dialog.show=false">關閉</v-btn>
                    </v-card-text>
                </v-card>
            </template>
        </v-dialog>
    </v-container>


</template>

<script>
    module.exports = {
        props: {
            num: {
                type: Number // num
            }
        },
        data() {
            return {
                message_dialog: { show: false, message: "" },
                idNo: "",
                phoneNum: "",
                name: "",
                follower: {},
                orders: [],
                tablet_list: [],
                act_items: [],
                search: {},
                query: {
                    id_code: { type: String }, cellphone: { type: String }
                },
                search_options: { multiSort: false },
                tablet_show: false
            }
        },
        activated() {
            //this.getFollower()
            this.getActItem()
        },
        methods: {
            renderDisabled(item) {
                if (item.disabled) {
                    return "disabled-checkbox"
                } else {
                    return "enabled-checkbox"
                }
            },
            getActItem() {
                this.act_items.length = 0
                this.search = { num: this.num }
                let params = { sortBy: 'num', sortDesc: false, page: 1, pageSize: -1 };
                axios
                    .post(HTTP_HOST + 'api/activity/GetActRelaList', this.search, { params: params })
                    .then(response => {

                        if (response.data.list) {
                            this.act_items = response.data.list
                        }
                        else
                            console.log("查無資料");
                    })
                    .catch(error => console.log(error))
            },
            getFollower() {
                this.tablet_show = false
                this.tablet_list.length = 0
                this.follower = {}
                this.search = { id_code: this.idNo, u_name: this.name, phone_idcode: this.phoneNum }
                //應該要檢查他是否已經報完名
                axios
                    .post(HTTP_HOST + 'api/follower/GetFollowerNew', this.search)
                    .then(response => {
                        if (response.data.list) {
                            console.log(response.data.list)
                            if (response.data.list.length > 1) {
                                //alert("相同條件不只一人")
                                this.message_dialog.show = true
                                this.message_dialog.message = "相同條件不只一人,請增加查詢條件"
                            } else {
                                this.tablet_show = true
                                this.follower = response.data.list[0]
                                this.getOrder()
                            }
                        }
                        else {
                            this.message_dialog.show = true
                            this.message_dialog.message = response.message
                        }
                        //alter(response.message);

                        // console.log("查無資料");
                    })
                    .catch(error => console.log(error))
            },
            getOrder() {
                let params = { page: 1, pageSize: 10, sortBy: 'reg_time', sortDesc: true };
                this.search = { f_num: this.follower.num }
                axios
                    .post(HTTP_HOST + 'api/order/GetList', this.search, { params: params })
                    .then(response => {
                        if (response.data.list && response.data.list.length > 0) {
                            this.orders = response.data.list
                            this.orders = this.orders.filter(x => x.activity_num !== this.num)
                            if (this.orders && this.orders.length > 0) {
                                this.getOrderDetail()
                            }
                        }
                        else
                            console.log("getOrder 查無資料");
                    })
                    .catch(error => console.log(error))
            },
            getOrderDetail() {
                this.tablet_show = true
                let params = { sortBy: 'num', sortDesc: true, page: 1, pageSize: -1 };
                let search1 = { order_no: this.orders[0].order_no }
                axios
                    .post(HTTP_HOST + 'api/order/GetItemList', search1, { params: params })
                    .then(response => {
                        if (response.data.list) {
                            this.tablet_list = response.data.list
                            this.tablet_list.forEach(x => {
                                let act_item = this.act_items.filter(y => y.act_item_selected.val === x.actitem_num_selected.val)
                                if (act_item && act_item.length > 0) {
                                    x.disabled = false
                                } else {
                                    x.disabled = true
                                }
                            })
                        }
                        else
                            console.log("getOrderDetail 查無資料");
                    })
                    .catch(error => console.log(error))
            },
            renderTabletContent(item) {
                let data = JSON.parse(item.f_num_tablet)
                let left = data.left_items
                let mid = data.mid_items
                let returnVal = ""
                if (left) {
                    returnVal = "陽上:" + left.map(x => x.fam_name).join("、")
                }
                if (mid) {
                    returnVal = returnVal + "<br>標題:" + mid.map(x => x.fam_name).join("、")
                }
                return returnVal
            },
            saveOrder() {
                let detail = []
                //整理資料存檔//只要抓那個活動的那幾筆功德項目代號
                this.tablet_list.forEach(x => {
                    if (x.actitem_num_checked && x.actitem_num_checked == true) {
                        detail.push({ num: x.num, order_no: x.order_no })
                        console.log("saveOrder:", x, x.num, x.order_no)
                    }
                })
                //放主檔資料，
                let main = {
                    activity_num: this.num, f_num: this.follower.num,
                    details: detail
                }

                axios
                    .post(HTTP_HOST + 'api/order/SaveWithDetails', main)
                    .then(response => {
                        if (response.result && response.result === "Y") {
                            console.log();
                        }
                        console.log(response.message)
                    }).catch(error => console.log(error));
            }
        }
    }
</script>

<style>
    .hr-text {
        display: flex;
        align-items: center;
        border: 0;
    }

        .hr-text::before,
        .hr-text::after {
            content: "";
            flex: 1;
            border-top: 1px solid #ccc; /* 分隔線樣式 */
            margin: 0 10px;
        }

        .hr-text::before {
            content: attr(data-content);
            padding: 0 50px;
            color: black;
            font-size: 28px;
        }
    /* 当 checkbox 被禁用时，改变鼠标状态 */
    input[type="checkbox"]:disabled {
        cursor: not-allowed;
        opacity: 0.4; /* 控制反灰程度 */
        color: lightgray;
    }

    .disabled-checkbox {
        cursor: not-allowed;
        opacity: 0.8; /* 控制反灰程度 */
        color: lightgray;
    }

    .enabled-checkbox {
    }
</style>