<template>
    <div class="container">
        <div class="top">
            <el-radio-group class="menu" v-model="type" size="normal">
                <el-radio-button v-for="(item, index) in typeList" :key="index" :label="item.value">
                    <div class="radio-item">
                        <span>{{ item.label }}</span>
                    </div>
                </el-radio-button>
            </el-radio-group>
            <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', fontWeight: 'bold' }"
                :data="tableData"
                :border="false"
                :highlight-current-row="false"
                style="width: 100%; background: #1c1e26"
            >
                <el-table-column prop="name" label="藏品信息" width="158">
                    <template slot-scope="scope">
                        <img
                            style="width: 60px; height: 60px; border-radius: 4px; margin-left: 4px"
                            :src="scope.row.minterAvatar"
                            alt=""
                        />
                        <div
                            style="
                                width: 88px;
                                height: 24px;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                            "
                        >
                            {{ scope.row.name }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="minter" label="卖家" width="104"> </el-table-column>
                <el-table-column prop="nickname" label="买方" width="104">
                    <!-- <template slot-scope="scope"> -->
                    <div
                        style="
                            width: 88px;
                            height: 24px;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        "
                    >
                        {{ userInfo.nickname }}
                    </div>
                    <!-- </template> -->
                </el-table-column>
                <el-table-column prop="price" label="金额" width="100">
                    <template slot-scope="scope">
                        <div style="display: flex">
                            <img
                                style="width: 10px; height: 11px; margin-top: 9px"
                                src="../../assets/img/icon_jiage@3x.png"
                                alt=""
                            />
                            <div
                                style="color: #fdfb60; font-size: 30px; font-family: OSP-DIN, OSP; font-weight: normal"
                            >
                                {{ scope.row.price }}
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="id" label="订单编号" width="120"> </el-table-column>
                <el-table-column prop="createdAt" label="成交时间" width="158"> </el-table-column>
                <el-table-column prop="status" label="状态" width="108" :formatter="statusFormatter">
                    <template slot-scope="scope">
                        <div :style="{ color: '#fdfb60' }" v-if="scope.row.status === 'FINISH'">已完成</div>
                        <div :style="{ color: '#fdfb60' }" v-if="scope.row.status === 'PROCESSING'">交易中</div>
                    </template>
                </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: [],
            typeList: [
                {
                    label: '全部',
                    value: 'PROCESSING,FINISH'
                },
                {
                    label: '交易中',
                    value: 'PROCESSING'
                },
                {
                    label: '已完成',
                    value: 'FINISH'
                }
            ],
            type: 'PROCESSING,FINISH',
            url: '/order/all',
            // /asset/all
            search: '',
            name1: '',
            list: [],
            lists: [],
            statusOptions: [
                { label: '已完成', value: 'FINISH' },
                { label: '交易中', value: 'PROCESSING' }
            ]
        };
    },
    mixins: [list],
    computed: {
        ...mapState(['userInfo']),
        status() {
            return this.tableData.map(item => {
                if (item.status === 'FINISH') {
                    return '已完成';
                } else {
                    return '交易中';
                }
            });
        }
    },
    watch: {
        type() {
            this.$router
                .replace({
                    query: {
                        userId: this.userInfo.id,
                        type: this.type
                    }
                })
                .catch(() => {});
            this.getData();
        }
    },
    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,
                    status: this.type,
                    hide: false,
                    del: false
                }
            };
        },
        setList(list) {
            // list.forEach(item => {
            //     item.nickname = this.userInfo.nickname;
            //     this.lists.push(item);
            //     this.tableData = this.lists;
            // });
            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-text {
    padding-top: 150px;
}
/deep/ .el-table__empty-block {
    background: #1c1e26 !important;
}
.pagination-wrapper {
    .pagination();
}
.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/.menu {
    .el-radio-button__inner {
        border-color: #949699;
        background-color: transparent;
        color: #949699;
        width: 140px;
        height: 42px;

        span {
            font-size: 16px !important;
        }
    }
    .el-radio-button__orig-radio:checked + .el-radio-button__inner {
        background: linear-gradient(46deg, @prim 0%, @warn 100%);
        color: #fff;
        border-color: #fff;
    }
    .el-radio-button {
        font-size: 16px !important;
        &:last-child {
            .el-radio-button__inner {
                border-radius: 0 8px 8px 0;
            }
        }
        &:first-child {
            .el-radio-button__inner {
                border-radius: 8px 0 0 8px;
            }
        }
    }
}
/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: 30px 16px 0;

    .top {
        .flex();
        justify-content: space-between;
    }
    .border {
        height: 1px;
        background: #494a4d;
        border-radius: 1px;
        margin: 24px 0 34px;
    }
}
</style>
<style lang="less">
.customer-table th {
    // font-weight: bold !important;
    border: none !important;
}
.customer-table td,
.customer-table th.is-leaf {
    border: none;
    // font-weight: bold !important;
}
//表格最外边框
.el-table--border,
.el-table--group {
    border: none;
}
// 头部边框
.customer-table thead tr th.is-leaf {
    font-weight: bold !important;
    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>
