﻿<template>
    <div class="container-fluid">
        <v-card>
            <v-card-title class="bg-primary white--text text-center">
                <h4>快速報名</h4>
                <div class="ms-auto">
                    <v-btn @click.prevent="addOrderWithDetail()">儲存</v-btn>
                    <v-btn @click.prevent="back01()">返回</v-btn>
                </div>
            </v-card-title>
            <v-card-text>
                <v-row>
                    <v-col cols="2" md="2">
                        <v-text-field v-model="follower.u_name" :rules="requiredrules"
                                      label="*姓名"></v-text-field>
                    </v-col>
                    <v-col cols="2" md="2">
                        <v-text-field v-model="follower.phone" :rules="phonerules"
                                      label="*電話"></v-text-field>
                    </v-col>
                    <v-col cols="2" md="2">
                        <v-text-field v-model="follower.cellphone" :rules="cellrules"
                                      label="*行動電話"></v-text-field>
                    </v-col>

                    <v-col cols="2" md="2">
                        e <v-select :items="countrys" :rules="requiredrules"
                                    label="*國籍"
                                    item-text="name_zh"
                                    item-value="id" v-model="follower.country">
                        </v-select>
                        <!--<v-text-field v-model="follower.country" :rules="requiredrules"
                          label="*國籍"></v-text-field>-->
                    </v-col>
                    <v-col cols="2" md="2">
                        <v-text-field v-model="follower.id_code"
                                      label="身分證號碼"></v-text-field>
                    </v-col>
                    <v-col cols="2" md="2">
                        <v-text-field v-model="follower.passport"
                                      label="旅行證件號碼"></v-text-field>
                    </v-col>
                    <v-col cols="2" md="2">
                        <v-select :items="sex_items" :rules="requiredrules"
                                  label="*性別"
                                  item-text="text"
                                  item-value="val" v-model="follower.sex">
                        </v-select>
                        <!--<v-text-field v-model="follower.sex" :rules="[rules.required]"
                          label="*性別"></v-text-field>-->
                    </v-col>
                    <v-col cols="2" md="2">
                        <v-select :items="identity_items" :rules="requiredrules"
                                  label="*身分別"
                                  item-text="text"
                                  item-value="val" v-model="follower.identity_type">
                        </v-select>
                        <!--<v-text-field v-model="follower.identity_type" :rules="[rules.required]"
                          label="*身分別"></v-text-field>-->
                    </v-col>
                    <v-col cols="2" md="2">
                        <v-menu v-model="menu"
                                :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="follower.birthday"
                                              label="生日"
                                              prepend-icon="mdi-calendar"
                                              readonly
                                              v-bind="attrs"
                                              v-on="on"></v-text-field>
                            </template>
                            <v-date-picker v-model="follower.birthday"
                                           @input="menu = false"></v-date-picker>
                        </v-menu>
                        <!--<v-date-picker v-model="follower.birthday"
                        label="生日"></v-date-picker>-->
                        <!--<v-text-field v-model="follower.birthday"
                        label="生日"></v-text-field>-->
                    </v-col>
                    <v-col cols="2" md="2">
                        <v-checkbox v-model="follower.send_receipt"
                                    label="寄送收據"></v-checkbox>
                    </v-col>
                    <v-col cols="4" md="4">
                        <v-text-field v-model="follower.receipt_title"
                                      label="收據抬頭"></v-text-field>
                    </v-col>
                    <v-col cols="12" md="12">
                        <v-text-field v-model="follower.address"
                                      label="地址"></v-text-field>
                    </v-col>
                </v-row>
                <hr class="hr-text" data-content="功德項目">
                <v-row>
                    <v-col cols="3" md="3">
                        <v-select :items="act_items"
                                  label="功德項目"
                                  item-text="act_item_selected.text"
                                  item-value="act_item_selected.val" v-model="select_act_item">
                        </v-select>
                    </v-col>
                    <v-col cols="2" md="2">
                        <v-btn @click.prevent="newTablet()">新增</v-btn>
                    </v-col>
                </v-row>

                <v-row>
                    <v-col cols="12" md="12">
                        <v-expansion-panels>
                            <v-expansion-panel v-for="(item,i) in tablets"
                                               :key="i">
                                <v-expansion-panel-header>
                                    <h2>{{ item.actItem_subject }}</h2>
                                </v-expansion-panel-header>
                                <v-expansion-panel-content>
                                    <v-container>
                                        <v-row>
                                            <v-col col="12" md="1">
                                                標題
                                            </v-col>
                                            <v-col col="12" md="11">
                                                <v-row>
                                                    <v-col>
                                                        <v-text-field v-model="title_new.name"
                                                                      label="姓名"></v-text-field>
                                                    </v-col>
                                                    <v-col>
                                                        <v-select :items="live_select"
                                                                  label="存/歿"
                                                                  item-text="text"
                                                                  item-value="val" v-model="title_new.islive">
                                                        </v-select>
                                                        <!--<v-text-field v-model="title_new.islive"
                                                          label="存/歿"></v-text-field>-->
                                                    </v-col>
                                                    <v-col>
                                                        <v-btn @click.prevent="addTitle(item)">加入</v-btn>
                                                    </v-col>
                                                </v-row>
                                                <v-row>
                                                    <v-col cols="12" md="12">
                                                        {{ renderContent( item.tablet.title) }}
                                                    </v-col>
                                                </v-row>
                                            </v-col>
                                        </v-row>
                                        <v-row v-if="checkType(item)">
                                            <v-col col="12" md="1">
                                                陽上
                                            </v-col>
                                            <v-col col="12" md="11">
                                                <v-row>
                                                    <v-col>
                                                        <v-text-field v-model="alive_new.name"
                                                                      label="姓名"></v-text-field>
                                                    </v-col>
                                                    <v-col>
                                                        <v-select :items="live_select"
                                                                  label="存/歿"
                                                                  item-text="text"
                                                                  item-value="val" v-model="alive_new.islive">
                                                        </v-select>
                                                        <!--<v-text-field v-model="alive_new.islive"
                                                        label="存/歿"></v-text-field>-->
                                                    </v-col>
                                                    <v-col>
                                                        <v-btn @click.prevent="addLive(item)">加入</v-btn>

                                                    </v-col>
                                                </v-row>
                                                <v-row>
                                                    <v-col cols="12" md="12">
                                                        {{ renderContent( item.tablet.alive) }}
                                                    </v-col>
                                                </v-row>
                                            </v-col>
                                        </v-row>
                                    </v-container>
                                </v-expansion-panel-content>
                            </v-expansion-panel>
                        </v-expansion-panels>
                    </v-col>
                </v-row>
            </v-card-text>
        </v-card>
        </v-container>
