<template>
<a-card :bordered="false">
    <!-- 查询区域-END -->

    <!-- 操作按钮区域 -->
    <div class="table-operator">
        <a-tag color="pink" v-if="buildingFloorSearchTag.name">
            {{ buildingFloorSearchTag.name }}
            <a-icon type="close" @click="onFliterClose" />
        </a-tag>
        <!-- <a-button @click="handleAdd" type="primary" icon="plus">新增房间</a-button>
        <a-button @click="onAddBatch" type="primary" icon="tags">批量新增</a-button>
        <a-popconfirm title="确定全部删除吗?" @confirm="delAll">
            <a-button :disabled="delLoading" :loading="delLoading" type="primary" icon="stop">全部删除</a-button>
        </a-popconfirm>

        <a-popconfirm v-if="selectedRowKeys.length > 0" title="确定删除吗?" @confirm="delBatch">
            <a-button :disabled="delLoading" :loading="delLoading" icon="stop" style="margin-left: 8px">
                批量删除</a-button>
        </a-popconfirm> -->
        <div style="display:flex;align-items:center;width:100%;">
            <div class="list-container">
                <div class="list-item" v-for="(item, index) in list" :key="index" :class="{active: activeIndex === index}" @click="handleClick(index)">
                    {{ item }}
                </div>
            </div>
            <a-range-picker v-show="activeIndex==4" @change="onChangeTime" size="large" />
        </div>
        <!-- <a-button type="primary" @click="searchQuery" icon="search">查询</a-button> -->
    </div>

    <!-- table区域-begin -->
    <div class="grid-clear">
        <a-table ref="table" size="middle" bordered rowKey="id" :columns="columns" :dataSource="dataSource" :pagination="ipagination" :loading="loading" class="j-table-force-nowrap" @change="handleTableChange">

            <template slot="footer" v-if="dataList.length>0">
                <div class="tableData">

                </div>
                <a-table size="middle" bordered :showHeader="false" :pagination="false" :columns="columns" :dataSource="dataList">

                </a-table>
            </template>
        </a-table>
        <a-card>
            <a-checkbox-group @change="onChange">
                <a-row>
                    <a-col :span="6">
                        <a-checkbox value="A">
                            退脏房
                        </a-checkbox>
                    </a-col>
                    <a-col :span="6">
                        <a-checkbox value="B">
                            续脏房
                        </a-checkbox>
                    </a-col>
                    <a-col :span="6">
                        <a-checkbox value="C">
                            特脏房
                        </a-checkbox>
                    </a-col>
                    <a-col :span="6">
                        <a-checkbox value="D">
                            钟点房
                        </a-checkbox>
                    </a-col>
                </a-row>
            </a-checkbox-group>
        </a-card>
    </div>
    <!-- <room-num-modal ref="modalForm" @ok="modalFormOk"></room-num-modal> -->
    <!-- <room-imgs @saveOk="onImgSave" ref="roomimgmodal"></room-imgs> -->
</a-card>
</template>

