
<template>
  <div class="setMember usersList usersListEdit">
    <div class="head-title">
        <span @click="goUrl" class="blue point">用户管理</span> / 用户编辑
    </div>
    <div class="content">
        <el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="150px">
                <el-form-item label="用户">
                    <div class="app-image" :style="{backgroundImage:'url(' + userInfo.Photo + ')',backgroundSize:'cover'}"></div>
                </el-form-item>
                <el-form-item label="会员等级">
                    <el-select style="width:293px;" size="small" v-model="userInfo.MemberGrade" placeholder="请选择活动区域">
                        <el-option label="普通用户" :value="0"></el-option>   
                        <el-option
                        v-for="(item,index) in 100"
                        :key="index"
                        :label="`等级${index+1}`"
                        :value="index+1">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="上级">
                     <el-select size="small" v-model="userInfo.SuperiorId" :filter-method="ChangeListName" filterable placeholder="请选择">
                        <el-option label="总部" :value="0"></el-option>
                        <el-option
                        v-for="item in tableData"
                        :key="item.Id"
                        :label="item.Name"
                        :value="item.Id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="加入黑名单">
                    <el-switch
                        v-model="userInfo.Blacklist"
                        active-color="#409EFF"
                        active-value="100"
                        inactive-value="0">
                    </el-switch>
                    <span class="tip">加入黑名单后，用户将无法下单</span>
                </el-form-item>
                <el-form-item label="联系方式">
                    <el-input v-model="userInfo.ContactWay" style="width:478px" size="small"></el-input>
                </el-form-item>
                <el-form-item label="手机号">
                    <el-input v-model="userInfo.Moblie" style="width:478px" size="small"></el-input>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="userInfo.Remark" style="width:478px" size="small"></el-input>
                </el-form-item>
                <el-form-item label="修改备注名">
                    <el-input v-model="userInfo.AliasName" style="width:478px" size="small"></el-input>
                </el-form-item>
                <el-form-item label="注册时间">
                    <span>{{userInfo.CreateDate}}</span>
                </el-form-item>
            </el-form> 
            
    </div>
    <div style="margin-top:20px">
        <el-button size="small" type="primary" @click="Save">保存</el-button>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        addMsg:{
            Id:'',
            SuperiorId:'',
            MemberGrade:'',
            ContactWay:'',
            Remark:'',
            AliasName:'',
        },
        val:'',
        value:'',
        total:0,
        rules: {
            name: [
                { required: true, message: '新手机号', trigger: 'blur' }
            ],
        },
        restaurants: [],
        UserId:'',
        userInfo:{},
        msg:{
            pageIndex:1,
            pageSize:20,
            Name:'',
            Source:0,
            MemberGrade:0,
            Id:0,
            Moblie:''
        },
        tableData:[],
        
      };
    },
    created() {
        if(this.$route.query.UserId){
            this.UserId=this.$route.query.UserId;
            this.getData()
            this.getList();

        }
    },
    methods: {
        Save(){
            let userInfo=this.userInfo;
            this.addMsg={
                Id:userInfo.Id,
                SuperiorId:userInfo.SuperiorId,
                MemberGrade:userInfo.MemberGrade,
                ContactWay:userInfo.ContactWay,
                Remark:userInfo.Remark,
                AliasName:userInfo.AliasName,
            }
            this.apipost("/api/user/SetMemberUserInfoForHT",this.addMsg, res => {
                if(res.data.resultCode==1){
                    this.goUrl();
                }else {
                    this.Error(res.data.message);
                }
            })

        },
        handleSelect(item) {
            console.log(item);
        },
        ChangeListName(val){
            this.msg.Name=val;
            this.getList();
        },
        getList(){
            this.loading=true;
            this.apipost("/api/user/GetMemberUserDropDownList", this.msg, res => {
                this.loading=false;
                if(res.data.resultCode==1){
                    this.total=res.data.data.count;
                    let pageData=res.data.data.pageData;
                    this.tableData=pageData;
                }
                
            })
        },
        querySearch(queryString, cb) {
            
        },
        openChangeDig(){
            this.changeState=true;
        },
        goUrl(){
            this.$router.push({
                name: 'usersList',
                query: {
                    blank: "y"
                }
            });
        },
        
        getData(){
            this.apipost("/api/user/GetMemberUserInfo",{UserId:this.UserId}, res => {
                console.log("res,res",res);
                this.userInfo=res.data.data;
            })
        },

    },
    mounted() {
      
    }
  };

</script>
<style>
.usersListEdit .tip {
    margin-left: 10px;
    display: inline-block;
    height: 30px;
    line-height: 30px;
    color: #ff4544;
    background-color: #FEF0F0;
    padding: 0 20px;
    border-radius: 5px;
}
.usersListEdit .app-image{
    background-size: cover; background-position: center center; width: 80px; height: 80px; border-radius: 0%;
}
.setMember .setTable .el-table__body .cell{
    display: flex;
    align-items: center;

}
.setMember .commonLabel .el-form-item__label{
    margin-top: -4px;  
}
.setMember .discount .el-form-item__label{
    padding-right: 30px;
    margin-top: -4px;
}   
.setMember .el-form-item .elzk{
    position: absolute;
    left: -25px;
    top:8px;
}
.setMember .el-form-item{
    position: relative;
}
.usersList .blue{
    color:#409EFF;
    
}
.usersList .content{
    background: #fff;
    margin-top:10px;
    padding: 20px;
    box-sizing: border-box;
}

</style>
