<template>
  <div class="education-info">
    <div class="title">Education (in chronological order)</div>
    <el-table :data="educationList" border style="width: 100%;margin-top:10px;" size="small">
      <template slot="empty">
        <span></span>
      </template>
      <el-table-column type="index" :label="$t('resumeInfo:label:No')" width="45" />
      <el-table-column
        prop="BeginDateStr"
        :label="$t('resumeInfo:label:BeginDateStr')"
        min-width="55"
        show-overflow-tooltip
      />
      <el-table-column
        prop="EndDateStr"
        :label="$t('resumeInfo:label:EndDateStr')"
        min-width="55"
        show-overflow-tooltip
      />
      <el-table-column prop="Degree" :label="$t('resumeInfo:label:Degree')" min-width="70" show-overflow-tooltip>
        <template slot-scope="scope">
          <span v-show="scope.row.Degree">
            {{ isEnglish?scope.row.Degree:scope.row.DegreeCN }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="Major" :label="$t('resumeInfo:label:Major')" min-width="130" show-overflow-tooltip>
        <template slot-scope="scope">
          <span v-show="scope.row.Major">
            {{ isEnglish?scope.row.Major:scope.row.MajorCN }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="Organization"
        :label="$t('resumeInfo:label:Institution')"
        min-width="150"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span v-show="scope.row.Organization">
            {{ isEnglish?scope.row.Organization:scope.row.OrganizationCN }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="City" :label="$t('resumeInfo:label:City')" min-width="70" show-overflow-tooltip>
        <template slot-scope="scope">
          <span v-show="scope.row.City">
            {{ isEnglish?scope.row.City:scope.row.CityCN }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="Province"
        :label="$t('resumeInfo:label:Province')"
        min-width="80"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span v-show="scope.row.Province">
            {{ isEnglish?scope.row.Province:scope.row.ProvinceCN }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="Country" :label="$t('resumeInfo:label:Country')" min-width="70" show-overflow-tooltip>
        <template slot-scope="scope">
          <span v-show="scope.row.Country">
            {{ isEnglish?scope.row.Country:scope.row.CountryCN }}
          </span>
        </template>
      </el-table-column>
    </el-table>

    <div class="title">{{$t('resumeInfo:label:PostgraduateTraining')}}</div>
    <el-table :data="postgraduateList" border style="width: 100%" size="small">
      <template slot="empty">
        <span></span>
      </template>
      <el-table-column type="index" :label="$t('resumeInfo:label:No')" width="45" />
      <el-table-column
        prop="BeginDateStr"
        :label="$t('resumeInfo:label:BeginDateStr')"
        min-width="55"
        show-overflow-tooltip
      />
      <el-table-column
        prop="EndDateStr"
        :label="$t('resumeInfo:label:EndDateStr')"
        min-width="55"
        show-overflow-tooltip
      />
      <el-table-column prop="Training"  :label="$t('resumeInfo:label:Training')" min-width="70" show-overflow-tooltip>
        <template slot-scope="scope">
          <span v-show="scope.row.Training">
            {{ isEnglish?scope.row.Training:scope.row.TrainingCN }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="Major"
        :label="$t('resumeInfo:label:Specialty')"
        min-width="140"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span v-show="scope.row.Major">
            {{ isEnglish?scope.row.Major:scope.row.MajorCN }}
          </span>
        </template>
      </el-table-column>

      <el-table-column prop="Hospital" :label="$t('resumeInfo:label:Hospital')" min-width="110" show-overflow-tooltip>
        <template slot-scope="scope">
          <span v-show="scope.row.Hospital">
            {{ isEnglish?scope.row.Hospital:scope.row.HospitalCN }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="School" :label="$t('resumeInfo:label:University')" min-width="120" show-overflow-tooltip>
        <template slot-scope="scope">
          <span v-show="scope.row.School">
            {{ isEnglish?scope.row.School:scope.row.SchoolCN }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="City" :label="$t('resumeInfo:label:City')" min-width="70" show-overflow-tooltip>
        <template slot-scope="scope">
          <span v-show="scope.row.City">
            {{ isEnglish?scope.row.City:scope.row.CityCN }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="Province"
        :label="$t('resumeInfo:label:StateProvince')"
        min-width="90"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span v-show="scope.row.Province">
            {{ isEnglish?scope.row.Province:scope.row.ProvinceCN }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="Country" :label="$t('resumeInfo:label:Country')" min-width="70" show-overflow-tooltip>
        <template slot-scope="scope">
          <span v-show="scope.row.Country">
            {{ isEnglish?scope.row.Country:scope.row.CountryCN }}
          </span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  props: {
    educationList: {
      type: Array,
      default() {
        return []
      }
    },
    postgraduateList: {
      type: Array,
      default() {
        return []
      }
    },
    isEnglish: {
      type: Boolean
    }
  },
  methods: {
  }
}
</script>

<style lang="scss">
.education-info{
  padding:5px 15px;
  font-size:13px;
  .title{
    height: 30px;
    line-height: 30px;
    background-color: #9c9fa6;
    font-size: 14px;
    padding-left: 10px;
    color: #fff;
    margin: 10px 0;
  }
}
</style>
