<template>
  <div class="lyric-project-card" @click="cardClickFun">
    <img
      class="gl-pointer-class cover-img"
      :src="coverImgMap[project.detailImgUrl ? 'custom' : index % 2 !== 0 ? 'blue' : 'green']"
      alt=""
    />

    <div class="overlay-text">
      <div class="project-code" :title="project.nodeCode">{{ project.nodeCode }}</div>
      <div class="project-name" :title="project.nodeName">{{ project.nodeName }}</div>
    </div>

    <div class="bottom-box">
      <span class="gl-text-ellipsis gl-pointer-class" :title="project.currentPhase">
        {{ project.currentPhase }}
      </span>
      <span :class="statusClassMap[project.exeStatus] || 'status car-info-status'">
        {{ PROJECT_EXE_STATUS.O[project.exeStatus] || '未开始' }}
      </span>
    </div>

    <el-dropdown class="options-dropdown" :teleported="false">
      <div class="options-btn" @click.stop>
        <el-icon :size="18"><MoreFilled /></el-icon>
      </div>
      <template #dropdown>
        <el-dropdown-menu @click.stop>
          <el-dropdown-item v-for="(action, aIndex) in actionList" :key="aIndex">
            <el-link :type="action.type" @click.stop="actionClickFun(action)">
              {{ action.title }}
            </el-link>
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { MoreFilled } from '@element-plus/icons-vue';
import { useDict } from '@/utils/useDict';
import { PROJECT_EXE_STATUS_CODE } from '@/utils/enum/project';
import projectBlue from '@/assets/imgs/projectList/project-blue.png';
import projectGreen from '@/assets/imgs/projectList/project-green.png';

interface Props {
  project: any;
  index: number;
  actionList: any[];
}

const props = withDefaults(defineProps<Props>(), {
  project: () => ({}),
  index: 0,
  actionList: () => [],
});

const emit = defineEmits(['cardClick', 'actionClick']);

const { PROJECT_EXE_STATUS } = useDict('PROJECT_EXE_STATUS');
const env = import.meta.env;

const coverImgMap = computed(() => ({
  custom: `${env.VITE_API_IMAGE_PREVIEW_URL}/data/previewImage?fileId=${props.project.detailImgUrl}`,
  blue: projectBlue,
  green: projectGreen,
}));

const statusClassMap: Record<string, string> = {
  [PROJECT_EXE_STATUS_CODE.COMPLETED]: 'status car-completed',
  [PROJECT_EXE_STATUS_CODE.IN_PROGRESS]: 'status car-ing',
  [PROJECT_EXE_STATUS_CODE.PAUSED]: 'status car-paused',
  [PROJECT_EXE_STATUS_CODE.POSTPONED]: 'status car-postponed',
};

const cardClickFun = () => {
  emit('cardClick', props.project);
};

const actionClickFun = (action: any) => {
  emit('actionClick', props.project, action);
};
</script>

<style lang="scss" scoped>
@import '@/views/task/projectList/components/projectCard.scss';

.lyric-project-card {
  @extend .project-card-base;
  border-radius: 12px;
  border: 1px solid #f0f0f0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);

    .cover-img {
      transform: scale(1.1);
    }
  }

  .cover-img {
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  }

  .overlay-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 46px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 5;
    // background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.4) 100%);
    pointer-events: none;

    .project-code {
      font-size: 22px;
      font-weight: 700;
      color: #ffffff;
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
      margin-bottom: 6px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 90%;
      letter-spacing: 0.5px;
      pointer-events: auto;
    }

    .project-name {
      font-size: 13px;
      color: rgba(255, 255, 255, 0.95);
      text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 90%;
      font-weight: 500;
      pointer-events: auto;
    }
  }

  .bottom-box {
    height: 46px;
    padding: 0 16px;
    background-color: #ffffff;
    border-top: 1px solid #f5f5f5;

    .gl-text-ellipsis {
      font-size: 14px;
      color: #333;
      font-weight: 500;
      transition: color 0.3s;
      &:hover {
        color: var(--el-color-primary);
      }
    }

    .status {
      border: none;
      font-weight: 600;
      border-radius: 6px;
      width: auto;
      min-width: 64px;
      padding: 0 8px;
      height: 24px;
      font-size: 12px;
      display: inline-flex;
      align-items: center;
      justify-content: center;

      &.car-ing {
        background-color: #e6f7ff;
        color: #1890ff;
      }

      &.car-completed {
        background-color: #f6ffed;
        color: #52c41a;
      }

      &.car-paused {
        background-color: #fffbe6;
        color: #faad14;
      }

      &.car-postponed {
        background-color: #fff1f0;
        color: #f5222d;
      }

      &.car-info-status {
        background-color: #f5f5f5;
        color: #8c8c8c;
      }
    }
  }
}
</style>
