<template>
  <div class="my-info">
    <div class="my-info__header">我的资料</div>

    <div class="my-info__body">
      <el-form label-width="100px">
        <el-form-item>
          <div class="avatar-wrap">
            <div class="avatar">
              <img
                v-if="listData.avatar"
                :src="$tools.splitImgHost(listData.avatar)"
                alt=""
              />
            </div>
            <label for="uplose">
              <div class="btn">
                {{ listData.avatar ? "更换头像" : "上传头像" }}
              </div></label
            >
            <input
              ref="file"
              type="file"
              style="display: none"
              id="uplose"
              @change="getImgFile"
            />
          </div>
        </el-form-item>
        <el-form-item label="昵称">
          <el-input
            placeholder="请填写你的昵称"
            v-model="listData.nickname"
          ></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="listData.sex">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="2">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="年龄">
          <el-date-picker
            v-model="listData.userBirth"
            type="date"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
            placeholder="请输入你的出生日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="关联姓名">
          <el-input
            placeholder="请填写你的姓名"
            readonly
            v-model="listData.realname"
          ></el-input>
        </el-form-item>
        <el-form-item label="关联身份证">
          <el-input
            readonly
            placeholder="请输入你的身份证"
            v-model="listData.idCard"
          ></el-input>
        </el-form-item>
        <el-form-item label="所在城市">
          <v-distpicker
            @province="onProvince"
            @city="onCity"
            @area="onArea"
            style="width: 510px; display: inline-block"
            :placeholders="placeholders"
            :province="listData.province"
            :city="listData.city"
            :area="listData.district"
          ></v-distpicker>
          <!-- <el-input placeholder="请选择你的城市"></el-input> -->
        </el-form-item>
        <el-button type="primary" style="margin-left: 300px" @click="submit"
          >保存</el-button
        >
        <el-form-item label="账户密码">
          <div class="phone-wrap">
            <div class="slide-btn" @click="showUsername = !showUsername">
              编辑▼
            </div>
            <div v-if="showUsername">
              <div class="note">重新修改密码请验证您的用户信息</div>
              <el-form :model="form" ref="form" :rules="rules">
                <el-form-item
                  ><el-input
                    v-model="listData.telphone"
                    readonly
                    placeholder="请输入手机号"
                  ></el-input
                ></el-form-item>

                <el-form-item prop="oldPwd"
                  ><el-input
                    placeholder="请输入旧密码"
                    v-model="form.oldPwd"
                    show-password
                  ></el-input
                ></el-form-item>
                <el-form-item prop="userPwd"
                  ><el-input
                    placeholder="请输入新密码"
                    v-model="form.userPwd"
                    show-password
                  ></el-input
                ></el-form-item>
                <el-form-item prop="reUsePwd">
                  <el-input
                    placeholder="再次输入新密码"
                    v-model="form.reUsePwd"
                    show-password
                  ></el-input
                ></el-form-item>
              </el-form>
              <div class="submit-btn" @click="resultForm('form')">确认</div>
            </div>
          </div>
        </el-form-item>

        <el-form-item label="手机号">
          <div class="phone-wrap">
            <el-form-item
              ><el-input
                v-model="listData.telphone"
                readonly
                placeholder="请输入手机号"
              ></el-input
            ></el-form-item>
            <!-- <div class="slide-btn" @click="showPhone = !showPhone">编辑▼</div>
            <div v-if="showPhone">
              <div class="note">重新修改密码请验证您的用户信息</div>
              <el-input
                style="margin-bottom: 24px"
                v-model="form.phone"
                placeholder="请输入需要绑定的手机号"
              ></el-input>
              <el-input
                style="margin-bottom: 24px"
                v-model="form.code"
                placeholder="短信验证码"
              >
                <span
                  slot="suffix"
                  class="get-code"
                  @click="getCodeStatus ? getCode() : ''"
                  >{{ getCodeStatus ? "获取验证码" : `倒计时：${num}秒` }}
                </span>
              </el-input>
              <div class="submit-btn" @click="submitForm">确认</div>
            </div> -->
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import VDistpicker from "v-distpicker";
export default {
  components: { VDistpicker },
  name: "MyMessage",
  data() {
    return {
      rules: {
        oldPwd: [{ required: true, message: "请输入旧密码", trigger: "blur" }],
        userPwd: [{ required: true, message: "请输入新密码", trigger: "blur" }],
        reUsePwd: [
          { required: true, message: "请再次输入新密码", trigger: "blur" },
        ],
      },
      placeholders: {
        province: "------- 省 --------",
        city: "--- 市 ---",
        area: "--- 区 ---",
      },
      form: {
        resource: "",
        userPhone: "",
        userPwd: "",
        reUsePwd: "",
        phone: "",
        oldPwd: "",
        code: "",
      },
      pwdType: "password",
      rePwdType: "password",
      showPhone: false,
      showUsername: false,
      listData: {},
      setTimeStatus: null,
      getCodeStatus: true,
      num: 60, //倒计时
    };
  },
  mounted() {
    this.getUserInfo();
  },
  methods: {
    getCode() {
      let testPhone = /^1[3|4|5|7|8][0-9]{9}$/;
      if (testPhone.test(this.form.phone)) {
        this.$request
          .appcommonsmsbindNew({ tel: this.form.phone })
          .then((res) => {
            this.getCodeStatus = false;
            this.setTimeStatus = setInterval(() => {
              if (this.num <= 1) {
                this.getCodeStatus = true;
                this.num = 60;
                clearInterval(this.setTimeStatus);
              } else {
                this.num--;
              }
            }, 1000);
          });
      } else {
        this.$message.error("请输入正确手机号码");
        return;
      }
    },
    /**
     * 确认提交修改
     */
    submitForm() {
      let testPhone = /^1[3|4|5|7|8][0-9]{9}$/;
      if (!testPhone.test(this.form.phone)) {
        this.$message.error("请输入正确手机号码");
        return;
      }
      if (!this.form.code) {
        this.$message.error("请输入验证码");
        return;
      }
      this.$request
        .appuserbindNewTel({
          userId: this.listData.userId,
          tel: this.form.phone,
          code: this.form.code,
        })
        .then((res) => {
          this.$message.success("绑定成功");
        });
    },
    /**
     * 验证
     */
    resultForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.submitPwd();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    /**
     * 修改密码
     */
    submitPwd() {
      if (!this.form.oldPwd) {
        this.$message.error("请输入旧密码");
        return;
      }
      if (!this.form.userPwd && !this.form.reUsePwd) {
        this.$message.error("请输入新密码");
        return;
      }
      if (this.form.userPwd !== this.form.reUsePwd) {
        this.$message.error("密码不一致");
        return;
      }
      let data = {
        userId: this.listData.userId,
        oldPwd: this.form.oldPwd,
        newPwd: this.form.userPwd,
      };
      this.$request.appuserupdatePwd(data).then((res) => {
        this.$message.success("修改成功，请重新登录");
      });
    },
    /**
     * 更新头像
     */
    getImgFile() {
      var self = this;
      var file = self.$refs.file.files[0];
      if (file === undefined) {
        self.$set(self.listData, "avatar", "");
        return;
      }
      if (file.size > 0.3 * 1024 * 1024) {
        self.$message.error("图片不得大于300kb");
        return;
      }
      var type = self.$refs.file.value.toLowerCase().split(".").splice(-1);
      if (
        type[0] != "jpg" &&
        type[0] != "png" &&
        type[0] != "jpeg" &&
        type[0] != "gif"
      ) {
        self.$message.error("上传格式需为：.jpg/.png/.jpeg/gif");
        self.$refs.file.value = "";
        return;
      }
      this.$upload.upload(file, 0).then((res) => {
        self.listData.avatar = res;
      });
    },
    onProvince(data) {
      if (!data.code) {
        this.listData.province = "";
      } else {
        this.listData.province = data.value;
      }
    },
    onCity(data) {
      if (!data.code) {
        this.listData.city = "";
      } else {
        this.listData.city = data.value;
      }
    },
    onArea(data) {
      if (!data.code) {
        this.listData.district = "";
      } else {
        this.listData.district = data.value;
      }
    },
    getUserInfo() {
      this.$store.dispatch("getUserInfo").then(() => {
        this.listData = this.$store.getters.userInfo;
      });
    },
    /**
     * 保存信息
     */
    submit() {
      if (
        (this.listData.province ||
          this.listData.city ||
          this.listData.district) &&
        !(
          this.listData.province &&
          this.listData.city &&
          this.listData.district
        )
      ) {
        this.$message.warning("请选择所在城市");
        return;
      }
      let data = {
        userId: this.listData.userId,
        avatar: this.listData.avatar,
        nickname: this.listData.nickname,
        sex: this.listData.sex,
        userBirth: this.listData.userBirth,
        realname: this.listData.realname,
        idCard: this.listData.idCard,
        province: this.listData.province,
        city: this.listData.city,
        district: this.listData.district,
      };
      this.$request.editAppUser(data).then((res) => {
        if (res.code === 200) {
          this.$store.dispatch("getUserInfo");
          this.$message.success("保存成功");
        }
      });
    },
    showRePass() {
      if (this.rePwdType == "password") {
        this.rePwdType = "text";
      } else {
        this.rePwdType = "password";
      }
    },
    showPass() {
      if (this.pwdType == "password") {
        this.pwdType = "text";
      } else {
        this.pwdType = "password";
      }
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.my-info {
  &__header {
    height: 55px;
    line-height: 55px;
    border-bottom: 1px solid #eee;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #666666;
  }
  &__body {
    margin-top: 24px;
    overflow: hidden;

    .avatar-wrap {
      display: table;
      .avatar {
        width: 100px;
        height: 100px;
        background: #3f8dfd;
        border-radius: 50%;
        float: left;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }

      .btn {
        margin-top: 34px;
        margin-left: 124px;
        width: 122px;
        height: 32px;
        background: #3f8dfd;
        border-radius: 16px;
        color: #fff;
        font-size: 16px;
        text-align: center;
        line-height: 32px;
        cursor: pointer;
      }
    }

    .el-input {
      width: 510px;
    }

    .save-btn {
      margin-left: 16px;
      width: 122px;
      height: 32px;
      background: #3f8dfd;
      border-radius: 16px;
      color: #fff;
      font-size: 16px;
      text-align: center;
      line-height: 32px;
      cursor: pointer;
      display: inline-block;
    }

    .phone-wrap {
      .get-code {
        color: #3f8dfd;
        cursor: pointer;
      }
      .slide-btn {
        cursor: pointer;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #3f8dfd;
      }
      .note {
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #999999;
      }
      // .el-input {
      //   margin-bottom: 24px;
      // }

      .submit-btn {
        width: 122px;
        height: 32px;
        background: #3f8dfd;
        border-radius: 16px;
        color: #fff;
        font-size: 16px;
        text-align: center;
        line-height: 32px;
        cursor: pointer;
      }

      .eye {
        font-size: 20px;
      }
    }
  }
}
/deep/ .el-form-item {
  margin-bottom: 22px;
}
</style>
