import { FormRules } from 'element-plus'
import { ref, reactive, toRefs } from 'vue'
import { addQueryToUrl } from '../../utils/https/utils'
import { http } from '../../utils/https'
import { useUserStore } from '../../store/modules/users'
import { yaMessage } from '../../utils/message'
import { pwdRegular } from '../../utils/valid'
import { useRouter } from 'vue-router'
import { getModifyInfo } from '../../api/login'
import { handleGetIndex } from '../../utils/tools'
const changePwdApi = '/user/updatePsw'


/**
 * @description: 修改密码的 hook
 * @description: 强制修改密码页面 | 全局修改密码弹窗 公用
 * @return {*}
 * @author: changjun
 */
export const useChangePwdLogic = (type = 0) => {
  // type 0 全局弹窗 1 是强制修改页面
  const changePwdFormRef = ref()
  const userStore = useUserStore()
  const router = useRouter()
  const changePwdFormData = reactive({
    oldPassword: '',
    newPassword: '',
    confirmNewPassword: '',
  })

  const initChangeColumns = [
    {
      key: 'oldPassword',
      type: 'password',
      label: '原密码',
      clearable: true,
      showPassword: true,
      // placeholder: '密码长度为8～16位，包含数字、大、小写',
      validateEvent: false,
      // onChange(data) {
      //   handleGetRule('oldPassword', data)
      // }
    },
    {
      key: 'newPassword',
      type: 'password',
      label: '新密码',
      clearable: true,
      showPassword: true,
      // placeholder: '密码长度为8～16位，包含数字、大、小写',
      validateEvent: false,
      onChange(data) {
        handleGetRule('newPassword', data)
      }
    },
    {
      key: 'confirmNewPassword',
      type: 'password',
      label: '确认新密码',
      clearable: true,
      showPassword: true,
      // placeholder: '密码长度为8～16位，包含数字、大、小写',
      validateEvent: false,
      onChange(data) {
        handleGetRule('confirmNewPassword', data)
      }
    },
  ]

  /**
   * @describtion 动态获取校验规则
   * @param name { string } - rule名称
   * @param value { string } - 输入框内容
   */
  const handleGetRule = (name, value) => {
    const i = handleGetIndex(changePwdRules[name], 'type', 'Customize')
    i >= 0 && changePwdRules[name].splice(i, 1)
    if (!value) {
      return
    }
    
    getModifyInfo({pass:value}).then(res => {
      const { code, message } = res
      if (code == 200) {
        changePwdRules[name].push({
          validator: addRules(message),
          type: 'Customize'
        })
        changePwdFormRef.value.ruleFormRef.validateField(name)
        // yaMessage(message,'error')
      }
    })
  }

  const changePwdColumns = [
    {
      key: 'oldPassword',
      type: 'password',
      label: '原密码',
      clearable: true,
      showPassword: true,
      // tooltip: '密码长度为8～16位，包含数字、大、小写',
      placeholder: '请输入原密码',
      validateEvent: false,
    },
    {
      key: 'newPassword',
      type: 'password',
      label: '新密码',
      clearable: true,
      showPassword: true,
      // tooltip: '密码长度为8～16位，包含数字、大、小写',
      placeholder: '请输入新密码',
      onChange(data) {
        handleGetRule('newPassword', data)
      },
      validateEvent: false,
    },
    {
      key: 'confirmNewPassword',
      type: 'password',
      label: '确认新密码',
      clearable: true,
      showPassword: true,
      // tooltip: '密码长度为8～16位，包含数字、大、小写',
      placeholder: '确认新密码',
      validateEvent: false,
       onChange(data) {
        handleGetRule('confirmNewPassword', data)
      }
    },
  ]

  const getCurrentFormColumns = type === 0 ? changePwdColumns : initChangeColumns
  
  const changePwdFormColumns = reactive(getCurrentFormColumns)
  
  // 判断两次密码是否相同
  const validatePassword = (rule, value, callback) => {
    if (value !== changePwdFormData.newPassword) {
      callback(new Error('两次输入密码不一致!'));
    } else {
      callback();
    }
  }
  
  /**
   * @describtion 动态添加rule规则
   * @param data {string} - rule返回信息
   * @returns 
   */
  const addRules = (data) => {
    return (rule, value, callback) => {
      if (data) {
        callback(new Error(data));
      } else {
        callback()
      }
    }
  }
  
  const changePwdRules = reactive<FormRules>({
    oldPassword: [
      {
        required: true,
        message: '原密码为必填项',
      },
    ],
    newPassword: [
      {
        required: true,
        message: '新密码为必填项',
      },
    ],
    confirmNewPassword: [
      {
        required: true,
        message: '确认新密码为必填项',
      },
      {
        validator: validatePassword,
      },
    ]
  })



  const changePwdFormHandleEvent = (data) => {
    const { eventName } = data || {}
    if(eventName === 'successSubmit') {
      submitForm(data.data)
    }
    if(eventName === 'errorSubmit'){
      errorFormCallBack(data.data)
    }
  }
  
  
  
  // 确定
  const handleConfirm = async () => {
    await changePwdFormRef.value.submitForm(changePwdFormRef.value.ruleFormRef)
  }
  
  const submitForm = (data) => {
    console.log('submitForm', data)
    changePwdRequest()
  }
  
  const errorFormCallBack = (data) => {
    console.log('errorFormCallBack', data)
  }

  /**
   * @description: 修改密码的请求
   * @return {*}
   * @author: changjun
   */  
  const changePwdRequest = async () => {
    const params = {
      id: userStore.getCurrentUserId,
      oriPassWd: changePwdFormData.oldPassword,
      pwd: changePwdFormData.newPassword,
    }
    const res = await http.post(changePwdApi, params) as any
    if(res.code === 200){
      yaMessage('密码修改成功。为了您的安全，请重新登录', 'success', true)
      userStore.logoutAction(router)
    }
  }

  const toLogin = () => {
    userStore.logoutAction(router)
  }


  return toRefs({
    changePwdFormRef,
    changePwdFormData,
    changePwdFormColumns,
    changePwdRules,
    changePwdFormHandleEvent,
    handleConfirm,
    toLogin
  })
}