<template>
    <div class="container">
        <div class="top">
            <el-upload :action="uploadUrl" :show-file-list="false" :before-upload="beforeAvatarUpload2">
                <img class="top" :src="userInfo.bg || require('../../assets/img/bg-moren@3x.png')" alt="" />
                <i class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <div class="btn">更换背景</div>
        </div>
        <div class="top1">
            <div class="title">
                <div class="text">
                    <div
                        class="text2"
                        @click="tab(item)"
                        v-for="(item, index) in tabs"
                        :key="index"
                        :class="{ active: active === item }"
                    >
                        <div v-if="item === '粉丝'" class="text3">{{ userInfo.followers }}</div>
                        <div v-if="item === '关注'" class="text3">{{ userInfo.follows }}</div>
                        {{ item }}
                    </div>
                </div>
            </div>
            <el-upload :action="uploadUrl" :show-file-list="false" :before-upload="beforeAvatarUpload">
                <img v-if="userInfo.avatar" class="img2" :src="userInfo.avatar" alt="" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </div>
        <div class="userContent" v-if="active === '关注' || active === '粉丝'">
            <div class="border"></div>
            <el-empty v-if="empty" description="还没有哦～"></el-empty>
            <div v-for="item in list" :key="item.id">
                <div class="box">
                    <router-link :to="{ path: '/castingDetail?id=' + item.id }">
                        <div class="text">
                            <img class="img4" :src="item.avatar" alt="" />
                            <div class="box2">
                                <div class="name">
                                    <div class="name1">{{ item.nickname }}</div>
                                    <img class="name2" src="../../assets/img/renzheng_icon@3x.png" alt="" />
                                </div>
                                <div class="text2">暂无</div>
                                <div class="box3">
                                    <div class="box4">
                                        <div class="text4">
                                            粉丝 <span>{{ item.follows }}</span>
                                        </div>
                                        <div class="text4">
                                            已售 <span>{{ item.sales }}</span>
                                        </div>
                                    </div>
                                    <el-button
                                        style="color: #939599"
                                        plain
                                        round
                                        :class="{ prim: !item.follow }"
                                        size="mini"
                                        @click.prevent="like(item)"
                                    >
                                        {{ item.follow ? '已关注' : '关注' }}
                                    </el-button>
                                </div>
                            </div>
                            <!-- <div class="imgBox" v-if="item.bg">
                                <img class="imgBox1" :src="item.bg" alt="" />
                            </div> -->
                        </div>
                    </router-link>
                </div>
            </div>
        </div>
        <div class="content" v-if="active !== '关注' && active !== '粉丝'">
            <div class="name">基本信息</div>
            <div class="box">
                <div class="text">
                    <div class="text1">
                        <img class="icon" src="../../assets/user/fenxiang-icon@3x (1).png" alt="" />
                    </div>
                    <div class="text2">昵称</div>
                    <div class="text3">{{ userInfo.nickname || userInfo.username }}</div>
                </div>
                <div class="text4" @click="username">修改</div>
            </div>
            <div class="box">
                <div class="text">
                    <div class="text1">
                        <img class="icon" src="../../assets/user/fenxiang-icon@3x (2).png" alt="" />
                    </div>
                    <div class="text2">编码</div>
                    <div class="text3">{{ userInfo.id }}</div>
                </div>
                <div class="text4" :data-clipboard-text="userInfo.id" @click="copy">复制</div>
            </div>
            <div class="box">
                <div class="text">
                    <div class="text1">
                        <img class="icon" src="../../assets/user/icon-jianjie@3x (1).png" alt="" />
                    </div>
                    <div class="text2">简介</div>
                    <div class="text3">{{ userInfo.intro || '暂无介绍' }}</div>
                </div>
                <div class="text4" @click="intro">修改</div>
            </div>
            <div class="box">
                <div class="text">
                    <div class="text1">
                        <img class="icon" src="../../assets/user/fenxiang-icon@3x (3).png" alt="" />
                    </div>
                    <div class="text2">邮箱</div>
                    <div class="text3">{{ userInfo.email || '暂无' }}</div>
                </div>
                <div class="text4" @click="open">修改</div>
            </div>
            <div class="border"></div>
            <div class="name">账号安全</div>
            <div class="box">
                <div class="text">
                    <div class="text1">
                        <img class="icon" src="../../assets/user/icon_zhanghao@3x.png" alt="" />
                    </div>
                    <div class="text6">登录账号</div>
                    <div class="text3">{{ Phone }}</div>
                </div>
                <div class="text4" @click="all('security')">修改</div>
            </div>
            <div class="box">
                <div class="text">
                    <div class="text1">
                        <img class="icon" src="../../assets/user/icon_mima@3x (1).png" alt="" />
                    </div>
                    <div class="text6">登录密码</div>
                    <div class="text3">********</div>
                </div>
                <div class="text4" @click="all('modifypad')">修改</div>
            </div>
            <div class="box">
                <div class="text">
                    <div class="text1">
                        <img class="icon" src="../../assets/user/icon_mima@3x (1).png" alt="" />
                    </div>
                    <div class="text6">交易密码</div>
                    <div class="text3">付款时用来认证身份信息</div>
                </div>
                <div class="text4" @click="all('/transaction')">修改</div>
            </div>
            <div class="border"></div>
            <div class="name">认证信息</div>
            <div class="box">
                <div class="text">
                    <div class="text1">
                        <img class="icon" src="../../assets/user/icon-renzheng@3x.png" alt="" />
                    </div>
                    <div class="text2">实名认证</div>
                    <div class="text3">{{ Status }}</div>
                </div>
                <div class="text4" @click="Auths">{{ Status }}</div>
            </div>
        </div>
    </div>
