<template>
    <view class="container">
        <view class="search-user flex-y-center ">
            <view class="search-content flex-y-center">
                <icon type="search" size="18" />
                <input confirm-type="search" v-model="seTval" @confirm="confirm" @input="getSearch" class="flex-grow-1"
                    type="text" placeholder-style="font-size:26rpx" placeholder="请输入昵称或手机号" />
                <view class="flex-center" style="margin-left: 10rpx;" @click.stop="onDel" v-if="seTval">
                    <icon type="clear" size="18" />
                </view>
            </view>
            <view class="search-btn" @click="search">
                搜索
            </view>
        </view>

        <view class="box-pack-between headerScreen flex-y-center ">
            <view class="flex-y-center flex-grow-1 ft26 header-text">
                <view style="width: 50%;" class="flex-grow-1 flex-center " data-text="1" :class="act_index==1?'act':''"
                    @click="onTopBtnTap(1)">
                    <view class="text-1" style="width: auto; max-width: 300rpx;">
                        {{level_text}}
                    </view>
                    <view class="d3"></view>
                </view>
                <view style="width: 50%;" class="flex-grow-1 flex-center text-1" data-text="2"
                    :class="act_index==2?'act':''" @click="onTopBtnTap(2)">
                    <view class="text-1" style="width: auto; max-width: 300rpx;">
                        {{type_text}}
                    </view>
                    <view class="d3"></view>
                </view>
            </view>
        </view>

        <view class="header-hg200"></view>

        <uni-popup-top ref="popup" type="top" :top="top" :maskClass="maskClass">
            <view class="showpay">
                <block v-if='act_index==1'>
                    <view class="box-li" :class="level_id==0?'active':''" @click="Onlevel(0,'全部')" data-text='全部'>全部
                    </view>
                    <scroll-view scroll-y="true" style="height: 400rpx;">
                        <view class="box-li" v-for="(item,index) of tableTypeList" :key='index'
                            :class="item.id==level_id?'active':''" @click="Onlevel(item.id,item.name)">
                            {{item.name}}
                        </view>
                    </scroll-view>
                </block>
                <block v-if='act_index==2'>
                    <view class="box-li" :class="status==0?'active':''" @click="onStatus(0,'全部')">全部
                    </view>
                    <view class="box-li" :class="status==1?'active':''" @click="onStatus(1,'已通过')">已通过
                    </view>
                    <view class="box-li" :class="status==2?'active':''" @click="onStatus(2,'待审核')">待审核
                    </view>
                    <view class="box-li" :class="status==3?'active':''" @click="onStatus(3,'已拒绝')">已拒绝
                    </view>
                </block>
            </view>
        </uni-popup-top>

        <no-none v-if='list.length<=0'></no-none>

        <view class="list" v-else>
            <view class="item" style="border: none;" v-for="(item,index) in list" :key="index">

                <view class="name flex flex-y-center">
                    <text>{{item.level_name||'未知等级'}}</text>
                    <view :class="['status-name',item.status == 1?'open':'close']" v-if="item.state == 1">
                        {{item.status == 1?'已启用':'已禁用'}}
                    </view>
                    <view class="ft28" style="padding-right: 20rpx;color: #247EFF;margin-left: auto;">
                        {{item.state==1?'审核通过':item.state==2?'审核中':item.state==3?'审核不通过':''}}
                    </view>
                </view>


                <view class="content">

                    <view class="flex flex-y-center">
                        <view class="cell flex flex-y-center">
                            <view class="title">昵称：</view>
                            <view class="desc">{{item.nickname||''}}</view>
                        </view>
                    </view>

                    <view class="flex flex-y-center box-pack-between" style="margin-top: 16rpx;">
                        <view class="cell flex-grow-0 flex-y-center ">
                            <view class="title">手机：</view>
                            <view class="desc">{{item.mobile||''}}</view>
                        </view>
                        <view class="cell flex-grow-0 flex-y-center ">
                            <view class="title">所属平台：</view>
                            <view class="desc">{{item.type==1?'微信':'支付宝'}}</view>
                        </view>
                    </view>

                    <view class="flex flex-y-center box-pack-between" style="margin-top: 16rpx;">
                        <view class="cell flex-grow-0 flex-y-center ">
                            <view class="title">消费获得礼盒：</view>
                            <view class="desc">{{item.pay_gift}}</view>
                        </view>
                        <view class="cell flex-grow-0 flex-y-center">
                            <view class="title">剩余礼盒：</view>
                            <view class="desc">{{item.over_gift}}</view>
                        </view>
                    </view>

                    <view class="flex flex-y-center box-pack-between" style="margin-top: 16rpx;">
                        <view class="cell flex flex-y-center ">
                            <view class="title">当前佣金：</view>
                            <view class="desc">{{item.commission}}</view>
                        </view>
                        <view class="cell flex flex-y-center">
                            <view class="title">结算绑定：</view>
                            <view class="desc">{{item.content || ''}}</view>
                        </view>
                    </view>

                    <!-- <view class="flex flex-y-center box-pack-between" style="margin-top: 16rpx;">
                       <view class="cell flex flex-y-center">
                            <view class="title">启用：</view>
                            <switch :checked="item.status==1?true:false" @change="onChange" :data-id='item.id' />
                        </view>
                    </view> -->

                    <view class="flex flex-y-center" style="margin-top: 16rpx;">
                        <view class="cell flex flex-y-center " style="width:100%">
                            <view class="title">创建时间：</view>
                            <view class="desc">{{item.create_time}}</view>
                        </view>
                    </view>

                </view>
                <view class="btm-block border1rpx flex-center">
                    <view class="btn" v-if="item.state == 2" @click="toExamine(item.id,index)">审核合伙人</view>
                    <template v-if="item.state == 1">
                        <view class="btn close-btn" v-if="item.status == 1" @click="settlement(item.id,0,index)">禁用合伙人
                        </view>
                        <view class="btn open-btn" v-else-if="item.status == 0" @click="settlement(item.id,1,index)">
                            启用合伙人</view>
                    </template>

                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import uniPopupTop from '@/components/zx-uni-popup/uni-popup-top.vue'
    export default {
        components: {
            uniPopupTop
        },
        data() {
            return {
                act_index: 1,
                type_text: '审核状态',
                level_text: '合伙人等级',
                level_id: "",
                admin_id: '',
                list: [],
                page: 1,
                is_bottom: false,
                keywords: "",
                status: 0,
                type: 2,
                tableTypeList: [],
                top: "200rpx",
                maskClass: {
                    'position': 'fixed',
                    'bottom': 0,
                    'top': "100rpx",
                    'left': 0,
                    'right': 0,
                    'backgroundColor': 'rgba(0, 0, 0, 0.4)'
                },
            }
        },

        onLoad(e) {
            // this.type = e.type || 2;
            this.admin_id = uni.getStorageSync("admin_id");
            this.shop_store_index();
        },

        onShow() {
            this.getData(1)
        },

        onReachBottom() {
            if (!this.is_bottom) {
                this.getData(this.page + 1)
            }
        },

        methods: {

            // onChange(e) {
            //     console.log(e, "eee")
            //     this.is_show = e.detail.value ? 1 : 0;
            //     this.settlement(e.currentTarget.dataset.id);
            // },

            settlement(id, is_show, index) {
                this.request({
                    url: 'Smdcshop/shared_users_settlement',
                    data: {
                        id,
                        is_show, //0关闭，1启用
                    }
                }).then(res => {
                    if (res.code == 200) {
                        let item = this.list[index]
                        item.status = is_show
                        this.$set(this.list, index, item)
                    }
                })
            },
            //审核
            toExamine(id, index) {
                uni.showActionSheet({
                    title: '审核合伙人',
                    itemList: ['通过', '审核中', '拒绝'],
                    success: r => {
                        let state = r.tapIndex + 1
                        this.examine(id,state,index)
                    }
                })
            },
            
            examine(id,state,index) {
                this.request({
                    url: 'smdcshop/shared_users_edit',
                    data: {
                        id,
                        state, //1:审核通过,2审核中，3拒绝
                        admin_id:uni.getStorageSync('admin_id')
                    }
                }).then(res => {
                    if (res.code == 200) {
                        let item = this.list[index]
                        item.state = state
                        this.$set(this.list, index, item)
                    }
                })
            },
            shop_store_index() {
                let storeinfo = uni.getStorageSync("storeinfo");
                this.request({
                    url: 'Smdcshop/shared_level_index',
                    data: {
                        admin_id: this.admin_id,
                        page: 1,
                        limit: 1000,
                    }
                }).then(res => {
                    if (res.code == 200) {
                        this.tableTypeList = res.data;
                    }
                })
            },

            onStatus(e, text) {
                this.status = e;
                this.type_text = text;
                this.list = [];
                this.getData(1);
                this.$refs.popup.close();
            },


            Onlevel(e, text) {
                this.level_id = e;
                this.level_text = text;
                this.list = [];
                this.getData(1);
                this.$refs.popup.close();
            },

            getSearch(e) {
                if (!e.detail.value) {
                    this.page = 1;
                    this.list = [];
                    this.keywords = "";
                    this.getData(1);
                }
                this.keywords = e.detail.value;
            },

            onDel() {
                this.seTval = '';
                this.page = 1;
                this.list = [];
                this.keywords = "";
                this.getData(1);
            },

            confirm(e) {
                this.page = 1;
                this.list = [];
                this.keywords = e.detail.value;
                this.getData(1);
            },

            search(e) {
                this.page = 1;
                this.list = [];
                this.getData(1);
            },

            onTopBtnTap(e) {
                this.act_index = e;
                this.$refs.popup.open();
            },

            getData(page) {
                if (page == 1) {
                    this.list = []
                    this.page = 1
                    this.is_bottom = false
                }
                this.request({
                    url: 'smdcshop/shared_users_index',
                    data: {
                        page,
                        limit: 10,
                        serch: this.keywords,
                        admin_id: this.admin_id,
                        state: this.status, //状态：全部=空。1通过，2审核中，3已拒绝
                        level_id: this.level_id //合伙人等级
                    }
                }).then(res => {
                    if (res.code == 200 && res.data.length) {
                        this.list = this.list.concat(res.data)
                        this.page = page
                    } else {
                        this.is_bottom = true
                    }
                })
            }
        }
    }
