<template>
  <div>
    <el-form ref="form" :rules="rules"  :model="form" label-width="120px">
      <el-form-item
          label="会员登录名："
          prop="user_name"
      >
        <el-input v-model="form.user_name"  placeholder="请输入会员登录名"></el-input>
      </el-form-item>
      <el-form-item
          label="调研员编号："
          prop="number"
      >
        <el-input v-model="form.number"  placeholder="请输入调研员编号"></el-input>
      </el-form-item>
      <el-form-item  prop="image_url"  >
          <template v-slot:label >
            <span  style="display: inline-block">用户头像：</span>
            <el-tooltip
                class="box-item"
                effect="dark"
                content="建议大小：100px*100px  支持格式：jpg、gif、png"
                placement="top"
            >
              <i class="el-icon-warning"></i>
            </el-tooltip>
            <span  style="display: inline-block">： </span>
          </template>
          <input
              type="file"
              class="inputIcon"
              ref="upfile"
              required
              @change="beforeAvatarUpload"
          />
          <div class="uploadImg" @click="uploadSildeShowClick">
              <div v-if="!form.avatar" class="uploadImg_warp">
                <div class="uploadImg_img"><img src="@/assets/default_avatar.png"></div>
                <span>点击上传</span>
              </div>
            <div v-else style="width: 100%; height: 100%;"><img :src="avatarUrl" style="width: 100%;height: 100%;"></div>
          </div>
        </el-form-item>

      <el-form-item
          label="昵称："
          prop="nickname"
      >
        <el-input v-model="form.nickname"  placeholder="请输入昵称"></el-input>
      </el-form-item>
      <el-form-item
          label="登录密码："
          prop="password"
      >
        <el-input v-model="form.password"  placeholder="请输入登录密码"></el-input>
      </el-form-item>
      <el-form-item
          label="重复输入密码："
          prop="confirm_password"
      >
        <el-input v-model="form.confirm_password"  placeholder="重复输入密码"></el-input>
      </el-form-item>
      <el-form-item
          label="真实名称："
          prop="real_name"
      >
        <el-input v-model="form.real_name"  placeholder="请输入真实名称"></el-input>
      </el-form-item>
      <el-form-item
          label="性别："
          prop="gender"
      >
        <el-radio-group v-model.number="form.gender" >
          <el-radio :label="1">男</el-radio>
          <el-radio :label="2">女</el-radio>
         </el-radio-group>
      </el-form-item>
      <el-form-item
          label="状态："
          prop="status"
      >
        <el-radio-group v-model.number="form.status" >
                <el-radio :label="0">待审核</el-radio>
                <el-radio :label="1">正常</el-radio>
                <el-radio :label="2">冻结</el-radio>
         </el-radio-group>
      </el-form-item>
      <el-form-item
          label="手机号码 ："
          prop="mobile"
      >
        <el-input v-model="form.mobile"  placeholder="请输入手机号码"></el-input>
      </el-form-item>
      <el-form-item
          label="邮箱 ："
          prop="email"
      >
        <el-input v-model="form.email"  placeholder="请输入邮箱"></el-input>
      </el-form-item>
      <el-form-item
          label="身份证号码 ："
          prop="id_card"
      >
        <el-input v-model="form.id_card"  placeholder="请输入身份证号码"></el-input>
      </el-form-item>
      <el-form-item
          label="会员等级："
          prop="level_id"
      >
      <el-select v-model="form.level_id" placeholder="请选择">
        <el-option
          v-for="item in levelList"
          :key="item.id"
          :label="item.name"
          :value="item.id">
        </el-option>
    </el-select>
    </el-form-item>
    <el-form-item
          label="选择城市："
          prop="city_id"
      >
      <el-cascader
          :key="cascaderKey"
          v-model="form.city_id"
          placeholder="选择您要绑定的城市"
          :props="cityData"
          filterable
          clearable
        ></el-cascader>

    </el-form-item>

      <el-form-item>
        <div style="text-align: center">
          <el-button type="primary" @click="onSubmit" :disabled="Isdisabled" :loading="isloading">保存</el-button>
          <el-button style="color: #5075FC " @click="closeDlg">取消</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  props: {
    memberDataForm: {
      type: Object,
      default: () => {}
    },
    isloading:{
      type:Boolean,
      default: false
    }
  },
  data() {
    let self = this
    return {
      levelList:[],
      cityData: {
        checkStrictly: true,
        lazy: true,
        async lazyLoad (node, resolve) {
          const { level, data } = node;  // 取出当前层级和选择数据
          if (data && data.children && data.children.length !== 0) { // 提前加载数据切换后再点击回数据重复
            return resolve(node)
          }
          console.log(level)
          let parentId = level == 0 ? 0 : data.value
          let parames = {
            'pid':parentId
          }
          let res = await self.$api.publicApi.cityList(parames)
          if (res.data) {
            const nodes = res.data.map(item => ({
              value: item.id,
              label: item.name,
              leaf: level >= 3,
              children: []
            }))
            resolve(nodes)
          }
        }
      },
      form: {
        avatar:'',
        user_name:'',//用户名
        nickname:'',//昵称
        password:'',//密码
        confirm_password:'',//重复密码
        real_name:'',//真实姓名
        gender:0,//性别
        status:1,//状态
        mobile:'',//手机号码
        email:'',//邮箱
        id_card:'',//身份证号码
        level_id:1,//会员等级
        city_id:[],//城市
        number:''
      },
      cascaderKey:0,
      avatarUrl:'',
      menulist: [],
      Isdisabled: false,
      rules: {
        user_name: [
          { required: true, message: '用户名称必填' },
          { validator: this.checkName, trigger: "blur" }
        ],
        number: [
          { required: true, message: '调研员编号必填' },
        ],
        password: [
          { required: true, message: '密码必填' },
          { min: 6, max: 30, message: '长度在 6 到 30 个字符', trigger: 'blur' },
        ],
        confirm_password: [
          { required: true, message: '重复密码必填' },
          { validator: this.confirmPassword, trigger: "blur" }
        ],
        level_id: [
          { required: true, message: '会员等级必填' }
        ],
        email:[
           { message: '邮箱格式错误', type: 'email' },
        ],
        mobile:[
          { required: true, message: '手机号码必填' },
          {pattern: /^1[356789]\d{9}$/,message:'您输入的手机号格式有误'}
        ]
       
      }
    }
  },
  mounted() {
    console.log("看看：",this.memberDataForm)
    if(this.memberDataForm) {
      this.form = Object.assign({} , this.memberDataForm)
      // this.form.column_arr_id =  this.DataForm.column_arr_id
    }

    this.getLevelList()
  },
  methods: {
    checkName(rule, value, callback) {
      let _t= this
      let parames = {
          user_name:value
      }
      _t.$api.user.verifyUserInfo(parames).then(res=>{
          if(res.code==200){
            callback(new Error('用户名已存在'))
          }
          callback()
      })
    },
    confirmPassword(rule, value, callback) {
          if(value!=this.form.password){
            callback(new Error('两次密码不一致'))
          }
          callback()
    },
    closeDlg() {
      // this.isloading = false
      console.log("关闭提交")
      this.$emit('closeDlg',1)
    },
    onSubmit() {
      console.log("==============")
      let that = this
      that.$refs['form'].validate((valid) => {
        if (valid) {
          console.log("测试：",this.form)
          this.$emit('SubmitClick', this.form)
        }
      })
    },
    getLevelList(){
      let _t= this
      let parames = {}
     this.$api.publicApi.getUserLevelList(parames).then(res=>{
                if(res.code==200){
                   console.log(res.data)
                  _t.levelList = res.data
                }else{
                    this.$message.error("查询失败")
                }
            })
    },
    uploadSildeShowClick() {
      this.$refs.upfile.value = ''
      this.$refs.upfile.click()
    },
    beforeAvatarUpload(e) {
      let than = this
      let files = e.target.files[0]
      let suffixName = files.name.substring(files.name.lastIndexOf('.') + 1);   /* 得到文件后缀名 */
      if (suffixName !== 'jpg' && suffixName !== 'png' && suffixName !== 'jpeg' && suffixName !== 'gif' ) {
        this.$message.warning("上传文件只能是 jpg、png、jpeg、gif 格式!");
        // this.ishowFile = true
        return;
      }
      this.verificationPicFile(files, () => this.fileAdd(files))
    },
    fileAdd(files) {
      let formData = new FormData();
      // 组装post提交的数据
      formData.append("file", files);
      this.$api.publicApi.uploadFile(formData).then( res => {
        console.log(res)
        if( res.code == '200') {
          this.$message({
            type: 'success',
            message: '上传成功'
          })
          this.avatarUrl =  res.data.imgUrl
          this.form.avatar = res.data.imgUrl
        }else{
          this.$message({
            type: 'error',
            message: '上传失败'
          })
        }
      })
    },
    verificationPicFile(file, callback) {
      const that = this
      //读取图片数据
      var filePic = file;
      var reader = new FileReader();
      reader.onload = function (e) {
        var data = e.target.result;
        //加载图片获取图片真实宽度和高度
        var image = new Image();
        image.onload=function(){
          var width = image.width;
          var height = image.height;
          if (width >= 100 && height >= 100){
            callback()
          } else {
            // that.ishowFile = true
            that.from.avatar = ''
            that.$message.error('上传图片建议200*200px！')
          }
        };
        image.src= data;
      };
      reader.readAsDataURL(filePic);
    }
  }
}
</script>
<style>
.el-cascader-node>.el-radio{
  margin-top:25px;
}
</style>

<style lang="less" scoped>

.uploadImg {
  width: 110px;
  height: 100px;
  border: 1px solid #F8F8F8;
  border-radius: 4px;
  cursor:pointer;
  position: absolute;
  top: 0;
}
.inputIcon {
  width: 110px;
  height: 100px;
  position: relative;
  opacity: 0;
}
.uploadImg_warp {
  width: 100%;
  height: 100%;
  display:flex ;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.uploadImg_img {
  height: 32px;
}
.footerBotton {
  text-align: center;
}
.avatar-uploader {
  width: 110px;
  height: 110px;
  border: 1px solid #F8F8F8;
  border-radius: 4px;
  position: relative;
}
.el-icon-plus {
  width: 110px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.el-icon-plus-icon {
  display: block;
  margin-bottom: 15px;
}
.el-icon-plus-up {
  color: #222222;
  font-size: 12px;
  line-height: 17px;
  font-weight: 400;
}
/deep/ .el-radio {
  line-height: 40px;
}
</style>

