<template>
    <div class="containers">
        <div class="top">
            <el-upload :action="uploadUrl" :show-file-list="false" :before-upload="beforeAvatarUpload2">
                <img
                    class="top"
                    :src="getImg(userInfo.bg, '', 1300) || require('../../assets/background/bg-03@3x.png')"
                    alt=""
                    style="object-fit: cover"
                />
                <i class="el-icon-plus avatar-uploader-icon"></i>
                <el-button class="btn" size="small" type="primary">更换背景</el-button>
            </el-upload>
        </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 :class="{ active: active === item }" v-if="item === '粉丝'" class="text3">
                            {{ userInfo.followers }}
                        </div>
                        <div :class="{ active: active === item }" 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="getImg(userInfo.avatar, '', 400) || require('../../assets/png-touxiang@.png')"
                    alt=""
                />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                <img class="avatar" src="../../assets/png-genhuantouxiang@3x.png" alt="" />
            </el-upload>
        </div>
        <div class="userContent" v-if="active === '关注' || active === '粉丝'">
            <div class="borderUser"></div>
            <!-- <img class="radio-img" src="../assets/sousuo_icon_sanjiao.png" alt="" :style="{ left: searchLeft }" /> -->
            <el-empty v-if="empty" description="还没有用户哦～"></el-empty>
            <div v-for="item in list" :key="item.id">
                <div class="boxFollow">
                    <router-link :to="{ path: '/castingDetail?id=' + item.id }">
                        <div class="text">
                            <img class="img4" :src="item.avatar" alt="" />
                            <div class="box2">
                                <div class="nickname">
                                    <div class="name1">{{ item.nickname }}</div>
                                    <img
                                        v-if="userInfo.authStatus === 'SUCCESS'"
                                        class="name2"
                                        src="../../assets/img/renzheng_icon@3x.png"
                                        alt=""
                                    />
                                </div>
                                <div class="detail">{{ item.intro || '暂无' }}</div>
                                <div class="box3">
                                    <div class="box4">
                                        <div class="text4">
                                            粉丝 <span>{{ item.followers }}</span>
                                        </div>
                                        <div class="text4">
                                            已售 <span>{{ item.sales }}</span>
                                        </div>
                                    </div>
                                    <div class="btnFollow">
                                        <el-button
                                            style="color: #939599"
                                            plain
                                            round
                                            :class="{ prim: !item.follow }"
                                            size="mini"
                                            @click.prevent="like(item)"
                                        >
                                            {{ item.follow ? (isFollow ? '互相关注' : '已关注') : '关注' }}
                                        </el-button>
                                    </div>
                                </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="text2">登录账号</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="text2">登录密码</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="text2">交易密码</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 class="box">
                <div class="text">
                    <div class="text1">
                        <img class="icon" src="../../assets/user/icon_yinhangka@3x.png" alt="" />
                    </div>
                    <div class="text2">银行卡</div>
                    <div class="text3">{{ ipcFlag ? '已添加银行卡信息' : '当前没有添加银行卡信息' }}</div>
                </div>
                <div class="text4" v-if="!ipcFlag" @click="ipcFn">去添加</div>
                <div class="text4" v-else @click="ipcShow = !ipcShow">{{ ipcShow ? '收起' : '查看' }}</div>
            </div>
            <div class="boxIpc" v-if="ipcShow">
                <div v-for="item in ipcList" :key="item.id">
                    <div class="ipc-top">
                        <div class="ipc-text">{{ item.bankName }}</div>
                        <div class="ipc-text2">{{ Ipc[0] }}</div>
                    </div>
                    <div class="ipc-text1">{{ item.cardTypeDesc }}</div>
                </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: '',
            isFollow: false,
            ipcShow: false,
            list: '',
            empty: false,
            value: '',
            url: '/identityAuth/all',
            org: '',
            lists: [],
            ipcList: []
        };
    },
    computed: {
        ...mapState(['userInfo']),
        searchLeft() {
            return (
                this.tabs.findIndex(item => {
                    return item.value === this.searchType;
                }) *
                    (this.isChinese ? 68 : 90) +
                'px'
            );
        },
        Phone() {
            return this.userInfo.phone.slice(0, 3) + ' **** ' + this.userInfo.phone.slice(7, 11);
        },
        Ipc() {
            return this.ipcList.map(item => {
                return item.bankNo.slice(0, 0) + ' **** ' + item.bankNo.slice(15, 19);
            });
        },
        type() {
            return this.lists[0].org;
        },
        ipcFlag() {
            if (this.ipcList.length > 0) {
                return true;
            } else {
                return false;
            }
        },
        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);
        this.BackCard();
    },
    methods: {
        BackCard() {
            this.$http.get('user/myBankCard').then(res => {
                this.ipcList = res;
            });
        },
        ipcFn() {
            if (this.userInfo.authStatus === 'SUCCESS') {
                this.$router.push('/Addipc');
            } else if (this.userInfo.authStatus === 'PENDING' || this.userInfo.authStatus === 'FAIL') {
                this.$confirm('用户认证中，是否查看认证状态', '实名认证', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    customClass: 'myClass',
                    center: true
                }).then(() => {
                    this.add();
                    this.$nextTick(() => {
                        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);
                    });
                });
            } else if (this.userInfo.authStatus === 'NOT_AUTH') {
                this.$confirm('您的账户还未实名认证，认证后可进行添加银行卡', '实名认证', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    customClass: 'myClass',
                    center: true
                }).then(() => {
                    this.$router.push('/authentication');
                });
            }
        },
        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;
                });
        },
        beforeAvatarUpload(file) {
            this.updateFile(file, 300).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.isFollow = false;
            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.isFollow = true;
                    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);
                });
            }
        },
        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>
