<script setup lang="ts">
import ChangePasswordDialog from '@/views/Layout/src/components/Header/components/ChangePasswordDialog.vue'

interface PasswordCardPropsData {
  title: string
  isExpiration: boolean // true为红色，false为绿色
  header: string
  isRead: boolean
  content: string
}
const props = defineProps<{
  data: PasswordCardPropsData
}>()

const changePasswordDialogRef = ref()
const handleChangePassword = () => {
  changePasswordDialogRef.value.openDialog()
}
</script>

<template>
  <div class="password-notifications" :class="{ 'is-read': data.isRead }">
    <div class="header" v-if="data.title">
      <div class="status-icon"></div>
      <div class="title">{{ data.title }}</div>
    </div>
    <div class="card-content" :class="{ 'is-expired': data.isExpiration }">
      <div class="title">
        <span class="font_family icon-icon_password_b"></span>
        <span>{{ data.header }}</span>
      </div>
      <div class="details">
        {{ data.content }}
      </div>
      <div class="change-btn" style="text-align: center">
        <el-button @click="handleChangePassword" class="el-button--main" style="height: 40px">
          <span class="font_family icon-icon_edit_b" style="margin-right: 4px"></span>
          <span>Change Password</span></el-button
        >
      </div>
    </div>
    <ChangePasswordDialog ref="changePasswordDialogRef"></ChangePasswordDialog>
  </div>
</template>

<style lang="scss" scoped>
.password-notifications {
  margin-bottom: 16px;
  &.is-read {
    & > .header {
      .status-icon {
        background-color: var(--color-border);
      }
      .title {
        color: #b5b9bf;
      }
    }
  }
  .header {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    .status-icon {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: var(--color-theme);
      margin-right: 10px;
    }
    .title {
      font-weight: 700;
    }
  }
  .card-content {
    padding: 16px 8px 24px;
    background: linear-gradient(
      180deg,
      var(--color-password-card-first-bg) 0%,
      var(--color-password-card-second-bg) 100%
    );
    border-radius: 12px;
    &.is-expired {
      background: linear-gradient(
        182deg,
        var(--color-password-expired-card-first-bg) 2.2%,
        var(--color-password-expired-card-second-bg) 98.77%
      );
    }
    .title {
      span {
        vertical-align: middle;
        font-weight: 700;
        color: #2b2f36;
      }
      .font_family {
        margin-right: 8px;
      }
    }
    .details {
      margin: 8px 0 16px 24px;
      color: #2b2f36;
    }
  }
}
</style>