</template>
<script>
import { mapState } from 'vuex';
import resolveUrl from 'resolve-url';
import user from '../../mixins/user';
import Clipboard from 'clipboard';
// import FansInfo from '../../components/FansInfo.vue';
export default {
    created() {
        this.uploadUrl = resolveUrl(this.$baseUrl, 'upload/file');
    },
    // components: { FansInfo },
    mixins: [user],
    data() {
        return {
            tabs: ['粉丝', '关注'],
            active: '',
            list: '',
            empty: false,
            value: '',
            url: '/identityAuth/all',
            org: '',
            lists: []
        };
    },
    computed: {
        ...mapState(['userInfo']),
        Phone() {
            return this.userInfo.phone.slice(0, 3) + ' **** ' + this.userInfo.phone.slice(7, 11);
        },
        type() {
            return this.lists[0].org;
        },
        Status() {
            if (this.userInfo.authStatus === 'NOT_AUTH') {
                return '未认证';
            } else if (this.userInfo.authStatus === 'PENDING') {
                return '认证中';
            } else if (this.userInfo.authStatus === 'SUCCESS') {
                return '已认证';
            } else {
                return '认证失败';
            }
        }
    },
    mounted() {
        setTimeout(() => {
            this.add();
        }, 1000);
    },
    methods: {
        aFn() {
            this.beforeAvatarUpload2();
            console.log(222);
        },
        add() {
            this.$http
                .post(
                    '/identityAuth/all',
                    {
                        query: {
                            userId: this.userInfo.id
                        },
                        sort: 'createdAt,desc',
                        size: 1,
                        page: 0
                    },
                    {
                        body: 'json'
                    }
                )
                .then(res => {
                    this.lists = res.content[0].org;
                    console.log(this.lists);
                });
        },
        beforeAvatarUpload(file) {
            this.updateFile(file, 100).then(img => {
                this.updateUser({ avatar: img }).then(res => {
                    // console.log(res);
                });
            });
        },
        beforeAvatarUpload2(file) {
            this.updateFile(file, 1080).then(img => {
                this.updateUser({ bg: img }).then(res => {
                    // console.log(res);
                });
            });
        },
        tab(e) {
            this.active = e;
            if (e === '关注') {
                this.$http.get('/user/myFollows').then(res => {
                    this.list = res;
                    this.$store.dispatch('getUserInfo');
                    if (this.list.length === 0) {
                        this.empty = true;
                    } else {
                        this.empty = false;
                    }
                });
            } else {
                this.$http.get('/user/myFollowers').then(res => {
                    this.list = res;
                    this.$store.dispatch('getUserInfo');
                    if (this.list.length === 0) {
                        this.empty = true;
                    } else {
                        this.empty = false;
                    }
                });
            }
        },
        beforeData() {
            return {
                query: {
                    userId: this.userInfo.id
                }
            };
        },
        Auths() {
            if (this.userInfo.authStatus === 'NOT_AUTH') {
                this.$router.push('/authentication');
            } else {
                this.$nextTick(() => {
                    console.log(this.lists);
                    setTimeout(() => {
                        if (this.userInfo.authStatus !== 'NOT_AUTH' && this.lists == false) {
                            this.add();
                            this.$router.push('/userauthentication');
                        }
                    }, 1000);
                    setTimeout(() => {
                        if (this.userInfo.authStatus !== 'NOT_AUTH' && this.lists == true) {
                            this.add();
                            this.$router.push('/enterpriseauthentication');
                        }
                    }, 1000);
                });
            }
            // ROLE_INSTITUTION 企业
            // ROLE_PERSONAL 个人
        },
        username() {
            this.value = this.userInfo.nickname;
            console.log(this.value);
            this.$prompt('请输入昵称', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                customClass: 'myClass'
            })
                .then(({ value }) => {
                    this.updateUser({ nickname: value }).then(res => {
                        // console.log(res);
                    });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消输入'
                    });
                });
        },
        intro() {
            this.$prompt('请输入简介', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputType: 'textarea',
                customClass: 'myClass'
            })
                .then(({ value }) => {
                    this.updateUser({ intro: value }).then(res => {
                        // console.log(res);
                    });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消输入'
                    });
                });
        },
        open() {
            this.$prompt('请输入邮箱', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                customClass: 'myClass',
                inputPattern:
                    /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
                inputErrorMessage: '邮箱格式不正确'
            })
                .then(({ value }) => {
                    this.updateUser({ email: value }).then(res => {
                        // console.log(res);
                    });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消输入'
                    });
                });
        },
        copy() {
            var clipboard = new Clipboard('.text4');
            clipboard.on('success', e => {
                clipboard.destroy();
                this.$message.success('复制成功');
            });
        }
    }
};
</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>
.container {
    .border2 {
        height: 1px;
        background: #494a4d;
        border-radius: 1px;
        margin: 17px 10px 20px;
    }
    /deep/ .el-empty {
        width: 100px;
        height: 110px;
        padding-top: 200px;
        margin: 0 auto;
    }
    /deep/ .el-empty__description {
        color: #ccc;
        margin: 10px 0 0 17px;
    }
    .top {
        height: 146px;
        width: 970px;
        position: relative;
        .btn {
            position: absolute;
            width: 90px;
            height: 26px;
            border-radius: 16px;
            border: 1px solid #939599;
            text-align: center;
            font-size: 14px;
            color: #939599;
            line-height: 26px;
            cursor: pointer;
            top: 20px;
            right: 15px;
        }
    }

    .top1 {
        display: flex;
        justify-content: center;
        position: relative;
        .title {
            text-align: center;
            cursor: pointer;
            .text3 {
                font-size: 22px;
                font-weight: normal;
                color: #ffffff;
                line-height: 24px;
            }
            .text {
                display: flex;
                .text2 {
                    font-size: 14px;
                    font-weight: 400;
                    padding: 0 100px;
                    color: #939599;
                    line-height: 24px;
                    margin-top: 6px;
                    &.active {
                        color: @prim;
                    }
                }
            }
        }
        .img2 {
            position: absolute;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            padding: 4px;
            background: #ffffff;
            top: -50px;
            left: 431px;
        }
    }
    .userContent {
        padding: 0 16px;

        .box {
            .flex();
            justify-content: space-between;
            margin-bottom: 20px;
            .text {
                .flex();
                justify-content: space-between;
                .img4 {
                    width: 78px;
                    height: 78px;
                    border-radius: 50%;
                    margin-right: 12px;
                }
                .box2 {
                    width: 288px;
                    margin-right: 50px;
                    .name {
                        .flex();
                        margin-top: 5px;
                        .name1 {
                            font-size: 16px;
                            font-weight: bold;
                            color: #ffffff;
                            line-height: 24px;
                            margin-right: 6px;
                        }
                        .name2 {
                            width: 18px;
                            height: 18px;
                        }
                    }
                    .text2 {
                        font-size: 14px;
                        font-weight: 400;
                        color: #939599;
                        line-height: 24px;
                        margin-bottom: 8px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                    .box3 {
                        display: flex;
                        align-content: center;
                        justify-content: space-between;
                        .box4 {
                            display: flex;
                            .text4 {
                                font-size: 14px;
                                font-weight: 400;
                                color: #939599;
                                line-height: 24px;
                                margin-right: 20px;
                            }
                            span {
                                color: #fff;
                            }
                        }
                        .el-button {
                            background-color: transparent;
                            min-width: 76px;
                            height: 28px;

                            &.prim {
                                .line(@radius:28px);
                                text-align: center;
                                /deep/span {
                                    color: @prim;
                                    position: relative;
                                    z-index: 1;
                                }
                            }
                        }
                    }
                }
                .imgBox {
                    .flex();
                    .imgBox1 {
                        width: 140px;
                        height: 100px;
                        border-radius: 8px;
                        margin-left: 30px;
                    }
                }
            }
        }
    }
    .content {
        padding: 0 16px;
        .name {
            font-size: 16px;
            font-weight: bold;
            color: #ffffff;
            line-height: 24px;
            margin: 30px 0 10px 0;
        }
        .box {
            display: flex;
            justify-content: space-between;
            padding: 16px 0;
            .myClass {
                background: linear-gradient(133deg, @prim 0%, @warn 100%) !important;
                border-radius: 4px;
                color: #ffffff;
            }
            .text {
                display: flex;
                .text1 {
                    font-size: 24px;
                    color: #939599;
                    .icon {
                        width: 24px;
                        height: 24px;
                        display: inline-block;
                    }
                }
                .text2 {
                    font-size: 17px;
                    font-weight: 400;
                    color: #ffffff;
                    line-height: 24px;
                    width: 94px;
                    margin: -1px 0 0 10px;
                }
                .text6 {
                    font-size: 17px;
                    font-weight: 400;
                    color: #ffffff;
                    line-height: 24px;
                    width: 94px;
                    margin: 1px 0 0 10px;
                }
                .text3 {
                    font-size: 16px;
                    font-weight: 400;
                    color: #949699;
                    line-height: 26px;
                    &.text5 {
                        width: 745px;
                        min-height: 60px;
                        word-wrap: break-word;
                    }
                }
            }
            .text4 {
                font-size: 14px;
                color: @prim;
                line-height: 24px;
                cursor: pointer;
            }
        }
        .border {
            height: 1px;
            background: #494a4d;
            border-radius: 1px;
            margin-top: 30px;
        }
    }
}
</style>
