<template>
  <div class="setMember studentList 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-input v-model="userInfo.Name" style="width:478px" size="small" :disabled="true"></el-input>
        </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 options" :key="index" :label="item.Name" :value="item.Id">
            </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="职位" v-if="mall_userInfo.TenantId==1 &&  mall_userInfo.MallBaseId==1">
          <el-select size="small" v-model="userInfo.PostId" placeholder="请选择">
            <el-option label="无" :value="0"></el-option>
            <el-option label="领队导游" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="加入黑名单">
          <el-switch v-model="userInfo.Blacklist" active-color="#409EFF" :active-value="1" :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: '',
          PostId: 0, //职位
        },
        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: ''
        },
        mall_userInfo: {}, //用户信息
        tableData: [],
        options: [],
      };
    },
    created() {
      this.mall_userInfo = JSON.parse(localStorage.mall_userInfo)
      if (this.$route.query.UserId) {
        this.UserId = this.$route.query.UserId;
        this.getData()
        this.getList();
        this.getMemberGradeList()
      }
    },
    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,
          PostId: userInfo.PostId,
          Blacklist:userInfo.Blacklist,
          Moblie:userInfo.Moblie,
        }
        this.apipost("/api/user/SetMemberUserInfoForHT", this.addMsg, res => {
          if (res.data.resultCode == 1) {
            this.goUrl();
          } else {
            this.Error(res.data.message);
          }
        })
      },
      handleSelect(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;
          }
        })
      },
      getMemberGradeList() {
        this.loading = true;
        this.apipost("/api/user/GetMemberGradeList", {
          Grade: 0,
          Name: '',
          Enabled: 1
        }, res => {
          this.loading = false;
          if (res.data.resultCode == 1) {
            this.options = res.data.data
          }
        })
      },
      querySearch(queryString, cb) {

      },
      openChangeDig() {
        this.changeState = true;
      },
      goUrl() {
        this.$router.push({
          name: 'studentList',
          query: {
            blank: "y"
          }
        });
      },
      getData() {
        this.apipost("/api/user/GetMemberUserInfo", {
          UserId: this.UserId
        }, res => {
          this.userInfo = res.data.data;
          this.msg.Name = this.userInfo.SuperiorName;
          this.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;
  }

  .studentList .blue {
    color: #409EFF;

  }

  .studentList .content {
    background: #fff;
    margin-top: 10px;
    padding: 20px;
    box-sizing: border-box;
  }

</style>