</template>

<script>
    module.exports = {
        props: {
            num: {
                type: Number 
            }
        },
        data() {
            return {
                follower: {
                    u_name: "", sex: "", identity_type: "", phone: "",
                    cellphone: "", country: "", address: "",
                    birthday: "", send_recript: "", receipt_title: "",
                    id_code:"",passport:""
                },
                act_items: [],
                search: {},
                date: new Date().toISOString().substr(0, 10),
                menu: false,
                tablets: [],
                select_act_item: {},
                title_new: { name: "", islive: true },
                alive_new: { name: "", islive: true },
                live_select: [
                    { val: true, text: '存' },
                    { val: false, text: '歿' },
                ],
                requiredrules: [
                    v=>!!v||'必須填寫',
                ],
                cellrules: [
                    v => (!!v||!!this.follower.phone) || '行動電話或電話為必須擇一填寫',
                    v => /^09\d{2}-?\d{3}-?\d{3}$/.test(v) || '行動電話必須為09xx-xxx-xxx',
                ],
                phonerules: [
                    v => (!!v || !!this.follower.cellphone) || '行動電話或電話為必須擇一填寫',
                ],
                sex_items: [
                    { text: "男眾", val: "男眾" },
                    { text: "女眾", val: "女眾" },
                ],
                identity_items: [
                    { text: "出家眾", val: "1" },
                    { text: "個人", val: "2" },
                    { text: "法人", val: "3" },
                    { text: "往生菩薩", val: "4" },
                    { text: "蓮友", val: "10" },
                ],
                countrys:[]
            }
        },
        activated() {
            this.getActItem();
            this.getCountrys();
        },
        methods: {
            back01() {
                this.$emit('custom-event', { action: 'signup1', item: this.num });
            },
            addOrderWithDetail() {
                //組資料，信眾資料，報名資料，功德資料
                let details = []


                this.tablets.forEach(x => {
                    let mid_items = []
                    let left_items = []
                    if (x.tablet.title) {
                        x.tablet.title.forEach(y => {
                            mid_items.push(
                                {
                                    num: 0,
                                    follower_num: 0,
                                    fam_name: y.name,
                                    deceased: !y.islive,
                                }
                            )
                        })
                    }
                    if (x.tablet.alive) {
                        x.tablet.alive.forEach(y => {
                            left_items.push(
                                {
                                    num: 0,
                                    follower_num: 0,
                                    fam_name: y.name,
                                    deceased: !y.islive,
                                }
                            )
                        })
                    }
                    //let f_num_tablet = {
                    //    mid_items: mid_items,
                    //    left_items:left_items
                    //}//這應該只存名字跟存歿，因為還要先存親友資料取得num
                    details.push({
                        num: 0,
                        actItem_num: x.actItem_num,
                        price: x.price,
                        qty: x.qty,
                        printed_files: x.files.val,
                        style: x.style,
                        mid_items: mid_items,
                        left_items: left_items,
                    })
                })

                let order = {
                    order_no: "",
                    f_num: 0,
                    u_name: "",
                    activity_num: this.num,
                    phone: this.follower.phone,
                    address: this.follower.address,
                    send_recript: this.follower.send_recript,
                    receipt_title: this.follower.receipt_title,
                    f_user: this.follower,
                    details:details
                }
                axios
                    .post(HTTP_HOST + 'api/order/AddOrderWithDetail', order)
                    .then(response => {
                        console.log(response);
                    })
            },
            renderContent(titles) {
                return titles.map(title => title.name).join('、');
                //return title.join("、")
            },
            checkType(item) {
                if (item.actItem_subject.startsWith("超")) {
                    return true
                }
                return false
            },
            addTitle(item) {
                item.tablet.title.push({
                    name: this.title_new.name, islive: this.title_new.islive
                });
                this.title_new = { name: "", islive: this.title_new.islive }
            },
            addLive(item) {
                item.tablet.alive.push({
                    name: this.alive_new.name, islive: this.alive_new.islive
                });
                this.alive_new = { name: "", islive: this.alive_new.islive }
            },
            newTablet() {
                console.log(this.act_items);
                console.log(this.select_act_item);
                let item = this.act_items.find(x => x.act_item_selected.val == this.select_act_item);
                this.tablets.push({
                    actItem_num: item.act_item_selected.val,
                    actItem_subject: item.act_item_selected.text,
                    f_num_tablet: [],
                    num: this.tablets.length,
                    qty: 1,
                    price: item.price,
                    files: item.files,
                    style: item.act_item_selected.style,
                    tablet: {
                        title: [],
                        alive: []
                    }
                    
                });
            },
            getCountrys() {
                let search = {}
                let params = { sortBy: 'ID', sortDesc: false, page: 1, pageSize: -1 };
                axios
                    .post(HTTP_HOST + 'api/country/GetList', this.search, { params: params })
                    .then(response => {

                        if (response.data.list) {
                            this.countrys = response.data.list
                        }
                        else
                            console.log("查無資料");
                    })
                    .catch(error => console.log(error))
            },
            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
                            console.log(this.act_items);
                        }
                        else
                            console.log("查無資料");
                    })
                    .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>