<template>
  <div class="resume-card">
    <div class="resume-card__header">
      <div class="resume-card__indicator"></div>
      <div class="resume-card__title">{{ title }}</div>
      <div class="resume-card__tabs" v-if="tabs.length > 0">
        <div
          v-for="(tab, i) in tabs"
          :key="tab.key"
          class="resume-card__tab"
          :class="{ 'resume-card__tab--active': activeTab === tab.key }"
          @click="switchTab(tab.key)"
        >{{ tab.label }}</div>
      </div>
      <div class="resume-card__actions">
        <img
          :src="downloadIcon"
          alt="下载"
          class="resume-card__action-btn"
          @click="$emit('download')"
        />
        <img
          :src="collectIcon"
          alt="收藏"
          class="resume-card__action-btn"
          @click="$emit('collect')"
        />
      </div>
    </div>
    <div class="resume-card__body">
      <div v-for="(item, index) in currentList" :key="index" class="resume-item">
        <img :src="timelineIcon" alt="" class="resume-item__icon" />
        <div class="resume-item__time">{{ item.startTime + '-' + item.endTime }}</div>
        <div class="resume-item__title">{{ item.orgName + '|' + item.jobName }}</div>
        <div class="resume-item__content">{{ item.content }}</div>
        <div class="resume-item__door" v-if="item.door">
          <img :src="doorIcon" alt="" />
          <span>{{ item.door }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import defaultDownloadIcon from "../assets/下载按钮.png";
import defaultCollectIcon from "../assets/收藏按钮.png";
import defaultTimelineIcon from "../assets/icon01.png";
import defaultDoorIcon from "../assets/icon02.png";

export default {
  name: "ResumeCard",
  props: {
    /** 卡片标题 */
    title: {
      type: String,
      default: "生涯履历",
    },
    /**
     * Tab 配置数组，示例：
     * [{ key: "career", label: "职业履历" }, { key: "edu", label: "教育履历" }]
     * 不传则无 tab，直接显示 list 数据
     */
    tabs: {
      type: Array,
      default: () => [],
    },
    /**
     * 无 tab 时的数据数组；有 tab 时忽略此 prop，使用 dataMap
     */
    list: {
      type: Array,
      default: () => [],
    },
    /**
     * 有 tab 时的数据映射，key 对应 tabs[].key，示例：
     * { career: [...], edu: [...] }
     */
    dataMap: {
      type: Object,
      default: () => ({}),
    },
    /** 自定义图标路径（可选） */
    downloadIcon: {
      type: String,
      default: defaultDownloadIcon,
    },
    collectIcon: {
      type: String,
      default: defaultCollectIcon,
    },
    timelineIcon: {
      type: String,
      default: defaultTimelineIcon,
    },
    doorIcon: {
      type: String,
      default: defaultDoorIcon,
    },
  },
  emits: ["download", "collect", "tab-change"],
  data() {
    return {
      activeTab: this.tabs.length > 0 ? this.tabs[0].key : "",
    };
  },
  computed: {
    /** 当前展示的列表数据 */
    currentList() {
      if (this.tabs.length > 0 && this.activeTab) {
        return this.dataMap[this.activeTab] || [];
      }
      return this.list;
    },
  },
  methods: {
    switchTab(key) {
      this.activeTab = key;
      this.$emit("tab-change", key);
    },
  },
};
</script>

<style scoped lang="scss">
.resume-card {
  width: 520px;
  min-height: 200px;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 10px;
  box-shadow: 0px 0px 20px rgba(25, 69, 130, 0.1);
}

.resume-card__header {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  padding: 14px 12px 40px 0;
}

.resume-card__indicator {
  width: 8px;
  height: 20px;
  background-color: rgb(5, 95, 194);
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
  margin-right: 14px;
}

.resume-card__title {
  font-size: 20px;
  font-weight: 700;
  font-family: "Microsoft YaHei";
  line-height: 26px;
  color: rgb(5, 95, 194);
}

.resume-card__tabs {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 20px;
}

.resume-card__tab {
  font-size: 16px;
  font-weight: 400;
  font-family: "Microsoft YaHei";
  line-height: 24px;
  color: rgb(95, 101, 108);
  padding: 2px 12px;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s;

  &:hover {
    color: rgb(5, 95, 194);
  }

  &--active {
    color: rgb(5, 95, 194);
    font-weight: 700;
    border-color: rgb(5, 95, 194);
    background-color: rgba(5, 95, 194, 0.05);
  }
}

.resume-card__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}

.resume-card__action-btn {
  width: 28px;
  height: 28px;
  cursor: pointer;
}

.resume-card__body {
  width: 480px;
  margin-left: 16px;
  padding-bottom: 20px;
}

.resume-item {
  width: 454px;
//   margin-bottom: 60px;
  margin-left: 26px;
  position: relative;
}

.resume-item__icon {
  width: 14px;
  height: 12.13px;
  position: absolute;
  top: 8px;
  left: -26px;
}

.resume-item__time {
  font-size: 16px;
  font-weight: 700;
  font-family: "Microsoft YaHei";
  line-height: 30px;
  color: rgb(5, 95, 194);
  margin-bottom: 8px;
}

.resume-item__title {
  font-size: 16px;
  font-weight: 700;
  font-family: "Microsoft YaHei";
  line-height: 30px;
  color: rgb(59, 65, 75);
  margin-bottom: 8px;
}

.resume-item__content {
  font-size: 16px;
  font-weight: 400;
  font-family: "Microsoft YaHei";
  line-height: 24px;
  color: rgb(95, 101, 108);
  margin-bottom: 8px;
}

.resume-item__door {
  width: 300px;
  height: 32px;
  display: flex;
  align-items: center;
  padding: 4px 0 4px 11px;
  border-radius: 4px;
  background-color: rgba(255, 246, 240, 1);
  border: 1px solid rgba(250, 140, 22, 0.4);

  img {
    width: 20px;
    height: 24px;
    margin-right: 10px;
  }

  span {
    font-size: 16px;
    font-weight: 400;
    font-family: "Microsoft YaHei";
    line-height: 24px;
    color: rgba(255, 149, 77, 1);
  }
}
</style>
