<template>
  <div>
    <a-row>
      <a-col :span="24" style="border-top: 0px; text-align: center">
        <div class="main-title">
          <span>申报人才简历</span>
        </div>
      </a-col>
    </a-row>
    <a-row type="flex" class="row_center">
      <a-col :span="4" class="bg-gray">
        <div class="special-middle">
          <span>学历(高中以上)</span>
        </div>
      </a-col>
      <a-col :span="20">
        <!-- 学历表格 -->
        <a-row type="flex" class="row_center">
          <a-col :span="8" class="bg-gray">
            <div class="special-middle">
              <div>起止日期</div>
            </div>
          </a-col>
          <a-col :span="6" class="bg-gray">
            <div class="special-middle">
              <div>学校</div>
            </div>
          </a-col>
          <a-col :span="10" class="bg-gray">
            <div class="special-middle">
              <div>备注</div>
            </div>
          </a-col>
        </a-row>
        <a-row v-for="(item, index) in educationList" :key="'educationList'+index" type="flex" class="row_center">
          <a-col :span="8">
            <div class="special-middle">
              <div>{{ moment(item.resumeStart).format('YYYY-MM-DD') }} 至 {{ moment(item.resumeEnd).format('YYYY-MM-DD') }}</div>
            </div>
          </a-col>
          <a-col :span="6">
            <div class="special-middle">
              <div>{{ item.orgName }}</div>
            </div>
          </a-col>
          <a-col :span="10">
            <div class="special-middle">
              <div>{{ item.resumeRemark }}</div>
            </div>
          </a-col>
        </a-row>
      </a-col>
    </a-row>
    <a-row type="flex" class="row_center">
      <a-col :span="4" class="bg-gray">
        <div class="special-middle">
          <span>研修经历</span>
        </div>
      </a-col>
      <a-col :span="20">
        <!-- 研修经历表格 -->
        <a-row type="flex" class="row_center">
          <a-col :span="8" class="bg-gray">
            <div class="special-middle">
              <div>起止日期</div>
            </div>
          </a-col>
          <a-col :span="6" class="bg-gray">
            <div class="special-middle">
              <div>机构(国别)</div>
            </div>
          </a-col>
          <a-col :span="10" class="bg-gray">
            <div class="special-middle">
              <div>研修内容(限20字)</div>
            </div>
          </a-col>
        </a-row>
        <a-row v-for="(item, index) in studyList" :key="'studyList'+index" type="flex" class="row_center">
          <a-col :span="8">
            <div class="special-middle">
              <div>{{ moment(item.resumeStart).format('YYYY-MM-DD') }} 至 {{ moment(item.resumeEnd).format('YYYY-MM-DD') }}</div>
            </div>
          </a-col>
          <a-col :span="6">
            <div class="special-middle">
              <div>{{ item.orgName }}</div>
            </div>
          </a-col>
          <a-col :span="10">
            <div class="special-middle">
              <div>{{ item.resumeRemark }}</div>
            </div>
          </a-col>
        </a-row>
      </a-col>
    </a-row>
    <a-row type="flex" class="row_center">
      <a-col :span="4" class="bg-gray">
        <div class="special-middle">
          <span>工作经历</span>
        </div>
      </a-col>
      <a-col :span="20">
        <!-- 工作经历表格 -->
        <a-row type="flex" class="row_center">
          <a-col :span="6" class="bg-gray">
            <div class="special-middle">
              <div>起止日期</div>
            </div>
          </a-col>
          <a-col :span="5" class="bg-gray">
            <div class="special-middle">
              <div>机构</div>
            </div>
          </a-col>
          <a-col :span="4" class="bg-gray">
            <div class="special-middle">
              <div>职务</div>
            </div>
          </a-col>
          <a-col :span="9" class="bg-gray">
            <div class="special-middle">
              <div>承担的主要工作(限20字)</div>
            </div>
          </a-col>
        </a-row>
        <a-row v-for="(item, index) in workList" :key="'workList'+index" type="flex" class="row_center">
          <a-col :span="6">
            <div class="special-middle">
              <div>{{ moment(item.resumeStart).format('YYYY-MM-DD') }} 至 {{ moment(item.resumeEnd).format('YYYY-MM-DD') }}</div>
            </div>
          </a-col>
          <a-col :span="5">
            <div class="special-middle">
              <div>{{ item.orgName }}</div>
            </div>
          </a-col>
          <a-col :span="4">
            <div class="special-middle">
              <div>{{ item.positionName }}</div>
            </div>
          </a-col>
          <a-col :span="9">
            <div class="special-middle">
              <div>{{ item.resumeRemark }}</div>
            </div>
          </a-col>
        </a-row>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import moment from 'moment'

export default {
  name: "resumeInfo",
  props: {
    resumeList: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      educationList: [],
      studyList: [],
      workList: [],
    };
  },
  created() {
    
  },
  methods: {
    moment,
    InitData() {
      // 根据 resumeType 分类并排序
      if (this.resumeList && this.resumeList.length > 0) {
        // 学历记录
        this.educationList = this.resumeList
          .filter(item => item.resumeType === 'e76f5097-fe28-11ef-b6cb-0c42a1380f01')
          .sort((a, b) => a.showIndex - b.showIndex)
          .map(item => ({
            ...item,
            resumeRange: item.resumeStart && item.resumeEnd ? 
              [moment(item.resumeStart), moment(item.resumeEnd)] : []
          }))

        // 研修经历
        this.studyList = this.resumeList
          .filter(item => item.resumeType === 'e76f5097-fe28-11ef-b6cb-0c42a1380f02')
          .sort((a, b) => a.showIndex - b.showIndex)
          .map(item => ({
            ...item,
            resumeRange: item.resumeStart && item.resumeEnd ? 
              [moment(item.resumeStart), moment(item.resumeEnd)] : []
          }))

        // 工作经历
        this.workList = this.resumeList
          .filter(item => item.resumeType === 'e76f5097-fe28-11ef-b6cb-0c42a1380f03')
          .sort((a, b) => a.showIndex - b.showIndex)
          .map(item => ({
            ...item,
            resumeRange: item.resumeStart && item.resumeEnd ? 
              [moment(item.resumeStart), moment(item.resumeEnd)] : []
          }))
      }
    }
  },
  watch: {
    resumeList: {
      handler(resumeList) {
        if (!!resumeList) {
          this.InitData()
        }
      },
    },
  },
};
</script>