<template>
    <div class="app-container">
        <el-form
            :model="queryParams"
            ref="queryForm"
            :inline="true"
            v-show="showSearch"
        >
            <el-form-item label="订单编号" prop="orderIndex">
                <el-input
                    v-model="queryParams.orderIndex"
                    placeholder="请输入订单编号"
                    clearable
                    maxlength="18"
                    size="small"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item
                label="服务编号"
                prop="goodsIndex"
                style="margin-left: 30px"
            >
                <el-input
                    v-model="queryParams.goodsIndex"
                    placeholder="请输入服务编号"
                    clearable
                    maxlength="18"
                    size="small"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>

            <el-form-item label="顾客手机号" prop="memberPhone">
                <el-input
                    v-model="queryParams.memberPhone"
                    placeholder="请输入顾客手机号"
                    clearable
                    maxlength="11"
                    size="small"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>

            <el-form-item
                label="支付方式"
                prop="payWay"
                style="margin-left: 30px"
            >
                <el-select
                    v-model="queryParams.payWay"
                    placeholder="请选择"
                    clearable
                    size="small"
                    @keyup.enter.native="handleQuery"
                >
                    <el-option label="全部" value=""></el-option>
                    <el-option label="微信" value="001"></el-option>
                    <el-option label="支付宝" value="002"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="状态">
                <el-select
                    v-model="queryParams.orderState"
                    placeholder="请选择"
                    size="small"
                    @keyup.enter.native="handleQuery"
                >
                    <el-option
                        v-for="item in statusList"
                        :key="item.decodeValue"
                        :label="item.decodeValue"
                        :value="item.decodeId"
                    >
                    </el-option>
                </el-select>

            </el-form-item>
          <el-form-item label="支付日期">
                <el-date-picker
                    v-model="dateRange"
                    type="daterange"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    style="width: 280px"
                    size="small"
                >
                </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-form-item>
        </el-form>
        <p style="font-size:13px;text-align:right;">
          <span>店铺入账总金额&nbsp;&nbsp;</span><span style="font-size:28px;color:#F59A23">{{formatMoney(shopMoney,2)}}</span><span>元,</span>
           <span>&nbsp;&nbsp;平台抽成总额&nbsp;</span><span style="font-size:28px;color:#F59A23">{{formatMoney(terraceMoney,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
                label="订单编号"
                align="center"
                prop="orderIndex"
                width="180"
                show-overflow-tooltip
            />
            <el-table-column
                label="服务编号"
                align="center"
                prop="goodsIndex"
                width="180"
                show-overflow-tooltip
            />


            <el-table-column
                label="订单金额"
                align="center"
                prop="orderAmount"
                width="100"
            />
            <el-table-column
                label="支付金额"
                align="center"
                prop="totalAmount"
                width="100"
            />
              <el-table-column
                label="使用优金豆"
                align="center"
                prop="beanAmount"
                width="100"
            />
              <el-table-column
                label="店铺入账金额（元）"
                align="center"
                prop="shopAmount"
                width="150"
            />
              <el-table-column
                label="平台抽成金额（元）"
                align="center"
                prop="terraceMoney"
                width="150"
            />
            <el-table-column
                label="顾客手机号"
                align="center"
                prop="memberPhone"
                width="120"
            />



            <el-table-column
                label="支付渠道"
                align="center"
                prop="payWay"
            >
                <template slot-scope="scope">
                    <span v-if="scope.row.payWay == '001'">微信</span>
                    <span v-if="scope.row.payWay == '002'">支付宝</span>
                </template>
            </el-table-column>
             <el-table-column
                label="支付时间"
                align="center"
                prop="payTime"
                width="160"
            >
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.payTime) }}</span>
                </template>
            </el-table-column>

            <el-table-column
                label="状态"
                align="center"
                prop="statusName"
                width="100"
            />
            <el-table-column
                label="操作"
                align="center"
                width="220"
                fixed="right"
            >
                <template slot-scope="scope">

                    <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-view"
                    @click="toSee(scope.row)"
                    v-hasPermi="['system:order:edit']"
                    >查看详情</el-button
                    >

                </template>
            </el-table-column>
        </el-table>

        <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        />

    </div>
