/*个人信息*/
<template>
  <div class="user"
    v-loading="loading"
    element-loading-text="Loading"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)">
    <el-form
      ref="userForm"
      class="user-form"
      label-width="120px"
      :model="userForm"
      :rules="userRules"
      hide-required-asterisk
    >
      <el-form-item prop="name" label="星级：">
        <div class="stars" v-if="starLevel != 0">
          <img
            v-for="(item, index) in starLevel"
            :key="index"
            src="../../../assets/index/star.png"
          />
        </div>
        <p v-else class="noStar">暂无星级</p>
      </el-form-item>
      <el-form-item prop="name" label="昵称：">
        <el-input
          ref="name"
          v-model="userForm.name"
          type="text"
          size="small"
          style="width: 250px"
          name="name"
          placeholder="请输入昵称"
        />
      </el-form-item>
      <el-form-item prop="personWords" label="简介：">
        <el-input
          ref="personWords"
          v-model="userForm.personWords"
          type="textarea"
          size="small"
          style="width: 250px"
          name="personWords"
          rows="3"
          resize="none"
          placeholder="请输入简介"
        />
      </el-form-item>

      <el-form-item prop="imageUrl" label="头像：">
        <div v-if="userForm.imageUrl" class="image">
          <el-image
            class="img"
            fit="contain"
            :src="userForm.imageUrl"
            :preview-src-list="[userForm.imageUrl]"
          />
          <div class="operation">
            <i class="el-icon-circle-close" @click="fileRemove" />
          </div>
        </div>
        <el-upload
          v-else
          ref="upload"
          class="image"
          action="string"
          accept="image/jpeg, image/png, image/jpg"
          :multiple="false"
          :limit="1"
          :before-upload="onBeforeUploadImage"
          :http-request="UploadImage"
          :on-remove="fileRemove"
          :show-file-list="false"
        >
          <i class="el-icon-circle-plus upload-icon" />
          <p>上传头像</p>
        </el-upload>
        <div class="el-upload__tip">
          只能上传jpg/png文件，大小不能超过 500KB
        </div>
      </el-form-item>
      <el-form-item>
        <el-button
          type="danger"
          size="small"
          class="next-btn"
          @click.native.prevent="Save"
          >保存</el-button
        >
      </el-form-item>
    </el-form>
    <el-form
      ref="mobileForm"
      class="user-form"
      label-width="120px"
      :model="mobileForm"
      :rules="mobileRules"
      hide-required-asterisk>
      <el-form-item prop="mobile" label="手机号码：">
            <el-input
              ref="mobile"
              v-model="mobileForm.mobile"
              type="text"
              size="small"
              style="width: 220px"
              name="mobile"
              placeholder="请输入手机号码"
            >
            </el-input>
            <el-button
              class="code"
              type="danger"
              size="small"
              :disabled="countDown > 0"
              plain
              @click.native.prevent="getCode"
              v-show="loginMobile!==mobileForm.mobile"
              >{{ countDown > 0 ? `${countDown}s` : '获取验证码' }}</el-button
            >
          </el-form-item>
      <el-form-item prop="code" label="验证码：" v-show="loginMobile!==mobileForm.mobile">
            <el-input
              ref="code"
              v-model="mobileForm.code"
              type="text"
              size="small"
              style="width: 220px"
              name="code"
              placeholder="请输入验证码"
            >
            </el-input>
      </el-form-item>
      <el-form-item prop="userName" label="管理员名称：" v-if="userType=='1'||userType=='2'">
            <el-input
              ref="userName"
              v-model="mobileForm.userName"
              type="text"
              size="small"
              style="width: 220px"
              name="code"
              placeholder="请输入管理员名称"
            >
            </el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { request, uploadFile, getImage } from '@/utils/request'
