<template>
  <div>
    <a-modal v-model:visible="isOpen" title="修改推荐人" @ok="handleOk" @cancel="handleCancel">
    </a-modal>
  </div>
</template>

<script setup>
  import { defineEmits, defineProps, ref } from 'vue'
  import { message } from 'ant-design-vue'
  import InviteApi from '@/api/platform/InviteApi'
  
  const props = defineProps({
    open: Boolean,
    inviteHistoryNo: String
  })

  const emit = defineEmits(['modalOkClick'])

  const isOpen = ref(props.open)
  const historyNo = ref(props.inviteHistoryNo)

  const handleOk = async () => {
    isOpen.value = false

    const params = {
      historyNo: historyNo.value
    }

    const { data: result } = await InviteApi.changeInviter(params)
    if (result.status) {
      emit('modalOkClick', false)
    } else {
      message.error(result.msg)
    }
  }

  const handleCancel = () => {
    emit('modalOkClick', false)
  }

</script>

<style scoped lang="less">

</style>

<template>
  <div>
    <KeepAlive>
      <DzChargeListInviterModal :key="Date.now()" :open="openInviterModal" :inviteHistoryNo="inviteHistoryNo"
                                @ModalOkClick="handleModalOkClick"/>
    </KeepAlive>
  </div>
</template>

<script setup>
  import DzChargeListInviterModal from '@/views/platform/dz/DzChargeListInviterModal.vue'
  import {ref} from "vue";

  const openInviterModal = ref(false)
  const inviteHistoryNo = ref('')

  const showInviterModal =  (historyNo) => {
    openInviterModal.value = true
    inviteHistoryNo.value = historyNo
  }
  
  const handleModalOkClick = (flag) => {
    openInviterModal.value = flag
  }
</script>

<template>
  <a-modal v-model:visible="isOpen"
           title="修改密码"
           @ok="handleOk"
           @cancel="handleCancel">
    <a-form
      ref="formRef"
      :model="changePwdFormState"
      :rules="rules"
      v-bind="layout"
    >
      <a-form-item has-feedback label="旧密码" name="oldPass">
        <a-input-password placeholder="至少 6 位的字母和数字组合" v-model:value="changePwdFormState.oldPass"/>
      </a-form-item>
      <a-form-item has-feedback label="新密码" name="newPass">
        <a-input-password placeholder="至少 6 位的字母和数字组合" v-model:value="changePwdFormState.newPass"/>
      </a-form-item>
      <a-form-item has-feedback label="确认密码" name="checkPass">
        <a-input-password placeholder="至少 6 位的字母和数字组合" v-model:value="changePwdFormState.checkPass"/>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup>

import { ref, defineProps, defineEmits, reactive, watch } from 'vue'
import SysUserApi from '@/api/system/SysUser'
import { message } from 'ant-design-vue'

const props = defineProps({
  open: Boolean
})

const emit = defineEmits(['modalOkClick'])

const isOpen = ref(props.open)

const formRef = ref()
const changePwdFormState = reactive({
  oldPass: '',
  newPass: '',
  checkPass: ''
})

const layout = {
  labelCol: {
    span: 4
  },
  wrapperCol: {
    span: 14
  }
}

// const validatePass = async (_rule, value) => {
//   if (value === '') {
//     return Promise.reject(new Error('请输入密码'))
//   } else if (changePwdFormState.newPass.match(/^(?=.*[a-zA-Z])(?=.*[0-9])[a-zA-Z0-9]{6,}$/)) {
//     console.log('验证新密码3333')
//     if (changePwdFormState.checkPass !== '') {
//       console.log('验证新密码')
//       await formRef.value.validateFields('checkPass')
//     } else {
//       return Promise.reject(new Error('请输入正确的密码'))
//     }
//     return Promise.resolve()
//   }
// }

const validatePass2 = async (_rule, value) => {
  if (value === '') {
    return Promise.reject(new Error('请再次输入密码'))
  } else if (value !== changePwdFormState.newPass) {
    return Promise.reject(new Error('两次输入的密码不一致'))
  } else {
    return Promise.resolve()
  }
}

const rules = {
  newPass: [
    {
      required: true,
      message: '请输入正确的密码',
      // validator: validatePass,
      trigger: 'change',
      pattern: /^(?=.*[a-zA-Z])(?=.*[0-9])[a-zA-Z0-9]{6,}$/
    }
  ],
  checkPass: [
    {
      validator: validatePass2,
      trigger: 'change'
    }
  ]
}

/**
 * 修改用户密码
 */
const changePwdSysUser = async () => {
  const params = {
    oldPwd: changePwdFormState.oldPass,
    newPwd: changePwdFormState.newPass,
    confirmPwd: changePwdFormState.checkPass
  }

  const { data: result } = await SysUserApi.changePwdSysUser(params)
  if (result.status) {
    message.success('修改成功')
    emit('modalOkClick', false)
  } else {
    message.error(result.msg)
  }
}

const handleOk = values => {
  changePwdSysUser()
}

const handleCancel = () => {
  emit('modalOkClick', false)
}

// 监听 props 的变化，确保局部状态和父组件保持同步
watch(() => props.open, (newVal) => {
  console.log('isOpen.value   ', isOpen.value)
  console.log('newVal    ', newVal)
  if (formRef.value) {
    formRef.value.resetFields()
  }
  isOpen.value = newVal
}, { deep: true })

</script>

<style scoped lang="less">

</style>

<template>
  <div class="userinfo-container">
    <div>
      <span class="label-title">登录用户</span>
      <span class="label-content">{{ userName }}</span>
    </div>
    <div>
      <span class="label-title">系统角色</span>
      <div class="label-content">
        <a-tag :color="tagColor[index % tagColor.length]" v-for="(item, index) in userRole" :key="index">{{ item }}</a-tag>
      </div>
    </div>
    <div>
      <span class="label-title">账户安全</span>
      <span class="modify-password" @click="showModifyPasswordModal">修改密码</span>
    </div>
  </div>
  <ModifyPassword :open="isShowPasswordModal" @ModalOkClick="handleModalOkClick"/>
</template>

<script setup>
import ModifyPassword from '@/views/system/ModifyPassword.vue'
import { onMounted, ref } from 'vue'
import SysUserApi from '@/api/system/SysUser'
import { message } from 'ant-design-vue'

const tagColor = ['pink', 'green', 'orange', 'blue', 'purple', 'cyan', 'red']
const userRole = ref([])
const userName = ref('')

/**
 * 用户信息
 */
const getUserInfo = async () => {
  const { data: result } = await SysUserApi.getUserInfo()
  if (result.status) {
    userName.value = result.data.userName
    userRole.value = result.data.roleName
  } else {
    message.error(result.msg)
  }
}

onMounted(() => {
  getUserInfo()
})

const isShowPasswordModal = ref(false)

const showModifyPasswordModal = () => {
  isShowPasswordModal.value = true
}

const handleModalOkClick = (flag) => {
  isShowPasswordModal.value = flag
}

</script>

<style scoped lang="less">

</style>