<template>
    <view class="employ-manage">
        <view class="em-content">
            <view class="ec-search">
                <view>
                    <image v-if="!isInputFocus" mode="aspectFit" src="/static/images/icon/search.png"></image>
                    <input 
                        @blur="iptOnBlur"
                        @focus="iptOnFocus" 
                        @confirm="confirmSearch"
                        confirm-type="search"
                        type="text"
                        placeholder="请输入要搜索的员工名字"
                        v-model="searchTxt"
                    />
                    <image @click="cleanIpt" v-if="isInputFocus" mode="aspectFit" src="/static/images/icon/round_close.png"></image>
                </view>
            </view>
            <view class="ec-info">
                <view class="ei-add" @click="addEmployee">
                    <image mode="aspectFit" src="/static/images/icon/round_add.png"></image>
                    <text>添加员工</text>
                </view>
                <view class="ei-tip" @click="toReview" v-if="employeeInfo.count>0">
                    <text>待审核员工</text>
                    <view>
                        <view v-if="employeeInfo.count>0">{{employeeInfo.count || 0}}</view>
                        <image mode="aspectFit" src="/static/images/icon/arrow_b2.png"></image>
                    </view>
                </view>
                <view class="ei-user" v-if="employeeInfo.is_super == 1">
                    <view>
                        <image mode="aspectFill" :src="employeeInfo.admin.avatar_url || ''"></image>
                        <view class="eu-name">{{employeeInfo.admin.actual_name || '-'}}</view>
                        <view class="eu-tag">超级管理员</view>
                    </view>
                    <view hover-class="hover-active" @click="changeAdmin">更换</view>
                </view>
            </view>
            <view class="ec-employees">
                <view class="ec-header">
                    <view>
                        <image mode="aspectFit" src="/static/images/icon/people.png"></image>
                        <view>员工总数  <text>{{employeeInfo.total || 0}}</text></view>
                    </view>
                    <view>
                        <text :class="[isFilter?'active':'']" @click="toFilter">筛选</text>
                        <text v-if="!isDeleteOperate" @click="openDeleteOperate">删除</text>
                        <text class="active" v-if="isDeleteOperate" @click="cancelDeleteOperate">取消</text>
                    </view>
                </view>
                <view class="ec-lists">
                    <view class="el-item" v-for="k in employeeInfo.employee" :key="k.id" @click="toAuthority(k)">
                        <view>
                            <image :class="['ei-icon', k.isDelete?'active':'']" mode="aspectFit" :src="k.isDelete?'/static/images/icon/selected_987.png':''" v-if="isDeleteOperate"></image>
                            <image class="ei-avatar" mode="aspectFill" :src="k.avatar_url || ''"></image>
                            <view class="ei-info">
                                <view>{{k.actual_name || '-'}}</view>
                                <view class="ei-author">
                                    <view>权限：</view>
                                    <view>
                                        <view class="tag-active" v-if="k.extension.permission.menu.length == permissionArr.length">全部权限</view>
                                        <view v-else v-for="e in k.extension.permission.menu" :key="e">{{permissionObj[e] || ''}}</view>
                                    </view>
                                </view>
                            </view>
                        </view>
                        <image mode="aspectFit" src="/static/images/icon/arrow_b2.png"></image>
                    </view>
                </view>
            </view>
            <view class="ec-fixed-bot" v-if="isDeleteOperate">
                <view @click="selectAllDelete">
                    <image :class="isSelectedAllDelete?'img-active':''" :src="isSelectedAllDelete?'/static/images/icon/selected_987.png':''"></image>
                    <text>全选</text>
                </view>
                <view hover-class="hover-active" @click="employeeDelete">移除</view>
            </view>
        </view>
    </view>
