<template>
    <div class="app-container">
        <div class="head-container">
            <el-form :model="query" inline label-position="left">
                <el-radio-group v-model="timeValue" @change="timeChange">
                    <el-radio-button label="">全部</el-radio-button>
                    <el-radio-button label="0">今天</el-radio-button>
                    <el-radio-button label="-1">昨天</el-radio-button>
                    <el-radio-button label="-7">最近7天</el-radio-button>
                    <el-radio-button label="-30">最近30天</el-radio-button>
                    <el-radio-button label="week">本周</el-radio-button>
                    <el-radio-button label="month">本月</el-radio-button>
                    <el-radio-button label="custom">自定义</el-radio-button>
                </el-radio-group>
                <el-date-picker v-model="query.createdAt" type="daterange" range-separator="至" start-placeholder="开始日期"
                    end-placeholder="结束日期" :clearable="false" :default-time="['00:00:00', '23:59:59']"
                    value-format="yyyyMMdd">
                </el-date-picker>
                <el-form-item>
                    <el-button type="primary" @click="getTableData">查询</el-button>
                    <el-button @click="resetHandle">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="head-container">
            <el-table :data="tableData.data" v-loading="tableData.loading" v-if="orderType == 1">

                <el-table-column type="index" width="50">
                </el-table-column>
                <el-table-column label="商户名称" prop="merchantName"> </el-table-column>
                <el-table-column label="职员名称" prop="staffName"></el-table-column>
                <el-table-column label="订单数量" prop="orderNum"></el-table-column>
                <el-table-column label="应交金额" prop="payable"></el-table-column>
                <!-- <el-table-column label="上交金额" prop="handIn"></el-table-column> -->
                <el-table-column label="快捷收款金额" prop="quickAmount"></el-table-column>
                <el-table-column label="退款金额" prop="returnAmount"></el-table-column>
                <el-table-column label="总收入" prop="totalAmount"></el-table-column>
                <!-- <el-table-column label="备用金" prop="imprest"></el-table-column> -->
                <el-table-column label="开始时间" prop="startTime">
                    <template v-slot="scope">
                        <div>
                            {{ scope.row.startTime }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="交班时间" prop="endTime">
                    <template v-slot="scope">
                        <div>
                            {{ scope.row.endTime }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="" width='120px'>
                    <template v-slot="scope">
                        <el-button type="text" @click="clicksee(scope.row)">查看</el-button>
                        <el-button type="text" @click="clickexport(scope.row)">导出</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="head-container">
            <el-pagination :total="tableData.total" :current-page="tableData.page + 1" :page-size="tableData.size"
                @current-change="paginationChange" @size-change="sizeChange"
                layout="total, sizes, prev, pager, next, jumper"></el-pagination>
        </div>
        <el-dialog title="商品销量" :visible.sync="dialogshow">
            <el-table :data="tableDatainfo.data" style="width: 100%;height: 500px;overflow: auto;">
                <el-table-column prop="productName" label="商品名称" />
                <el-table-column prop="num" label="数量" />
                <el-table-column prop="amount" label="金额" />
            </el-table>
        </el-dialog>
    </div>
</template>

<script>
import { tbHandoverGet } from '@/api/homes/record.js'
import { hasPermission } from '@/utils/limits.js'
import XLSX from 'xlsx';
import dayjs from "dayjs";
export default {
    data() {
        return {
            timeValue: "",
            resetQuery: null,
            orderType: "1",
            categorys: [],
            query: {
                createdAt: [],
                proName: '',
                cateId: '',
                sort: 'id,desc'
            },
            tableData: {
                data: [],
                page: 0,
                size: 10,
                loading: false,
                total: 0
            },
            tableDatainfo: {
                data: [],
                page: 0,
                size: 10,
                loading: false,
                total: 0
            },
            payCountList: "",
            payCountTotal: 0,
            dialogshow: false, //弹框显示

        };
    },
    filters: {
        timeFilter(s) {
            return dayjs(s).format("YYYY-MM-DD");
        }
    },
    mounted() {
        this.resetQuery = { ...this.query };
        this.getTableData();
    },
    methods: {
        //携带table id跳转到订单列表页面
        toTableOrderList(data) {
            this.$router.push({
                path: '/order_manage/order_list',
                query: {
                    tableName: data.tableName
                }
            })
        },
        // 重置查询
        resetHandle() {
            this.timeValue = "";
            this.query = { ...this.resetQuery };
            this.page = 0;
            this.getTableData();
        },
        // 分页大小改变
        sizeChange(e) {
            this.tableData.size = e;
            this.getTableData();
        },
        // 分页回调
        paginationChange(e) {
            this.tableData.page = e - 1;
            this.getTableData();
        },
        async getTableData() {
            let res = await hasPermission('允许查看所有交班记录');
            if ( !res) { return; }
            this.tableData.loading = true;
            try {
                let urlData = null
                if (this.query.createdAt.length == 0) { // 为什么这么写  因为后端让我有时候传key值有时候不传  为啥不按照框架走后端处理起来太麻烦 前端处理   -- 魏文政 2024.7.30 15:50
                    urlData = `/api/tbHandover?page=${this.tableData.page}&size=${this.tableData.size}&shopId=${localStorage.getItem("shopId")}&sort=${this.query.sort}`
                } else {
                    urlData = `/api/tbHandover?page=${this.tableData.page}&size=${this.tableData.size}&shopId=${localStorage.getItem("shopId")}&tradeDay=${this.query.createdAt[0] ? this.query.createdAt[0] : ''}&tradeDay=${this.query.createdAt[1] ? this.query.createdAt[1] : ''}&sort=${this.query.sort}`
                }
                const res = await tbHandoverGet(urlData);
                this.tableData.loading = false;
                this.tableData.data = res.content;
                console.log(this.tableData.productInfos)
                this.tableData.total = res.totalElements;
            } catch (error) {
                console.log(error);
            }
        },
        // 切换时间
        timeChange(e) {
            // const format = ["YYYY-MM-DD 00:00:00", "YYYY-MM-DD 23:59:59"];
            const format = ["YYYYMMDD", "YYYYMMDD"];
            switch (e) {
                case "":
                    // 全部
                    this.query.createdAt = [];
                    break;
                case "0":
                    // 今天
                    this.query.createdAt = [
                        dayjs().format(format[0]),
                        dayjs().format(format[1])
                    ];
                    break;
                case "-1":
                    // 昨天
                    this.query.createdAt = [
                        dayjs()
                            .add(-1, "d")
                            .format(format[0]),
                        dayjs()
                            .add(-1, "d")
                            .format(format[1])
                    ];
                    break;
                case "-7":
                    // 最近7天
                    this.query.createdAt = [
                        dayjs()
                            .add(-7, "d")
                            .format(format[0]),
                        dayjs().format(format[1])
                    ];
                    break;
                case "-30":
                    // 最近7天
                    this.query.createdAt = [
                        dayjs()
                            .add(-30, "d")
                            .format(format[0]),
                        dayjs().format(format[1])
                    ];
                    break;
                case "week":
                    // 本周
                    this.query.createdAt = [
                        dayjs()
                            .startOf("week")
                            .format(format[0]),
                        dayjs()
                            .endOf("week")
                            .format(format[1])
                    ];
                    break;
                case "month":
                    // 本周
                    this.query.createdAt = [
                        dayjs()
                            .startOf("month")
                            .format(format[0]),
                        dayjs()
                            .endOf("month")
                            .format(format[1])
                    ];
                    break;
                case "custom":
                    // 自定义
                    this.query.createdAt = [];
                    break;
                default:
                    break;
            }
        },
        // 查看
        clicksee(e) {
            this.dialogshow = true
            // console.log(JSON.parse(e.productInfos))
            this.tableDatainfo.data = JSON.parse(e.productInfos)
        },

        clickexport(e) {
            const arr = JSON.parse(e.productInfos)
            let data = [
                ['商品名称', '数量', '金额'],
            ]
            arr.forEach(element => {
                data.push([element.productName, element.num, element.amount])
            });

            const ws = XLSX.utils.aoa_to_sheet(data);
            const wb = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
            XLSX.writeFile(wb, 'data.xlsx');
        }
    }
};
</script>

<style scoped lang="scss">
.cursor-pointer {
    cursor: pointer;
    color: #1890ff;
    transition: all 0.3s;
}

.cursor-pointer:hover {
    opacity: .7;
}

.collect_wrap {
    display: flex;
    gap: 14px;

    .item {
        flex: 1;
        display: flex;
        align-items: center;
        background-color: #f5f5f5;
        padding: 20px;

        .icon_wrap {
            $size: 34px;
            $border: 6px;
            width: $size;
            height: $size;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: var(--bg-color);
            border-radius: 50%;
            position: relative;

            &::after {
                content: "";
                width: $size + $border;
                height: $size + $border;
                border-radius: 50%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                background-color: var(--bg-color);
                opacity: 0.3;
            }

            .icon {
                font-size: 16px;
                color: #fff;
            }

            .img {
                width: 20px;
                height: 20px;
            }
        }

        .info {
            flex: 1;
            display: flex;
            flex-direction: column;
            padding-left: 10px;

            .m {
                font-weight: bold;
            }

            .t {
                font-size: 12px;
                color: #999;
                padding-top: 4px;
            }
        }
    }
}

.refund {
    color: #ff9731;
    font-weight: bold;
}

.table_order_info {
    .order_no {
        color: #999;
    }

    .type {
        color: #e6a23c;
    }
}

.goods_info {
    .row {
        display: flex;

        &:not(:first-child) {
            margin-top: 10px;
        }

        .cover {
            width: 40px;
            height: 40px;
        }

        .info {
            flex: 1;
            display: flex;
            flex-direction: column;
            padding-left: 10px;

            .sku {
                color: #999;
            }
        }
    }
}
</style>