<template>
  <page-meta
    :page-font-size="$baseFontSize() + 'px'"
    :root-font-size="$baseFontSize() + 'px'"
  ></page-meta>
  <view class="container commonPageBox">
    <!-- 公共组件-每个页面必须引入 -->
    <public-module></public-module>
    <z-nav-bar title="个人资料" bgColor="#3AB3AE" fontColor="#fff"></z-nav-bar>
    <view class="contentBox commonPageContentBox">
      <view class="avatar_box">
        <image
          :src="userData.avatar"
          class="per_mes_img"
          @click="
            handleClickRightContent(
              { type: 'avatar' },
              userData.avatar ? '' : 'bind',
            )
          "
        ></image>
        <text
          class="avatar_text"
          @click="
            handleClickRightContent(
              { type: 'avatar' },
              userData.avatar ? '' : 'bind',
            )
          "
          >{{ userData.avatar ? "更换头像" : "设置头像" }}</text
        >
      </view>
      <view class="set_box">
        <common-list :dataList="dataList" isNoIcon="true" label="title">
          <template slot="rightSlot" slot-scope="slotProps">
            <view class="right_content">
              <view v-if="slotProps.row.type == 'sex'">
                <text v-if="userData[slotProps.row.indexValue]">
                  {{
                    userData[slotProps.row.indexValue] == 2 ? "女" : "男"
                  }}</text
                >
                <view
                  v-else
                  @click="handleClickRightContent(slotProps.row, 'bind')"
                  >未设置</view
                >
              </view>
              <view v-if="slotProps.row.type == 'nickname'">
                <text v-if="userData[slotProps.row.indexValue]">
                  {{ userData[slotProps.row.indexValue] }}</text
                >
                <view
                  v-else
                  @click="handleClickRightContent(slotProps.row, 'bind')"
                  >未设置</view
                >
              </view>
              <view v-if="slotProps.row.type == 'tel'">
                <text v-if="userData[slotProps.row.indexValue]">
                  {{ userData[slotProps.row.indexValue] }}</text
                >
                <view
                  v-else
                  @click="handleClickRightContent(slotProps.row, 'bind')"
                  >点击绑定</view
                >
              </view>
              <view
                v-if="slotProps.row.type == 'password'"
                @click="handleClickRightContent(slotProps.row, 'bind')"
              >
                {{
                  userData[slotProps.row.indexValue] ? "更改密码" : "设置密码"
                }}
              </view>
              <view v-if="slotProps.row.type == 'email'">
                <text v-if="userData[slotProps.row.indexValue]">
                  {{ userData[slotProps.row.indexValue] }}</text
                >
                <view
                  v-else
                  @click="handleClickRightContent(slotProps.row, 'bind')"
                  >点击绑定</view
                >
              </view>
              <view v-if="slotProps.row.type == 'age'">
                <text v-if="userData[slotProps.row.indexValue]">
                  {{ userData[slotProps.row.indexValue] }}</text
                >
                <view
                  v-else
                  @click="handleClickRightContent(slotProps.row, 'bind')"
                  >未设置</view
                >
              </view>

              <u-icon
                v-if="
                  userData[slotProps.row.indexValue] &&
                  userData[slotProps.row.indexValue] != ''
                "
                class="editIcon"
                name="edit-pen-fill"
                color="#3ab3ae"
                size="22"
                @click.native.stop="handleClickRightContent(slotProps.row)"
              ></u-icon>
            </view>
            <text class="fdButtonBox aui-text-success">{{
              slotProps.row.content
            }}</text>

            <view> </view>
          </template>
        </common-list>
      </view>
      <view class="button_box">
        <!-- <u-button shape="square" type="" class="common_red_button button" size="medium"
					@click="handleClickButton(1)">注销账号</u-button>
				<u-button shape="square" type="" class="common_grey_button button" size="medium"
					@click="handleClickButton(2)">退出登录</u-button>
			 -->
      </view>
    </view>

    <!-- <view class="tabulate">
      <view class="per_list">
        <text class="biaoti">手机号</text>
        <text class="neirong">{{ userMsage.tel }}</text>
        <text
          class="marPer"
          v-if="!userMsage.tel"
          @click="openTel()"
          style="background-color: #ed901d"
          >点击绑定</text
        >
      </view>
      <view class="per_list">
        <text class="biaoti">邮箱</text>
        <text class="neirong">{{ userMsage.email }}</text>

        <text
          class="marPer"
          v-if="!userMsage.email"
          @click="openEmail"
          style="background-color: #ed901d"
          >点击绑定</text
        >
      </view>
      <view class="per_list per_list_arrow" @click="avatarShow = true">
        <text class="biaoti" style="margin-top: 40rpx">头像</text>
        <text class="neirong" style="margin-top: 0">
          <image :src="userMsage.avatar" class="per_mes_img"></image>
        </text>
      </view>
      <view class="per_list per_list_arrow" @click="nicknameShow = true">
        <text class="biaoti">昵称</text>
        <text class="neirong">{{ userMsage.nickname }}</text>
      </view>
      <view class="per_list per_list_arrow" @click="passwordShow = true">
        <text class="biaoti">密码</text>
        <text v-if="userMsage.YNpass != ''" class="neirong">点击修改</text>
        <text
          class="marPer"
          v-if="userMsage.YNpass != ''"
          style="background-color: #92c78c; margin-right: 40rpx"
          >已设定</text
        >
        <text v-if="userMsage.YNpass == ''" class="neirong">去设置</text>
        <text
          class="marPer"
          v-if="userMsage.YNpass == ''"
          style="background-color: #9d9d9d; margin-right: 40rpx"
          >未设定</text
        >
      </view>
      <view class="per_list per_list_arrow" @click="ageShow = true">
        <text class="biaoti">年龄</text>
        <text class="neirong">{{ userMsage.age }}</text>
      </view>
      <view class="per_list per_list_arrow" @click="sexShow = true">
        <text class="biaoti">性别</text>
        <text class="neirong" v-if="editForm.sex == 1">男</text>
        <text class="neirong" v-if="editForm.sex == 0">女</text>
      </view>
    </view> -->
    <u-popup :show="editModalShow" :round="10" @close="">
      <view class="tanchu">
        <view class="dp_title">{{ editModalTitle }}</view>
        <template v-if="currentEditType == 'nickname'">
          <u--input
            v-model="editForm.nickname"
            placeholder="请输入昵称"
            border="surround"
            clearable
          ></u--input>
        </template>
        <template v-if="currentEditType == 'tel'">
          <!-- {{ editForm }} -->

          <view style="display: flex">
            <view class="quhao">
              <uni-data-select
                class="quhaoSel"
                placeholder="请选择区号"
                v-model="editForm.quCode"
                :localdata="quCodeList"
              ></uni-data-select>
            </view>
            <u--input
              v-model="editForm.phone"
              placeholder="请输入手机号"
              border="surround"
              clearable
            >
            </u--input>
          </view>
          <view style="display: flex">
            <u--input
              v-model="editForm.phonecode"
              type="number"
              placeholder="请输入验证码"
              border="surround"
              clearable
              style="margin-top: 20rpx"
            >
            </u--input>
            <button class="emPHCode" @click="onSetCode('phone')">
              {{ PhoneEmailNote }}
            </button>
          </view>
        </template>
        <template v-if="currentEditType == 'password'">
          <!-- <input type="password" style="width: 0; height: 0; min-height: 0" />
          <input
            type="text"
            autocomplete="off"
            style="width: 0; height: 0; min-height: 0"
          />

          <view style="display: flex">
            <view class="quhao" v-if="isPassWordPhone">
              <uni-data-select
                class="quhaoSel"
                placeholder="请选择区号"
                v-model="editForm.quCode"
                :localdata="quCodeList"
              ></uni-data-select>
            </view>
            <u--input
              v-model="editForm.phone"
              :placeholder="`请输入${isPassWordPhone ? '手机号' : '邮箱'}`"
              border="surround"
              clearable
            >
              <template slot="suffix">
                <u-icon
                  name="phone-fill"
                  color="#3AB3AE"
                  size="26"
                  v-if="isPassWordPhone"
                  @click="handleChangeIsPassWordPhone"
                ></u-icon>
                <u-icon
                  size="26"
                  name="email-fill"
                  color="#3AB3AE"
                  v-else
                  @click="handleChangeIsPassWordPhone"
                ></u-icon>
              </template>
            </u--input>
          </view>
          <view style="display: flex; margin-bottom: 20rpx">
            <u--input
              v-model="editForm.code"
              type="number"
              placeholder="请输入验证码"
              border="surround"
              clearable
              style="margin-top: 20rpx"
            >
            </u--input>
            <button
              class="emPHCode"
              @click="
                onSetCode(isPassWordPhone ? 'phonePassword' : 'emailPassword')
              "
            >
              {{ PhoneEmailNote }}
            </button>
          </view> -->

          <u--input
            maxlength="8"
            v-model="editForm.password"
            placeholder="请输入新密码"
            :password="true"
            border="surround"
            clearable
            @input="inputMethod(editForm.password)"
          >
          </u--input>
          <view class="" style="font-size: 28rpx; color: #999">
            <p v-if="passNote != ''">{{ passNote }}</p>
            <p v-html="passStr" style="margin-top: 10rpx"></p>
          </view>
          <u--input
            maxlength="8"
            v-model="editForm.Repassword"
            placeholder="请再确认密码"
            :password="true"
            border="surround"
            clearable
            style="margin-top: 20rpx"
          ></u--input>
        </template>
        <template v-if="currentEditType == 'email'">
          <u--input
            v-model="editForm.email"
            placeholder="请输入邮箱"
            border="surround"
            clearable
          >
          </u--input>
          <view style="display: flex">
            <u--input
              v-model="editForm.emailcode"
              type="number"
              placeholder="请输入验证码"
              border="surround"
              clearable
              style="margin-top: 20rpx"
            >
            </u--input>
            <button class="emPHCode" @click="onSetCode('email')">
              {{ PhoneEmailNote }}
            </button>
          </view>
        </template>

        <template v-if="currentEditType == 'age'">
          <u--input
            v-model="editForm.age"
            type="number"
            placeholder="请输入年龄"
            border="surround"
            clearable
          >
          </u--input>
        </template>
        <!-- @click="choseSex(item.id)" -->
        <!-- @change="choseSex(item.id)" -->
        <template v-if="currentEditType == 'sex'">
          <u-radio-group v-model="editForm.sex">
            <view style="width: 100%">
              <view v-for="(item, index) in sexList" class="dp_sex">
                {{ item.title }}
                <u-radio
                  :key="index"
                  activeColor="#3AB3AE"
                  :name="item.id"
                  style="float: right; margin-top: 5rpx"
                ></u-radio>
              </view>
            </view>
          </u-radio-group>
        </template>
        <template v-if="currentEditType == 'avatar'">
          <view class="" @click="checkPermision">
            <u-upload
              :fileList="fileAvatar"
              @afterRead="afterRead"
              @delete="deletePic"
              multiple
              :maxCount="1"
              width="150"
              height="150"
              :previewFullImage="true"
            >
            </u-upload>
          </view>
        </template>

        <u-button
          color="linear-gradient(to right, #77efc7, #3AB3AE)"
          text="确定"
          @click="handleSubmit()"
          style="margin-top: 50rpx"
        ></u-button>
        <view @click="closeModal()" class="dp_canBtn"> 取消</view>
      </view>
    </u-popup>
    <!-- <addCerInfo v-if="showSubmitInfoBlank" :submitInfo="submitInfo" @close="closeManager()" ></addCerInfo> -->

    <!-- <music-play :playData="playData"></music-play> -->
  </view>
