<template>
    <div class="app-container">
        <el-tabs v-model="orderType" @tab-click="getTableData">
            <el-tab-pane label="全部订单" name=""></el-tab-pane>
            <el-tab-pane label="收银订单" name="cash"></el-tab-pane>
            <el-tab-pane label="小程序订单" name="miniapp"></el-tab-pane>
        </el-tabs>
        <div class="head-container">
            <el-form :model="query" label-width="100px" label-position="left">
                <el-form-item label="订单状态">
                    <el-radio-group v-model="query.status">
                        <el-radio-button label="">全部</el-radio-button>
                        <el-radio-button :label="item.key" v-for="item in orderEnum.status" :key="item.key">
                            {{ item.label }}
                        </el-radio-button>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="支付方式">
                    <el-radio-group v-model="query.payType">
                        <el-radio-button label="">全部</el-radio-button>
                        <el-radio-button :label="item.payType" v-for="item in payTypes" :key="item.payType">
                            {{ item.payName }}
                        </el-radio-button>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="创建时间">
                    <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="结束日期" :default-time="['00:00:00', '23:59:59']"
                        value-format="yyyy-MM-dd HH:mm:ss" v-if="timeValue == 'custom'">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="订单号">
                    <el-input v-model="query.orderNo" placeholder="请输入订单号" style="width: 300px;"></el-input>
                    <el-button type="primary" @click="getTableData">查询</el-button>
                    <el-button @click="resetHandle">重置</el-button>
                    <el-button icon="el-icon-download" v-loading="downloadLoading" @click="downloadHandle">
                        <span v-if="!downloadLoading">导出Excel</span>
                        <span v-else>下载中...</span>
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="head-container">
            <div class="collect_wrap">
                <div class="item">
                    <div class="icon_wrap" style="--bg-color:#C978EE">
                        <i class="icon el-icon-s-goods"></i>
                    </div>
                    <div class="info">
                        <div class="m">￥{{ payCountTotal }}</div>
                        <div class="t">总金额</div>
                    </div>
                </div>
                <div class="item" v-for="item in payCountList" :key="item.payType">
                    <div class="icon_wrap" style="--bg-color:#fff">
                        <el-image class="img" :src="item.icon"></el-image>
                    </div>
                    <div class="info">
                        <div class="m">￥{{ item.payAmount || 0 }}</div>
                        <div class="t">{{ item.payType }}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="head-container">
            <el-table :data="tableData.data" v-loading="tableData.loading">
                <el-table-column label="订单号信息">
                    <template v-slot="scope">
                        <div class="table_order_info">
                            <div class="order_no">{{ scope.row.orderNo }}</div>
                            <!-- <div>会员 {{ scope.row.orderNo }}</div> -->
                            <div class="type">【{{ scope.row.orderType | orderTypeFilter }} {{ scope.row.sendType |
            sendTypeFilter }}】</div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="商品信息">
                    <template v-slot="scope">
                        <div class="goods_info">
                            <div class="row" v-for="item in scope.row.detailList" :key="item.id">
                                <el-image :src="item.productImg" class="cover" lazy></el-image>
                                <div class="info">
                                    <div class="name">{{ item.productName }} <span class="refund"
                                            v-if="item.status == 'refunding' || item.status == 'refund'">(退 - {{
            item.num }})</span></div>
                                    <div class="sku">{{ item.productSkuName }} </div>
                                </div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="订单金额">
                    <template v-slot="scope">
                        <div>{{ scope.row.orderType | orderTypeFilter }}</div>
                        <div class="refund" v-if="scope.row.status == 'refunding' || scope.row.status == 'refund'">
                            退款：-￥{{
            scope.row.refundAmount }}</div>
                        <div>￥{{ scope.row.productAmount }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="状态">
                    <template v-slot="scope">
                        <template v-if="scope.row.status == 'refund' && scope.row.orderType != 'return'">
                            <el-tag type="primary">已完成</el-tag>
                        </template>
                        <template v-else>
                            <el-tag type="primary" v-if="scope.row.status == 'closed'">
                                {{ scope.row.status | statusFilter }}
                            </el-tag>
                            <el-tag type="warning" v-if="scope.row.status != 'closed'">
                                {{ scope.row.status | statusFilter }}
                            </el-tag>
                        </template>
                    </template>
                </el-table-column>
                <el-table-column label="创建时间">
                    <template v-slot="scope">
                        {{ scope.row.createdAt | timeFilter }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="100">
                    <template v-slot="scope">
                        <el-button type="text" @click="$refs.orderDetail.show(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>
        <orderDetail ref="orderDetail" />
    </div>
</template>

<script>
import orderEnum from './orderEnum'
import { tbShopPayTypeGet } from '@/api/setting'
import { tbOrderInfoData, tbOrderInfoDownload, payCount } from '@/api/order'
import dayjs from 'dayjs'
import { downloadFile } from '@/utils/index'

import orderDetail from './components/orderDetail'

export default {
    components: { orderDetail },
    data() {
        return {
            orderEnum,
            payTypes: [],
            timeValue: '',
            resetQuery: null,
            orderType: "",
            query: {
                id: '',
                status: '',
                payType: '',
                orderNo: '',
                createdAt: []
            },
            tableData: {
                data: [],
                page: 0,
                size: 10,
                loading: false,
                total: 0
            },
            downloadLoading: false,
            payCountList: '',
            payCountTotal: 0
        }
    },
    filters: {
        orderTypeFilter(t) {
            if (t) {
                return t && orderEnum.orderType.find(item => item.key == t).label
            } else {
                return t
            }
        },
        sendTypeFilter(t) {
            if (t) {
                return orderEnum.sendType.find(item => item.key == t).label
            } else {
                return t
            }
        },
        statusFilter(t) {
            if (t) {
                return t && orderEnum.status.find(item => item.key == t).label
            } else {
                return t
            }
        },
        timeFilter(time) {
            return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
        }
    },
    mounted() {
        this.resetQuery = { ...this.query }
        this.tbShopPayTypeGet()
        this.getTableData()
        this.payCount()
    },
    methods: {
        // 获取订单汇总
        async payCount() {
            try {
                const res = await payCount()
                this.payCountList = res

                let total = 0
                res.map(item => {
                    total += item.payAmount
                })
                this.payCountTotal = Math.floor(total * 100) / 100
            } catch (error) {
                console.log(error);
            }
        },
        // 导出Excel
        async downloadHandle() {
            try {
                this.downloadLoading = true
                const file = await tbOrderInfoDownload({
                    orderType: this.orderType,
                    shopId: localStorage.getItem('shopId'),
                    ...this.query
                })
                downloadFile(file, '订单数据', 'xlsx')
                this.downloadLoading = false
            } catch (error) {
                this.downloadLoading = false
                console.log(error);
            }
        },
        // 重置查询
        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() {
            this.tableData.loading = true
            try {
                const res = await tbOrderInfoData({
                    page: this.tableData.page,
                    pageSize: this.tableData.size,
                    orderType: this.orderType,
                    ...this.query
                })
                this.tableData.loading = false
                this.tableData.data = res.content
                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']
            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;
            }
        },
        // 获取支付方式
        async tbShopPayTypeGet() {
            try {
                const { content } = await tbShopPayTypeGet({
                    page: 0,
                    size: 100,
                    shopId: localStorage.getItem('shopId')
                })
                this.payTypes = content
            } catch (error) {
                console.log(error)
            }
        }
    }
}
</script>

<style scoped lang="scss">
.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: .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>