</template>
<script>
import { API } from '../../../js/api';
import { servers } from '../../../js/server';
import util from '../../../utils/util'
import { mapState, mapGetters } from 'vuex';
export default {
    computed: {
        ...mapGetters([ 'permissionArr' ]),
        ...mapState([ 'permissionObj', 'brandInfo', ]),
        isFilter(){
            let { filterInfo } = this;
            return !!filterInfo.meun || !!filterInfo.store
        }
    },
    data(){
        return {
            isDeleteOperate: false,  // 是否展开删除员工操作
            isSelectedAllDelete: false, // 全选删除
            isInputFocus: false,

            searchTxt: '',  // 搜索key
            filterInfo: {   // 筛选条件
                meun: '',  // 小程序权限
                store: ''  // 店铺筛选
            },

            employeeInfo: {
                admin: {},      // 超管信息
                employee: [],   // 员工列表
                count: 0,       // 待审核人数
                total: 0        // 员工总数
            },
        }
    },
    onLoad(){
    },
    onShow(){
        this.refreshEmployList();
    },  
    methods: {
        // 移除员工
        employeeDelete: util.debounce(function(){
            let _employeeList = this.employeeInfo.employee || [];
            console.log(_employeeList);
            let _deleteArr = _employeeList.filter(ele=>{
                if(ele.isDelete)return ele;
            })
            // if(_deleteArr.length<=0)return util.showNone('请选择要删除的员工！');
            let ids = _deleteArr.map(ele=>ele.id);
            util.showModal({
                title: '提示',
                content: '移除后，该员工将无法登录和使用欧轩智能商家助手小程序',
                showCancel: true,
                success: sucRes=>{
                    if(sucRes.confirm){
                        util.showLoad();
                        servers.get({
                            url: API.employee.employeeDelete,
                            data: {
                                id: ids.join(',')
                            },
                            isDefaultGet: false
                        })
                        .then(res=>{
                            util.hideLoad();
                            if(res.data.code == 0){
                                this.cancelDeleteOperate();
                                util.showNone(res.data.message || '操作成功！');
                                setTimeout(_=>{
                                    this.refreshEmployList()
                                },1200)
                            }else{
                                util.showNone(res.data.message || '操作失败！');
                            }
                        })
                        .catch(util.hideLoad)
                    }
                }
            })
            
        },300,300),
        // 确认搜索
        confirmSearch(){
            let { searchTxt } = this;
            this.$nextTick(_=>this.refreshEmployList())
        },
        // 清除搜索输入
        cleanIpt(){
            this.searchTxt = '';
        },
        
        iptOnBlur(){
            this.isInputFocus = false;
        },
        iptOnFocus(){
            this.isInputFocus = true;
        },
        // 移除操作-> 全选
        selectAllDelete(){
            let { isSelectedAllDelete } = this;
            this.isSelectedAllDelete = !isSelectedAllDelete;
            this.deleteSelect({
                isAll: true,
                allBol : !isSelectedAllDelete
            })
        },
        // 取消移除操作
        cancelDeleteOperate(){
            this.isDeleteOperate = false;
            this.isSelectedAllDelete = false;
            this.deleteSelect({
                isAll: true,
                allBol : false
            })
        },
        // 打开移除操作
        openDeleteOperate(){
            this.isDeleteOperate = true;
        },
        // 刷新列表
        refreshEmployList(){
            let { searchTxt, filterInfo } = this;
            this.getEmployeeList({
                key: searchTxt,
                stadium_id: filterInfo.store,
                menu: filterInfo.meun
            })
        },

        // 获取员工列表
        getEmployeeList({
            stadium_id='',
            menu='',
            key='',
        }){
            // util.showLoad();
            servers.get({
                url: API.employee.employeeList,
                data: {
                    stadium_id,
                    menu,
                    key,
                },
                isDefaultGet: false,
            })
            .then(res=>{
                // util.hideLoad();
                let _data = res.data;
                if(_data.code == 0){
                    this.employeeInfo = _data.data;
                }else{
                    util.showNone(_data.message || '加载失败！');
                }
            })
            // .catch(util.hideLoad)
        },
        // 跳转邀请二维码
        addEmployee(){
            util.routeTo(`/pages/employee/invite_code/invite_code`, 'nT');
        },
        // 更换超管
        changeAdmin(){
            let { brandInfo } = this;
            util.routeTo(`/pages/employee/change_admin/change_admin?brand_id=${brandInfo.brand.id}`, 'nT');
        },
        // 筛选
        toFilter(){
            let { filterInfo } = this;
            util.routeTo(`/pages/employee/authority_filter/authority_filter?filterInfo=${util.jsonStr(filterInfo)}`, 'nT');
        },
        // authority_filter 页面调用筛选
        changeFilter(filterInfo){
            this.filterInfo = filterInfo;
            this.$nextTick(_=>this.refreshEmployList());
        },
        // 员工修改权限
        toAuthority(item){
            let { isDeleteOperate, brandInfo } = this;
            if(isDeleteOperate)return this.deleteSelect({ item });
            console.log(brandInfo);
            console.log(item);
            let _query = {
                type: 'singleEdit',
                brand_id: brandInfo.brand.id,
                userIDS: [item.id],
                userInfo: {
                    id: item.id,
                    name: item.actual_name,
                    avatar_url: item.avatar_url,
                    mobile: item.mobile,
                },
                tags: item.extension.permission.tags || [],     // 门店权限
                menu: item.extension.permission.menu || [],     // 小程序权限
            }

            util.routeTo(`/pages/employee/authority_select/authority_select?query=${util.jsonStr(_query)}`, 'nT');
        },
        //删除选择
        deleteSelect({ item={}, isAll=false, allBol=false}){
            let employee = this.employeeInfo.employee || [];
            let _employee = employee.slice();
            _employee.forEach((e,i)=>{
                if(isAll)return e.isDelete = allBol
                if(e.id == item.id){
                    if(e.isDelete)this.isSelectedAllDelete = false;
                    e.isDelete = e.isDelete ? false : true;
                }
            })
            this.employeeInfo.employee = _employee;
            this.$nextTick(_=>this.$forceUpdate());
        },
        toReview(){
            util.routeTo(`/pages/employee/review_list/review_list`, 'nT');
        }
    }
}
</script>
<style lang="scss" scoped>
    @import "../../../style/public.scss";
    .em-content{
        padding-bottom: 100upx;
        padding-bottom: calc( 100upx + constant(safe-area-inset-bottom)); 
        padding-bottom: calc( 100upx + env(safe-area-inset-bottom)); 
        .ec-search{
            margin-bottom: 16upx;
            height: 144upx;
            background-color: #fff;
            @include centerFlex(center);
            >view{
                padding: 0 28upx;
                height: 92upx;
                width: 702upx;
                border-radius: 10upx;
                background-color: #f2f2f7;
                @include centerFlex(space-between);
                >input{
                    flex-grow: 1;
                    height: 100%;
                    font-size: 32upx;
                    color: #1a1a1a;
                }
                >image{
                    margin-right: 20upx;
                    flex-shrink: 0;
                    width: 40upx;
                    height: 40upx;
                }
                >input+image{
                    margin-left: 20upx;
                    margin-right: 0;
                    flex-shrink: 0;
                    width: 32upx;
                    height: 32upx;
                }
            }
        }
        .ec-info{
            margin-bottom: 24upx;
            padding: 0 24upx;
            background-color: #fff;
            .ei-add{
                height: 220upx;
                border-bottom: 2upx solid #D8D8D8;
                @include centerFlex(center);
                >image{
                    flex-shrink: 0;
                    margin-right: 38upx;
                    width: 84upx;
                    height: 84upx;
                }
                >text{
                    font-weight: 500;
                    font-size: 32upx;
                    color: $themeColor;
                }
            }
            .ei-tip{
                height: 132upx;
                border-bottom: 2upx solid #D8D8D8;
                @include centerFlex(space-between);
                >text{
                    font-size: 32upx;
                    color: #333;
                }
                >view{
                    @include centerFlex(flex-end);
                    >view{
                        flex-shrink: 0;
                        flex-grow: 0;
                        margin-right: 30upx;
                        width: 50upx;
                        height: 50upx;
                        border-radius: 50%;
                        line-height: 50upx;
                        text-align: center;
                        font-size: 24upx;
                        color: #fff;
                        background-color: #ea5061;
                        @include textHide(1);
                    }
                    >image{
                        flex-shrink: 0;
                        width: 28upx;
                        height: 28upx;
                    }
                }
            }
            .ei-user{
                height: 140upx;
                @include centerFlex(space-between);
                >view{
                    &:first-child{
                        @include centerFlex(flex-start);
                        >image{
                            margin-right: 20upx;
                            width: 80upx;
                            height: 80upx;
                            border-radius: 10upx;
                        }
                        .eu-name{
                            max-width: 40%;
                            line-height: 44upx;
                            font-size: 32upx;
                            color: #333;
                            @include textHide(1);
                        }
                        .eu-tag{
                            display: inline-block;
                            margin-left: 24upx;
                            padding: 0 6upx;
                            height: 32upx;
                            line-height: 32upx;
                            border-radius: 6upx;
                            font-size: 22upx;
                            color: $themeColor;
                            background-color: rgba(0, 152, 116, .2);
                        }
                    }
                    &+view{
                        flex-shrink: 0;
                        width: 140upx;
                        height: 64upx;
                        line-height: 60upx;
                        text-align: center;
                        border-radius: 10upx;
                        border: 2upx solid $themeColor;
                        font-size: 32upx;
                        color: $themeColor;
                    }
                }
            }
        }
        .ec-employees{
            background-color: #fff;
            .ec-header{
                padding: 0 24upx;
                height: 132upx;
                border-bottom: 2upx solid #E1E1E1;
                @include centerFlex(space-between);
                >view{
                    &:first-child{
                        flex-grow: 1;
                        @include centerFlex(flex-start);
                        >image{
                            flex-shrink: 0;
                            margin-right: 12upx;
                            margin-bottom: -4upx;
                            width: 48upx;
                            height: 48upx;
                        }
                        >view{
                            flex-grow: 1;
                            font-size: 32upx;
                            color: #9c9c9f;
                            @include textHide(1);
                            >text{
                                margin-left: 10upx;
                                color: #1a1a1a;
                            }
                        }
                    }
                    &+view{
                        font-size: 28upx;
                        color: #1A1A1A;
                        >text{
                            margin: 0 16upx;
                        }
                        .active{
                            color: $themeColor !important;
                        }
                    }
                }
            }
            .ec-lists{
                padding: 0 24upx;
                background-color: #fff;
                .el-item{
                    padding: 30upx 0;
                    display: flex;
                    justify-content: space-between;
                    &:not(:last-child){
                        border-bottom: 2upx solid #D8D8D8;
                    }
                    >image{
                        margin-top: 22upx;
                        flex-shrink: 0;
                        margin-right: 20upx;
                        width: 28upx;
                        height: 28upx;
                    }
                    >view{
                        flex-grow: 1;
                        display: flex;
                        .ei-icon{
                            margin-top: 20upx;
                            flex-shrink: 0;
                            width: 40upx;
                            height: 40upx;
                            border: 2upx solid #d8d8d8;
                            border-radius: 50%;
                            &.active{
                                border: 2upx solid transparent;
                            }
                        }
                        .ei-avatar{
                            flex-shrink: 0;
                            margin: 0 20upx;
                            width: 80upx;
                            height: 80upx;
                            border-radius: 10upx;
                        }
                        .ei-info{
                            flex-grow: 1;
                            >view:first-child{
                                margin-bottom: 2upx;
                                font-size: 32upx;
                                line-height: 44upx;
                                color: #333;
                                @include textHide(1);
                            }
                            .ei-author{
                                display: flex;
                                
                                >view{
                                    &:first-child{
                                        flex-shrink: 0;
                                        margin-right: 4upx;
                                        line-height: 34upx;
                                        font-size: 24upx;
                                        color: #9c9c9f;
                                    }
                                    &+view{
                                        flex-grow: 1;
                                        display: flex;
                                        flex-wrap: wrap;
                                        >view{
                                            flex-shrink: 0;
                                            margin-right: 28upx;
                                            margin-bottom: 20upx;
                                            padding: 0 8upx;
                                            height: 32upx;
                                            line-height: 28upx;
                                            font-size: 22upx;
                                            border-radius: 6upx;
                                            border: 2upx solid #d8d8d8;
                                            color: #9C9C9F;
                                        }
                                        .tag-active{
                                            border: 2upx solid $themeColor !important;
                                            color: $themeColor !important;
                                        }
                                    }

                                }
                                
                            }
                        }
                    }
                }
            }
        }
        .ec-fixed-bot{
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            background-color: #fff;
            padding-left: 24upx;
            padding-right: 44upx;
            padding-top: 8upx;
            padding-bottom: 8upx;
            padding-bottom: calc( 8upx + constant(safe-area-inset-bottom)); 
            padding-bottom: calc( 8upx + env(safe-area-inset-bottom)); 
            border-top: 2upx solid #D8D8D8;
            @include centerFlex(space-between);
            >view{
                &:first-child{
                    >image{
                        margin-right: 22upx;
                        vertical-align: middle;
                        width: 40upx;
                        height: 40upx;
                        border-radius: 50%;
                        border: 2upx solid #D8D8D8;
                    }
                    .img-active{
                        border: 2upx solid transparent !important;
                    }
                    >text{
                        line-height: 40upx;
                        font-size: 28upx;
                        color: #9c9c9f;
                    }
                }
                &+view{
                    width: 210upx;
                    height: 80upx;
                    line-height: 76upx;
                    text-align: center;
                    border-radius: 10upx;
                    font-size: 32upx;
                    font-weight: 500;
                    border: 2upx solid #ea5061;
                    color: #ea5061;
                }
            }
        }
    }
</style>