</script>
<style>
    page {
        background-color: #F4F5F7;
    }
</style>
<style lang="scss" scoped>
    /* @import url("./static/css/common.css"); */


    .list {
        padding: 30rpx 25rpx;
    }

    .list .item {
        border-radius: 8rpx;
        overflow: hidden;

        border-left: 8rpx solid #247EFF;
        background-color: #fff;
        margin-bottom: 30rpx;
    }

    .list .item .name {
        height: 80rpx;
        border-bottom: 1rpx solid #f5f5f5;
        font-size: 30rpx;
        line-height: 80rpx;
        font-weight: bold;
        margin: 0 30rpx;
    }

    .list .item .name .status-name {
        height: 40rpx;
        line-height: 40rpx;
        font-size: 24rpx;
        font-weight: 400;
        margin-left: 12rpx;
        padding: 0 20rpx;
        border-radius: 8rpx;
        color: #fff;
    }

    .list .item .name .status-name.open {
        background: linear-gradient(129deg, #1f9802, #04be02);
    }

    .list .item .name .status-name.close {
        background: linear-gradient(129deg, #be0202, #ff0000);
    }

    .list .item .content {
        padding: 20rpx 0 24rpx 30rpx;
    }

    .list .item .content .cell {
        flex: none;
        min-width: 50%;
        box-sizing: border-box;
        font-size: 26rpx;
        line-height: 37rpx;
        color: #666;
    }

    .list .item .content .cell .title {
        color: #99A0AD;
    }

    .list .item .btm-block {
        border-top: 1rpx solid #f5f5f5;
        padding: 30rpx 0;
        margin: 0 24rpx;

        .btn {
            height: 46rpx;
            background-color: #007dFF;
            font-size: 28rpx;
            font-weight: 500;
            line-height: 44rpx;
            color: #fff;
            padding: 0.5rpx 24rpx;
            border-radius: 23rpx;

            &.open-btn {
                background: linear-gradient(129deg, #1f9802, #04be02);
            }

            &.close-btn {
                background: linear-gradient(129deg, #be0202, #ff0000);
            }


        }
    }

    .headerScreen {
        height: 100rpx;
        position: fixed;
        top: 100rpx;
        width: 100%;
        z-index: 999;
        background: #fff;
        border-bottom: 1rpx solid #F1F1F1;
    }

    .header-hg200 {
        height: 210rpx;
    }

    .header-text {
        text-align: center;
    }

    .d3 {
        width: 0;
        height: 0;
        border-width: 12rpx;
        border-style: solid;
        border-color: #000 transparent transparent transparent;
        margin-top: 14rpx;
        margin-left: 6rpx;
    }

    .showpay {
        width: 100%;
        z-index: 10;
        background: #FFFFFF;
    }

    .search-user {
        z-index: 999;
        position: fixed;
        left: 0;
        width: 100%;
        height: 100rpx;
        background: #FFFFFF;
        margin-left: 15rpx;
    }

    .search-user .search-content {
        width: 83%;
        height: 70rpx;
        background: #F1F1F1;
        border-radius: 100rpx;
        padding: 0 20rpx;

    }

    .search-user .search-content icon {
        margin-right: 10rpx;
    }

    .search-user .search-btn {
        margin-left: 20rpx;
        font-size: 28rpx;
    }

    .box-li {
        background-color: #fff;
        text-align: center;
        border-bottom: 1rpx solid #f1f1f1;
        height: 80rpx;
        line-height: 80rpx;
        font-size: 26rpx;
    }

    page .active {
        color: #007AFF;
    }
</style>