</template>

<script>
import permission from "@/js_sdk/wa-permission/permission.js";

// import musicPlay from "@/components/music.vue";
import $http from "@/config/requestConfig.js";
var clear;
import { mapState } from "vuex";
// 密码验证的正则
//1、密码为八位及以上并且字母数字特殊字符三项都包括
var strongRegex = new RegExp(
  "^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$",
  "g",
);
//2、密码为八位及以上并且字母、数字、特殊字符三项中有两项，强度是中等
var mediumRegex = new RegExp(
  "^(?=.{8,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[a-z])(?=.*\\W))|((?=.*[0-9])(?=.*\\W))|((?=.*[A-Z])(?=.*\\W))).*$",
  "g",
);
var enoughRegex = new RegExp("(?=.{8,}).*", "g");
export default {
  data() {
    return {
      showCropper: false,
      submitInfo: {},
      showSubmitInfoBlank: false,
      playData: {},
      userData: {},
      isPassWordPhone: true,
      currentEditType: null,
      editForm: {},
      editModalShow: false,
      dataList: [
        {
          title: "昵称",
          indexValue: "nickname",
          type: "nickname",
        },
        {
          title: "手机号",
          indexValue: "tel",
          type: "tel",
        },
        {
          title: "邮箱",
          indexValue: "email",
          type: "email",
        },
        {
          title: "密码",
          indexValue: "password",
          type: "password",
        },
        {
          title: "年龄",
          indexValue: "age",
          type: "age",
        },
        {
          title: "性别",
          indexValue: "sex",
          type: "sex",
        },

        // {

        // 	"title": "清楚缓存",
        // 	content: 'yilujiankangkefu'

        // },
      ],
      userMes: {
        quCode: "",
        phone: "",
        email: "",
        id: "",
        age: "",
        sex: "",
        nickname: "",
        tel: "",
        oldName: "", // 老的用户名
      },
      userMsage: {
        quCode: "",
        phonecode: "",
        phone: "",
        emailcode: "",
        email: "",
        id: "",
        age: "",
        sex: "",
        nickname: "",
        tel: "",
        YNpass: "",
        oldName: "", // 老的用户名
      },
      userMiMa: {
        id: "",
        password: "",
        Repassword: "",
      },
      readonly: false,
      phoneShow: false,
      emailShow: false,
      avatarShow: false,
      nicknameShow: false,
      ageShow: false,
      sexShow: false,
      passwordShow: false,
      fileAvatar: [],
      quCodeList: [], // 国家区域码
      sexList: [
        {
          title: "男",
          id: 1,
        },
        {
          title: "女",
          id: 2,
        },
      ],
      PhoneEmailNote: "获取验证码",
      passNote: "",
      passStr: "",
      editModalTitle: "",
      passwordOk: false, // 密码是否满足规则

      urlList: {
        sendcode: "common/user/sms/sendcode", //密码登录
        sendEmailcode: "common/user/getMailCaptcha", //密码登录
        setPassword: "common/user/setPasswordById", //密码登录
        userInfo: "book/user/info/", //密码登录
        updateUserTel: "common/user/updateUserTel", //绑定手机号
        updateUserEmail: "common/user/updateUserEmail", //绑定邮箱
      },
    };
  },
  //第一次加载
  onLoad(e) {
    // 隐藏原生的tabbar
    uni.hideTabBar();
  },
  computed: {
    ...mapState(["userInfo"]),
  },
  //页面显示
  onShow() {
    // 隐藏原生的tabbar
    uni.hideTabBar();
    this.getData();
    this.getCountyCode();
  },
  components: {
    // addCerInfo
  },
  //方法
  methods: {
    async checkPermision() {
      var result = await permission.premissionCheck("CAMERA_EXTERNAL_STORAGE");
      if (result != 1) {
        return false;
      }
    },
    handleChangeIsPassWordPhone() {
      this.editForm = {};
      this.isPassWordPhone = !this.isPassWordPhone;
      this.editForm.quCode = this.quCodeList[0].value;
      this.OpenClear();
    },
    closeModal() {
      this.currentEditType = null;
      this.editForm = {};
      this.editModalShow = false;
    },
    handleClickRightContent(row, type) {
      this.OpenClear();
      // this.currentEditType=null;
      var title = "";
      this.currentEditType = row.type;
      console.log("row.type at line 122:", row);
      switch (row.type) {
        case "tel":
          title = `${type == "bind" ? "绑定" : "修改"}手机号`;
          this.editForm.quCode = this.quCodeList[0].value;

          break;
        case "email":
          title = `${type == "bind" ? "绑定" : "修改"}邮箱`;
          break;

        case "password":
          title = "修改密码";
          this.isPassWordPhone = true;
          //   this.editForm.quCode = this.quCodeList[0].value;
          break;

        case "nickname":
          title = `${type == "bind" ? "设置" : "更改"}昵称`;

          break;
        case "age":
          title = `${type == "bind" ? "设置" : "更改"}年龄`;
          break;

        case "sex":
          title = `${type == "bind" ? "设置" : "更改"}性别`;
          console.log("this.userData at line 602:", this.userData);
          if (this.userData.sex) {
            this.editForm.sex = this.userData.sex;
            console.log("this.editForm.sex at line 603:", this.editForm.sex);
          }

          break;
        case "avatar":
          title = `${type == "bind" ? "设置" : "更改"}头像`;
          break;

        //
      }
      this.editModalTitle = title;
      this.editModalShow = true;
    },
    async handleSubmit() {
      // this.currentEditType=null;
      var title = "";
      console.log("this.currentEditType at line 514:", this.currentEditType);

      switch (this.currentEditType) {
        case "tel":
          await this.chosePhone();
          break;
        case "email":
          await this.choseEmail();
          break;

        case "password":
          await this.chosePassword();
          break;
        case "avatar":
          await this.choseAvatar();
          break;

        default:
          if (this.currentEditType == "nickname") {
            if (!this.editForm.nickname || this.editForm.nickname == "") {
              this.editForm.nickname = this.userData.nickname;
              this.$commonJS.showToast("昵称不可为空");
              return false;
            }
          } else if (this.currentEditType == "avatar") {
            if (this.fileAvatar.length == 0) {
              this.$commonJS.showToast("请上传图片");
              return false;
            }
            this.editForm.avatar = this.fileAvatar[0].url;
          } else if (this.currentEditType == "sex") {
            if (this.editForm.sex == 2) {
              this.editForm.sex = 0;
            }
          } else if (this.currentEditType == "age") {
            if (this.editForm.age <= 0) {
              this.$commonJS.showToast("年龄不能小于0");
              return false;
            }

            //
          }
          await this.choseData();
          break;
      }
      // this.editModalTitle = title;
    },
    // 获取
    // 获取国家区域编码
    getCountyCode() {
      console.log(111111);
      this.$http
        .request({
          url: "book/baseArea/getAllBaseArea",
          method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
          data: {},
          header: {
            //默认 无 说明：请求头
            "Content-Type": "application/json",
          },
        })
        .then((res) => {
          if (res.code == 0 && res.baseAreas.length > 0) {
            this.quCodeList = res.baseAreas.map((item) => {
              let obj = {
                text: item.title + " (+" + item.code + ")",
                value: item.code,
              };
              return obj;
            });
            // this.userData.quCode = this.quCodeList[0].value
            this.$forceUpdate();
          } else {
            this.quCodeList = [];
          }
        })
        .catch((e) => {
          console.log(e, "e");
        });
    },
    getData() {
      let that = this;

      // 获取个人信息
      if (this.userInfo.id != undefined) {
        this.$http
          .post(this.urlList.userInfo + that.userInfo.id)
          .then((res) => {
            that.userData = res.user;
            if (that.userData.sex == 0) {
              that.userData.sex = 2;
            }
            console.log("that.userData at line 698:", that.userData);
          });
      }
    },
    cancelPass() {
      this.passwordShow = false;
      this.userMiMa.password = "";
      this.userMiMa.Repassword = "";
      this.passNote = "";
      this.passStr = "";
    },
    // 密码验证
    inputMethod(value) {
      this.passwordOk = false;
      //	console.log('输入的值为：', value)
      if (strongRegex.test(value)) {
        //console.log('强密码-----',value)
        this.passStr = "<span style='color:#18bc37'>密码强度很不错哦！</span>";
        // this.passNote = '请至少使用大小写字母、数字、符号两种类型组合的密码，长度为8位。'
        this.passNote = "";
        this.passwordOk = true;
      } else if (mediumRegex.test(value)) {
        //console.log('中等密码-----',value)
        this.passNote =
          "请至少使用大小写字母、数字、符号两种类型组合的密码，长度为8位。";
        this.passStr = "<span style='color:#2979ff'>密码强度中等!</span>";
        this.passwordOk = true;
      } else if (enoughRegex.test(value)) {
        //console.log('弱密码-----',value)
        this.passStr = "<span style='color:#f3a73f'>密码强度太弱!</span>";
        this.passNote =
          "请至少使用大小写字母、数字、符号两种类型组合的密码，长度为8位。";
      } else {
        this.passwordOk = false;
        this.passNote =
          "请至少使用大小写字母、数字、符号两种类型组合的密码，长度为8位。";
        this.passStr = "";
        //console.log('密码-----',value)
      }
    },
    openTel() {
      this.userMes = {};
      this.phoneShow = true;
      this.OpenClear();
    },
    openEmail() {
      this.userMes = {};
      this.emailShow = true;
      this.OpenClear();
    },
    // 清除验证码
    OpenClear() {
      clearInterval(clear);
      this.PhoneEmailNote = "获取验证码";
      this.readonly = false;
    },

    // 获取验证码
    emPHCode() {
      clear && clearInterval(clear);
      this.readonly = true;
      this.PhoneEmailNote = "60S";
      var s = 60;
      clear = setInterval(() => {
        s--;
        this.PhoneEmailNote = s + "S";
        if (s <= 0) {
          clearInterval(clear);
          this.PhoneEmailNote = "获取验证码";
          this.readonly = false;
        }
      }, 1000);
    },
    sendTelCode(phone, quCode) {
      if (phone == "") {
        uni.showToast({
          title: "请输入手机号",
          icon: "none",
        });
        return;
      }
      if (quCode == "" || quCode == 86) {
        if (!this.$base.phoneRegular.test(phone)) {
          uni.showToast({
            title: "手机格式不正确",
            icon: "none",
          });
          return;
        }
      }

      this.$http
        .post(this.urlList.sendcode, {
          phone: phone,
          areaCode: quCode,
          type: 2000,
        })
        .then((res) => {
          uni.showToast({
            title: "验证码发送成功",
            icon: "none",
          });
          this.emPHCode();
        });
    },
    sendEmailCode(email) {
      if (email == "") {
        uni.showToast({
          title: "请输入邮箱",
          icon: "none",
        });
        return;
      }
      if (!this.$base.mailRegular.test(email)) {
        uni.showToast({
          title: "邮箱格式不正确",
          icon: "none",
        });
        return;
      }
      this.$http
        .post(this.urlList.sendEmailcode, {
          email: email,
        })
        .then((res) => {
          uni.showToast({
            title: "验证码发送成功",
            icon: "none",
          });
          this.emPHCode();
        });
    },
    // 发送验证码
    onSetCode(e) {
      console.log("e at line 932:", e);
      var that = this;
      if (this.readonly) {
        return;
      }
      console.log("this.currentEditType at line 719:", this.editForm);
      if (e == "phone" || e == "phone") {
        this.sendTelCode(this.editForm.phone, this.editForm.quCode);
      }
      if (e == "email") {
        this.sendEmailCode(this.editForm.email);
      }
      if (e == "phonePassword") {
        this.sendTelCode(this.editForm.phone, this.editForm.quCode);
      }
      if (e == "emailPassword") {
        this.sendEmailCode(this.editForm.phone);
      }
    },

    // 手机
    async chosePhone(e) {
      var data = {
        code: this.editForm.phonecode,
        phone: this.editForm.phone,
        id: this.userData.id,
        quCode: this.editForm.quCode,
      };
      // this.userMes.code = this.userMes.phonecode
      if (data.phone == "") {
        this.$commonJS.showToast("请输入手机号");

        return;
      }
      if (data.quCode == null || data.quCode == 86) {
        // 如果没选择国家code，默认是中国大陆
        if (!this.$base.phoneRegular.test(data.phone)) {
          this.$commonJS.showToast("手机格式不正确");

          return;
        }
      }

      if (data.code == "" || data.code == null) {
        this.$commonJS.showToast("请输入验证码");

        return;
      }

      // if (this.PhoneEmailNote == "获取验证码") {
      //   this.$commonJS.showToast("请发送验证码");

      //   return;
      // }
      let that = this;
      $http
        .request({
          url: this.urlList.updateUserTel,
          method: "POST",
          data: data,
          header: {
            "Content-Type": "application/json",
          },
        })
        .then(async (res) => {
          if (res.code == 0) {
            that.$commonJS.showToast("绑定手机号成功");
            that.editModalShow = false;
            that.editForm = {};
            that.OpenClear();
            setTimeout(async () => {
              await this.getData();
            }, 500);
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },

    // 邮箱
    async choseEmail(e) {
      var data = {
        code: this.editForm.emailcode,
        email: this.editForm.email,
        id: this.userData.id,
      };

      if (data.email == "") {
        this.$commonJS.showToast("请输入邮箱");

        return;
      }

      if (!this.$base.mailRegular.test(data.email)) {
        this.$commonJS.showToast("邮箱格式不正确");

        return;
      }
      if (data.code == "" || data.code == null) {
        this.$commonJS.showToast("请输入验证码");

        return;
      }
      // if (this.PhoneEmailNote == "获取验证码") {
      //   this.$commonJS.showToast("请发送验证码");

      //   return;
      // }
      let that = this;
      $http
        .request({
          url: this.urlList.updateUserEmail,
          method: "POST",
          data: data,
          header: {
            "Content-Type": "application/json",
          },
        })

        .then(async (res) => {
          if (res.code == 0) {
            that.$commonJS.showToast("绑定邮箱成功");
            that.editModalShow = false;
            that.editForm = {};
            that.OpenClear();
            setTimeout(async () => {
              await that.getData();
            }, 500);
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },

    // 头像
    choseAvatar(e) {
      let that = this;
      if (that.fileAvatar.length == 0) {
        uni.showToast({
          title: "请选择图片",
          icon: "none",
        });
        return;
      }
      that.editForm.avatar = that.fileAvatar[0].url;
      that.choseData();
      that.avatarShow = false;
      that.fileAvatar.splice(0, 1);
    },
    // 年龄
    choseAge(e) {
      let that = this;
      if (that.userMes.age <= 0) {
        uni.showToast({
          title: "年龄不能小于0",
          icon: "none",
        });
        return;
      }
      that.choseData();
      that.ageShow = false;
    },

    // 昵称
    choseNickname(e) {
      let that = this;
      if (e && e != "") {
        that.choseData();
        that.nicknameShow = false;
      } else {
        that.userMes.nickname = that.userMes.oldName;
        console.log(that.userMes.nickname);
        uni.showToast({
          title: "昵称不可为空",
          icon: "none",
        });
      }
    },

    // 性别
    choseSex(e) {
      let that = this;
      that.editForm.sex = e;
      that.choseData();
      //   that.sexShow = false;
    },

    // 修改密码
    async chosePassword() {
      var data = {
        id: this.userData.id,
        // phone: this.editForm.phone,
        password: this.editForm.password,
        // code: this.editForm.code,
      };

      //   if (data.phone == "") {
      //     this.$commonJS.showToast(
      //       `请输入${this.isPassWordPhone ? "手机号" : "邮箱"}`
      //     );

      //     return;
      //   }

      //   if (this.isPassWordPhone) {
      //     if (data.quCode == null || data.quCode == 86) {
      //       // 如果没选择国家code，默认是中国大陆
      //       if (!this.$base.phoneRegular.test(data.phone)) {
      //         this.$commonJS.showToast("手机格式不正确");

      //         return;
      //       }
      //     }
      //   } else {
      //     if (!this.$base.mailRegular.test(data.phone)) {
      //       this.$commonJS.showToast("邮箱格式不正确");

      //       return;
      //     }
      //   }
      //   if (data.code == "" || data.code == null) {
      //     this.$commonJS.showToast("请输入验证码");

      //     return;
      //   }
      //   if (this.PhoneEmailNote == "获取验证码") {
      //     this.$commonJS.showToast("请发送验证码");

      //     return;
      //   }
      if (!this.passwordOk) {
        console.log("不满足密码格式", this.passNote);

        this.$commonJS.showToast(this.passNote);

        return;
      }

      let that = this;

      if (that.editForm.Repassword == "" || that.editForm.password == "") {
        this.$commonJS.showToast("请输入密码！");

        return;
      }
      if (that.editForm.Repassword != that.editForm.password) {
        this.$commonJS.showToast("两次密码输入不一致！");

        return;
      }
      this.$http
        .post(this.urlList.setPassword, data)

        .then(async (res) => {
          if (res.code == 0) {
            that.$commonJS.showToast("修改成功");
            that.editModalShow = false;
            that.editForm = {};
            that.OpenClear();
            setTimeout(async () => {
              await that.getData();
            }, 500);
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },

    // 修改个人资料
    choseData() {
      var that = this;
      var data = {
        ...this.userData,
        ...this.editForm,
      };
      this.$http
        .request({
          url: "book/user/update",
          method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
          data: data,
          header: {
            //默认 无 说明：请求头
            "Content-Type": "application/json",
          },
        })

        .then(function (res) {
          if (res.code == 0) {
            that.$commonJS.showToast("修改成功");
            that.editModalShow = false;
            that.editForm = {};
            // that.OpenClear();
            setTimeout(async () => {
              await that.getData();
            }, 500);
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },

    // 头像上传
    afterRead(e) {
      let that = this;
      uni.uploadFile({
        url: this.$baseUrl + "oss/fileoss",
        // url: "https://api.nuttyreading.com/oss/fileoss",
        // url: "http://192.168.110.100:9200/pb/oss/fileoss/uploadFileSchedule",
        filePath: e.file[0].url,
        name: "file",
        formData: {},
        success: (res) => {
          that.fileAvatar.push({
            url: JSON.parse(res.data).url,
          });
        },
      });
    },

    // 删除图片
    deletePic() {
      let that = this;
      that.fileAvatar.splice(0, 1);
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/style/mixin.scss";

.btn_box {
  margin-top: 40rpx;

  padding: 10px;

  button {
    font-size: 32rpx;
    background-color: #e5e5e5;
    color: #fff;
    height: 80rpx;
    line-height: 80rpx;
    border-radius: 50rpx;

    &.active {
      @include theme("btn_bg") color: #fff;
    }
  }
}

.tabulate {
  .per_list {
    font-size: 30rpx;
    background-color: #fff;
    padding: 0;
    align-items: center;
    position: relative;
    border-top: 1px solid #e5e5e5;
    width: 100%;
    overflow: auto;

    text.biaoti {
      color: #333;
      display: inline-block;
      margin: 25rpx 0 25rpx 40rpx;
    }

    text.neirong {
      color: #888;
      font-weight: normal;
      float: right;
      margin: 25rpx 80rpx 0 0;
      display: block;
    }

    text.marPer {
      color: #fff;
      font-weight: normal;
      float: right;
      margin: 25rpx 0 0 0;
      display: block;
      border-radius: 10rpx;
      background-color: #eee;
      padding: 2rpx 10rpx;
    }
  }

  .per_list_arrow {
    font-size: 30rpx;
    background-color: #fff;
    padding: 0;
    align-items: center;
    position: relative;
    border-top: 1px solid #e5e5e5;
    width: 100%;
    overflow: auto;

    &:active {
      background-color: #f5f5f5;
    }

    &::after {
      content: "";
      position: absolute;
      right: 20upx;
      top: 50%;
      transform: translateY(-50%);
      width: 40upx;
      height: 40upx;
      background-image: url("@/static/icon/icon_right.png");
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
    }
  }
}

.avatar_box {
  padding: 20rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  background-color: #fff;

  .per_mes_img {
    width: 180rpx;
    height: 180rpx;
    background-color: #f5f5f5;
    border-radius: 120rpx;
    margin: 10rpx 0;
  }

  .avatar_text {
    color: $themeColor;
    line-height: 60rpx;
    font-size: 30rpx;
    font-weight: 600;
  }
}

.tanchu {
  padding: 60rpx 50rpx 80rpx 50rpx;

  .dp_title {
    font-size: 32rpx;
    margin-bottom: 50rpx;
    color: #555;
    text-align: center;
    font-weight: bold;
  }

  .dp_sex {
    font-size: 30rpx;
    padding-bottom: 20rpx;
    margin-bottom: 20rpx;
    border-bottom: 1px solid #ededed;

    image {
      width: 40rpx;
      height: 40rpx;
      display: inline-block;
      margin-right: 20rpx;
      vertical-align: bottom;
    }
  }

  .dp_canBtn {
    text-align: center;
    font-size: 28rpx;
    margin-top: 25rpx;
    color: #888;
  }

  .emPHCode {
    height: 80rpx;
    width: 200rpx;
    background-color: #f8f9fb;
    font-size: 28rpx;
    padding: 0 14rpx;
    color: $themeColor;
    line-height: 80rpx;
    margin: 20rpx 0 0 20rpx;
    display: inline-block;
  }

  .quhao {
    height: 60rpx;
    width: 240rpx;
    margin: 1rpx 15rpx 0 0;

    .quhaoSel {
      /deep/.uni-select {
        font-size: 24rpx;
      }

      /deep/.uni-select__selector-item {
        font-size: 24rpx;
      }

      /deep/.uni-stat__select {
        height: 60rpx;
      }
    }
  }
}

/deep/.scroll-view-item:nth-child(2n-1) {
  background-color: transparent !important;
}

.right_content {
  width: auto;
  height: 100%;
  float: right;
  //padding-right: 20rpx;
  color: #909090;
  display: flex;
  align-items: center;
}

.fdButtonBox {
  color: #b0b0b0;
  // width: 100%;
  float: right;
  padding: 4rpx 14rpx;
  font-size: 24rpx;
  font-weight: 500;
  line-height: 30rpx;
  border-radius: 10rpx;
  box-sizing: border-box;

  margin-top: 10rpx;
  // display: flex;
  // align-items: center;
}

.commonPageBox {
  background-color: #f5f5f5;
}

.set_box {
  background-color: #fff;
  height: auto;

  // padding: 20rpx;
}

.button_box {
  width: 100%;
  position: fixed;
  bottom: 40rpx;
  padding: 20rpx 80rpx;

  .button {
    margin-top: 40rpx;
  }
}
</style>
