<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()

interface FeatureUpdateCardPropsData {
  id: string
  title: string
  header: string
  content: string
  isRead: boolean
  imgSrc: string
}

const props = defineProps<{
  data: FeatureUpdateCardPropsData
}>()

const emit = defineEmits<{
  viewMore: []
}>()
const handleViewMore = () => {
  router.push({
    name: 'System Message Detail',
    query: {
      type: 'feature',
      title: props.data.header,
      id: props.data.id
    }
  })
  emit('viewMore')
}
</script>

<template>
  <div>
    <div class="feature-update" :class="{ 'is-read': data.isRead }">
      <div class="header">
        <div class="status-icon"></div>
        <div class="title">{{ data.title }}</div>
      </div>
      <div class="card-content">
        <div class="title">
          <!-- <span class="font_family icon-icon_password_b"></span> -->
          <img style="margin-right: 5px" src="../images/icon_publish.png" alt="" />
          <span class="gradient-text">{{ data.header }}</span>
        </div>
        <div class="content-text">
          <span>{{ data.content }}</span>
        </div>
        <div class="feature-img">
          <el-image :src="data.imgSrc" fit="contain" alt="feature-img"></el-image>
        </div>

        <div class="change-btn" style="text-align: center">
          <el-button
            @click="handleViewMore"
            class="el-button--main"
            style="height: 40px; padding: 0 32px"
          >
            View more</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.feature-update {
  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 16px 24px 8px;
    background: linear-gradient(
      137deg,
      var(--color-feature-card-first-bg) 12.41%,
      var(--color-feature-card-second-bg) 52.63%,
      var(--color-feature-card-third-bg) 93.28%
    );
    border-radius: 12px;
    .title {
      img {
        vertical-align: middle;
      }
      span {
        vertical-align: middle;
        display: inline-block;
        font-weight: 700;
      }
      .gradient-text {
        background: linear-gradient(90deg, #dc6c6d 0%, #7959c8 46%, #ed6d00 100%);
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        font-size: 14px;
        font-weight: bold;
      }
      .font_family {
        margin-right: 8px;
      }
    }
    .content-text {
      margin: 8px 0 0px 24px;
    }
    .feature-img {
      margin-top: 12px;
      margin-bottom: 16px;
      padding-left: 24px;
      .el-image {
        display: block;
        margin: 0 auto;
        width: 352px;
        height: 200px;
        border-radius: 8px;
      }
    }
  }
}
</style>
