<script setup lang="ts">
import NotificationMessageCard from '@/components/NotificationMessageCard/src/NotificationMessageCard.vue'
import { useRouter } from 'vue-router'
import { useNotificationMessage } from '@/stores/modules/notificationMessage'

const router = useRouter()
const notificationMsgStore = useNotificationMessage()

const loading = ref(false)

const notificationType = ref('all')
const notificationTypeList = ref({
  all: 'All Notifications',
  Milestone_Update: 'Milestone Update',
  Container_Status_Update: 'Container Status Update',
  'Departure/Arrival_Delay': 'Departure/Arrival Delay',
  'ETD/ETA_Change': 'ETD/ETA Change',
  Feature_Update: 'Feature Update'
})

const notificationList = ref<any[]>([])

const getNotificationList = () => {
  loading.value = true
  $api
    .getNotificationList({
      rules_type: notificationType.value
    })
    .then((res) => {
      if (res.code === 200) {
        notificationList.value = res.data
        // nextTick(() => {
        //   init()
        // })
      }
    })
    .finally(() => {
      loading.value = false
    })
}

// 标记所有为已读
const handleMarkAllRead = () => {
  try {
    $api.setMessageRead({ read_type: true }).then((res) => {
      if (res.code === 200) {
        notificationMsgStore.hasUnreadMessages()
        notificationMessageCardsRef.value.setAllMessageRead()
      }
    })
  } catch (error) {
    console.error(error)
  }
}

const drawerRef = ref()
const handleViewAll = () => {
  drawerRef.value.handleClose()
  router.push('/system-message')
}

const handleSettingMessage = () => {
  drawerRef.value.handleClose()
  router.push({
    name: 'Monitoring Settings',
    query: {
      tab: 'Subscribe Notifications'
    }
  })
}

const closeDrawer = () => {
  notificationList.value = []
  notificationType.value = 'all'
  notificationMsgStore.markMessageAsRead()
}

const notificationMessageCardsRef = ref()
</script>

<template>
  <el-drawer
    ref="drawerRef"
    @open="getNotificationList"
    @closed="closeDrawer"
    class="notice-drawer"
    size="432px"
  >
    <template #header>
      <el-select
        size="large"
        @change="getNotificationList"
        v-model="notificationType"
        class="notification-type"
      >
        <el-option
          v-for="(label, value) in notificationTypeList"
          :key="value"
          :label="label"
          :value="value"
        />
      </el-select>
    </template>
    <template #default>
      <el-scrollbar v-vloading="loading" style="height: 100%">
        <div class="notification-header">
          <el-button @click="handleMarkAllRead" class="mark-all-read el-button--text" size="small">
            <span class="font_family icon-icon_confirm_b show-icon"></span>
            <span>Mark all read</span>
          </el-button>
          <div class="view-all">
            <el-button
              style="height: 24px; width: 86px"
              class="el-button--text"
              @click="handleViewAll"
            >
              <span class="font_family icon-icon_jumplink_b1 show-icon"></span>
              <span>View all</span>
            </el-button>
            <el-button
              class="el-button--text"
              style="height: 24px; width: 24px; padding: 0"
              @click="handleSettingMessage"
            >
              <span class="font_family icon-icon_administration_b"></span>
            </el-button>
          </div>
        </div>
        <div class="notification-content">
          <NotificationMessageCard
            @see-all="drawerRef.handleClose()"
            @view-more="drawerRef.handleClose()"
            @jump-tracking="drawerRef.handleClose()"
            :data="notificationList"
            :topOffset="185"
            ref="notificationMessageCardsRef"
          />
        </div>
      </el-scrollbar>
    </template>
  </el-drawer>
</template>
<style lang="scss" scoped>
div.layout-toolbar {
  .notification-content {
    height: calc(100% - 40px);
    padding: 16px;
    background-color: var(--color-dialog-body-bg);
  }
  .password-notifications {
    .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, #ffe294 0%, #f6f8fa 100%);
      border-radius: 12px;
      &.is-expired {
        background: linear-gradient(182deg, #ef99a0 2.2%, #f6f8fa 98.77%);
      }
      .title {
        span {
          vertical-align: middle;
          font-weight: 700;
        }
        .font_family {
          margin-right: 8px;
        }
      }
      .details {
        margin: 8px 0 16px 24px;
      }
    }
  }
  .feature-update {
    .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(137deg, #fff4eb 12.41%, #f0f3ff 52.63%, #e0f7f9 93.28%);
      border-radius: 12px;
      .title {
        img {
          vertical-align: middle;
        }
        span {
          vertical-align: middle;
          display: inline-block;
          font-weight: 700;
        }
        .font_family {
          margin-right: 8px;
        }
      }
      .details {
        margin: 8px 0 16px 24px;
      }
    }
  }
}
</style>
<style lang="scss">
div.layout-toolbar {
  .el-overlay:has(> .notice-drawer) {
    background-color: transparent;
  }
  .notice-drawer {
    top: 48px;
    height: calc(100% - 48px);
    .el-drawer__header {
      gap: 52px;
      .el-drawer__close {
        color: var(--color-neutral-1);
        font-size: 16px;
      }
    }
    .el-drawer__body {
      padding: 0;
    }
    .notification-type {
      .el-select__wrapper {
        width: 320px !important;
      }
    }
    .notification-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: sticky;
      top: 0;
      height: 40px;
      padding: 0 16px;
      z-index: 3;
      line-height: 40px;
      background-color: var(--color-dialog-body-bg);
      border-bottom: 1px solid var(--color-border);
      .mark-all-read {
        span {
          color: var(--color-theme);
          font-size: 14px;
          vertical-align: middle;
        }
        .show-icon {
          font-size: 16px;
          margin-right: 2px;
        }
      }
      .view-all {
        span {
          vertical-align: middle;
        }
        .show-icon {
          margin-right: 2px;
        }
        .setting {
          margin-left: 16px;
        }
      }
    }
  }
}
</style>
