<template>
  <div class="nav-list">
    <div v-for="(item, index) in navList" :key="index" class="nav-list-item" @click="modify(item.name)">
      <el-divider />
      <i class="iconfont" :class="item.icon" style="font-size: 26px; margin-left: 20px;" />
      <span style="margin-left: 20px;">{{ item.name }}</span>
      <span v-if="!ruleForm.email" style="margin-left: 20px; color: #666666">{{ item.desc }}</span>
      <span v-if="ruleForm.email" style="margin-left: 20px; color: #666666">{{ item.prompt }}</span>
    </div>
    <el-divider />

    <cy-dialog ref="phonebinding" title="修改手机号" top="12vh">
      <el-form
        ref="ruleFormRef"
        :key="phonebinding"
        :model="ruleForm"
        :rules="rules"
        label-position="top"
        label-width="150px"
        class="rule-form-orange"
      >
        <el-form-item label="旧手机号码" style="width: 100%" class="form-required">
          <el-input v-model="ruleForm.passwordMobile" disabled placeholder="请输入手机号码">
            <template #append>
              <verification-code :code="ruleForm.passwordMobile" type="phone" module="changeOld" placeholder="请输入手机号码" />
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="验证码" style="width: 100%" class="form-required">
          <el-input
            v-model="ruleForm.code"
            placeholder="请输入验证码"
          />
        </el-form-item>
        <el-form-item label="新手机号码" style="width: 100%" class="form-required">
          <el-input v-model="ruleForm.phoneMobile" placeholder="请输入手机号码">
            <template #append>
              <verification-code :code="ruleForm.phoneMobile" type="phone" module="changeNew" placeholder="请输入手机号码" />
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="验证码" style="width: 100%" class="form-required">
          <el-input
            v-model="ruleForm.phoneCode"
            placeholder="请输入验证码"
          />
        </el-form-item>
      </el-form>
      <div class="submit-btn">
        <el-button @click="() => { this.$refs.phonebinding.show = false }">关闭</el-button>
        <el-button type="primary" @click="phoneAdd">确定</el-button>
      </div>
    </cy-dialog>

    <cy-dialog ref="password" title="修改密码" top="12vh">
      <el-form
        ref="ruleFormRef"
        :key="password"
        :model="ruleForm"
        :rules="rules"
        label-position="top"
        label-width="150px"
        class="rule-form-orange"
      >
        <el-form-item label="请输入旧密码" style="width: 100%" class="form-required">
          <el-input
            v-model="ruleForm.oldPassword"
            :type="passwordTypeAgain"
            placeholder="请输入旧密码"
          />
          <span class="show-pwd" @click="showPwdNewPasswordAgain">
            <svg-icon :icon-class="passwordTypeAgain === 'password' ? 'eye' : 'eye-open'" />
          </span>
        </el-form-item>
        <el-form-item label="新密码" style="width: 100%" class="form-required">
          <el-input
            v-model="ruleForm.newPassword"
            :type="passwordType"
            placeholder="请输入新密码"
            @blur="passwordConsistency"
          />
          <span class="show-pwd" @click="showPwdNewPassword">
            <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
          </span>
        </el-form-item>
        <el-form-item label="确认新密码" style="width: 100%" class="form-required">
          <el-input
            v-model="ruleForm.newPasswordConfirm"
            :type="passwordTypeConfirm"
            placeholder="请输入新密码"
            @blur="passwordConsistencyConfirm"
          />
          <span class="show-pwd" @click="showPwdNewPasswordConfirm">
            <svg-icon :icon-class="passwordTypeConfirm === 'password' ? 'eye' : 'eye-open'" />
          </span>
        </el-form-item>

      </el-form>
      <div class="submit-btn">
        <el-button @click="() => { this.$refs.password.show = false }">关闭</el-button>
        <el-button type="primary" @click="passwordAdd">确定</el-button>
      </div>
    </cy-dialog>

    <cy-dialog ref="emailbinding" title="邮箱绑定" top="12vh">
      <el-form
        ref="ruleFormRef"
        :key="emailbinding"
        :model="ruleForm"
        :rules="rules"
        label-position="top"
        label-width="150px"
        class="rule-form-orange"
      >
        <el-form-item label="手机号码" style="width: 100%" class="form-required">
          <el-input v-model="ruleForm.emailMobile" placeholder="请输入手机号码" disabled>
            <template #append>
              <verification-code :code="ruleForm.emailMobile" type="phone" module="change" placeholder="请输入手机号码" />
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="验证码" style="width: 100%" class="form-required">
          <el-input
            v-model="ruleForm.emailPhoneCode"
            placeholder="请输入验证码"
          />
        </el-form-item>
        <el-form-item label="邮箱地址" style="width: 100%" class="form-required">
          <el-input v-model="ruleForm.email" placeholder="请输入邮箱地址">
            <template #append>
              <verification-code :code="ruleForm.email" :template-name="'UserBindingEmail'" type="mail" placeholder="请输入邮箱地址" />
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="请输入邮箱验证码" style="width: 100%" class="form-required">
          <el-input
            v-model="ruleForm.emailCode"
            placeholder="请输入邮箱验证码"
          />
        </el-form-item>
      </el-form>
      <div class="submit-btn">
        <el-button @click="() => { this.$refs.emailbinding.show = false }">关闭</el-button>
        <el-button type="primary" @click="emailAdd">确定</el-button>
      </div>
    </cy-dialog>
  </div>
