<
<template>
    <j-modal
        :title="title"
        :width="width"
        :visible="visible"
        switchFullscreen
        @ok="handleOk"
        :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
        @cancel="handleCancel"
        cancelText="关闭">
        <a-card style="margin: 20px">

            <a-row>
                <a-col :span="16">
                    <a-tabs v-model="tabPosTypeId" @change="tabPosTypeChange">
                        <a-tab-pane
                            :key="item.id"
                            :tab="item.name"
                            v-for="item in posTypeList"
                        ></a-tab-pane>
                    </a-tabs>

                    <a-tabs v-model="tabPosRegionId" @change="tabRegionChange">
                        <a-tab-pane key="1" tab="全部"></a-tab-pane>
                        <a-tab-pane
                            :key="item.id"
                            :tab="item.name"
                            v-for="item in regionList"
                        ></a-tab-pane>
                    </a-tabs>
                    <a-row :gutter="[5, 5]">
                        <a-col
                            v-for="item in dataSource"
                            :key="item.id"
                            :span="4"
                            @click.stop="itemClick(item)"
                        >
                            <div
                                class="room-item check"
                                :class="{'active': model.reserveTableList.some(t => t.id == item.id) }">
                                <div class="select-cell"></div>
                                <template v-if="item.state === 1">
                                    <div>{{ item.name }}</div>
                                    <div style="margin-top: 10px">待下单</div>
                                    <div style="
                margin-top: 10px;
                display: flex;
                justify-content: space-between;
              ">
                                        <div>
                                            <a-icon type="user"/>
                                            {{ item.userNum }}/{{ item.num }}人
                                        </div>
                                        <div>
                                            <a-icon type="clock-circle"/>
                                            {{ hours(item.orderTime) }}
                                        </div>
                                    </div>
                                </template>
                                <template v-else-if="item.state === 2 || item.state === 4">
                                    <div>{{ item.name }}</div>
                                    <div style="margin-top: 10px">
                                        ￥{{ item.posOrderGoods ? item.posOrderGoods.money : 0 }}
                                    </div>
                                    <div style="
                margin-top: 10px;
                display: flex;
                justify-content: space-between;
              ">
                                        <div>
                                            <a-icon type="user"/>
                                            {{ item.userNum }}/{{ item.num }}人
                                        </div>
                                        <div>
                                            <a-icon type="clock-circle"/>
                                            {{ hours(item.orderTime) }}
                                        </div>
                                    </div>
                                </template>
                                <template v-else>
                                    <div>{{ item.name }}</div>
                                    <div style="margin-top: 10px"></div>
                                    <div style="margin-top: 10px">
                                        <a-icon type="user"/>
                                        {{ item.num }}人
                                    </div>
                                </template>
                            </div>
                        </a-col>
                    </a-row>
                    <a-row type="flex" justify="end" style="width: 100%">
                        <a-pagination
                            show-size-changer
                            :default-current="1"
                            :total="ipagination.total"
                            :current="ipagination.current"
                            :pageSize="ipagination.pageSize"
                            @showSizeChange="onShowSizeChange"
                        />
                    </a-row>
                </a-col>
                <a-col :span="8">
                    <a-form-model :model="model">
                        <a-form-model-item label="用餐时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <a-date-picker
                                format="YYYY-MM-DD HH:mm:ss"
                                v-model="model.diningTime"
                                :show-time="{ defaultValue: moment('00:00:00', 'HH:mm:ss') }"
                            />
                            <!--                            :disabled-date="disabledDate"-->
                        </a-form-model-item>
                        <a-form-model-item label="预定桌数" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <div class="cell-gap">
                                <a-input-number disabled :value="model.reserveTableList.length"/>
                                <a-button>预定点餐</a-button>
                            </div>
                        </a-form-model-item>
                        <a-form-model-item label="每桌人数" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <a-input-number v-model="model.perTableNum"></a-input-number>
                        </a-form-model-item>
                        <a-form-model-item label="预定人" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <div class="cell-gap">
                                <a-input style="flex: 1" v-model="model.reserveName"></a-input>
                                <a-radio-group>
                                    <a-radio value="0">先生</a-radio>
                                    <a-radio value="1">女士</a-radio>
                                </a-radio-group>
                            </div>
                        </a-form-model-item>
                        <a-form-model-item label="联系电话" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <a-input v-model="model.phone"></a-input>
                        </a-form-model-item>
                        <a-form-model-item label="定金" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <a-switch v-model="model.isDeposit"></a-switch>
                        </a-form-model-item>
                        <a-form-model-item label="客人类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <div class="cell-gap">
                                <a-select v-model="model.customerType">
                                    <a-select-option :value="1"> 散客</a-select-option>
                                    <a-select-option :value="2"> 会员</a-select-option>
                                    <a-select-option :value="3"> 协议单位</a-select-option>
                                </a-select>
                                <a-auto-complete v-if="model.customerType===2"
                                    v-model="vipCustomerData.name"
                                    @select="(e) => handleSelectVip(e)"
                                    @search="handleSearchVip"
                                >
                                    <template slot="dataSource">
                                        <a-select-option
                                            :key="item.id"
                                            :value="item.id"
                                            :label="item.name"
                                            v-for="(item, index) in busMemberCardList"
                                        >
                                            {{ item.name }}-{{ item.gradeName }}-{{ item.balance }}
                                        </a-select-option>
                                    </template>
                                </a-auto-complete>
                                <a-auto-complete v-if="model.customerType===3"
                                                 v-model="agreementUnitData.customerName"
                                                 @select="(e) => handleSelectAgreementUnit(e)"
                                                 @search="handleSearchAgreementUnit"
                                >
                                    <template slot="dataSource">
                                        <a-select-option
                                            :key="item.id"
                                            :value="item.id"
                                            :label="item.customerName"
                                            v-for="(item, index) in busMarketAgreementUnitList"
                                        >
                                            {{ item.customerName }}
                                        </a-select-option>
                                    </template>
                                </a-auto-complete>
                            </div>
                        </a-form-model-item>
                        <a-form-model-item :wrapperCol="{ span: 24 }">
                            <a-col :span="24" v-if="model.customerType === 2">
                                <a-card :bordered="true" style="width: 100%; padding: 0 !important">
                                    <p>
                                        <a-row>
                                            <a-col :span="8">名称：{{ vipCustomerData.name }}</a-col>
                                            <a-col :span="8">电话：{{ vipCustomerData.mobile }}</a-col>
                                            <a-col :span="8">级别：{{ vipCustomerData.gradeName }}</a-col>
                                        </a-row>
                                        <a-row>
                                            <a-col :span="8">余额：{{ vipCustomerData.balance }}</a-col>
                                            <a-col :span="8">积分：{{ vipCustomerData.integral }}</a-col>
                                            <a-col :span="8">卡号：{{ vipCustomerData.cardNo }}</a-col>
                                        </a-row>
                                    </p>
                                </a-card>
                            </a-col>
                            <a-col :span="24" v-if="model.customerType === 3">
                                <a-card :bordered="true" style="width: 100%; padding: 0 !important">
                                    <p>
                                        <a-row>
                                            <a-col :span="8">
                                                名称：{{ agreementUnitData.customerName }}
                                            </a-col>
                                            <a-col :span="8">
                                                电话：{{agreementUnitData.phone}}
                                            </a-col>
                                            <a-col :span="8">
                                                可用额度：{{ agreementUnitData.balance || 0 }}
                                            </a-col>
                                        </a-row>
                                    </p>
                                </a-card>
                            </a-col>
                        </a-form-model-item>
                        <a-form-model-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <a-textarea v-model="model.remark"></a-textarea>
                        </a-form-model-item>
                        <a-form-model-item :wrapperCol="{ span: 24 }">
                            <a-button type="primary" @click="submitCallback">确认预定</a-button>
                        </a-form-model-item>
                    </a-form-model>

                </a-col>
            </a-row>
        </a-card>
    </j-modal>

