<template>
    <div class="app-container">
        <el-form
            :model="queryParams"
            ref="queryForm"
            :inline="true"
            v-show="showSearch"
        >
            <el-form-item label="月份">
                <el-date-picker
                    v-model="searchDate"
                    type="monthrange"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    align="left"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    clearable
                    size="small"
                    style="width: 260px"
                >
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button
                    type="primary"
                    size="small"
                    icon="el-icon-search"
                    @click="handleQuery"
                    >搜索</el-button
                >
                <el-button
                    icon="el-icon-refresh"
                    size="small"
                    @click="resetQuery"
                    >重置</el-button
                >
                <el-button
                    style="margin-left: 10px"
                    size="small"
                    @click="handleExport"
                    >导出</el-button
                >
            </el-form-item>
        </el-form>
       
            <p align="right" style="font-size: 14px">
            <span  >可结算&nbsp;&nbsp;</span>
            <span style="font-size: 28px; color: #f59a23">{{
                formatMoney(amountInfo.sunAmout, 2)
            }}</span><span>元</span>

        </p>
       
       
        <el-table
            v-loading="loading"
            :data="dataList"
            border
            stripe
        >
            <!-- <el-table-column label="序号" align="center" type="index" /> -->
            <!-- <el-table-column type="selection" width="55"> </el-table-column> -->
            <el-table-column
                label="月份"
                align="center"
                prop="yearMonth"
                show-overflow-tooltip
            />

             <el-table-column
                label="预订服务订单收入(元)"
                align="center"
                prop="reserveIncome"
                show-overflow-tooltip
            />
             <el-table-column
                label="团购服务核销次数"
                align="center"
                prop="groupTimes"
                show-overflow-tooltip
            />
             <el-table-column
                label="已核销金额(元)"
                align="center"
                prop="groupIncome"
                show-overflow-tooltip
            />
            <el-table-column
                label="可结算金额（元）"
                align="center"
                prop="actualIncome"
            />

        </el-table>
<p style="font-size: 14px;
    text-align: left;color: #333333;">注:团购订单,可结算金额按照已核销次数计算结算金额</p>
        <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        />

    </div>
</template>

<script>
import {
    bilStatementList,
    exportBil,
    getSettleAmount,
} from "@/api/merchant/bilStatement";
import Upload from "@/components/Upload/index.vue";

