<template>
  <CusDialog
      title="修改密码"
      :show="show"
      @close="$emit('update:show', false)"
      @submit="onSubmit"
      width="400px"
      height="300px"
      :loading="loading"
  >
    <div class="password-main">
      <CusForm class="form" labelWidth="110px" ref="ref_form">
        <CusFormColumn
            :span="24"
            required
            label="旧密码:"
            type="password"
            show-password
            v-model:param="form.oldPassword"/>
        <CusFormColumn
            class="password"
            :span="24"
            required
            label="新密码:"
            type="password"
            show-password
            v-model:param="form.newPassword"
            :rules="[newPasswordValid()]"
        />
        <CusFormColumn
            :span="24"
            required
            label="确认新密码:"
            type="password"
            show-password
            v-model:param="form.confirmPassword"
            :rules="[{
              handle: (val) => val === form.newPassword,
              message: '密码不一致'
            }]"
        />
      </CusForm>
    </div>
  </CusDialog>
</template>

<script lang="ts">
import {
  defineComponent,
  computed,
  onMounted,
  ref,
  reactive,
  watch,
  getCurrentInstance,
  ComponentInternalInstance,
  toRefs,
  nextTick, onActivated
} from 'vue'
import {useStore} from 'vuex'
import {useRouter, useRoute} from 'vue-router'
import {ElMessage, ElMessageBox} from 'element-plus';
import {toLogin} from "@/utils/permissions";

export default defineComponent({
  name: '',
  components: {},
  props: {
    show: {}
  },
  setup(props, {emit}) {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
    const state = reactive({
      form: {
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      },
      loading: false,
    })
    const ref_form = ref()
    watch(() => props.show, () => {
      state.loading = false
      state.form = {
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      }
      nextTick(() => {
        ref_form.value.reset()
      })
    })
    const initDictionary = () => {
      store.dispatch("app/LOAD_GLOBAL_CONFIG", true);
    }
    const onSubmit = () => {
      ref_form.value.submit().then(() => {
        ElMessageBox.confirm("是否提交?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          state.loading = true
          that.$api.systemUserProfileUpdatePwd(`oldPassword=${state.form.oldPassword}&newPassword=${state.form.newPassword}`).then(res => {
            if (res.code === 200) {
              ElMessage.success(res.msg)
              toLogin()
            } else {
              ElMessage.error(res.msg)
            }
            state.loading = false
          }).catch(() => {
            state.loading = false
          })
        }).catch(() => {})
      }).catch((e) => {
        ElMessage({
          message: e[0].message,
          grouping: true,
          type: 'warning',
        })
      })
    }
    const newPasswordValid = () => {
      const obj: any = {
        handle: () => {},
        message: ''
      }
      if (store.state.app.globalConfig.passwordLevel === '0') {
        obj.handle = ((val) => store.state.regex.password0.test(val))
        obj.message = '请输入8~16位密码'
      } else if (store.state.app.globalConfig.passwordLevel === '1') {
        obj.handle = ((val) => store.state.regex.password1.test(val))
        obj.message = '请输入8~16位密码，要求包含大小写字母、数字'
      } else if (store.state.app.globalConfig.passwordLevel === '2') {
        obj.handle = ((val) => store.state.regex.password2.test(val))
        obj.message = '请输入8~16位密码，要求包含大小写字母、数字、特殊字符'
      }
      return obj
    }
    onMounted(() => {
      initDictionary()
    })
    return {
      ...toRefs(state),
      onSubmit,
      ref_form,
      newPasswordValid
    }
  },
})
</script>

<style scoped lang="scss">
.password-main {
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  .form {
    width: 100%;
    height: 100%;
    :deep(.el-form) {
      width: 100%;
      height: 100%;

    }
  }
}
</style>
