<template>
  <div class="setMember usersList addUsers">
    <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="用户头像" class="is-required" size="small">
          <el-button @click="openChangeDig(1)" size="small">选择文件</el-button>
          <div class="app-gallery-item" style="position: relative;width: 100px;margin-top: 10px;">
            <img  style="width:80px;height:80px" :src="addMsg.Photo"
                 alt="">
          </div>
        </el-form-item>
        <el-form-item label="OpenId">
          <el-input v-model="addMsg.OpenId" style="width:478px" size="small" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="昵称" prop="Name">
          <el-input v-model="addMsg.Name" style="width:478px" size="small" ></el-input>
        </el-form-item>
        <el-form-item label="上级">
          <el-select size="small" v-model="addMsg.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-input v-model="addMsg.Moblie" style="width:478px" size="small"></el-input>
        </el-form-item>


      </el-form>

    </div>
    <div style="margin-top:20px">
      <el-button size="small" type="primary" @click="Save('addMsg')">保存</el-button>
    </div>
    <!-- 选择文件 -->
    <el-dialog title="选择文件" :visible.sync="changeState" width="1240px">
      <ChooseImg  @SelectId="SelectId"></ChooseImg>
    </el-dialog>
  </div>
</template>
<script>
  import ChooseImg from "@/components/global/ChooseImg.vue";

  export default {
    components: {
      ChooseImg,

    },
    data() {
      return {
        addMsg: {
          Source: 1,
          OpenId: '',
          Name: '',
          Photo: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/dsmorentx.png',//默认头像
          Moblie: '',
          SuperiorId: 0,//上级
          SmallShopId: 0,
          UserPageType:0,
          CounponPassword:0,
          KeyWord:'',
        },
        rules: {
          Name: [{
            required: true,
            message: '请输入昵称',
            trigger: 'blur'
          }],
        },
        msg: {
          pageIndex: 1,
          pageSize: 20,
          Name: '',
          Source: 0,
          MemberGrade: 0,
          Id: 0,
          Moblie: ''
        },
        tableData: [],
        changeState:false,
        imgType:1,

      };
    },
    created() {
      this.getList();
      this.addMsg.OpenId = this.generateUUID()
    },
    methods: {
      Save(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.apipost("/api/AppletLogin/Login", this.addMsg, res => {
              if (res.data.resultCode == 1) {
                this.goUrl();
              } else {
                this.Error(res.data.message);
              }
            })
          } else {
            return false;
          }
        });

      },
      ChangeListName(val) {
        this.msg.Name = val;
        this.getList();
      },
      getList() {
        this.apipost("/api/user/GetMemberUserDropDownList", this.msg, res => {
          if (res.data.resultCode == 1) {
            this.total = res.data.data.count;
            let pageData = res.data.data.pageData;
            this.tableData = pageData;
          }
        })
      },
      goUrl() {
        this.$router.push({
          name: 'usersList',
          query: {
            blank: "y"
          }
        });
      },
      generateUUID(){
        var d = new Date().getTime();
        if (window.performance && typeof window.performance.now === "function") {
          d += performance.now(); //use high-precision timer if available
        }
        var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
          var r = (d + Math.random() * 16) % 16 | 0;
          d = Math.floor(d / 16);
          return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
        });
        return uuid;
      },
      openChangeDig(num) {

        this.changeState = true;
        this.imgType=num;
      },
      SelectId(msg){
        if(this.imgType==1){
          let url  = this.getIconLink(msg.url)
          this.addMsg.Photo = url
        }

        this.changeState = false;
      },

    },
    mounted() {

    }
  };

</script>
<style>
  .addUsers .tip {
    margin-left: 10px;
    display: inline-block;
    height: 30px;
    line-height: 30px;
    color: #ff4544;
    background-color: #FEF0F0;
    padding: 0 20px;
    border-radius: 5px;
  }
  .addUsers .app-gallery-item{
    border:none
  }

  .addUsers .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>
