<template>
 <el-col :xs="12" :sm="6" :md="6" :xl="4" style="margin-bottom: 20px;">
   <el-card class="card"  @mouseenter="isHovered = true" @mouseleave="isHovered = false">
     <div class="card-title">
       <span class="ellipsis">{{ props.title }}</span>
       <el-space>
         <span class="serial">#{{ props.serial }}</span>
         <el-switch v-model="availableState" size="small" @change="handleChangeStatus" />
       </el-space>
     </div>
     <div class="card-content">
       {{ content }}
     </div>
     <div class="card-footer pointer" :class="{ 'card-footer-visible': isHovered }" @click="handlePreview">
       查看详情
       <el-icon><Right /></el-icon>
     </div>
   </el-card>
 </el-col>
  <DialogParagraph ref="dialogParagraphRef" :is-del="props.isDel" @update-content="handleChangeContent" @refresh="emit('refresh')" />
</template>
<script setup lang="ts">
import api from '@/servers/finyx/api'
import { ElMessage } from 'element-plus'
import { computed, ref } from 'vue'
import DialogParagraph from './DialogParagraph.vue'

const props = withDefaults(defineProps<{
  title?: string,
  content?: string,
  availableState?: boolean,
  serial?: string,
  id?: string,
  isDel?: boolean
}>(), {
  isDel: false,
})

const emit = defineEmits(['refresh', 'update:availableState', 'update:content'])

const availableState = computed({
  get() {
    return props.availableState
  },
  set(value) {
    emit('update:availableState', value);
  }
})
const content = computed({
  get() {
    return props.content
  },
  set(value) {
    emit('update:content', value);
  }
})

const handleChangeContent = (data: any) => {
  content.value = data?.content
}

// 使用 ref 创建一个响应式变量来跟踪鼠标悬停状态
const isHovered = ref(false);

const dialogParagraphRef = ref<any>(null)

const handlePreview = () => {
  dialogParagraphRef.value.open({ ...props });
}

const handleChangeStatus = async (availableState: boolean) => {
  try {
    const model: any = {
      ...props,
      availableState
    }
    await api.wendangfenduan.update3(model)
    ElMessage.success('更新状态成功！')
  } catch (e) {
    ElMessage.error('更新状态失败！')
  }
}

</script>
<style scoped lang="scss">
.card {
  position: relative;
  cursor: pointer;
  &:deep(.el-card__body) {
    padding-bottom: 24px;
  }
  .card-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
    font-size: 16px;
    color: #191919;
    .ellipsis {
      flex: 1;
    }
    .serial {
      font-weight: 500;
      font-size: 16px;
      color: #3067EF;
    }
  }
  .card-content {
    min-height: 50px;
    margin-top: 10px;
    font-weight: 500;
    font-size: 14px;
    color: #8C8C8C;
    line-height: 25px;
    // 超出两行显示省略号
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .card-footer {
    font-weight: 500;
    font-size: 12px;
    color: #3067EF;
    position: absolute;
    bottom: 5px;
    margin-top: 4px;
    opacity: 0; /* 默认隐藏 */
    transform: translateY(10px); /* 初始位置下移 */
    transition: opacity 0.3s ease, transform 0.3s ease; /* 添加过渡效果 */
  }
  /* 悬停时显示并上移 */
  .card-footer-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

</style>
