<template>
    <div class="app-container">
        <el-form
            :model="queryParams"
            ref="queryForm"
            :inline="true"
            v-show="showSearch"
        >
            <el-form-item label="订单编号" label-position="right" label-width="145px" 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="商家编号" label-position="right" label-width="160px" prop="merchantIndex">
                <el-input
                    v-model="queryParams.merchantIndex"
                    placeholder="请输入商家编号"
                    maxlength="18"
                    clearable
                    size="small"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="店铺名称" label-position="right" label-width="160px" prop="merchantName">
            <el-input
                v-model="queryParams.merchantName"
                placeholder="请输入店铺名称"
                maxlength="20"
                clearable
                size="small"
                @keyup.enter.native="handleQuery"
            />
        </el-form-item>
        <el-form-item
            label="服务编号"
            prop="goodsIndex"
            style="margin-left: 50px"
        >
            <el-input
                v-model="queryParams.goodsIndex"
                placeholder="请输入服务编号"
                clearable
                maxlength="18"
                size="small"
                @keyup.enter.native="handleQuery"
            />
        </el-form-item>

        <el-form-item label="顾客手机号" label-position="right" label-width="145px" 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="支付渠道"
            label-position="right" label-width="130px"
            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="状态" label-position="right" label-width="120px">
            <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="支付日期" label-position="right" label-width="145px">
            <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
                    style="margin-left: 1300px"
                    type="primary"
                    size="small"
                    icon="el-icon-search"
                    @click="handleQuery"
                    plain
                    >搜索</el-button
                >
                <el-button
                    icon="el-icon-refresh"
                    size="small"
                    @click="resetQuery"
                    >重置</el-button
                >
            </el-form-item>
        </el-form>
        <p  align="right"  style="font-size:13px;">
          <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="merchantIndex"
                width="180"
                show-overflow-tooltip
            />
             <el-table-column
                label="店铺名称"
                align="center"
                prop="merchantName"
                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="100"
            />
              <el-table-column
                label="平台抽成金额（元）"
                align="center"
                prop="terraceMoney"
                width="100"
            />
            <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="120"
            >
            <template slot-scope="scope">
                 <el-tag type="danger" v-if="scope.row.orderState=='099'">{{scope.row.statusName}}</el-tag>
                <el-tag type="success" v-if="scope.row.orderState=='000'">{{scope.row.statusName}}</el-tag>
                <el-tag type="primary" v-if="scope.row.orderState=='001'">{{scope.row.statusName}}</el-tag>
                <el-tag type="warning" v-if="scope.row.orderState=='002'">{{scope.row.statusName}}</el-tag>
                 <el-tag type="warning" v-if="scope.row.orderState=='003'">{{scope.row.statusName}}</el-tag>
                <el-tag type="success" v-if="scope.row.orderState=='004'">{{scope.row.statusName}}</el-tag>
                <el-tag type="danger" v-if="scope.row.orderState=='005'">{{scope.row.statusName}}</el-tag>
                <el-tag type="danger" v-if="scope.row.orderState=='006'">{{scope.row.statusName}}</el-tag>
                <el-tag type="info" v-if="scope.row.orderState=='007'">{{scope.row.statusName}}</el-tag>
            </template>
            </el-table-column>
            <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 { getCodeList } from "@/api/basic/code";
import { orderList,orderStatistics} from "@/api/reconciliation/adminReconciliation";

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:"",
                payTimeStart:"",
                payTimeEnd:"",
                merchantIndex:"",
                payTime:[],
                beginTime:"",
                endTime:""
            },
            form: {},
            // 弹出层标题
            title: "",
            open: false,
            searchDate: "",
            statusList: [],

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

        };
    },



    created() {
        console.log("回到列表页面")
        console.log(this.$route.query)
        // console.log(this.$route.query.pageNum)
        // // 初始化参数（点击tag标签再次进入页面）
         if (this.$route.query.pageNum) {
            console.log(this.queryParams.pageNum)
            this.queryParams.pageNum = parseInt(this.$route.query.pageNum)
            console.log(this.queryParams.pageNum)
         }

        if (this.$route.query.memberPhone) {
            this.queryParams.memberPhone = this.$route.query.memberPhone
        }

        if (this.$route.query.orderState) {
            this.queryParams.orderState = this.$route.query.orderState
        }

        if (this.$route.query.orderIndex) {
            this.queryParams.orderIndex = this.$route.query.orderIndex
        }

        if (this.$route.query.merchantIndex) {
            this.queryParams.merchantIndex = this.$route.query.merchantIndex
        }

        if (this.$route.query.merchantName) {
            this.queryParams.merchantName = this.$route.query.merchantName
        }

        if (this.$route.query.goodsIndex) {
            this.queryParams.goodsIndex = this.$route.query.goodsIndex
        }

        if (this.$route.query.memberPhone) {
            this.queryParams.memberPhone = this.$route.query.memberPhone
        }

        if (this.$route.query.params) {
             if (this.$route.query.params.beginTime) {
                // console.log("==========",this.$route.query.params)
                // console.log("1",this.$route.query.params.beginTime)
                // console.log(typeof(this.dateRange))
                this.dateRange[0]=this.$route.query.params.beginTime
                this.dateRange[1]=this.$route.query.params.endTime
                console.log("-------",this.dateRange)
             }

        }

        if (this.$route.query.payWay) {
            this.queryParams.payWay = this.$route.query.payWay
        }


        this.getList();
        this.getCodeList();
        this.getOrderStatistics();
    },


    methods: {
        /** 查询订单账单列表 */

        getList() {
            console.log("查询数据前")
            console.log(this.queryParams)

            this.$store.state.tagsView.visitedViews.forEach(element => {
                if (this.$route.path === element.path) {
                    element.query = this.queryParams
                }
            });
            console.log(this.$route.query.params)

            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;

            // 查询订单账单列表
            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() {
            getCodeList("003")
                .then((res) => {
                    if (res.code == 200) {
                        this.statusList = res.data;
                    } else {
                        this.$message.error("获取状态列表失败");
                    }
                })
                .catch((err) => {
                    console.log(err);
                    this.$message.error("获取状态列表失败");
                });
        },

        getOrderStatistics(){
            this.loading = true;
            // 查询订单账单统计数据
            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;
                });
        },
        // 表单重置
        reset() {
            this.form = {
                orderId: null,
                refundMoney: null,
                refundReason: null,
                refundResult: null,
                status: null,
            };
            this.resetForm("form");
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
            this.getOrderStatistics();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.dateRange = null;
            this.queryParams = {
                pageNum: 1,
                pageSize: 10,
                beginTime: "",
                endTime: "",
                merchantId: "",
                merchantName: "",
                goodsId: "",
                memberPhone: "",
                status: "",
                orderIndex:'',
                goodsIndex:'',
                merchantIndex: "",
            };
            this.handleQuery();
            this.getOrderStatistics();
        },

        parseAddress(row) {
            if (row.addressList != null && row.addressList.size() > 0) {
                return row.addressList[0].address + row.addressList[0].detailed;
            } else {
                return "--";
            }
        },

        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },



        //详情页面跳转
        toSee(row) {
            if(row.orderType == '001'){
                 this.$router.push({
                path: "/adminOrder/order/detail",
                query: { id: row.orderId },
                });
            }else if(row.orderType == '002'){
                  this.$router.push({
                path: "/adminOrder/order/repairDetail",
                query: { id: row.orderId },
                });
            }else{
                this.$router.push({
                path: "/adminOrder/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>