import { validMobile,validCode } from '@/utils/validate'
export default {
  name: 'Real',
  data() {
    const validateName = (rule, value, callback) => {
      if (value) {
        callback()
      } else {
        callback(new Error('请输入昵称'))
      }
    }
    const validateFile = (rule, value, callback) => {
      if (value) {
        callback()
      } else {
        callback(new Error('请上传头像'))
      }
    }
    const validateEmail = (rule, value, callback) => {
      if (value) {
        if (!validMobile(value)) {
          callback(new Error('请输入正确的手机号码'))
        }else{
          callback()
        }
      } 
    }
    const validateCode = (rule, value, callback) => {
      if (value) {
        if (!validCode(value)) {
          callback(new Error('验证码为6位数字'))
        } else {
          callback()
        }
      } 
    }
    return {
      loading:false,
      mobileFlog:'',
      userType:this.$store.getters.userType,
      countDown: '00',
      userForm: {
        name: '',
        personWords: '',
        imageUrl: '',
      },
      userRules: {
        // name: [{ required: true, trigger: 'blur', validator: validateName }],
        // imageUrl: [
        //   { required: true, trigger: 'blur', validator: validateFile },
        // ],
      },
      mobileRules: {
        mobile: [{ required: true, trigger: 'blur', validator: validateEmail }],
        code: [{ required: true, trigger: 'blur', validator: validateCode }],
      },
      mobileForm:{
        mobile:'',
        code:'',
        userName:''
      },
      file: '',
      starLevel: 0,
      loginMobile:''
    }
  },
  computed: {},
  created() {
    this.getUserInfo()
  },
  methods: {
    getUserInfo() {
      let params = {
        transCode: 'B00001',
      }
      request(params)
        .then((res) => {
          this.$store.dispatch('user/changeState', {
            key: 'name',
            value: res.nickName,
          })
          this.userForm.name = res.nickName
          this.userForm.personWords = res.personWords
          this.userForm.imageUrl = getImage(res.headProfile)
          this.starLevel = parseInt(res.starLevel)
          this.mobileForm.mobile=res.mobileNo
          this.loginMobile=res.mobileNo
          this.mobileForm.userName=res.adminName
          // this.mobileForm.mobile=res.mobileNo
        })
        .catch((err) => {})
    },
    onBeforeUploadImage(file) {
      const isIMAGE =
        file.type === 'image/jpeg' ||
        file.type === 'image/jpg' ||
        file.type === 'image/png'

      if (!isIMAGE) {
        this.$message.error('上传文件只能是图片格式!')
      }
      // return isIMAGE

      const isLt1M = file.size / 1024 / 1024 < 0.5
      if (!isLt1M) {
        this.$message.error('上传文件大小不能超过 500KB!')
      }
      return isIMAGE && isLt1M
    },
    UploadImage(params) {
      this.userForm.imageUrl = URL.createObjectURL(params.file)
      this.file = params.file
      this.$refs.upload.clearFiles() // 清除文件对象
    },
    fileRemove() {
      this.userForm.imageUrl = ''
      this.file = ''
    },
    theLast() {
      this.countDown = 60
      const timer = setInterval(() => {
        if (this.countDown > 0) {
          this.countDown--
          this.countDown < 10 && (this.countDown = '0' + this.countDown)
        } else {
          clearInterval(timer)
        }
      }, 1000)
    },
    getCode() {
      this.mobileFlog=1
      if (this.countDown > 0) return this.$message.error('请不要频繁点击!')
      if (!this.mobileForm.mobile) return this.$message.error('请输入手机号码!')
      if (!validMobile(this.mobileForm.mobile))
        return this.$message.error('请输入正确的手机号码!')
      const params = {
        transCode: 'A00001',
        mailOrPhone: this.mobileForm.mobile,
        type: '4',
        channel:'1'
      }
      request(params)
        .then((res) => {
          this.$message.success(
            `验证码已发送至手机号码： ${this.mobileForm.mobile} ,请注意查收！`
          )
          this.theLast()
        })
        .catch((err) => {})
    },
    // 保存
    Save() {
      this.$refs.userForm.validate((valid) => {
        if (valid) {
          this.loading=true
          const params = new FormData()
          params.append('transCode', 'B00002')
          params.append('nickName', this.userForm.name)
          params.append('mobnub', this.mobileForm.mobile)
          this.mobileFlog===1?params.append('mobnub', this.mobileForm.mobile):params.append('mobnub', '')
          this.mobileFlog===1?params.append('verificationCode', this.mobileForm.code):params.append('verificationCode', '')
          
          params.append('adminName', this.mobileForm.userName)
          params.append('personWords', this.userForm.personWords)
          params.append('headProfile', this.file)
          uploadFile(params, 'service', (progress) => {
            console.log('progress: ' + progress + '%')
          })
            .then((res) => {
              this.$message.success('保存成功！')
              this.loading=false
            })
            .catch((err) => {
              this.loading=false
            })
        } else {
          return false
        }
      })
    },
    getImage(id) {
      return getImage(id)
    },
  },
}
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';
@import '@/styles/mixin.scss';
.user {
  padding: 35px 0;
  @include w_h(100%, 100%);
  background: $color_f;
  display: flex;
  .user-form {
    padding: 0 30px 30px;
    @include w_h();
    background: $color_f;
    .stars {
      @include w_h(250px, 40px);
      @include flex(flex-start);
      img {
        @include w_h(16px, 16px);
        margin-right: 5px;
      }
    }
    .noStar {
      font-size: 12px;
      color: $color_9;
    }
    .next-btn {
      margin: 10px auto;
      @include w_h(250px);
    }
    .image {
      position: relative;
      @include w_h(100px, 130px);
      font-size: 12px;
      line-height: 20px;
      color: $color_d;
      border-radius: 4px;
      overflow: hidden;
      .img {
        @include w_h(100%, 100%);
        border: 1px solid $color_d;
      }
      .operation {
        @include position(absolute, 0, auto, auto, 0, 1);
        font-size: 20px;
      }
    }
  }
}
.el-form{
  width: 430px !important;
}
.code {
      @include position(absolute, 4px, auto, auto);
      @include w_h(100px);
      font-size: 12px;
      vertical-align: middle;
      cursor: pointer;
      user-select: none;
    }
</style>

<style lang="scss">
@import '@/styles/variables.scss';
@import '@/styles/mixin.scss';
@supports (-webkit-mask: none) and (not (cater-color: $color_9)) {
  .user-form .el-input input {
    font-size: 12px;
    color: $color_9;
  }
}

.user-form {
  .el-input {
    &__inner:focus {
      border-color: $color_9;
    }
    &--prefix .el-input__inner {
      color: $color_6;
      padding-left: 65px;
    }
  }

  .el-form-item__label {
    font-size: 12px;
    color: $color_3;
  }
  .el-image__inner--center {
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .el-upload {
    @include w_h(100%, 100%);
    color: $color_d;
    border: 1px solid $color_d;
    &:hover {
      border-color: $color_b;
    }
    .upload-icon {
      margin-top: 40px;
      font-size: 24px;
      color: $color_d;
      text-align: center;
    }
  }
}
</style>>

