<template>
    <div class="container">
        <div class="top">
            <div class="pay">交易记录</div>
            <div class="search-list">
                <el-input
                    class="search"
                    prefix-icon="el-icon-search"
                    placeholder="请输入您想找到的商品名称…"
                    v-model="search"
                    clearable
                    @change="onSearch"
                >
                </el-input>
            </div>
        </div>
        <div class="border"></div>
        <template>
            <el-table
                class="customer-table"
                :header-cell-style="{ background: '#1c1e26' }"
                :data="tableData"
                :border="false"
                :highlight-current-row="false"
                style="width: 100%; background: #1c1e26"
            >
                <el-table-column prop="payMethod" label="支付类型" width="148" :formatter="statusFormatter">
                    <template slot-scope="scope">
                        <div :style="{ color: '#fdfb60' }" v-if="scope.row.payMethod === 'WEIXIN'">微信</div>
                        <div :style="{ color: '#fdfb60' }" v-if="scope.row.payMethod === 'ALIPAY'">支付宝</div>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="藏品信息" width="248">
                    <template slot-scope="scope">
                        <div style="display: flex; align-items: center">
                            <img
                                style="width: 60px; height: 60px; border-radius: 4px"
                                :src="scope.row.minterAvatar"
                                alt=""
                            />
                            <div
                                style="
                                    margin-left: 10px;
                                    width: 113px;
                                    height: 48px;
                                    display: flex;
                                    align-items: center;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                "
                            >
                                {{ scope.row.name }}
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column style="color: #fdfb60" prop="minter" label="来源" width="140"> </el-table-column>
                <!-- <el-table-column prop="username" label="去向" width="190"> </el-table-column> -->
                <el-table-column prop="payTime" label="交易时间" width="278"> </el-table-column>
                <el-table-column fixed="right" label="操作">
                    <template slot-scope="scope">
                        <img
                            style="width: 24px; height: 24px; cursor: pointer"
                            @click="handleClick(scope.row)"
                            src="../../assets/user/icon_shanchu@3x.png"
                            alt=""
                        />
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <div class="pagination-wrapper">
            <el-pagination
                @size-change="onSizeChange"
                @current-change="onCurrentChange"
                :current-page="page"
                :page-sizes="[10, 20, 30, 40, 50]"
                :page-size="pageSize"
                layout="total, prev, pager, next"
                :total="totalElements"
            >
            </el-pagination>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import list from '../../mixins/list';
export default {
    data() {
        return {
            tableData: [],
            url: '/order/all',
            search: '',
            list: [],
            statusOptions: [
                { label: '微信', value: 'WEIXIN' },
                { label: '支付宝', value: 'ALIPAY' }
            ]
        };
    },
    mixins: [list],

    computed: {
        ...mapState(['userInfo'])
    },
    mounted() {
        this.getData();
    },
    methods: {
        statusFormatter(row, column, cellValue, index) {
            let selectedOption = this.statusOptions.find(i => i.value === cellValue);
            if (selectedOption) {
                return selectedOption.label;
            }
            return '';
        },
        beforeData() {
            return {
                search: this.search,
                query: {
                    userId: this.userInfo.id,
                    hide: false,
                    del: false
                }
            };
        },
        setList(list) {
            this.tableData = list;
        },
        handleClick(row) {
            this.$confirm('确定删除该订单吗？', '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '退出',
                customClass: 'myClass',
                type: 'warning'
            }).then(() => {
                this.$http
                    .post('/order/hide/', {
                        id: row.id
                    })
                    .then(() => {
                        //hide:false
                        this.$message.success('删除成功');
                        setTimeout(() => {
                            this.getData();
                        }, 1000);
                    });
            });
        }
    }
};
</script>
<style lang="less">
.myClass {
    .el-button {
        background: linear-gradient(133deg, @prim 0%, @warn 100%);
        border-radius: 4px;
        border: 0;
    }
    .el-button:nth-last-child(2) {
        background: #c4c7cc;
        color: #ffffff;
        font-size: 13px;
    }
}
</style>
<style lang="less" scoped>
/deep/ .el-table__header {
    background: #1c1e26 !important;
}
/deep/ .el-table__row {
    background: #1c1e26 !important;
    .cell {
        color: #ffffff;
    }
}
/deep/ .el-table__empty-block {
    background: #1c1e26 !important;
}
/deep/ .el-table__empty-text {
    padding-top: 150px;
}
.pagination-wrapper {
    .pagination();
}
/deep/ .el-table {
    margin-left: -10px;
}
.search {
    background: #1a1a1a;
    width: 280px;
    height: 42px;
    border-radius: 8px;

    /deep/.el-input__inner {
        border: 1px solid #898989;
        background-color: transparent;
        color: #fff;
        border-radius: 8px;
        &:focus {
            border-color: #fff;
        }
    }
}
/deep/ .el-empty {
    margin: 0 auto;
}
.search-list {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .select {
        /deep/.el-input__inner {
            background-color: transparent;
            color: #fff;
        }
    }
}
.container {
    padding: 40px 16px 0;
    width: 938px;
    .top {
        .flex();
        justify-content: space-between;
        .pay {
            font-size: @menuFont;
            font-weight: bold;
            color: #ffffff;
            line-height: 28px;
        }
        .text1 {
            font-size: 14px;
            font-weight: 400;
            color: #ffffff;
            line-height: 25px;
        }
        .text2 {
            width: 106px;
            height: 42px;
            border-radius: 8px;
            border: 1px solid #939599;
            line-height: 42px;
            text-align: center;
            font-size: 14px;
            color: #939599;
            cursor: pointer;
        }
        span {
            width: 26px !important;
            height: 26px !important;
            // font-size: 16px;
            color: #939599;
        }
    }
    .border {
        height: 1px;
        background: #494a4d;
        border-radius: 1px;
        margin: 24px 0 24px;
    }
}
</style>
<style lang="less">
.customer-table th {
    border: none !important;
    line-height: 24px;
}
.customer-table th > .cell {
    font-weight: normal !important;
}
.customer-table td,
.customer-table th.is-leaf {
    border: none;
    padding: 16px 0;
}
//表格最外边框
.el-table--border,
.el-table--group {
    border: none;
}
// 头部边框
.customer-table thead tr th.is-leaf {
    border: 1px solid #ebeef5;
    border-right: none;
}
.customer-table thead tr th:nth-last-of-type(2) {
    border-right: 1px solid #ebeef5;
}
// 表格最外层边框-底部边框
.el-table--border::after,
.el-table--group::after {
    width: 0;
}
.customer-table::before {
    width: 0;
}
.customer-table .el-table__fixed-right::before,
.el-table__fixed::before {
    width: 0;
}
//表格有滚动时表格头边框
.el-table--border th.gutter:last-of-type {
    border: 1px solid #ebeef5;
    border-left: none;
}
</style>