<script>
import {
    JeecgListMixin
} from "@/mixins/JeecgListMixin";
// import roomNumModal from "./roomNumModal.vue"; // todo roomLayoutForm 需要替换成房型的表单弹窗
// import roomImgs from './roomImagesForm.vue'
import {
    getAllLayouts
} from "@/api/roomLayout";
import {
    delBatch,
    delAll
} from '@/api/roomBuildingApi'
let hotelInfo = JSON.parse(localStorage.getItem("storeInfo"));
export default {
    mixins: [JeecgListMixin],
    components: {
        // roomNumModal,
        // roomImgs
    },
    computed:{
        dataList(){
            if (this.dataSource.length === 0) {
                return []
            }
            let keyArr = Object.keys(this.dataSource[0])
            keyArr = keyArr.filter(item=>item!=='waiter_name')
            let obj = {}
            keyArr.forEach(item=>{
                obj[item] = this.dataSource.reduce((pre, cur)=> pre + cur[item], 0)
            })
            obj.waiter_name = '合计'
            return [obj]
        }
    },
    data() {
        return {
            list: ['今天', '昨日', '本周', '本月', '更多'],
            activeIndex: 0,
            delLoading: false,
            layouts: [],
            queryParam: {
                startTime: new Date().toLocaleString().substring(0, 10).replace(/\//g, "-"),
                endTime: new Date(new Date().getTime() + 24*60*60*1000).toLocaleString().substring(0, 10).replace(/\//g, "-"),
            },
            // 分页参数
            ipagination: {
                current: 1,
                pageSize: 10,
                pageSizeOptions: ["10", "20", "30"],
                showTotal: (total, range) => {
                    return range[0] + "-" + range[1] + " 共" + total + "条";
                },
                showQuickJumper: true,
                showSizeChanger: true,
                total: 0,
            },
            // 表头
            columns: [{
                    title: "房屋人员",
                    align: "center",
                    dataIndex: "waiter_name",
                    width: 180,
                },
                {
                    title: "退房",
                    // align: "center",
                    dataIndex: "tf_num",
                    width: 120,
                    children: [{
                        title: '脏房数',
                        dataIndex: 'tf_num',
                        // key: 'companyAddress',
                        width: 120,
                    }],
                },
                {
                    title: "续房",
                    // align: "center",
                    dataIndex: "xf_num",
                    width: 120,
                    children: [{
                        title: '脏房',
                        dataIndex: 'xf_num',
                        // key: 'companyAddress',
                        width: 120,
                    }],
                },
                {
                    title: "钟点",
                    // align: "center",
                    dataIndex: "zd_num",
                    width: 120,
                    // scopedSlots: {
                    //     customRender: "layoutId"
                    // },
                },
                {
                    title: "特脏",
                    // align: "center",
                    dataIndex: "",
                    width: 120,
                    // scopedSlots: {
                    //     customRender: ""
                    // },
                },
                {
                    title: "合计房间数",
                    // align: "center",
                    dataIndex: "count",
                    width: 120,
                },
                {
                    title: "提成金额",
                    dataIndex: "tc_money",
                    // align: "center",
                    width: 120,
                    // fixed: "right",
                    // width: 147,
                    // scopedSlots: {
                    //     customRender: "action"
                    // },
                },
            ],
            url: {
                // list: 'org.jeecg.modules.business/busMarketMember/list',
                list: "/fw/fwRoomClean/roomCleanSummary",
                delete: "/rooms/cesRooms/remove",
                deleteBatch: "/rooms/cesRooms/deleteBatch",
                exportXlsUrl: "/rooms/cesRooms/exportXls",
                importExcelUrl: "rooms/cesRooms/importExcel",
            },
            buildingFloorSearchTag: {
                name: null
            },
            dictOptions: {},
            superFieldList: [],
            selectedRowKeys: [],
            isorter: {
                column: "createTime",
                order: "desc",
            },
        };
    },
    created() {
        // this.loadData()
        getAllLayouts().then((res) => {
            if (res.code == 200) {
                this.layouts = res.result.records;
                this.loadData();
            }
        });
    },
    methods: {
        onImgSave() {
            this.loadData()
        },
        onFliterClose() {
            this.filters['buildId'] = null
            this.filters['floorId'] = null
            this.ipagination.current = 1
            this.buildingFloorSearchTag.name = null
            this.loadData()
        },
        // 搜索
        searchParam(id, name, isBuilding) {
            this.$set(this.buildingFloorSearchTag, 'name', name)
            if (isBuilding) {
                this.filters['buildId'] = id
                if (this.filters['floorId']) {
                    delete this.filters.floorId
                }
            } else {
                this.filters['floorId'] = id
                if (this.filters['buildId']) {
                    delete this.filters.buildId
                }
            }
            this.loadData()
        },
        getLayoutName(row) {
            let i = this.layouts.findIndex((s) => s.id == row.layoutId);
            if (i > -1) {
                return this.layouts[i].name;
            }
            return "";
        },
        // 批量删除
        delBatch() {
            let hotelInfo = JSON.parse(localStorage.getItem('storeInfo'))
            let keys = this.selectedRowKeys
            this.delLoading = true
            delBatch({
                hotelId: hotelInfo.id,
                idStr: keys.toString()
            }).then(res => {
                if (res.code == 200) {
                    this.selectedRowKeys = []
                    this.$message.success('删除成功');
                    this.loadData()
                }
            }).finally(_ => {
                this.delLoading = false
            })
        },
        // 删除所有
        delAll() {
            let hotelInfo = JSON.parse(localStorage.getItem('storeInfo'))
            this.delLoading = true
            delAll({
                hotelId: hotelInfo.id,
            }).then(res => {
                if (res.code == 200) {
                    this.selectedRowKeys = []
                    this.$message.success('全部删除成功');
                    this.loadData()
                }
            }).finally(_ => {
                this.delLoading = false
            })
        },
        // 批量添加按钮
        onAddBatch() {
            this.$router.push('/tenant/gen/rooms');
        },
        // 全部删除
        onDelAll() {},
        // 显示图片弹窗
        handleImage(row) {
            this.$refs.roomimgmodal.setModel(row)
        },
        onSaveOk() {
            this.loadData();
        },
        handleClick(index) {
            this.activeIndex = index
            if (index == 4) {
                return
            }
            this.queryParam.startTime = this.getTime(index).startTime
            this.queryParam.endTime = this.getTime(index).endTime
            this.searchQuery()
        },
        getTime(type) {
            let startTime;
            let endTime;
            let now = new Date(); //当前日期 
            let nowDayOfWeek = now.getDay(); //今天本周的第几天 
            let nowDay = now.getDate(); //当前日 
            let nowMonth = now.getMonth(); //当前月 
            let nowYear = now.getFullYear(); //当前年 
            let jd=Math.ceil((nowMonth + 1) / 3)
            if (type == 0) {
                startTime = new Date().toLocaleString().substring(0, 10)
                endTime = new Date(new Date().getTime() + 24 * 60 * 60 * 1000).toLocaleString().substring(0, 10)
            }
            if (type == 1) {
                startTime = new Date(new Date().getTime() - 24 * 60 * 60 * 1000 * 2).toLocaleString().substring(0, 10)
                endTime = new Date(new Date().getTime() - 24 * 60 * 60 * 1000).toLocaleString().substring(0, 10)
            }
            if(type == 2){
                startTime = new Date(nowYear, nowMonth, nowDay - nowDayOfWeek+1).toLocaleString().substring(0, 10)
                endTime = new Date(nowYear, nowMonth, nowDay + 6 - nowDayOfWeek+1).toLocaleString().substring(0, 10)
            }
            if (type==3) {
                startTime = new Date(nowYear, nowMonth, 1).toLocaleString().substring(0, 9)
                endTime = new Date(nowYear, nowMonth + 1, 0).toLocaleString().substring(0, 10)
            }

            return {
                startTime: startTime.replace(/\//g, '-'),
                endTime: endTime.replace(/\//g, '-')
            }
            // return {
            //     startTime,
            //     endTime
            // }
        },
        onChange(checkedValues) {
            console.log('checked = ', checkedValues)
        },
        //选择日期
        onChangeTime(date, dateString) {
            console.log(date, dateString)
            this.queryParam.startTime = dateString[0]
            this.queryParam.endTime = dateString[1]
            this.searchQuery()
        },
    },
};
</script>

<style scoped>
@import "~@assets/less/common.less";

.list-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    border: solid 1px #d9d9d9;
    width: 300px;
    border-radius: 5px;
    /* margin-bottom: 20px; */
    margin-right: 10px;
}

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

.list-item.active {
    background-color: #1890ff;
    color: #fff;
}

.grid-clear {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    grid-gap: 10px;
}
/deep/ .ant-table-content .ant-table-body {
    position: relative;
    z-index: 2;
    background: #FFFFFF;
}

/deep/ .ant-table-footer .ant-table-body {
    overflow: hidden !important;
    position: relative !important;
    z-index: 1 !important;
}

/deep/ .ant-table-content>.ant-table-footer {
    padding: 0 !important;
    top: 0px;
    position: relative;
    z-index: 0;
}
/deep/.ant-table-footer{
    padding: 0 !important;
    top: -8px;
    position: relative;
    z-index: 2;
}
</style>
