<template>
    <div class="roleManage container form-table">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>当前位置</el-breadcrumb-item>
            <el-breadcrumb-item>{{this.$route.name[0]}}</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="assetsContent">
            <div class="formDiv">
                <el-form :inline="true" :model="formInline" class="search-form-inline" >
                    <el-form-item label="用户ID:">
                        <el-input v-model="formInline.userId" placeholder="精准查询" clearable></el-input>
                    </el-form-item>
                    <el-form-item>
                        <div class="btn-group marginL10">
                            <button class="vpnButton primary" type="button" @click="search" size="mini">查询</button >
                            <button class="vpnButton cancel" type="button" @click="cancel" size="mini">清空</button>
                        </div>
                    </el-form-item>
                </el-form>
            </div>
            <div class="assetsList">
                <el-scrollbar>
                    <el-table :data="tableData"style="width: 100%"size="mini"class="commonTable"height="627px">
                        <el-table-column
                                prop="userId"
                                label="用户ID"
                                align="center"
                                min-width="6%">
                        </el-table-column>
                        <el-table-column
                                prop="userLevel"
                                label="用户会员等级"
                                align="center"
                                min-width="8%"
                                :show-overflow-tooltip="true">
                            <template slot-scope="scope">
                                <span v-if="scope.row.userLevel == '0'">普通用户</span>
                                <span v-if="scope.row.userLevel == '1'">幼苗</span>
                                <span v-if="scope.row.userLevel == '2'">青铜树</span>
                                <span v-if="scope.row.userLevel == '3'">白银树</span>
                                <span v-if="scope.row.userLevel == '4'">黄金树</span>
                                <span v-if="scope.row.userLevel == '5'">农场主</span>
                                <span v-if="scope.row.userLevel == '6'">森林之星</span>
                                <span v-if="scope.row.userLevel == '7'">西田森合伙人</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="crossBorderLine"
                                label="跨境额度"
                                align="center"
                                min-width="6%"
                                :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column
                                prop="idCardNumber"
                                label="身份证号码"
                                align="center"
                                min-width="8%"
                                :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column
                                prop="inviteCode"
                                label="用户本人邀请码"
                                align="center"
                                min-width="8%"
                                :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column
                                prop="beInvitedCode"
                                label="推荐人邀请码"
                                align="center"
                                min-width="8%"
                                :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column
                                prop="createTime"
                                label="创建时间"
                                align="center"
                                min-width="8%"
                                :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column
                                prop="updateTime"
                                label="修改时间"
                                align="center"
                                min-width="8%"
                                :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column
                                label="操作"
                                align="center"
                                min-width="15%">
                            <template slot-scope="scope">
                                <el-button
                                        type="text"
                                        size="small" @click="editDetail(scope.row)">
                                    等级设置
                                </el-button>
                                <!--<el-button-->
                                        <!--type="text"-->
                                        <!--size="small" @click="phoneDetail(scope.row)">-->
                                    <!--换绑手机-->
                                <!--</el-button>-->
                                <!--<el-button-->
                                        <!--type="text"-->
                                        <!--size="small" @click="poDetail(scope.row)">-->
                                    <!--专属客服-->
                                <!--</el-button>-->
                            </template>
                        </el-table-column>
                    </el-table>
                </el-scrollbar>
            </div>
            <el-pagination background class="alignc" @current-change="handleCurrentChange" :current-page="page.currentPage" :page-size="page.pageSize" layout="total, prev, pager, next, jumper" :total="page.total">
            </el-pagination>
        </div>
        <el-dialog class="appFormCommon"  :close-on-click-modal="false"  :visible.sync="dialogDataDetail"  @close="resetForm('formDataApp')" >
            <div class="managerInfo">
                <div class="message-box">
                    <div class="message-box-header">
                        <div class="message-box-title">
                            <span>{{title}}</span>
                        </div>
                        <i class="icon icon-close" @click="dialogDataDetail = false"></i>
                    </div>
                    <div class="message-box-content">
                        <el-form class="demoFormApp" ref="formDataApp" :model="formDataApp" :rules="rules"  label-width="125px">
                            <el-form-item v-if="distype==0"label="等级：">
                                <el-select v-model="formDataApp.value" placeholder="请选择">
                                    <el-option
                                            v-for="item in options"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <!--<el-form-item v-if="distype==1" label="手机号" prop="phone">-->
                                <!--<el-input v-model="formDataApp.phone" placeholder="请输入内容"></el-input>-->
                            <!--</el-form-item>-->
                            <!--<el-form-item v-if="distype==2" label="微信号" >-->
                                <!--<el-input v-model="formDataApp.userId" placeholder="请输入内容"></el-input>-->
                            <!--</el-form-item>-->
                            <!--<el-form-item v-if="distype==2" label="微信二维码" >-->
                                <!--<el-upload-->
                                        <!--class="avatar-uploader"-->
                                        <!--action=""-->
                                        <!--:show-file-list="false"-->
                                        <!--:on-success="handleAvatarSuccess"-->
                                        <!--:before-upload="beforeAvatarUpload">-->
                                    <!--<img v-if="formDataApp.imageUrl"  class="avatar">-->
                                    <!--<i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
                                <!--</el-upload>-->
                            <!--</el-form-item>-->
                        </el-form>
                    </div>
                    <div class="message-box-footer" slot="footer" >
                        <div class="message-box-btn btn-group">
                            <button  class="vpnButton primary" @click="submitForm('formDataApp')" type="button">确定</button>
                            <button  class="vpnButton cancel" @click="resetForm('formDataApp')" type="button">取消</button>
                        </div>
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import "../../../style/table.scss"
    //删除弹框
    import workService from '../../../services/fos/work.service'
    let workHttps = new workService()
    export default {
        data(){
            return{
                page: {currentPage: 1, pageSize: 11, total: 1},
                formDataApp:{
                },
                rules:{
                    phone: [
                        { pattern:/^(0|86|17951)?(13[0-9]|15[012356789]|17[0-9]|18[0-9]|14[57])[0-9]{8}$/, message: '请输入正规手机号', trigger: 'blur' },
                    ],
                },
                formInline: {
                    userId: ''
                },
                distype:0,
                options:[
                    {
                        value: '0',
                        label: '幼苗'

                    }
                ],
                failData:[],
                tableData: [],
                selectedOptions:[],
                 title:'',
                dialogDataDetail:false,
                userLevel:'',
            }
        },
        components: {},
        mounted() {
            this.search()
        },
        methods: {
            //查询
            search(){
                let vm = this;
                let param = vm.getSearchQuery()
                vm.getDataDetail(param)
            },
            cancel(){
                this.formInline = {}
                this.search()
            },
            rowClickOne(row){
                if(row.dataCenterCode){
                    row.checked = true
                }
                this.checkArr = row
            },
            //获取当前参数
            getSearchQuery(){
                let vm = this
                let searchObj = {
                    "pageNo":vm.page.currentPage,
                    "pageSize":vm.page.pageSize
                }
                for(let key in vm.formInline){
                    if(vm.formInline[key]){
                        //key是名称
                        searchObj[key] = vm.formInline[key]
                    }
                }
                return searchObj
            },
            //升级等级
            editDetail(val){
                let vm = this
                if(val.userLevel != 0){
                    vm.$message.error("只能普通用户升级幼苗")
                    this.dialogDataDetail = false
                }else {
                    vm.userLevel = val.userId
                    this.dialogDataDetail = true

                }
            },

            //新增
            submitForm(){
                let vm = this;
                let  obj={};
                obj.userLevel = vm.formDataApp.value;
                obj.userId = vm.userLevel;
                workHttps.gitLevel(obj).then((res)=>{
                    if(res.code === 0){
                        vm.formDataApp = {}
                        vm.$message.success("设置成功")
                        vm.search()
                        this.dialogDataDetail = false
                    }else {
                        vm.$message.error(res.msg)
                    }
                }).catch((err=>{
                }))
            },

            //专属客服
            poDetail(){
                let vm = this
                vm.distype = 2
                this.dialogDataDetail = true
            },

            handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },

            //更换手机号
            phoneDetail(){
                let vm = this
                vm.distype = 1
                this.dialogDataDetail = true
            },
           //取消按钮
            resetForm(formData){
                this.$refs[formData].resetFields();
                this.dialogDataDetail = false
                this.formDataApp = {}
            },

            sizeChange(val) {
                this.page.pageSize= val;
                // this.search()
            },
            handleCurrentChange(val) {
                this.page.currentPage = val;
                this.search()
            },
            //列表接口
            getDataDetail(param) {
                //请求接口的方法
                let vm = this;
                //请求接口的方法
                workHttps.getUserInfo(param).then((res)=>{
                    vm.tableData = res.data.list
                    vm.page.total = Number(res.data.total)
                }).catch((err=>{
                }))
            },

        },
    }
</script>
<style lang="scss">
.el-dialog__wrapper.dialog-roleManage{
    .el-dialog{
        width:660px;
        height:75vh;
        min-height:700px;
        .roleInfo{
            height:100%;
        }
        .message-box-content{
            height: calc(100% - 104px);
            .formDataApp{
                height:100%;
                .el-form-tree-item{
                    height: calc(100% - 220px);
                    overflow: hidden;
                    .el-form-item__content{
                        height: 100%;
                        .tree-container{
                            height: 100%;
                            border: 1px solid #DCDFE6;
                        }
                    }

                }
            }
        }
    }
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}

</style>
