<template>
    <view class="content">
        <view class="list-item">
            <view class="label-t"><u-icon class="icon" name="level" color="#446EFE" size="40rpx" bold />机构名称</view>
            <view class='value'>
                {{team_name || '--'}}{{defaultTitle}}
                <u-icon @click='yunyingShow = true,yunying_name = team_name' name="edit-pen-fill" class='pen'
                    color="#454545" size="34rpx" bold />
            </view>
        </view>
        <view class="list-item">
            <view class="label-t"><u-icon class="icon" name="integral" color="#446EFE" size="40rpx" bold />团队人数</view>
            <view class='value'>
                团队人数<span>{{users_count || 0}}</span>人
            </view>
        </view>
        <view class="list-item">
            <view class="label-t"><u-icon class="icon" name="rmb-circle" color="#446EFE" size="40rpx" bold />总业绩</view>
            <view class='value'>
                <span>￥{{all_perf || 0}}</span>
            </view>
        </view>
        <!-- 账户余额 -->
        <!-- <view class="total"> -->
         <!--   <view class="total-item-1">
                <view class="total-left">
                    <view class="total-value nowrap ">
                        {{team_name || '--'}}
                        <u-icon @click='yunyingShow = true,yunying_name = team_name' name="edit-pen-fill" class='pen'
                            color="red" size="34rpx" bold />
                    </view>
                    <view class="total-text nowrap">{{defaultTitle}}</view>
                </view>
            </view> -->
      <!--      <view class="total-item-2" v-if="teamtype == 'team'">
                <view> 团队人数 :<span>{{users_count}}</span>人</view>
                <view> 总业绩 :￥<span>{{all_perf}}</span></view>
            </view> -->
        <!-- </view> -->
        <!-- <view class="total" :style="'background-image: url(' + require('@/static/imgs/cash_back.png') + ');'">
        	<view class="total-value nowrap">{{users_count}}</view>
        	<view class="total-text">团队人数</view>
        </view> -->
        <!-- 账户记录 -->
        <!-- <view class="tabs">
            <u-tabs :list="tabs" :scrollable="false" :activeStyle="{color: '#446EFE', fontWeight: 'bold'}"
                lineColor="#446EFE" @click="onTabs" />
        </view>
        <view class="logs">
            <block v-if="list.length > 0">
                <view class="log-flex" v-for="(item, index) in list" :key="index">
                    <block v-if="type === 'balance'">
                        <view class="text">
                            <view class="type nowrap">
                                {{item.remark || '-'}}
                                <span :class="item.frozen.value == 0 ? '' : 'active'">{{item.frozen.text}}</span>
                            </view>
                            <view class="time nowrap">{{item.created_at}}</view>
                        </view>
                        <view class="price nowrap">
                            <span :class="item.frozen.value == 0 ? '' : 'active'">{{item.amount}}</span>
                        </view>
                    </block>
                    <block v-if="type === 'withdraws'">
                        <view class="text">
                            <view class="type nowrap"><text>[{{item.status.status_text}}]</text>{{item.title || '-'}}
                            </view>
                            <view class="remark nowrap" v-if="item.remark != null">{{item.remark || '-'}}</view>
                            <view class="time nowrap">{{item.created_at}}</view>
                        </view>
                        <view class="price nowrap">{{item.amount}}</view>
                    </block>
                    <block v-if="type === 'edit'">
                        <view class="text">
                            <view class="type nowrap"> {{ item.title }} </view>
                            <view class="time nowrap">{{item.created_at}}</view>
                        </view>
                        <view class="price nowrap" style="font-size: 28rpx;font-weight: normal;">{{item.status.text}}</view>
                    </block>
                </view>
            </block>
            <block v-else>
                <view class="list-null">
                    <u-empty mode="history" icon="http://cdn.uviewui.com/uview/empty/history.png"
                        :text="type === 'edit'?' 暂无记录':'暂未开放'" />
                </view>
            </block>
        </view>
        <u-loadmore v-if="pagesShow" :status="status" /> -->

        <!-- 弹窗展示输入运营中心姓名 -->
        <u-popup :show="yunyingShow" mode="center" @close="yunyingShow = false" :round="22">
            <view class="yunying">
                <view class="yunying_title">
                    <view class="title">  修改{{defaultTitle}} </view>
                    <image class="yunying_bg" src="/static/icons/yunying_bg.png" mode="widthFix" />
                </view>
                <view class="rz-item">
                    <input type="text" maxlength="4" v-model='yunying_name' placeholder-class="inputP"
                        placeholder="请输入名称" />
                    <view class="btn">{{defaultTitle}}</view>
                </view>
                <view class="button" @click="sureYunYing">确认修改名称</view>
            </view>
        </u-popup>
    </view>
</template>

