
<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="background-image: url(https://wx.qlogo.cn/mmopen/vi_32/oGIVrPVN31icEqGbm2lHxwnutS3mD9xx40ZRx2E7U8cFicdY2YFAlZtfSXwjYvQicA9ggpSf5BtdPfoIreCialklKg/132); "></div>
                </el-form-item>
                <el-form-item label="会员等级">
                    <el-select style="width:293px;" size="small" v-model="addMsg.name" placeholder="请选择活动区域">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="上级">
                    <el-autocomplete
                        size="small"
                        v-model="val"
                        :fetch-suggestions="querySearch"
                        placeholder="请输入内容"
                        @select="handleSelect"
                        ></el-autocomplete>
                </el-form-item>
                <el-form-item label="加入黑名单">
                    <el-switch
                        v-model="addMsg.name"
                        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="val" style="width:478px" size="small"></el-input>
                </el-form-item>
                <el-form-item label="手机号">
                    <el-input v-model="val" style="width:478px" size="small"></el-input>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="val" style="width:478px" size="small"></el-input>
                </el-form-item>
                <el-form-item label="修改备注名">
                    <el-input v-model="val" style="width:478px" size="small"></el-input>
                </el-form-item>
                <el-form-item label="注册时间">
                    <span>2020-04-23 13:37:53</span>
                </el-form-item>
            </el-form> 
            
    </div>
    <div style="margin-top:20px">
        <el-button size="small" type="primary" @click="dialogVisible = false">保存</el-button>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        currentPage4:3,
        changeState:false,
        val:'',
        addMsg:{},
        dialogVisible:false,
        value:'',
        options:[],
        tableData:[
            {ID:'111'}
        ],
        msg:{
            pageIndex:1,
            pageSize:15,
        },
        total:0,
        rules: {
            name: [
                { required: true, message: '新手机号', trigger: 'blur' }
            ],
        },
        restaurants: [
            { "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },
            { "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },
            { "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },
            { "value": "泷千家(天山西路店)", "address": "天山西路438号" },
            { "value": "胖仙女纸杯蛋糕（上海凌空店）", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101" },
            { "value": "贡茶", "address": "上海市长宁区金钟路633号" },
            { "value": "豪大大香鸡排超级奶爸", "address": "上海市嘉定区曹安公路曹安路1685号" },
        ],

        
      };
    },
    created() {

    },
    methods: {
        handleSelect(item) {
            console.log(item);
        },
        querySearch(queryString, cb) {
            var restaurants = this.restaurants;
            var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
            // 调用 callback 返回建议列表的数据
            cb(results);
        },
        openChangeDig(){
            this.changeState=true;
        },
        goUrl(){
            this.$router.push({
                name: 'usersList',
                query: {
                    blank: "y"
                }
            });
        },
        handleCurrentChange(val) {
            this.msg.pageIndex = val;
            this.getList();
        },
        getList(){

        },

    },
    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>
