<template>
    <div class="list-view" v-loading="loading">
        <page-title> </page-title>
        <div class="filters-container">
            <el-date-picker
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions"
                type="daterange"
                class="filter-item"
                value-format="yyyy-MM-dd"
                v-model="range"
            ></el-date-picker>
            <el-select v-model="merchantId" class="filter-item" placeholder="请选支付通道">
                <el-option v-for="item in merchantList" :value="item.id" :key="item.id" :label="item.name"></el-option>
            </el-select>
            <el-input v-model="userId" placeholder="用户ID" class="filter-item"></el-input>
            <el-button @click="getData" class="filter-item" type="primary">查询</el-button>
        </div>
        <el-table
            :height="tableHeight"
            :data="tableData"
            row-key="id"
            ref="table"
            header-row-class-name="table-header-row"
            header-cell-class-name="table-header-cell"
            row-class-name="table-row"
            cell-class-name="table-cell"
        >
            <el-table-column type="index" label="#" width="60"></el-table-column>
            <el-table-column prop="settle_date" label="日期" width="100"> </el-table-column>
            <el-table-column prop="card_name" label="姓名" width="100"> </el-table-column>
            <el-table-column prop="card_no" label="卡号"> </el-table-column>
            <el-table-column prop="settle_amt" label="金额" width="120"> </el-table-column>
            <el-table-column prop="settle_stat" label="状态" width="100" align="center">
                <template v-slot="{ row }">
                    <el-tag :type="row.settle_stat === 'succeeded' ? 'success' : 'danger'">{{
                        row.settle_stat === 'succeeded' ? '成功' : '失败'
                    }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="settle_message" label="描述" show-overflow-tooltip></el-table-column>
        </el-table>
        <div class="pagination-wrapper">
            <!-- <div class="multiple-mode-wrapper">
                <el-button v-if="!multipleMode" @click="toggleMultipleMode(true)">批量编辑</el-button>
                <el-button-group v-else>
                    <el-button @click="operation1">批量操作1</el-button>
                    <el-button @click="operation2">批量操作2</el-button>
                    <el-button @click="toggleMultipleMode(false)">取消</el-button>
                </el-button-group>
            </div> -->
        </div>
    </div>
</template>
<script>
import { mapState } from 'vuex';
import { parse, format, addDays, addMonths } from 'date-fns';
export default {
    data() {
        return {
            tableHeight: 200,
            loading: false,
            tableData: [],
            range: null,
            userId: null,
            merchantList: [],
            merchantId: null,
            userId: null,
            pickerOptions: {
                shortcuts: [
                    {
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', [new Date(), new Date()]);
                        }
                    },
                    {
                        text: '昨天',
                        onClick(picker) {
                            picker.$emit('pick', [addDays(new Date(), -1), new Date()]);
                        }
                    },
                    {
                        text: '最近一周',
                        onClick(picker) {
                            picker.$emit('pick', [addDays(new Date(), -7), new Date()]);
                        }
                    },
                    {
                        text: '最近一月',
                        onClick(picker) {
                            picker.$emit('pick', [addMonths(new Date(), -1), new Date()]);
                        }
                    }
                ]
            }
        };
    },
    computed: {},
    created() {
        this.$http.post('/adapayMerchant/all', { size: 1000 }, { body: 'json' }).then(res => {
            this.merchantList = res.content;
        });
        this.range = [format(addDays(new Date(), -7), 'yyyy-MM-dd'), format(new Date(), 'yyyy-MM-dd')];
    },
    mounted() {
        this.tableHeight = document.querySelector('.el-table').getBoundingClientRect().height;
    },
    methods: {
        getData() {
            if (!(this.range && this.range.length == 2)) {
                this.$message.error('请选择日期');
                return;
            }
            if (!this.merchantId) {
                this.$message.error('请选支付通道');
                return;
            }
            if (!this.userId) {
                this.$message.error('请输入用户ID');
                return;
            }
            this.loading = true;
            this.$http
                .post('/adapayMerchant/querySettle', {
                    start: this.range[0],
                    end: this.range[1],
                    id: this.merchantId,
                    userId: this.userId
                })
                .then(res => {
                    this.loading = false;
                    console.log(res);
                    if (res.status === 'succeeded') {
                        this.tableData = (res.settle_details || []).filter(i => i.settle_type !== 'B');
                    } else {
                        this.$message.error(res.error_msg);
                    }
                })
                .catch(e => {
                    this.loading = false;
                    this.$message.error(e.error || '查询失败');
                });
        }
    }
};
</script>
<style lang="less" scoped>
</style>
