<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="No." width="45" />
      <el-table-column
        prop="BeginDateStr"
        label="Start"
        min-width="55"
        show-overflow-tooltip
      />
      <el-table-column
        prop="EndDateStr"
        label="End"
        min-width="55"
        show-overflow-tooltip
      />
      <el-table-column prop="Degree" 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="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="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="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="State/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="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">Postgraduate Training (in chronological order)</div>
    <el-table :data="postgraduateList" border style="width: 100%" size="small">
      <template slot="empty">
        <span></span>
      </template>
      <el-table-column type="index" label="No." width="45" />
      <el-table-column
        prop="BeginDateStr"
        label="Start"
        min-width="55"
        show-overflow-tooltip
      />
      <el-table-column
        prop="EndDateStr"
        label="End"
        min-width="55"
        show-overflow-tooltip
      />
      <el-table-column prop="Training" 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="Specialty / Research Field"
        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="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="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="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="State/Province"
        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="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>