<script>
    import {
        balance,
        withdrawsLog
    } from '@/apis/interfaces/account.js'
    import {
        getTeam,
        submitTeamName,
        getTeamLogs,
    } from '@/apis/interfaces/user.js'
    export default {
        data() {
            return {
                type: 'edit',
                tabs:[],
                total: '0.00',
                sended: '0.00',
                frozen: '0.00',
                list: [],
                page: {
                    current: 1,
                    has_more: false,
                },
                pagesShow: false,
                status: '',
                yunyingShow: false, //  运营中心是否展示
                yunying_name: '', // 运营名称
                team_name: '',
                team_status: '', // 状态 1可以申请但是没有完善，2申请完，审核中，3已通过，已修改
                users_count: '-',
                all_perf: '-',
                teamtype:'', // team 
                id:'',
                defaultTitle:'', // 全局名称法务运营中心，大区运营中心
            };
        },
        onLoad(e) {
            this.teamtype = e.teamtype
            this.id = e.id
            let title =''
            if(e.teamtype == 'team'){
                title='法务运营中心'
                this.tabs = [{
                        name: '名称修改',
                        value: 'edit'
                    }, {
                        name: '团队人数',
                        value: 'balance'
                    },
                    {
                        name: '总业绩',
                        value: 'withdraws'
                    }
                ]
            } else {
                title='大区运营中心'
                this.tabs = [{
                    name: '名称修改',
                    value: 'edit'
                }]
            }
            this.defaultTitle =title
            uni.setNavigationBarTitle({
                title:title
            })
        },
        onShow() {
            this.page = {
                current: 1,
                has_more: false,
            }
            this.getList()
            this.getTeam()
        },
        methods: {
            // 获取运营中心基本信息
            getTeam() {
                getTeam({identity_id:this.id}).then(res => {
                    this.team_name = res.name
                    this.users_count = res.users_count
                    this.all_perf = res.all_perf
                }).catch(err => {
                    this.errMsg(err)
                })
            },
            //  运营中心确认按钮处理
            sureYunYing() {
                if (this.yunying_name == '' || this.yunying_name.length == 0) {
                    uni.showToast({
                        title: '请输入'+this.defaultTitle+'名称',
                        icon: 'none',
                        mask: true,
                        duration: 2000
                    })
                    return
                }

                submitTeamName({
                    name: this.yunying_name,identity_id:this.id
                }).then(res => {
                    this.showBind = false
                    uni.showModal({
                        title: '微信提示',
                        content: this.defaultTitle+'姓名修改完成，请耐心等待审核！',
                        showCancel: false,
                        success: res => {
                            this.yunyingShow = false
                            this.getList()
                            this.getTeam()
                        }
                    })
                }).catch(err => {
                     this.yunyingShow = false
                    uni.showToast({
                        title: err.message,
                        icon: 'none',
                        mask:true,
                        duration:3000
                    })
                })
            },
            onTabs(e) {
                if (e.value === this.type) return
                this.type = e.value
                this.page = {
                    current: 1,
                    has_more: false,
                }
                this.list = []
                // this.total = '0.00'
                // this.sended = '0.00'
                // this.frozen = '0.00'
                this.getList()
            },
            // 获取账户余额
            getList() {
                // if (this.type === 'balance') this.getBalance()
                // if (this.type === 'withdraws') this.getWithdraws()
                if (this.type == 'edit'){
                    this.getTeams()
                    uni.showLoading({
                        title: '加载中...',
                        mask: true
                    })
                } 
            },
            // 获取账户余额
            getBalance() {
                balance({
                    page: this.page.current
                }).then(res => {
                    let {
                        balance,
                        logs,
                        sended,
                        frozen
                    } = res;
                    let atList = logs.page.current == 1 ? [] : this.list
                    this.total = balance
                    this.sended = sended
                    this.frozen = frozen
                    this.list = atList.concat(logs.data)
                    this.page = logs.page
                    this.pagesShow = false
                    uni.hideLoading()
                }).catch(err => {
                    this.errMsg(err)
                })
            },
            // 获取提现记录
            getTeams() {
                getTeamLogs({identity_id:this.id}).then(res => {
                    console.log(res)
                    this.list = res
                    this.pagesShow = false
                    uni.hideLoading()
                }).catch(err => {
                    this.errMsg(err)
                })
            },

            // 获取运营中心修改记录
            getWithdraws() {
                withdrawsLog({
                    page: this.page.current
                }).then(res => {
                    let {
                        all,
                        lists
                    } = res;
                    let atList = lists.page.current == 1 ? [] : this.list
                    this.total = all;
                    this.list = atList.concat(lists.data)
                    this.page = lists.page
                    this.pagesShow = false
                    uni.hideLoading()
                }).catch(err => {
                    this.errMsg(err)
                })
            },


            // 错误提示
            errMsg(err) {
                uni.showToast({
                    title: err.message,
                    icon: 'none'
                })
            },
        },
        onReachBottom() {
            // this.pagesShow = true;
            // if (this.page.has_more) {
            //     this.status = 'loading';
            //     this.page.current++
            // this.getList()
            //     return
            // }
            // this.status = 'nomore';
        }
    }
</script>

