<template>
    <div class="deposit-detailed">
        <div class="filter-container">
            <span>所属区域：</span>
            <el-select v-model="listQuery.manageAreaId" size="small" placeholder="请选择" class="filter-item" style="width: 160px">
                <el-option v-for="item in $root.regionOptions" :key="item.id" :label="item.name" :value="item.id"/>
            </el-select>
            <span>押金类型：</span>
            <el-select v-model="listQuery.payType" size="small" placeholder="请选择" class="filter-item">
                <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value"/>
            </el-select>
            <span>交易类型：</span>
            <el-select v-model="listQuery.depositType" size="small" placeholder="请选择" class="filter-item">
                <el-option v-for="item in putOptions" :key="item.value" :label="item.label" :value="item.value"/>
            </el-select>
            <span>交易状态：</span>
            <el-select v-model="listQuery.tradeStatus" size="small" placeholder="请选择" class="filter-item">
                <el-option v-for="item in stateOptions" :key="item.value" :label="item.label" :value="item.value"/>
            </el-select>

            <el-input placeholder="用户呢称/手机号码" v-model="listQuery.keyword" size="small" style="width: 250px;" class="filter-item" />
            <el-button class="filter-item btn" size="small" type="primary" icon="el-icon-search" @click="curPage(1)">搜索</el-button>
        </div>

        <el-table
                v-loading="listLoading"
                :data="list.resultList"
                border
                size="small"
                element-loading-text="Loading"
                :header-cell-style="{background:'rgba(60,179,113, .1)'}">
            <el-table-column prop="internalNumber" label="押金单号" align="center" width="240"></el-table-column>
            <el-table-column prop="username" label="用户昵称" align="center"></el-table-column>
            <el-table-column prop="mobile" label="手机号码" align="center" width="95"></el-table-column>
            <el-table-column label="押金类型" align="center" width="90">
                <template slot-scope="scope">
                    <span>{{ scope.row.payType | typeFilter }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="depositType" label="交易类型" align="center" width="80"></el-table-column>
            <el-table-column prop="payMoney" label="交易金额(元)" align="center"></el-table-column>
            <el-table-column prop="tradeTime" label="交纳时间" align="center"></el-table-column>
            <el-table-column prop="refundCreatTime" label="退款申请时间" align="center"></el-table-column>
            <el-table-column prop="refundTime" label="退款成功时间" align="center"></el-table-column>
            <el-table-column prop="manageAreaName" label="所属区域" align="center"></el-table-column>
            <el-table-column label="状态" align="center" width="95">
                <template slot-scope="scope">
                    <el-tag :type="scope.row.refundStatus | tagFilter">{{ scope.row.refundStatus | stateFilter }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="80">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="$refs.DepositAudit.open(false, scope.row.id)" v-show="scope.row.refundStatus==1">审核</el-button>
                    <el-button type="primary" size="mini" @click="$refs.DepositAudit.open(true, scope.row.id)" v-show="scope.row.refundStatus==4">修改</el-button>
                    <el-button type="primary" size="mini" @click="$message({ message: '审核已经通过，请耐心等待退还...', type: 'warning' })" v-show="scope.row.refundStatus==3" style="margin-left: 0">查看</el-button>
                    <el-button type="primary" size="mini" @click="$refs.AuditResult.open(true, scope.row.id)" v-show="scope.row.refundStatus==2">查看</el-button>
                    <el-button type="primary" size="mini" @click="$refs.AuditResult.open(false, scope.row.id)" v-show="scope.row.refundStatus==5">查看</el-button>
                </template>
            </el-table-column>
        </el-table>


        <div class="pagination-container" v-show="!listLoading">
            <span>共<span>{{ list.total }}</span>条记录</span>
            <el-pagination background layout="prev, pager, next" :page-size="Number(listQuery.pageSize)" :total="list.total" :current-page.sync="listQuery.pageNumber" @current-change="curPage" style="float: right;"></el-pagination>
        </div>

        <deposit-audit ref="DepositAudit" @updateList="getList"></deposit-audit>
        <!--<deposit-delay ref="DepositDelay"></deposit-delay>-->
        <audit-result ref="AuditResult"></audit-result>
    </div>
</template>

<script>
import DepositAudit from './dialog/DepositAudit'
// import DepositDelay from './dialog/DepositDelay'
import AuditResult from './dialog/AuditResult'

import api from "@/api/capital"
export default {
    name: "deposit-detailed",
    components: {
        DepositAudit,
        // DepositDelay,
        AuditResult
    },
    data() {
        return {
            listLoading: false,
            listQuery: {
                pageNumber: 1,
                pageSize: 12,
                payType: '',
                depositType: '',
                tradeStatus: '',
                manageAreaId: '',
                keyword: ''
            },
            typeOptions: [
                { label: '全部', value: '' },
                // { label: '其他', value: '0' },
                // { label: '钱包', value: '1' },
                { label: '微信小程序', value: '2' },
                { label: 'APP', value: '3' },
                // { label: '支付宝', value: '4' },
                // { label: '月卡', value: '5' },
                // { label: '周卡', value: '6' },
                // { label: '次卡', value: '7' }
            ],
            putOptions: [
                { label: '全部', value: '' },
                { label: '交纳押金', value: '0' },
                { label: '退还押金', value: '1' }
            ],
            stateOptions: [
                { label: '全部', value: '' },
                { label: '交纳成功', value: '0' },
                { label: '申请退款', value: '1' },
                { label: '退款成功', value: '2' },
                { label: '审核通过', value: '3' },
                { label: '延期退款', value: '4' },
                { label: '拒绝退款', value: '5' }
                // { label: '交纳成功', value: '0' },
                // { label: '等待审核', value: '1' },
                // { label: '退款成功', value: '2' },
                // { label: '等待退还', value: '3' },
                // { label: '延期退款', value: '4' },
                // { label: '审核不通过', value: '5' }
            ],
            list: {}
        }
    },
    filters: {
        typeFilter(type) {
            const typeMap = ['其他', '钱包', '微信小程序','微信APP', '支付宝', '月卡', '周卡', '次卡']
            return typeMap[type]
        },
        stateFilter(state) {
            // const stateMap = ['交纳成功', '申请退款(等待审核)', '退款结束(退款成功)', '审核通过(等待退还)', '延期退款', '拒绝退款(审核不通过)']
            const stateMap = ['交纳成功', '申请退款', '退款成功', '等待退还', '延期退款', '审核不通过']
            // const stateMap = ['交纳成功', '等待审核', '退款成功', '等待退还', '延期退款', '审核不通过']
            return stateMap[state]
        },
        tagFilter(tag) {
            const tagMap = ['success', 'warning', '', 'warning', 'info', 'danger']
            return tagMap[tag]
        }
    },
    methods: {
        getList() {
            this.listLoading = true
            api.depositDetailPage(this.listQuery).then(res => {
                console.log(res)
                this.list = res.results
                this.listLoading = false
            }).catch(error => {
                console.log(error)
            })
        },
        curPage(val) {
            console.log(val)
            this.listQuery.pageNumber = val
            this.getList()
        },
    },
    created() {
        this.getList()
    }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.deposit-detailed {
    .filter-container {
        padding: 0px 0 10px 12px;
        .filter-item {
            width: 120px;
            margin-right: 20px;
        }
        .btn {
            width: 90px;
        }
    }
    .pagination-container {
        margin: 20px 0 30px;
    }
    .el-button+.el-button {
        margin-left: 0px;
    }
}
</style>
