<template>
  <div class="employment-info">
    <el-form :inline="true" :model="employment" class="demo-form-inline" size="small">
      <el-row>
        <el-col :span="6">
          <el-form-item label="Department:">
            <span v-if="isEnglish">{{ employment.Department }}</span>
            <span v-else>{{ employment.DepartmentCN }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="Rank:">
            <span v-if="isEnglish">{{ employment.Rank }}</span>
            <span v-else>{{ employment.RankCN }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="Physician:">
            <span v-if="isEnglish">{{ employment.Physician }}</span>
            <span v-else>{{ employment.PhysicianCN }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="Position:">
            <span v-if="isEnglish">{{ employment.Position }}</span>
            <span v-else>{{ employment.PositionCN }}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="6">
          <el-form-item label="Hospital:">
            <span v-if="isEnglish">{{ employment.HospitalName }}</span>
            <span v-else>{{ employment.HospitalNameCN }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="Affiliated University:">
            <span v-if="isEnglish">{{ employment.UniversityAffiliated }}</span>
            <span v-else>{{ employment.UniversityAffiliatedCN }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="City:">
            <span v-if="isEnglish">{{ employment.City }}</span>
            <span v-else>{{ employment.CityCN }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="State/Province:">
            <span v-if="isEnglish">{{ employment.Province }}</span>
            <span v-else>{{ employment.ProvinceCN }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="Country:">
            <span v-if="isEnglish">{{ employment.Country }}</span>
            <span v-else>{{ employment.CountryCN }}</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>

export default {
  props: {
    employment: {
      type: Object,
      default() {
        return {}
      }
    },
    isEnglish: {
      type: Boolean
    }
  }
}
</script>

<style lang="scss">
.employment-info{
  padding:5px 15px;
  font-size:13px;
  .el-form-item--mini.el-form-item{
    margin-bottom: 0px;
  }
  .el-form-item--small.el-form-item{
    margin-bottom: 0px;
  }
  .el-form-item__content{
    font-size: 13px;
  }
  .el-form-item__label{
    font-size: 13px;
    color: #303133;
    font-weight: bold;
  }
}
</style>
