<template>
    <div class="detail">
        <el-image class="bg" :src="info.bg || require('../assets/background/bg-01@3x.png')" fit="cover"></el-image>
        <div class="detail-content center-content">
            <el-image :src="info.avatar" fit="cover" class="avatar"></el-image>
            <div class="info">
                <div class="name">
                    <span>{{ info.nickname }}</span>
                    <img v-if="userInfo.authStatus === 'SUCCESS'" src="../assets/img/renzheng_icon@3x.png" alt="" />
                </div>
                <div class="code">
                    <span>{{ info.id }}</span>
                    <img src="../assets/copy_icon.png" alt="" />
                </div>
                <div class="follow">
                    <div class="follow-info">
                        <span>关注</span>
                        <span>{{ info.follows }}</span>
                    </div>
                    <div class="follow-info">
                        <span>粉丝</span>
                        <span>{{ info.followers }}</span>
                    </div>

                    <el-button
                        style="color: #939599"
                        plain
                        round
                        :class="{ prim: !info.follow }"
                        size="mini"
                        @click="like(info)"
                    >
                        {{ info.follow ? '已关注' : '关注' }}
                    </el-button>
                    <el-popover popper-class="share-popver" placement="bottom" trigger="hover">
                        <el-button style="margin-left: 20px; color: #939599" slot="reference" plain round size="mini"
                            >分享</el-button
                        >
                        <share :info="info" pageType="castingDetail"> </share>
                    </el-popover>
                </div>

                <div class="desc" v-if="info.intro">
                    {{ info.intro }}
                </div>
            </div>

            <div class="anchor" style="height: 50px" ref="anchor"></div>

            <el-radio-group @change="change" class="menu" v-model="isOwner" 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="border" style="margin-top: 30px"></div>
            <div class="search-list">
                <el-input
                    class="search"
                    prefix-icon="el-icon-search"
                    placeholder="请输入您想找到的作品名称…"
                    v-model="search"
                    clearable
                    @change="onSearch"
                >
                </el-input>
                <div style="display: flex">
                    <el-select
                        style="margin: 30px 20px 0 0; width: 120px"
                        class="select"
                        v-model="value"
                        @change="getList"
                        placeholder="请选择"
                    >
                        <el-option
                            v-for="item in typeOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        >
                        </el-option>
                    </el-select>
                    <el-select
                        class="select"
                        style="margin-top: 30px; width: 120px"
                        v-model="sortStr"
                        placeholder="请选择"
                    >
                        <el-option v-for="item in sortList" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </div>
            </div>

            <div class="list" v-loading="fetchingData">
                <collection-info
                    v-for="(item, index) in list"
                    :key="item.id"
                    :info.sync="list[index]"
                ></collection-info>

                <el-empty v-if="empty" description="还没有该类型的藏品哦～"></el-empty>
            </div>

            <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>
    </div>
</template>

