<template>
  <div id="context">
    <el-row v-if="info && info.id">
      <el-col :span="24" class="interviewMainHead">
        <el-col class="headTit">
          <p class="headTit-text">
            <span class="text-inline headName">{{ (info.info && info.info.name) || '名字' }}</span>
            <span class="text-inline">{{ (info.info && info.info.gander) || '性别' }}</span>
          </p>
          <p class="headTit-text">
            <span class="text-inline">籍贯：渭南</span>
            <span class="text-inline">专业：null</span>
            <span class="text-inline">学校：null</span>
          </p>
          <p class="headTit-text">
            <span class="text-inline">手机：</span>
            <span class="text-inline">邮箱：</span>
          </p>
        </el-col>
        <el-col :span="24" class="headImg"><img :src="info.avatar_url" width="64" height="64px"/></el-col>
      </el-col>
      <el-col :span="24" class="interviewMainMod">
        <el-col class="ModTit">
          <h4>求职意向</h4>
        </el-col>
        <el-col class="ModTxt">
          <ul>
            <li></li>
          </ul>
        </el-col>
      </el-col>
      <el-col :span="24" class="interviewMainMod">
        <el-col class="ModTit">
          <h4>教育经历</h4>
        </el-col>
        <el-col class="ModTxt">
          <ul v-for="(item, index) in info.educations" :key="index">
            <li>{{ item.rxsj || '' }}-{{ item.bysj || '' }} {{ item.yx || '' }}-{{ item.fy || '' }}</li>
            <li>{{ item.zy || '' }}</li>
            <li>{{ item.xl || '' }}</li>
          </ul>
        </el-col>
      </el-col>
      <el-col :span="24" class="interviewMainMod">
        <el-col class="ModTit">
          <h4>专业技能</h4>
        </el-col>
        <el-col class="ModTxt">
          <ul>
            <li>{{ info.skill || '' }}</li>
          </ul>
        </el-col>
      </el-col>
      <el-col :span="24" class="interviewMainMod">
        <el-col class="ModTit">
          <h4>工作经历/项目经历</h4>
        </el-col>
        <el-col class="ModTxt">
          <ul v-for="(item, index) in info.works" :key="index">
            <li>{{ item.begin || '' }}-{{ item.end || '' }} {{ item.corpname || '' }}-{{ item.position || '' }}</li>
            <li>{{ item.desc || '' }}</li>
          </ul>
        </el-col>
      </el-col>
      <el-col :span="24" class="interviewMainMod">
        <el-col class="ModTit">
          <h4>证书或荣誉</h4>
        </el-col>
        <el-col class="ModTxt">
          <ul>
            <li></li>
          </ul>
        </el-col>
      </el-col>
      <el-col :span="24" class="interviewMainMod">
        <el-col class="ModTit">
          <h4>能力证明材料</h4>
        </el-col>
        <el-col class="ModTxt">
          <ul>
            <li></li>
          </ul>
        </el-col>
      </el-col>
      <el-col :span="24" class="interviewMainMod">
        <el-col class="ModTit">
          <h4>个人风采</h4>
        </el-col>
        <el-col class="ModTxt">
          <ul>
            <li></li>
          </ul>
        </el-col>
      </el-col>
      <el-col :span="24" class="interviewMainMod">
        <el-col class="ModTit">
          <h4>自我介绍</h4>
        </el-col>
        <el-col class="ModTxt">
          <ul>
            <li>{{ info.content || '' }}</li>
          </ul>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'context',
  props: {
    info: { type: Object, default: () => {} },
  },
  components: {},
  data: () => ({
    pic: require('@/assets/jianlitupian.png'),
  }),
  created() {},
  computed: {},
  methods: {},
};
</script>

<style lang="less" scoped>
ul {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
  margin: 0;
  padding: 0;
}
p {
  margin: 0;
  padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}
.interviewMainHead {
  padding: 35px 0 15px 0;
}
.headTit {
  width: 489px;
  height: 112px;
}
.headTit-text {
  padding: 5px 0;
}
.text-inline {
  margin-right: 10px;
}
.headName {
  font-size: 24px;
}
.headImg {
  float: right;
  width: 64px;
  height: 112px;
  padding: 20px 0 0 0;
}
.ModTit {
  float: left;
  width: 100px;
}
.ModTit h4 {
  font-size: 18px;
  font-weight: 500;
  color: #333;
  line-height: 27px;
  margin: 0;
}
.ModTxt {
  width: 541px;
  border-top: 12px solid #eee;
  margin: 5px 0 0 0;
  padding: 10px 0 30px;
}
.ModTxt ul {
  overflow: hidden;
}
.interviewMainMod {
  font-size: 14px;
  overflow: hidden;
}
</style>
