<template>
    <a-card :bordered="false">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
            <a-form layout="inline" @keyup.enter.native="searchQuery">
                <a-row :gutter="24">
                    <a-col :span="24">
                        <a-form-item>
                            <div>
                                <div class="item-content">
                                    <div class="list-container">
                                        <div class="list-item" v-for="(item, index) in dateList" :key="index" :class="{active: activeIndex === index}" @click="handleClick(index)">
                                            {{ item }}
                                        </div>
                                    </div>
                                    <div>
                                        <a-range-picker v-show="activeIndex==3" @change="onChange"/>
                                    </div>
                                </div>
                            </div>
                        </a-form-item>
                    </a-col>
                    <a-col :span="6">
                        <a-form-item>
                            <a-input placeholder="房间号" v-model="queryParam.roomNumber" allowClear></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="6">
                        <a-form-item>
                            <a-input placeholder="客人姓名" v-model="queryParam.customerName" allowClear></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :md="12" :sm="24">
                        <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
                            <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                            <a-button type="primary" @click="searchReset" icon="reload"
                                      style="margin-left: 8px">重置</a-button>
<!--                            <a-button style="margin-left: 8px" type="primary" icon="download" @click="handleExportXls('bus_market_agreement_customer_info')">导出</a-button>-->
<!--                            <a-upload  name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">-->
<!--                                <a-button  style="margin-left: 8px" type="primary" icon="import">导入</a-button>-->
<!--                            </a-upload>-->
                        </span>
                    </a-col>
                </a-row>
            </a-form>
        </div>
        <!-- 查询区域-END -->

        <!-- 操作按钮区域 -->
        <div class="table-operator">

        </div>

        <!-- table区域-begin -->
        <div>
            <a-table
                    ref="table"
                    size="middle"
                    :scroll="{x:true}"
                    bordered
                    rowKey="orderNumber"
                    :columns="columns"
                    :dataSource="dataSource"
                    :pagination="ipagination"
                    :loading="loading"
                    :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
                    class="j-table-force-nowrap"
                    @change="handleTableChange">

                <template slot="htmlSlot" slot-scope="text">
                    <div v-html="text"></div>
                </template>
                <template slot="priceSlot" slot-scope="text,record">
                    <a-button type="primary">
                        查看
                    </a-button>
                </template>
            </a-table>
        </div>
    </a-card>
</template>