</template>
<script>
import store from '@/store'
import { phoneBind, password, emailBind } from '@/api/myAccount/myAccount'
// import { getInfo } from '@/api/user'
export default {
  components: {
    VerificationCode: () => import('@/components/VerificationCode/index.vue')
  },
  props: {
    deatilsInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      navList: [{
        bg: '#235AEB',
        icon: 'icon-Union2',
        name: '修改手机号',
        desc: '您已绑定手机号(您的手机为安全手机，可以找回密码且可以用作登录)。',
        prompt: '您已绑定手机号(您的手机为安全手机，可以找回密码且可以用作登录)。'
      },
      {
        bg: '#FE7D0B',
        icon: 'icon-a-Group1101',
        name: '修改密码',
        desc: '安全性高的密码可以使账号更安全。建议您定期更换密码。',
        prompt: '安全性高的密码可以使账号更安全。建议您定期更换密码。'
      },
      {
        bg: '#23D9A2',
        icon: 'icon-Vector3',
        name: '邮箱绑定',
        desc: '您暂未绑定邮箱，请尽快设置邮箱，接收平台发送的服务及业务通知等。',
        prompt: '您已绑定邮箱，可修改邮箱，接收平台发送的服务及业务通知等。'
      }],
      ruleForm: {
        phoneMobile: '',
        phoneCode: '',
        passwordMobile: '',
        passwordCode: '',
        newPassword: '',
        newPasswordConfirm: '',
        oldPassword: '',
        emailMobile: '',
        emailPhoneCode: '',
        email: '',
        code: '',
        emailCode: ''
      },
      rules: {},
      phonebinding: 0,
      password: 0,
      emailbinding: 0,
      passwordType: 'password',
      passwordTypeAgain: 'password',
      passwordTypeConfirm: 'password'
    }
  },
  watch: {
    deatilsInfo: {
      handler(newV) {
        if (this.deatilsInfo && Object.keys(newV).length) {
          const { phoneNumber, email } = JSON.parse(JSON.stringify(newV))
          this.ruleForm = {
            passwordMobile: phoneNumber,
            emailMobile: phoneNumber,
            email,
            phoneMobile: '',
            code: '',
            phoneCode: '',
            passwordCode: '',
            newPassword: '',
            oldPassword: '',
            newPasswordConfirm: '',
            emailPhoneCode: '',
            emailCode: ''
          }
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    showPwdNewPassword() {
      if (this.passwordType === 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
      this.$nextTick(() => {
        this.$refs.password.focus()
      })
    },
    showPwdNewPasswordAgain() {
      if (this.passwordTypeAgain === 'password') {
        this.passwordTypeAgain = ''
      } else {
        this.passwordTypeAgain = 'password'
      }
      this.$nextTick(() => {
        this.$refs.password.focus()
      })
    },
    showPwdNewPasswordConfirm() {
      if (this.passwordTypeConfirm === 'password') {
        this.passwordTypeConfirm = ''
      } else {
        this.passwordTypeConfirm = 'password'
      }
      this.$nextTick(() => {
        this.$refs.password.focus()
      })
    },
    modify(name) {
      this.navList.forEach(item => {
        if (name === '修改手机号') {
          this.$refs.phonebinding.show = true
          this.phonebinding += 1
          this.ruleForm.phoneMobile = ''
          this.ruleForm.code = ''
          this.ruleForm.phoneCode = ''
        } else if (name === '修改密码') {
          this.$refs.password.show = true
          this.password += 1
          this.ruleForm.passwordCode = ''
          this.ruleForm.newPassword = ''
          this.ruleForm.newPasswordConfirm = ''
          this.ruleForm.oldPassword = ''
        } else if (name === '邮箱绑定') {
          this.$refs.emailbinding.show = true
          this.emailbinding += 1
          this.ruleForm.emailPhoneCode = ''
          this.ruleForm.email = this.ruleForm.email ? this.ruleForm.email : ''
          this.ruleForm.emailCode = ''
        }
      })
    },
    phoneAdd() {
      if (!this.ruleForm.code) {
        this.$message.warning('请输入验证码')
        return
      }
      if (!this.ruleForm.phoneMobile) {
        this.$message.warning('请输入手机号码')
        return
      }
      if (!this.ruleForm.phoneCode) {
        this.$message.warning('请输入验证码')
        return
      }

      const postData = new FormData()
      postData.append('code', this.ruleForm.code)
      postData.append('newPhoneNumber', this.ruleForm.phoneMobile)
      postData.append('newCode', this.ruleForm.phoneCode)
      phoneBind(postData).then(() => {
        this.$message.success('修改成功，请重新登录。')
        this.$refs.phonebinding.show = false
        store.dispatch('user/logout').then(() => {
          setTimeout(() => {
            this.$router.push(`/login`)
          }, 3000)
        })
      })
    },
    passwordAdd() {
      if (!this.ruleForm.oldPassword) {
        this.$message.warning('请输入旧密码')
        return
      }
      if (!this.ruleForm.newPassword) {
        this.$message.warning('请输入新密码')
        return
      }
      if (this.ruleForm.newPassword && this.ruleForm.newPassword === this.ruleForm.oldPassword) {
        this.$message.warning('新密码与旧密码一致请重新输入')
        return
      }
      if (this.ruleForm.newPasswordConfrim && this.ruleForm.newPassword !== this.ruleForm.newPasswordConfrim) {
        this.$message.warning('两次新密码输入不一致请重新输入')
        return
      }
      const postData = new FormData()
      postData.append('oldPassword', this.ruleForm.oldPassword)
      postData.append('newPassword', this.ruleForm.newPassword)
      password(postData).then(() => {
        this.$message.success('修改密码成功')
        this.$refs.password.show = false
        // this.$router.push({
        //   name: 'Dashboard'
        // })
      })
    },
    emailAdd() {
      if (!this.ruleForm.emailMobile) {
        this.$message.warning('请输入手机号码')
        return
      }
      if (!this.ruleForm.emailPhoneCode) {
        this.$message.warning('请输入验证码')
        return
      }
      if (!this.ruleForm.email) {
        this.$message.warning('请输入邮箱地址')
        return
      }
      if (!this.ruleForm.emailCode) {
        this.$message.warning('请输入邮箱验证码')
        return
      }
      const postData = new FormData()
      postData.append('phoneCode', this.ruleForm.emailPhoneCode)
      postData.append('email', this.ruleForm.email)
      postData.append('code', this.ruleForm.emailCode)
      emailBind(postData).then(() => {
        this.$message.success('邮箱绑定成功')
        this.$refs.emailbinding.show = false
      })
    },
    passwordConsistency() {
      if (this.ruleForm.newPassword && this.ruleForm.newPassword === this.ruleForm.oldPassword) {
        this.$message.warning('与旧密码一致请重新输入')
        return
      }
    },
    passwordConsistencyConfirm() {
      if (this.ruleForm.newPasswordConfirm && this.ruleForm.newPassword !== this.ruleForm.newPasswordConfirm) {
        this.$message.warning('两次新密码输入不一致请重新输入')
        return
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.nav-list {
  cursor: pointer;
  .show-pwd {
    position: absolute;
    right: 10px;
    top: 2px;
    font-size: 16px;
    color: #889aa4;
    cursor: pointer;
    user-select: none;
  }
}

.rule-form-orange .el-form-item {
  margin-right: 0;
}
</style>
