<template>
  <div class="personal_con">
    <!-- 面包屑导航 -->
    <a-breadcrumb class="nav_bread">
      <a-breadcrumb-item>用户设置</a-breadcrumb-item>
      <a-breadcrumb-item>个人信息</a-breadcrumb-item>
    </a-breadcrumb>
    <!--设置用户信息 -->
    <div class="personal_set">
      <h2 class="title">个人信息</h2>
      <a-form
        :model="formState"
        name="basic"
        :label-col="{ span: 2 }"
        :wrapper-col="{ span: 5 }"
        autocomplete="off"
      >
        <a-form-item label="头像" name="img" class="header_label">
          <img src="../../static/user/img-tx-big.png" alt="" class="header" />
          <a-upload
            v-model:file-list="fileList"
            name="file"
            action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
            :headers="headers"
            @change="handleChange"
          >
            <span style="cursor: pointer; padding: 0 15px; color: #3e7bfa">
              重新上传
            </span>
          </a-upload>
        </a-form-item>
        <a-form-item label="账号" name="username">
          <a-input v-model:value="formState.username" readOnly />
        </a-form-item>

        <a-form-item label="姓名" name="name">
          <a-input v-model:value="formState.name" />
        </a-form-item>
        <a-form-item
          label="手机号"
          :rules="[
            {
              pattern:
                /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
              message: '手机号格式不正确！',
              validateTrigger: 'onBlur',
            },
          ]"
          name="phone"
        >
          <a-input placeholder="请输入手机号" v-model:value="formState.phone">
            <template #suffix>
              <span
                class="code"
                v-show="phone != '' && phone"
                @click="updatePhone"
                >修改</span
              >
            </template>
          </a-input>
        </a-form-item>
        <a-form-item name="code" label="验证码" v-show="!phone">
          <a-input
            v-model:value="formState.code"
            placeholder="请输入手机验证码"
          >
            <template #suffix>
              <span v-show="!isSend" class="code" @click="sendCode"
                >获取验证码</span
              >
              <span v-show="isSend" class="code">
                {{ RemainingTime }}
                秒后重新获取
              </span>
            </template>
          </a-input>
        </a-form-item>
        <div class="save_btn">
          <a-button type="primary" html-type="submit" @click="save">
            保存
          </a-button>
        </div>
      </a-form>
    </div>
    <!-- 修改手机号弹窗 -->
    <a-modal
      v-model:visible="visibleupdate"
      title="修改手机号"
      cancelText="取消"
      :confirm-loading="confirmLoading"
      okText="确认"
      @ok="handleOk"
    >
      <a-form :model="updateform" style="margin: 0 20%">
        <a-form-item
          label="手机号"
          :rules="[
            {
              pattern:
                /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
              message: '手机号格式不正确！',
              validateTrigger: 'onBlur',
            },
          ]"
          name="phone"
        >
          <a-input placeholder="请输入手机号" v-model:value="updateform.phone">
          </a-input>
        </a-form-item>
        <a-form-item name="code" label="验证码">
          <a-input
            v-model:value="updateform.code"
            placeholder="请输入手机验证码"
          >
            <template #suffix>
              <span v-show="!isSend" class="code" @click="sendCode"
                >获取验证码</span
              >
              <span v-show="isSend" class="code">
                {{ RemainingTime }}
                秒后重新获取
              </span>
            </template>
          </a-input>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script>
import { AES_Encrypt, AES_Decrypt } from "@/utils/aes_util.js";
import { message } from "ant-design-vue";
import { sendSms } from "@/utils/loginAPI";
export default {
  name: "personalSetting",
  data() {
    return {
      visibleupdate: false,
      isSend: false,
      resetShow: false,
      timer: null,
      RemainingTime: 0,
      phone: "125",
      fileList: [],
      headers: {
        authorization: "authorization-text",
      },
      formState: {
        username: "",
        name: "李建国",
        phone: "",
        code: "",
      },
      updateform: {
        phone: "",
        code: "",
      },
      RemainingTime1: "",
    };
  },
  created() {
    //获取个人详细信息
    this.formState.phone = "1";
  },
  mounted() {
    this.formState.username = this.$store.state.username;
  },
  methods: {
    handleChange(info) {
      if (info.file.status !== "uploading") {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === "done") {
        message.success(`${info.file.name} file uploaded successfully`);
      } else if (info.file.status === "error") {
        message.error(`${info.file.name} file upload failed.`);
      }
    },
    //发送验证码
    sendCode() {
      if (this.formState.phone) {
        sendSms({ phone: this.formState.phone }).then((res) => {
          // console.log(res)
          if (res.code == 0) {
            this.isSend = true;
            const TIME_COUNT = 60;
            message.success(res.msg);
            //获取验证码倒计时
            if (!this.timer) {
              this.RemainingTime = TIME_COUNT;
              this.isSend = true;
              this.timer = setInterval(() => {
                if (
                  this.RemainingTime > 0 &&
                  this.RemainingTime <= TIME_COUNT
                ) {
                  this.RemainingTime--;
                } else {
                  this.isSend = false;
                  clearInterval(this.timer);
                  this.timer = null;
                }
              }, 1000);
            }
          } else {
            message.error(res.msg);
          }
        });
      } else {
        message.error("请先输入手机号");
      }
    },
    //保存个人信息
    save() {},
    //修改手机号
    updatePhone() {
      this.visibleupdate = true;
    },
  },
};
</script>
<style lang="less" scoped>
:deep(.ant-input) {
  height: 32px;
}
:deep(.ant-form-item-label > label) {
  height: 32px;
}
.personal_con {
  background-color: #ebebeb;
  padding-left: 30px;
  width: calc(100% - 80px);
  flex: 1;
  .nav_bread {
    height: 50px;
    padding: 20px 3px;
    background-color: #ebebeb;
  }
  .personal_set {
    width: 100%;
    height: calc(100% - 80px);
    background-color: #fff;
    padding: 40px 40px;
    .title {
      color: #1c1c28;
      font-size: 18px;
      font-family: Microsoft YaHei UI-Bold, Microsoft YaHei UI;
      font-weight: bold;

      line-height: 28px;
    }
    .code {
      color: #3e7bfa;
      cursor: pointer;
    }
    .header_label {
      line-height: 120px;
    }
    .header {
      width: 120px;
      height: 120px;
    }
    .save_btn {
      padding-left: 150px;
      padding-top: 20px;
    }
  }
}
</style>