<script>
    import '@/assets/less/TableExpand.less'
    import { mixinDevice } from '@/utils/mixin'
    import { JeecgListMixin } from '@/mixins/JeecgListMixin'
    import moment from 'dayjs'

    export default {
        name: 'checkInList',
        mixins:[JeecgListMixin, mixinDevice],
        props: {
            agreementModel:{
                type: Object,
                required: false,
                default: () => {
                }
            }
        },
        data() {
            return {
                dateList: ['今天', '昨日', '本周', '更多'],
                activeIndex: 0,
                queryParam: {
                    agreementId:this.agreementModel.id,
                    startDate:moment(new Date()).format('YYYY-MM-DD'),
                    endDate:moment(new Date()).format('YYYY-MM-DD')
                },
                columns:[
                    {
                        title: '单号',
                        align: "center",
                        dataIndex: 'orderNumber'
                    },
                    {
                        title: '房间号',
                        align: "center",
                        dataIndex: 'roomNumber'
                    },
                    {
                        title: '房价',
                        align: "center",
                        dataIndex: 'housePrice'
                    },
                    {
                        title: '入住时间',
                        align: "center",
                        dataIndex: 'arrivalTime',
                        customRender: function (text) {
                            return !text ? "" : (text.length > 10 ? text.substr(0, 10) : text)
                        }
                    },
                    {
                        title: '离店时间',
                        align: "center",
                        dataIndex: 'dueOutTime',
                        customRender: function (text) {
                            return !text ? "" : (text.length > 10 ? text.substr(0, 10) : text)
                        }
                    },
                    {
                        title: '入住天数',
                        align: "center",
                        dataIndex: 'dayCount'
                    },
                    {
                        title: '入住类型',
                        align: "center",
                        dataIndex: 'checkinType',
                        customRender: function (text) {
                            return !text ? "" : (text==1 ?"全天房" : "钟点房")
                        }
                    },
                    {
                        title: '状态',
                        align: "center",
                        dataIndex: 'status'
                    },
                    {
                        title: '客人姓名',
                        align: "center",
                        dataIndex: 'customerName'
                    },
                    {
                        title: '总消费',
                        align: "center",
                        dataIndex: 'totalPrice'
                    },
                ],
                url: {
                    list: "/business/busMarketAgreementUnit/listCheckInRecord",
                    delete: "/business/busMarketAgreementCustomer/delete",
                    deleteBatch: "/business/busMarketAgreementCustomer/deleteBatch",
                    exportXlsUrl: "/business/busMarketAgreementCustomer/exportXls",
                    importExcelUrl: "business/busMarketAgreementCustomer/importExcel",

                },
                dictOptions: {},
                superFieldList: [],
            }
        },
        computed: {
            importExcelUrl: function(){
                return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
            },
        },
        methods:{
            handleClick(index) {
                this.activeIndex = index
                // this.searchQuery()
                console.log(index)
                let td = moment().format('YYYY-MM-DD')
                switch (index) {
                    case 0:
                        console.log('今天')
                        let today = moment(new Date()).format('YYYY-MM-DD')
                        this.queryParam.startDate = today;
                        this.queryParam.endDate = today;
                        break;
                    case 1:
                        console.log('昨天')
                        let btd = moment(new Date()).subtract(1, 'days').format('YYYY-MM-DD')
                        this.queryParam.startDate = btd;
                        this.queryParam.endDate = btd;
                        break;
                    case 2:
                        console.log('本周')
                        // const weekStart = moment().startOf('week').add(1, 'days').format('YYYY-MM-DD'); //本周开始的日期
                        // const weekBefore = moment(moment().startOf('week').add(1, 'days')).subtract(7,'days').format('YYYY-MM-DD');   // 近七日日期

                        // 获取当前时间
                        var currentDate = new Date();
                        // 返回date是一周中的某一天
                        var week = currentDate.getDay()
                        // 返回date是一个月中的某一天
                        // var month = currentDate.getDate()
                        // 一天的毫秒数
                        var millisecond = 1000 * 60 * 60 * 24
                        // 减去的天数
                        var minusDay = week !== 0 ? week - 1 : 6
                        // alert(minusDay);
                        // 本周 周一
                        var monday = new Date(currentDate.getTime() - (minusDay * millisecond))
                        // 本周 周日
                        var sunday = new Date(monday.getTime() + (6 * millisecond))

                        this.queryParam.startDate = moment(monday).format('YYYY-MM-DD');// 本周起始时间
                        this.queryParam.endDate = moment(sunday).format('YYYY-MM-DD');// 本周终止时间
                        break;
                }
                this.loadData(1);
            },
            formatDate (date) {
                // 格式化时间为yyyy-mm-dd
                var d = new Date(date)
                var month = '' + (d.getMonth() + 1)
                var day = '' + d.getDate()
                var year = d.getFullYear()
                if (month.length < 2) month = '0' + month
                if (day.length < 2) day = '0' + day
                return [year, month, day].join('-')
            },
            onChange(){

            }
        }
    }
</script>

<style scoped>
    .item-content{
        display: flex;
        flex-direction: row;
        /*align-items: center;*/
        /*justify-items: center;*/
    }
    .list-container {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        border: solid 1px #d9d9d9;
        width: 260px;
        border-radius: 5px;
        margin-right: 10px;
        overflow: hidden;
        /*height: 32px;*/
        /*line-height: 32px;*/
    }

    .list-item {
        padding: 0px;
        border-right: solid 1px #d9d9d9;
        cursor: pointer;
        text-align: center;
    }

    .list-item.active {
        background-color: #1890ff;
        color: #fff;
    }
</style>