</template>

<script>

import { listCode } from "../../../api/system/dict/code";
import { orderList,orderStatistics} from "@/api/merchant/reconciliation";

export default {
    name: "adminMember",
    data() {
        return {
             // 日期范围
            dateRange: "",
            showSearch: true,
            loading: true,
            total: 0,
            dataList: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                orderId:'',
                goodsId:'',
                orderIndex:'',
                goodsIndex:'',
                memberPhone:"",
                payWay:"",
                orderState:"",
            },
            statusList: [],

            //店铺入账金额
            shopMoney:'',
            //平台抽成
            terraceMoney:'',

        };
    },

    created() {

        this.getList();
        this.getCodeList();
        this.getOrderStatistics();
    },
    computed: {
        merchant() {
            // console.log(">>>>>merchant<<<<<<<<" + JSON.stringify(this.$store.state.user))
            return this.$store.state.user?.merchant
        },
    },
    methods: {
        /** 查询订单账单列表 */
        getList() {
            if(this.dateRange == null){
                    this.dateRange = ''
                }
            this.loading = true;

            const [searchBegin, searchEnd] = this.dateRange;
                let sBegin = searchBegin;
                let sEnd = searchEnd;
                if (typeof searchBegin == "undefined") {
                var start = new Date()
                        start.setTime(start.getTime()-3600 * 1000 * 24 * 30)
                        this.dateRange = [start,new Date()]
                        sBegin = this.timeStamp2String(start)
                }
                if (typeof searchEnd == "undefined") {
                    sEnd = this.timeStamp2String(new Date())
                            this.dateRange=[sBegin,sEnd]
                }
                this.queryParams.beginTime = sBegin;
                this.queryParams.endTime = sEnd;
            // 查询订单账单列表
            this.queryParams.merchantId = this.merchant.merchantId;
            orderList( this.addDateRange(this.queryParams, this.dateRange))
                .then((response) => {
                    console.log(response);
                    this.dataList = response.rows;

                    this.total = parseInt(response.total);
                })
                .catch((err) => {
                    console.log(err);
                })
                .finally(() => {
                    this.loading = false;
                });
        },
        getCodeList() {
                 let param = {
                codeValue: "订单状态",
            };
            listCode(param).then((res) => {
                this.statusList = res.rows;
            });
        },
        getOrderStatistics(){
            this.loading = true;
            // 查询订单账单统计数据
            this.queryParams.merchantId = this.merchant.merchantId;
            orderStatistics(this.addDateRange(this.queryParams, this.dateRange))
                .then((res) => {
                    console.log(res)
                   if(res.code==200){
                       this.terraceMoney=res.data.terraceMoney;
                       this.shopMoney = res.data.shopMoney;
                   }
                })
                .catch((err) => {
                    console.log(err);
                })
                .finally(() => {
                    this.loading = false;
                });
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
            this.getOrderStatistics();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.dateRange = null;
            this.queryParams = {
                pageNum: 1,
                pageSize: 10,
                beginTime: "",
                endTime: "",
                merchantId: "",
                goodsId: "",
                memberPhone: "",
                status: "",
                orderIndex:'',
                goodsIndex:'',
            };
            this.handleQuery();
            this.getOrderStatistics();
        },
        //详情页面跳转
        toSee(row) {
            // 订单类型 code 001家政 002维修 003家政团购
            if(row.orderType == '001'){
                this.$router.push({
                path: "/order/housekeepingDetail",
                query: { id: row.orderId },
                });
            }else if(row.orderType == '002'){
                this.$router.push({
                path: "/order/repairDetail",
                query: { id: row.orderId },
             });
            }else{
                this.$router.push({
                path: "/order/groupDetail",
                query: { id: row.orderId },
             });
            }
        },
         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;
        },
        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></style>