.containers {
    .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-divider__text.is-right {
        right: 307px;
    }
    /deep/ .el-empty__description {
        color: #ccc;
        margin-top: 10px;
    }
    .radio-img {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 16px;
        height: 10px;
        transform: translate(26px, 12px);
        transition: left ease-in-out 0.3s;
    }
    .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;
            background: transparent;
            color: #939599;
            line-height: 6px;
            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;
                &.active {
                    color: @prim;
                }
            }
            .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;
        }
        .avatar {
            position: absolute;
            top: 28px;
            width: 100px;
            height: 24px;
            border: 0;
            left: 44.8%;
        }
    }
    .userContent {
        padding: 0 16px;
        // position: relative;
        .borderUser {
            height: 1px;
            background: #494a4d;
            border-radius: 1px;
            margin: 17px 0 26px 0;
        }
        // &::after {
        //     content: '';
        //     position: absolute;
        //     left: 0;
        //     right: 0;
        //     bottom: 0;
        //     background-color: #494a4d;
        //     height: 1px;
        //     z-index: 1;
        // }
        // .borderUser {
        //     position: absolute;
        //     bottom: 0px;
        //     width: 10px;
        //     height: 6px;
        //     z-index: 2;
        //     transition: left ease-in-out 0.3s;
        //     &::before {
        //         content: '';
        //         background-color: #494a4d;
        //         width: 8px;
        //         left: -2px;
        //         height: 1px;
        //         position: absolute;
        //         bottom: 0;
        //         transform-origin: 0px 0px;
        //         transform: rotate(-30deg);
        //     }
        //     &::after {
        //         content: '';
        //         background-color: #494a4d;
        //         width: 8px;
        //         right: -2px;
        //         height: 1px;
        //         position: absolute;
        //         bottom: 0;
        //         transform-origin: 8px 0px;
        //         transform: rotate(30deg);
        //     }
        // }
        .boxFollow {
            .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: 398px;
                    margin-right: 50px;
                    .nickname {
                        .flex();
                        // margin-top: 5px;
                        .name1 {
                            font-size: @menuFont2;
                            color: #ffffff;
                            line-height: 24px;
                            margin-right: 6px;
                        }
                        .name2 {
                            width: 18px;
                            height: 18px;
                        }
                    }
                    .detail {
                        // width: 350px;
                        width: 100%;
                        font-size: 14px;
                        font-weight: 400;
                        color: #939599;
                        line-height: 24px;
                        margin-bottom: 8px;
                        .ellipsis();
                    }
                    .box3 {
                        display: flex;
                        align-content: center;
                        justify-content: space-between;
                        .box4 {
                            display: flex;
                            .text4 {
                                font-size: @menuFont1;
                                font-weight: 400;
                                color: #939599;
                                line-height: 26px;
                                margin-right: 20px;
                            }
                            span {
                                color: #fff;
                            }
                        }
                        .btnFollow {
                            .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;
                                    }
                                }
                            }
                        }
                    }
                }
                .imgBox {
                    .flex();
                    .imgBox1 {
                        width: 140px;
                        height: 100px;
                        border-radius: 8px;
                        margin-left: 30px;
                    }
                }
            }
        }
    }
    .content {
        padding: 0 16px;
        .name {
            font-size: @menuFont;
            font-weight: bold;
            color: #ffffff;
            line-height: 24px;
            margin: 20px 0 10px 0;
        }
        .box {
            display: flex;
            justify-content: space-between;
            padding: 17px 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: @menuFont2;
                    font-weight: 400;
                    color: #ffffff;
                    line-height: 24px;
                    width: 94px;
                    margin-left: 10px;
                }

                .text3 {
                    font-size: @menuFont2;
                    font-weight: 400;
                    color: #949699;
                    line-height: 24px;
                    &.text5 {
                        width: 745px;
                        min-height: 60px;
                        word-wrap: break-word;
                    }
                }
            }
            .text4 {
                font-size: 14px;
                color: @prim;
                line-height: 24px;
                cursor: pointer;
            }
        }
        .boxIpc {
            width: 904px;
            height: 75px;
            background: linear-gradient(90deg, #37b074 0%, #52c174 100%);
            border-radius: 8px;
            margin-left: 33px;
            .ipc-top {
                padding: 16px 16px 2px 16px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .ipc-text {
                    font-size: @menuFont2;
                    font-weight: normal;
                    color: #ffffff;
                    line-height: 24px;
                }
                .ipc-text2 {
                    font-size: @menuFont2;
                    font-weight: normal;
                    color: #ffffff;
                    line-height: 24px;
                }
            }
            .ipc-text1 {
                font-size: 10px;
                font-weight: normal;
                color: #ffffff;
                line-height: 10px;
                padding-left: 16px;
            }
        }
        .border {
            height: 1px;
            background: #494a4d;
            border-radius: 1px;
            margin-top: 10px;
        }
    }
}
</style>
