<template>
  <div class="my-messagge-page pagePadding">
    <div class="change">
      <div class="title">我的信息</div>
      <div class="change-main">
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          status-icon
          :rules="rules"
          label-width="110px"
          class="demo-ruleForm"
        >
          <el-row :gutter="10">
            <el-col :span="24">
              <el-form-item label="账户" prop="username">
                <el-input
                  v-model="ruleForm.username"
                  maxlength="50"
                  :disabled="isDetail"
                />
              </el-form-item> </el-col
            ><el-col :span="24">
              <el-form-item label="姓名" prop="nickname">
                <el-input
                  v-model="ruleForm.nickname"
                  maxlength="50"
                  :disabled="isDetail"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="手机号" prop="mobile">
                <el-input
                  v-model="ruleForm.mobile"
                  maxlength="11"
                  :disabled="isDetail"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="邮箱" prop="email">
                <el-input v-model="ruleForm.email" maxlength="100" />
              </el-form-item>
            </el-col>
            <!-- <el-col :span="24">
              <el-form-item label="角色" prop="role_name">
                <el-input
                  v-model="ruleForm.role_name"
                  :disabled="isDetail"
                /> </el-form-item
            ></el-col> -->
            <el-col :span="24">
              <el-form-item label="加入时间" prop="addtime">
                <el-input
                  v-model="ruleForm.addtime"
                  maxlength="50"
                  :disabled="true"
                /> </el-form-item
            ></el-col>
          </el-row>
        </el-form>
        <el-col :span="24" class="tc">
          <el-button type="primary" :disabled="loading" @click="submitForm">
            <i v-if="loading" class="el-icon-loading"></i>
            <span>提 交 信 息</span></el-button
          >
        </el-col>
      </div>
    </div>
  </div>
</template>

<script>
import asyncRequest from "@/apis/service/user/index";
import { validEmail, isChinese, isEmoticon } from "@/utils/validate";
import resToken from "@/mixins/resToken";
export default {
  name: "myMessage",
  mixins: [resToken],
  data() {
    const validatename = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("真实姓名不能为空！"));
      } else {
        if (value.lenght < 2 || value.lenght > 12) {
          callback(new Error("真实姓名规则为2~12位汉字！"));
        } else {
          if (!isChinese(value)) {
            callback(new Error("真实姓名规则为2~12位汉字！"));
          } else if (isEmoticon(value)) {
            callback(new Error("真实姓名规则为2~12位汉字！"));
          } else {
            callback();
          }
        }
      }
    };
    const validateEmail = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("邮箱不能为空！"));
      } else {
        if (!validEmail(value)) {
          callback(new Error("邮箱格式不正确！"));
        } else {
          callback();
        }
      }
    };
    return {
      infor: {},
      isDetail: true,
      loading: false,
      ruleForm: {
        username: "",
        nickname: "",
        mobile: "",
        email: "",
        // role_name: "",
        addtime: "",
      },
      rules: {
        username: [
          {
            required: true,
            message: "请输入账号",
            trigger: "blur",
          },
        ],
        nickname: [
          {
            required: true,
            validator: validatename,
            trigger: "blur",
          },
        ],
        mobile: [
          {
            required: true,
            message: "请输入手机号",
            trigger: "blur",
          },
        ],
        email: [
          {
            required: true,
            validator: validateEmail,
            trigger: "blur",
          },
        ],
        // role_name: [
        //   {
        //     required: true,
        //     message: "请输入角色",
        //     trigger: "blur",
        //   },
        // ],
        addtime: [
          {
            required: true,
            message: "请输入加入时间",
            trigger: "blur",
          },
        ],
      },
    };
  },

  async mounted() {
    await this.resetForm();
    await this.initData();
  },
  destroyed() {},
  methods: {
    async resetForm() {
      // 重置
      await this.$nextTick(() => {
        if (this.$refs.ruleForm) {
          this.$refs.ruleForm.resetFields();
          this.$refs.ruleForm.clearValidate();
          this.ruleForm = {
            username: "",
            nickname: "",
            mobile: "",
            email: "",
            role_name: "",
            addtime: "",
          };
        }
      });
    },
    async initData() {
      const res = await asyncRequest.detail({});
      if (res && res.code === 0 && res.data) {
        let data = res.data;
        this.ruleForm = {
          username: data.username,
          nickname: data.nickname,
          mobile: data.mobile,
          email: data.email,
          addtime: data.addtime,
          role_name: data.role_name,
        };

        console.log(this.ruleForm);
      } else if (res && res.code >= 100 && res.code <= 104) {
        await this.logout();
      } else {
        this.$message.warning(res.message);
      }
    },
    async submitForm() {
      await this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          if (this.loading) {
            return;
          }
          this.loading = true;
          const obj = JSON.parse(JSON.stringify(this.ruleForm));
          delete obj["role_name"];
          delete obj["addtime"];
          // delete obj['mobile']
          delete obj["username"];
          let res = await asyncRequest.prefect(obj);
          this.loading = false;
          if (res && res.code === 0) {
            this.$notify.success({
              title: "个人信息修改成功！",
              message: "",
            });
          } else if (res && res.code >= 100 && res.code <= 104) {
            await this.logout();
          } else {
            this.$message.warning(res.message);
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss">
.my-messagge-page {
  text-align: center;
  background: #f2f2f2;
  min-height: 100%;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  z-index: 2;
  box-sizing: border-box;
  .change {
    padding: 0 8% 0 0;
    .title {
      border-width: 0px;
      width: 100%;
      height: 170px;
      display: flex;
      font-weight: 400;
      font-style: normal;
      font-size: 22px;
      text-align: left;
      padding: 0;
      padding: 60px 0 0 100px;
      width: 100%;
      box-sizing: border-box;
    }
  }
  .change-main {
    width: 370px;
    margin: 0 auto;
    text-align: left;
  }
  .infor {
    padding: 0 0 40px 0;
    .tr {
      text-align: right;
      padding: 0 15px 0 0;
    }
  }
}
/* 修复input 背景不协调 和光标变色 */
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */

$bg: #283443;
$light_gray: #fff;
$cursor: #fff;

@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
  .my-messagge .el-input input {
    color: $cursor;
  }
}

/* reset element-ui css */
.my-messagge {
}
</style>

<style lang="scss" scoped>
$bg: rgba(242, 242, 242, 1);
$dark_gray: #889aa4;
$light_gray: #eee;

.my-messagge {
  min-height: 100%;
  width: 100%;
  height: 100%;
  background-color: $bg;
  overflow: hidden;
  position: absolute;
  z-index: 2;
  background: #fff;

  .login-form {
    position: relative;
    width: 415px;
    max-width: 100%;
    height: 100%;
    padding: 50px 35px 150px 35px;
    margin: 0 auto;
    overflow: hidden;
    .el-form-item__label {
      height: 49px;
      line-height: 49px;
    }
  }

  .tips {
    font-size: 14px;
    color: #fff;
    margin-bottom: 10px;

    span {
      &:first-of-type {
        margin-right: 16px;
      }
    }
  }

  .svg-container {
    padding: 6px 5px 6px 15px;
    color: $dark_gray;
    vertical-align: middle;
    width: 30px;
    display: inline-block;
  }

  .show-pwd {
    position: absolute;
    right: 10px;
    top: 7px;
    font-size: 16px;
    color: $dark_gray;
    cursor: pointer;
    user-select: none;
  }

  .thirdparty-button {
    position: absolute;
    right: 0;
    bottom: 6px;
  }

  @media only screen and (max-width: 470px) {
    .thirdparty-button {
      display: none;
    }
  }
}
</style>