export default {
    name: "Banner",
    components: {
        Upload,
    },
    name: "adminMember",
    data() {
        return {
            showSearch: true,
            loading: true,
            total: 0,
            dataList: [],
            amountInfo: {},
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                merchantIndex: "",
                merchantName: "",
                settleStatus: "",
                yearMonthStart: "",
                yearMonthEnd: "",
            },

            form: {
                personalMerchantSettleList: [],
                resourceUrl: "",
            },
            // 弹出层标题
            title: "",
            open: false,
            lookDetail: false,

            searchDate: "",

            statusList: [],
            multipleSelection: [],
            resourceImages: [],

            images: [],

        };
    },
    created() {
        this.getList();
        this.getAmountInfo();
    },
     computed: {
        merchant() {
            // console.log(">>>>>merchant<<<<<<<<" + JSON.stringify(this.$store.state.user))
            return this.$store.state.user?.merchant
        },
    },
    methods: {
        // 查询个体户账单结算分页列表
        getList() {
            this.loading = true;
            if (this.searchDate == null) {
                this.searchDate = "";
            }
            const [searchBegin, searchEnd] = this.searchDate;
            let sBegin = searchBegin;
            let sEnd = searchEnd;
            if (typeof searchBegin == "undefined") {
                var start = new Date()
                start.setTime(start.getTime()-3600 * 1000 * 24 * 30)
                this.searchDate = [start,new Date()]
                sBegin = this.timeStamp2String(start)
            }
            if (typeof searchEnd == "undefined") {
                sEnd = this.timeStamp2String(new Date())
                this.searchDate=[sBegin,sEnd]
            }

            this.queryParams.yearMonthStart = sBegin.substring(
                0,
                sBegin.lastIndexOf("-")
            );
            this.queryParams.yearMonthEnd = sEnd.substring(
                0,
                sEnd.lastIndexOf("-")
            );
            this.queryParams.merchantId = this.merchant.merchantId;
            // 查询账单结算分页列表
            bilStatementList(this.queryParams)
                .then((response) => {
                    this.dataList = response.rows;
                    this.total = parseInt(response.total);
                    // 查询统计金额
                    getSettleAmount(this.queryParams)
                        .then((res) => {
                            if (res.code === 200) {
                                if (res.data) {
                                    this.amountInfo = res.data;
                                }
                            } else {
                                this.$modal.msgError(res.msg);
                            }
                        })
                        .catch((err) => {
                            console.log(err);
                        });
                })
                .catch((err) => {
                    console.log(err);
                })
                .finally(() => {
                    this.loading = false;
                });
        },
        // 表单重置
        reset() {
            this.form = {
                personalMerchantSettleList: [],
                resourceUrl: "",
            };
            this.resetForm("form");
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.searchDate = [];
            this.queryParams = {
                pageNum: 1,
                pageSize: 10,
                yearMonthStart: "",
                yearMonthEnd: "",
                merchantId: "",
            };
            this.handleQuery();
        },

        formatMoney(s, type) {
            if (/[^0-9\.]/.test(s)) return "0";
            if (s == null || s == "") return "0";
            s = s.toString().replace(/^(\d*)$/, "$1.");
            s = (s + "00").replace(/(\d*\.\d\d)\d*/, "$1");
            s = s.replace(".", ",");
            var re = /(\d)(\d{3},)/;
            while (re.test(s)) s = s.replace(re, "$1,$2");
            s = s.replace(/,(\d\d)$/, ".$1");
            if (type == 0) {
                // 不带小数位(默认是有小数位)
                var a = s.split(".");
                if (a[1] == "00") {
                    s = a[0];
                }
            }
            return s;
        },

        setImageUrl(val) {
            this.form.urlImg = val;
        },

        // Excel导出数据
        handleExport() {
            this.queryParams.merchantId = this.merchant.merchantId;
            exportBil(this.queryParams)
                .then((res) => {
                    if (res.code === 200) {
                        if (res.data) {
                            this.$modal.msgSuccess("导出成功");
                            let url =
                                "http://fresh-life.oss-cn-shanghai.aliyuncs.com/" +
                                res.data;
                            window.open(url);
                        } else {
                            this.$modal.msgError("导出失败");
                        }
                    } else {
                        this.$modal.msgError(res.msg);
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },

        // 查询账单结算金额信息
        getAmountInfo() {
            if (this.searchDate == null) {
                this.searchDate = "";
            }
            const [searchBegin, searchEnd] = this.searchDate;
            let sBegin = searchBegin;
            let sEnd = searchEnd;
            if (typeof searchBegin == "undefined") {
                sBegin = "";
            }
            if (typeof searchEnd == "undefined") {
                sEnd = "";
            }

            this.queryParams.yearMonthStart = sBegin.substring(
                0,
                sBegin.lastIndexOf("-")
            );
            this.queryParams.yearMonthEnd = sEnd.substring(
                0,
                sEnd.lastIndexOf("-")
            );
            getSettleAmount(this.queryParams)
                .then((res) => {
                    if (res.code === 200) {
                        if (res.data) {
                            this.amountInfo = res.data;
                        }
                    } else {
                        this.$modal.msgError(res.msg);
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        timeStamp2String(datetime){

            var year = datetime.getFullYear();
            var month = datetime.getMonth() + 1 < 10 ? "0" + (datetime.getMonth() + 1) : datetime.getMonth() + 1;
            var date = datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate();
            var hour = datetime.getHours()< 10 ? "0" + datetime.getHours() : datetime.getHours();
            var minute = datetime.getMinutes()< 10 ? "0" + datetime.getMinutes() : datetime.getMinutes();
            var second = datetime.getSeconds()< 10 ? "0" + datetime.getSeconds() : datetime.getSeconds();
            return year + "-" + month + "-" + date+" "+hour+":"+minute+":"+second;
        }
    },
};
</script>

<style scoped>
.add-td {
    display: inline-block;
}
/* /deep/  */
.image-item {
    height: auto;
}
</style>
