<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="160px" prop="merchantIndex">
                <el-input
                    v-model="queryParams.merchantIndex"
                    placeholder="请输入商家编号"
                    clearable
                    maxlength="30"
                    size="small"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
              <el-form-item label="店铺名称" label-position="right" label-width="190px" prop="merchantName">
                <el-input
                    v-model="queryParams.merchantName"
                    placeholder="请输入店铺名称"
                    clearable
                    maxlength="30"
                    size="small"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
             <el-form-item label="服务编号" label-position="right" label-width="140px" prop="goodsIndex">
                <el-input
                    v-model="queryParams.goodsIndex"
                    placeholder="请输入服务编号"
                    clearable
                    maxlength="30"
                    size="small"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
           
            <el-form-item
                label="服务名称"
                label-position="right" label-width="130px"
                prop="goodsName"
                style="margin-left: 5px"
            >
                <el-input
                    v-model="queryParams.goodsName"
                    placeholder="请输入服务名称"
                    clearable
                    maxlength="20"
                    size="small"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
           
            <el-form-item
                label="类型"
                label-position="right" label-width="130px"
                prop="changeType"
                style="margin-left: 30px"
            >
                <el-select
                    v-model="queryParams.changeType"
                    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-option label="顾客使用优金豆下单" value="003"></el-option>
                    <el-option label="顾客退款" value="004"></el-option>
                </el-select>
            </el-form-item>
            
              <el-form-item label="发生日期" label-position="right" label-width="190px">
            <el-date-picker
                v-model="dateRange"
                type="daterange"
                value-format="yyyy-MM-dd HH:mm:ss"
                align="left"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                clearable=""
                style="width: 280px"
                size="small"
                :default-time="['00:00:00','23:59:59']"
            >
            </el-date-picker>
        </el-form-item>
       <el-form-item>
                <el-button
                    style="margin-left: 425px"
                    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>

        <el-table v-loading="loading" :data="dataList" border stripe>
            <!-- <el-table-column label="序号" align="center" type="index" /> -->
             <el-table-column
                label="商家编号"
                align="center"
                prop="merchantIndex"
                width="200"
                show-overflow-tooltip
            />
             <el-table-column
                label="店铺名称"
                align="center"
                prop="merchantName"
                width="200"
                show-overflow-tooltip
            />
            <el-table-column
                label="服务编号"
                align="center"
                prop="goodsIndex"
                width="200"
                show-overflow-tooltip
            >
                 <template slot-scope="scope">
                    <span>{{scope.row.changeType == '001'?"__":scope.row.goodsIndex}}</span>
                </template>
            </el-table-column>
           
            <el-table-column
                label="服务名称"
                align="center"
                prop="goodsName"
                width="200"
                show-overflow-tooltip
            >
                 <template slot-scope="scope">
                    <span>{{scope.row.changeType == '001'?"__":scope.row.goodsName}}</span>
                </template>
            </el-table-column>
           
             <el-table-column
                label="类型"
                align="center"
                prop="changeType"
                show-overflow-tooltip
                
            >
                <template slot-scope="scope">
                    <span v-if="scope.row.changeType == '001'">保证金充值</span>
                    <span v-if="scope.row.changeType == '002'">点评支出优金豆</span>
                    <span v-if="scope.row.changeType == '003'">顾客使用优金豆下单</span>
                    <span v-if="scope.row.changeType == '004'">顾客退款</span>
                </template>
            </el-table-column>
             <!-- <el-table-column
                label="交易单号"
                align="center"
                prop="tradeNo"
                width="200"
                show-overflow-tooltip
            >
                 <template slot-scope="scope">
                    <span>{{scope.row.changeType == '002' ?"__":scope.row.tradeNo}}</span>
                </template>
            </el-table-column> -->
              <el-table-column
                label="交易单号"
                align="center"
                prop="tradeNo"
                width="200"
                show-overflow-tooltip
            />
            <el-table-column
                label="优金豆（个）"
                align="center"
                prop="changeQty"
                width="100"
            >
                <template slot-scope="scope">
                    <span v-if="scope.row.changeProperty == '1'">+{{scope.row.changeQty}}</span>
                    <span v-if="scope.row.changeProperty == '0'">-{{scope.row.changeQty}}</span>
                </template>
            </el-table-column>
           
          
            <el-table-column
                label="发生时间"
                align="center"
                prop="createTime"
                
            >
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.createTime) }}</span>
                </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 {ujdList} from "@/api/reconciliation/adminReconciliation";
export default {
    name: "adminMember",
    data() {
        return {
            // 日期范围
            dateRange: "",
            showSearch: true,
            loading: true,
            total: 0,
            dataList: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                beginTime: "",
                endTime: "",
                // merchantId: "",
                merchantIndex: "",
                merchantName: "",
                goodsId: "", 
                goodsIndex: "",
                goodsName: "",  
                categoryId: "", 
                orderType: "", 
                status: "", 
            },
            form: {},

            searchDate: "",
            categoryList: [],
            statusList: [],
            optionProps: {
                value: "categoryId",
                label: "categoryName",
                children: "childrenCategory",
            },
            
        };
    },
    created() {
        this.getList();   
    },
    
    methods: {
        /** 查询待审核列表 */
        getList() {
            if(this.dateRange == null){
                    this.dateRange = ''
                }
            this.loading = true;
            if (this.searchDate == null) {
                this.searchDate = "";
            }
            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;
          // console.log('hhhhh')
            // 查询保证金账单列表  
            ujdList(this.addDateRange(this.queryParams, this.dateRange))
                .then((response) => {
                    console.log('ujdList')
                    console.log(response);
                    this.dataList = response.rows;

                    this.total = parseInt(response.total);
                    console.log(this.total)
                })
                .catch((err) => {
                    console.log(err);
                })
                .finally(() => {
                    this.loading = false;
                });
               
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.dateRange = null;
            this.queryParams = {
                pageNum: 1,
                pageSize: 10,
                beginTime: "",
                endTime: "",
                // merchantId: "",
                merchantIndex: "",
                merchantName: "",
                goodsId: "", 
                goodsIndex: "",
                status: "",
            };
            this.handleQuery();
        },
 
        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>