<style lang="scss">
    .list-item{
        padding:60rpx 40rpx;
        border-bottom: solid 1rpx #ddd;
        display:flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        width: 100%;
        .label-t{
            width: 240rpx;
            // background-color: pink;
            // font-size: 28rpx;
            // color: #666;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
            box-sizing: border-box;
            .icon{
                margin-right: 10rpx;
            }
        }
        .value{
            flex: 1;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-end;
            font-size: 34rpx;
            font-weight: bold;
            color: #222;
            box-sizing: border-box;
            .pen{
                margin-left:20rpx;
            }
        }
    }
    // tabs
    .tabs {
        border-radius: 20rpx 20rpx 0 0;
        padding: 5px 0;
        margin: -54px 30rpx 0;
        background: white;
        position: relative;
        z-index: 1;
        border-bottom: solid 1rpx #F6F6F6;
    }

    // 账户余额
    .total {
        background-size: cover;
        background-position: top center;
        // padding: 50rpx 30rpx 170rpx;
        // background-color: #446EFE;
        color: #446EFE;

        .total-item-1 {
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-sizing: border-box;
        }

        .total-item-2 {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            box-sizing: border-box;
            // margin-top: $margin;
            position: relative;
            top: $margin;
            padding-bottom: 20rpx;
            font-size: 30rpx;

            view {
                opacity: 0.9;
                font-size: 26rpx;
            }

            span {
                font-size: 32rpx;
            }
        }

        .total-left {
            width: calc(100% - 200rpx);
        }

        .total-value {
            font-weight: bold;
            font-size: 60rpx;
            font-family: Arial, Helvetica, sans-serif;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
            box-sizing: border-box;

            .pen {
                margin-left: 20rpx;
            }
        }

        .total-text {
            font-size: 26rpx;
            opacity: .9;
            line-height: 40rpx;
            padding-top: 20rpx;
        }

        .total-btn {
            background: white;
            color: #446EFE;
            line-height: 70rpx;
            border-radius: 40rpx;
            width: 200rpx;
            font-weight: bold;
            text-align: center;
        }
    }

    // 记录空
    .list-null {
        height: 70vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    // 记录
    .logs {
        box-sizing: border-box;
        background-color: white;
        margin: 0 30rpx;
        padding: 0 30rpx;
        border-radius: 0 0 20rpx 20rpx;

        .log-flex {
            padding: 25rpx 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 30rpx;
            color: #666666;
            border-top: solid 1rpx #F6F6F6;

            &:first-child {
                border-top: none;
            }

            .text {
                width: calc(100% - 200rpx);
            }

            .price {
                width: 200rpx;
                text-align: right;
                font-weight: bold;
                color: #446EFE;

                .active {
                    color: #d90017;
                }
            }

            .type {
                // font-weight: bold;
                font-size: 30rpx;
                color: #333;
                padding-top: 10rpx;

                text {
                    font-weight: normal;
                    padding-right: 10rpx;
                    color: $main-color;
                }

                span {
                    font-size: 22rpx;
                    font-weight: normal;
                    background-color: rgba(#446EFE, 0.4);
                    padding: 2rpx 20rpx;
                    border-radius: 40rpx;
                    color: #fff;
                    position: relative;
                    left: 20rpx;
                    top: -6rpx;
                }

                .active {
                    background-color: rgba(#d90017, 0.4);
                }
            }

            .remark {
                font-size: 28rpx;
            }

            .time {
                font-size: 26rpx;
                padding-top: 4rpx;
                color: gray;
            }
        }
    }

    .yunying {
        width: 606rpx;

        .yunying_title {
            position: relative;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
            box-sizing: border-box;
            z-index: 9;

            .title {
                position: absolute;
                left: 30rpx;
                z-index: 10;

                color: #fff;
            }

            .yunying_bg {
                width: 100%;
            }
        }

        .button {
            width: 540rpx;
            height: 90rpx;
            background: #446EFE;
            border-radius: 50rpx;
            text-align: center;
            line-height: 90rpx;
            font-size: 30rpx;
            font-family: PingFang SC;
            color: #FFFFFF;
            margin: $margin 33rpx 40rpx 33rpx;
            font-weight: bold;
        }

        .title {
            padding: $padding;
            font-size: 36rpx;
            font-family: PingFang SC;
            font-weight: bold;
            color: #000000;
            text-align: center;
            border-bottom: solid 1rpx #f9f9f9;
        }

        .rz-item {
            padding: $padding;
            margin-top: 30rpx;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            box-sizing: border-box;
            font-size: 30rpx;
            font-family: PingFang SC;
            font-weight: 400;
            color: #111111;
            position: relative;

            .title {
                font-size: 30rpx;
            }

            input {
                flex: 1;
                background-color: #f9f9f9;
                margin-left: $margin;
                padding: 20rpx $padding;
                border-radius: 10rpx;
                font-size: 34rpx;
            }

            .inputP {
                font-size: 28rpx;
                font-family: PingFang SC;
                font-weight: 400;
                color: #999999;
            }

            .btn {
                height: 60rpx;
                // background: #446EFE;
                border-radius: 10rpx;
                // font-size: 24rpx;
                font-family: PingFang SC;
                font-weight: 400;
                // color: #FFFFFF;
                line-height: 60rpx;
                text-align: center;
                padding: 0 20rpx;
                position: absolute;
                right: 50rpx;

            }
        }
    }
</style>
