<script setup lang="ts">
import { UI_REST_ACCESSMGNT_ACCOUNTS_USER } from '@/api/api';
import CustomAert from '@/components/CustAlert/CustAlert.vue';
import { getStoreData } from '@/utils/composition';
import { urlReplace } from '@/utils/utils';
import { onMounted, onUnmounted, ref } from 'vue';
import { modifyUserInfo } from '../login-service';

const props = defineProps({
  password: {
    type: String,
    required: true,
    default: '',
  },
  locked: {
    type: Boolean,
    required: true,
    default: false,
  },
  expireDay: {
    type: Number,
    required: false,
  }
});
const isSend = ref(false);
const emits = defineEmits(['jump', 'modify']);

function goHome() {
  if (!isSend.value) {
    emits('jump', true);
  }
}

// 不再提示(系统锁定模式下，不显示“不再提示”按钮，因为此时点击接口修改会失败，不支持修改)
function setNoTip() {
  const url = urlReplace(UI_REST_ACCESSMGNT_ACCOUNTS_USER, { id: getStoreData('loct', 'uid') });
  const params = { InsecurePromptEnabled: false, ReauthKey: window.btoa(props.password) };
  isSend.value = true;
  modifyUserInfo(url, params)
    .then(() => {
      isSend.value = false;
      goHome();
    })
    .finally(() => {
      isSend.value = false;
    });
}

// 立即修改密码
function modifyPassword() {
  if (!isSend.value) {
    emits('modify');
  }
}
</script>

<template>
  <div class="root-container">
    <CustomAert
      :title="$t('LOGIN_RISK_TIP')"
      :content="
        (expireDay || expireDay === 0) && expireDay <= 10 && expireDay > 0
          ? $t('LOGIN_RISK_TIP4', [expireDay])
          : $t('LOGIN_RISK_TIP2')
      "
    />
    <div class="login-tips-container">
      <el-button
        id="bt-modify-now"
        class="login-button-tip"
        type="primary"
        @click="modifyPassword()"
      >
        {{ $t('LOGIN_MODIFY_NOW') }}
      </el-button>
    </div>
    <div class="login-tips-container">
      <span id="bt-modify-later" class="button-text" @click="goHome()">
        {{ $t('LOGIN_MODIFY_LATER') }}
      </span>
      <span v-if="!props.locked" id="bt-modify-noever" class="button-text" @click="setNoTip()">
        {{ $t('LOGIN_MODIFY_NOT') }}
      </span>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.root-container {
  margin-top: 32px;
  margin-bottom: 36px;
}
.login-tips-container {
  text-align: center;
  .button-text {
    position: relative;
    font-size: $FONT-12;
    color: $APP-COLOR-ACTIVE;
    padding: 0 16px;
    &:hover {
      text-decoration: underline;
      cursor: pointer;
    }
  }
  .button-text:nth-of-type(2)::before {
    content: '';
    position: absolute;
    left: 0;
    height: 100%;
    width: 0;
    border-left: 1px solid $APP-BORDER-COLOR-LOGIN-OUT;
  }
}
div + div {
  margin-top: 24px;
}
.login-button-tip {
  width: 100%;
  padding: 16px;
}
:deep(.el-button--primary) {
  font-size: 16px;
}
</style>