</template>

<script>

import PosTypeForm from './PosTypeForm'
import {getAction} from '@api/manage'
import moment from "moment";

export default {
    name: 'ReserveModal',
    components: {
        PosTypeForm
    },
    data() {
        return {
            //需要提交的表单数据
            model: {
                //用餐时间
                diningTime: '',
                //预定桌数
                reserveTableList: [],
                //每桌人数
                perTableNum: '',
                //预定人
                reserveName: '',
                //联系电话
                phone: '',
                //是否定金
                isDeposit: '',
                // 客人类型
                customerType: '',
                //备注
                remark: '',
            },
            //会员卡数据
            vipCustomerData: {},
            title: '',
            width: 1500,
            visible: false,
            disableSubmit: false,
            dataSource: [],
            labelCol: {
                xs: {span: 24},
                sm: {span: 4},
            },
            wrapperCol: {
                xs: {span: 24},
                sm: {span: 18},
            },
            //分页
            ipagination: {
                current: 1,
                pageSize: 10,
                pageSizeOptions: ['10', '20', '30', '40', '50'],
                total: 0,
            },

            //tab
            posTypeList: [],
            tabPosTypeId: "",
            regionList: [],
            tabPosRegionId: "1",
            //color
            statusColorList: [
                {
                    title: "全部",
                    color: "#fff",
                    check: true,
                    status: -100,
                },
                {
                    title: "空桌",
                    color: "#fff",
                    check: false,
                    status: 0,
                },
                {
                    title: "待下单",
                    color: "#00a0e9",
                    check: false,
                    status: 1,
                },
                {
                    title: "待结账",
                    color: "rgba(10, 122, 114, 1)",
                    check: false,
                    status: 2,
                },
                {
                    title: "已预结",
                    color: "rgba(172, 51, 193, 1)",
                    check: false,
                    status: 3,
                },
                {
                    title: "待清台",
                    color: "rgba(128, 128, 128, 1)",
                    check: false,
                    status: 4,
                },
            ],

            //会员 协议单位相关
            oldBusMemberCardList: [],
            busMemberCardList: [],
            agreementUnitData: { customerName: "" },
            busMarketAgreementUnitList: [],
            busMarketAgreementCustomer: {},
        }
    },
    methods: {
        moment,
        /**
         * 切换tab
         * @param e
         */
        tabPosTypeChange(e) {
            this.model.reserveTableList.length = 0;
            this.loadRegion();
        },
        tabRegionChange(e) {
            this.model.reserveTableList.length = 0;
            this.loadTables();
        },
        //禁用时间
        disabledDate(current) {
            // Can not select days before today and today
            return current && current < moment().endOf('day');
        },

        /**
         * 分页
         */
        onShowSizeChange(current, pageSize) {
            console.log(current, pageSize);
            this.ipagination.current = current;
            this.ipagination.pageSize = pageSize;
            this.loadTables();
        },

        /**
         * 计算颜色
         */
        getStatusColor(status) {
            var find = this.statusColorList.find((t) => t.status == status);
            return find ? find.color : "#fff";
        },

        /**
         * 获取tab数据
         */
        loadRegion() {
            getAction("/pos/posRegion/list", {
                posTypeId: this.tabPosTypeId,
            }).then((res) => {
                if (res.success) {
                    this.regionList = res.result.records;
                }
            });
            this.loadTables();
        },


        edit(record) {
            this.visible = true
            // this.loadTables()
        },
        handleOk() {
            this.visible = false
        },
        submitCallback() {
            this.$emit('ok')
            this.visible = false
        },
        handleCancel() {
            this.close()
        },
        close() {
            this.visible = false
        },
        hours(start) {
            var beginDate = new Date(start);
            var endDate = new Date();
            let hours = parseInt((endDate - beginDate) / (1000 * 60 * 60));
            let leave1 =
                (endDate.getTime() - beginDate.getTime()) % (24 * 3600 * 1000);
            let leave2 = leave1 % (3600 * 1000);
            let minutes = Math.floor(leave2 / (60 * 1000));
            // return minutes == 0 ? hours : hours + 1;
            return hours.toString().padStart(2, "0") + ":" + minutes.toString().padStart(2, "0");
        },
        loadTables() {
            var obj = {
                pageNo: this.ipagination.current,
                pageSize: this.ipagination.pageSize,
                posTypeId: this.tabPosTypeId,
                state: this.state,
            };
            if (this.tabPosRegionId != "1") {
                obj.posRegionId = this.tabPosRegionId;
            }
            getAction('/pos/posTable/tableList', obj).then((res) => {
                if (res.success) {
                    this.dataSource = res.result.records;
                    this.ipagination.total = res.result.total;
                }
            })
        },
        /**
         * 选中数据
         * @param item
         */
        itemClick(item) {
            if (this.model.reserveTableList.some((t) => t.id == item.id)) {
                this.model.reserveTableList = this.model.reserveTableList.filter(
                    (t) => t.id != item.id
                );
            } else {
                this.model.reserveTableList.push(item);
            }
        },

        handleSearchVip(value) {
            let result;
            if (!value) {
                result = this.oldBusMemberCardList;
            } else {
                console.log("this.oldBusMemberCardList", this.oldBusMemberCardList);
                result = this.oldBusMemberCardList.filter((t) => {
                    return (
                        t.name.includes(value) ||
                        (t.cardNo && t.cardNo.includes(value)) ||
                        (t.mobile && t.mobile.includes(value))
                    );
                });
            }
            this.busMemberCardList = JSON.parse(JSON.stringify(result));
        },
        handleSelectVip(value) {
            console.log(value);
            let result = this.busMemberCardList.find((t) => t.id == value);
            this.model.vipCustomerId = value;
            this.vipCustomerData = JSON.parse(JSON.stringify(result));
            // this.vipCustomerIdChange(result.id);
        },
        handleSearchAgreementUnit(value) {
            let result;
            if (!value) {
                result = this.oldBusMarketAgreementUnitList;
            } else {
                result = this.oldBusMarketAgreementUnitList.filter((t) =>
                    t.customerName.includes(value)
                );
            }
            this.busMarketAgreementUnitList = JSON.parse(JSON.stringify(result));
        },
        handleSelectAgreementUnit(value) {
            let result = this.busMarketAgreementUnitList.find((t) => t.id == value);
            this.model.contractTeamId = value;
            this.agreementUnitData = JSON.parse(JSON.stringify(result));
            this.contractTeamIdChange(value);
        },
        contractTeamIdChange(e) {
            this.model.contractTeamId = e;
            getAction("/business/busMarketAgreementCustomer/list", {
                agreementId: this.model.contractTeamId,
            }).then((res) => {
                if (res.success) {
                    var list = res.result.records;
                    if (list && list.length > 0) {
                        this.model.contractTeamProtocolName = list[0].name;
                        this.model.contractTeamProtocolId = list[0].id;
                        this.busMarketAgreementCustomer = list[0];
                    }
                }
            });
        },
    },
    created() {
        getAction("/pos/posType/list", {pageNo: 1, pageSize: 99}).then((res) => {
            if (res.success) {
                this.posTypeList = res.result.records;
                if (this.posTypeList && this.posTypeList.length > 0) {
                    this.tabPosTypeId = this.posTypeList[0].id;
                    this.loadRegion();
                }
            }
        });
        getAction("/business/busMemberCard/list", {
            pageSize: 99999,
            pageNo: 1,
        }).then((res) => {
            if (res.success) {
                this.busMemberCardList = res.result.records;
                this.oldBusMemberCardList = JSON.parse(
                    JSON.stringify(this.busMemberCardList)
                );
                if (this.model.vipCustomerId) {
                    this.handleSelectVip(this.model.vipCustomerId);
                }
            }
            this.confirmLoading = false;
        });
        getAction("/business/busMarketAgreementUnit/list", {
            pageSize: 99999,
            pageNo: 1,
        }).then((res) => {
            if (res.success) {
                this.busMarketAgreementUnitList = res.result.records;
                this.oldBusMarketAgreementUnitList = JSON.parse(
                    JSON.stringify(res.result.records)
                );
                if (this.model.contractTeamId && this.model.contractTeamProtocolId) {
                    this.handleSelectAgreementUnit(this.model.contractTeamId);
                }
            }
        });
    }
}
</script>
<style>
.room-item {
    height: 110px;
    /* line-height: 200px; */
    font-size: 13px;
    padding: 0px 5px;
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cell-gap {
    display: flex;
    gap: 10px;
    align-items: center;
}

.active {
    border: #00a0e9 2px solid !important;
}

.check {
    border: #000 solid 1px;
}

.ant-table-wrapper {
    height: calc(100vh - 500px);
}

/deep/ .card-pd .ant-card-body {
    padding: 0 !important;
}

.select-cell {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 10;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.w-choose-status {
    display: flex;
    /* justify-content: flex-end; */
    /* width: 200px; */
    margin-bottom: 20px;
}

.w-choose-status > div {
    /* width: 100%; */
    /* flex: 1; */
    display: flex;
    padding: 0 2%;
    white-space: nowrap;
    line-height: 20px;
    box-sizing: border-box;
    cursor: pointer;
    align-items: center;
}

.w-choose-status > div .square {
    display: flex;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    box-sizing: border-box;
    border: #000 solid 1px;
}

.w-choose-status > div .title {
    display: flex;
    align-items: center;
    line-height: 16px;
    padding-left: 4px;
    font-size: 14px;
    box-sizing: border-box;
}

.status-check {
    border: #000 solid 1px;
    padding: 8px;
    /* width: 80px; */
    height: 29px;
    justify-content: center;
    background-color: #ccc;
    border-radius: 4px;
}
</style>