<script>
import CollectionInfo from '../components/CollectionInfo.vue';
import Share from '../components/Share.vue';
import pageableTable from '../mixins/pageableTable';
import { mapState } from 'vuex';
import user from '../mixins/user';
export default {
    components: { CollectionInfo, Share },
    mixins: [pageableTable, user],
    data() {
        return {
            info: {},
            typeList: [
                {
                    label: 'TA拥有的',
                    value: true
                },
                {
                    label: 'TA卖出的',
                    value: false
                }
            ],
            value: '',
            typeOptions: [
                {
                    label: '全部',
                    value: ''
                },
                {
                    label: '售卖',
                    value: 'ON_SALE'
                },
                {
                    label: '仅展示',
                    value: 'NORMAL'
                }
            ],
            sortList: [
                {
                    label: '综合排序',
                    value: 'createdAt,desc'
                },
                {
                    label: '热门排序',
                    value: 'likes,desc'
                },
                {
                    label: '价格从高往低',
                    value: 'price,desc'
                },
                {
                    label: '价格从低往高',
                    value: 'price,asc'
                }
            ],
            search: '',
            url: '/collection/all',
            list: [],
            isOwner: true,
            isList: false,
            page: 0
        };
    },
    mounted() {
        this.getDetail();
    },
    computed: {
        ...mapState(['userInfo'])
    },
    methods: {
        getDetail() {
            this.$http.get('/user/get/' + this.$route.query.id).then(res => {
                this.info = res;
            });
        },
        beforeGetData() {
            return {
                search: this.search,
                query: {
                    ownerId: this.$route.query.id
                }
            };
        },
        setList(list) {
            this.list = list;
        },
        change(e) {
            let status = e ? '' : true;
            let form = {
                page: 0,
                size: 20,
                query: {
                    minterId: this.info.id,
                    del: false,
                    type: 'DEFAULT',
                    salable: status
                }
            };
            this.$http.post('/collection/all', form, { body: 'json' }).then(res => {
                this.list = res.content;
            });
        },
        getList() {
            let form = {
                page: 0,
                size: 20,
                query: {
                    minterId: this.info.id,
                    del: false,
                    type: 'DEFAULT'
                }
            };
            if (this.value === '') {
                form.query = {
                    ...form.query,
                    del: false,
                    salable: ''
                };
            }
            if (this.value === 'ON_SALE') {
                form.query = {
                    ...form.query,
                    salable: true
                };
            }
            if (this.value === 'NORMAL') {
                form.query = {
                    ...form.query,
                    salable: false
                };
            }
            this.$http.post('/collection/all', form, { body: 'json' }).then(res => {
                this.list = res.content;
            });
        }
    }
};
</script>

<style lang="less" scoped>
@import url('../styles/list.less');
.bg {
    width: 100%;
    height: 240px;
    display: block;
    /deep/.el-image__error {
        background: linear-gradient(46deg, @prim 0%, @warn 100%);
        color: transparent;
    }
}
/deep/.el-input__inner {
    border: 1px solid #898989;
    background-color: transparent;
    color: #fff;
    border-radius: 8px;
}
.avatar {
    position: absolute;
    width: 92px;
    height: 92px;
    top: 0;
    left: 50px;
    transform: translateY(-50%);
    border-radius: 100px;
    border: 4px solid #fff;
}

.detail-content {
    position: relative;
    padding: 66px 50px;
}
// .select {
//     border: 1px solid #898989;
//     border-radius: 8px;
// }
.info {
    .name {
        font-size: 24px;
        font-weight: bold;
        color: #ffffff;
        line-height: 34px;
        vertical-align: middle;
        img {
            width: 18px;
            height: 18px;
            display: inline-block;
            margin-left: 6px;
            vertical-align: middle;
        }
    }

    .code {
        font-size: 16px;
        color: #949699;
        line-height: 24px;
        vertical-align: middle;
        margin-top: 6px;
        img {
            width: 18px;
            height: 18px;
            display: inline-block;
            margin-left: 6px;
            vertical-align: middle;
            cursor: pointer;
        }
    }

    .follow {
        display: flex;
        align-items: center;
        margin-top: 6px;
        .follow-info {
            font-size: 14px;
            color: #ffffff;
            line-height: 24px;
            margin-right: 30px;
            span {
                &:last-child {
                    font-size: 16px;
                    font-family: Arial-BoldMT, Arial;
                    color: #ffffff;
                    line-height: 24px;
                    margin-left: 6px;
                }
            }
        }
        .el-button {
            background-color: transparent;
            min-width: 76px;
            height: 28px;

            &.prim {
                .line(@radius:28px);
                border: 0;
                text-align: center;
                /deep/span {
                    color: @prim;
                    position: relative;
                    z-index: 1;
                }
            }
        }
    }

    .desc {
        font-size: 16px;
        color: #949699;
        line-height: 26px;
        margin-top: 16px;
    }
}
</style>
