<template>
  <div id="resume">
    <div class="w_0100 resume">
      <div class="w_1200">
        <el-row class="resumeTxt">
          <el-col :span="24" class="resumeMain">
            <!-- <el-col :span="24" class="resumeMainTop">
              <el-col>
                <img src="http://pic.bibibi.net/school/1460284850-8033.jpg@1e_80w_80h_1c_0i_1o_90Q_1x.png" width="60px" height="60" />
              </el-col>
              <p>长春大学</p>
            </el-col> -->
            <el-col :span="24" class="resumeMainHead">
              <el-col :span="20" class="resumeMainHeadTxt">
                <p class="bi-text">
                  <span class="bi-inline user-name">{{ info.info.xm }}</span>
                  <span class="bi-inline">{{ info.info.xb }}</span>
                  <span class="bi-inline">
                    {{ info.profile }}
                  </span>
                  <span class="label label-success">已认证毕业生</span>
                </p>
                <p class="bi-text">
                  <span class="bi-inline">籍贯：{{ info.info.syszd }}</span>
                  <span class="bi-inline">专业：{{ info.info.zy }}</span>
                  <span class="bi-inline">学校：{{ info.info.yx }}</span>
                </p>
                <p class="bi-text">
                  <span class="bi-inline"></span>
                  <span class="bi-inline"></span>
                </p>
              </el-col>
              <el-col :span="4" class="resumeMainHeadImg">
                <img :src="info.avatar_url" style="max-height: 120px" width="100" height="100" />
              </el-col>
            </el-col>
            <el-col :span="24" class="resumeMainMod">
              <el-col :span="3" class="resumeMainModSide">
                <h4 class="sideTit">求职意向</h4>
              </el-col>
              <el-col :span="21" class="sideMain">
                <ul>
                  <li><span style="font-weight: bold;">期望职业：</span>{{ info.expect.job }}</li>
                  <li><span style="font-weight: bold;">期望薪资：</span>{{ info.expect.salary }}</li>
                  <li>
                    <span style="font-weight: bold;">期望城市：</span>
                    {{ info.expect.city }}
                  </li>
                </ul>
              </el-col>
            </el-col>
            <el-col :span="24" class="resumeMainMod">
              <el-col :span="3" class="resumeMainModSide">
                <h4 class="sideTit">教育经历</h4>
              </el-col>
              <el-col :span="21" class="sideMain">
                <p class="sideMain-p" v-for="(item, index) in info.educations" :key="index">
                  <span class="sideMain-inline"> {{ item.rxsj }}&nbsp;-&nbsp;{{ item.bysj }} </span>
                  <span class="sideMain-inline">{{ item.yx }}-</span>
                  <span class="sideMain-inline">{{ item.fy }}-</span>
                  <span class="sideMain-inline">{{ item.zy }}-</span>
                  <span class="sideMain-inline">{{ item.xl }}</span>
                </p>
              </el-col>
            </el-col>
            <el-col :span="24" class="resumeMainMod">
              <el-col :span="3" class="resumeMainModSide">
                <h4 class="sideTit">专业技能</h4>
              </el-col>
              <el-col :span="21" class="sideMain">
                <div class="sideMain-list">
                  <span class="sideMain-item" v-for="(item, index) in skillPro(info.skill)" :key="index">{{ item }}</span>
                </div>
              </el-col>
            </el-col>
            <el-col :span="24" class="resumeMainMod">
              <el-col :span="3" class="resumeMainModSide">
                <h4 class="sideTit">工作经历/项目经历</h4>
              </el-col>
              <el-col :span="21" class="sideMain">
                <ul v-for="(item, index) in info.works" :key="index">
                  <li class="sideMainLi">
                    <p class="sideMain-p">{{ item.begin }} - {{ item.end }}</p>
                    <p class="sideMain-p">
                      <span class="sideMain-inline">
                        {{ item.corpname }}
                      </span>
                      <span class="sideMain-inline">{{ item.position }}</span>
                    </p>
                  </li>
                </ul>
              </el-col>
            </el-col>
            <el-col :span="24" class="resumeMainMod">
              <el-col :span="3" class="resumeMainModSide">
                <h4 class="sideTit">证书或荣誉</h4>
              </el-col>
              <el-col :span="21" class="sideMain">
                <div class="sideMain-list">
                  <span class="sideMain-item" v-for="item in info.honors" :key="item.name">{{ item.name }}</span>
                  <span class="sideMain-item" v-for="item in info.abilities" :key="item.name">{{ item.name }}</span>
                </div>
              </el-col>
            </el-col>
            <el-col :span="24" class="resumeMainMod">
              <el-col :span="3" class="resumeMainModSide">
                <h4 class="sideTit">自我介绍</h4>
              </el-col>
              <el-col :span="21" class="sideMain">
                <p class="sideMain-p" v-html="info.content"></p>
              </el-col>
            </el-col>
          </el-col>
          <!-- <el-col :span="4" class="resumeBtn">
            <el-col>
              <img width="120" height="120" src="http://static.bibibi.net/frontend/public/images/other/s-yxqqnn0100000011.png" />
            </el-col>
            <el-button type="success">
              <a href="" style="color: #fff;">
                邀约
                <br />
                <br />
                今日剩余10次
                <br />
                请谨慎选择
              </a>
            </el-button>
            <el-button type="success">
              <a href="" style="color: #fff;">成长档案</a>
            </el-button>
          </el-col> -->
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'resume',
  props: {
    info: { type: Object, default: () => {} },
  },
  components: {},
  data: () => ({}),
  created() {},
  // mounted() {
  //   console.log('in function:');
  // },
  // watch:{
  //   info:{
  //     handler(val){
  //       console.log('in function:watch');
  //     }
  //   }
  // },
  computed: {},
  methods: {
    skillPro(data) {
      let arr = data.split(';');
      return arr;
    },
  },
};
</script>

<style lang="less" scoped>
.w_0100 {
  float: left;
  width: 100%;
}
.w_1200 {
  margin: 0 auto;
  width: 1200px;
}
p {
  margin: 0;
  padding: 0;
}
img {
  max-height: 100%;
  max-width: 100%;
}
ul {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
}
.resume {
  float: left;
  width: 100%;
  height: 68rem;
  background: #e7e8eb;
}
.resumeTxt {
  width: 800px;
  margin: 0 auto;
  background: #fff;
  position: relative;
}
.resumeMain {
  position: absolute;
  width: 800px;
  padding: 0 30px;
  margin: 36px 0 0 0;
  background-color: #fff;
  border: 1px solid #d9dadc;
}
.resumeBtn {
  position: fixed;
  top: 38px;
  left: 50%;
  margin: 0 0 0 420px;
  width: 120px;
  height: 170px;
}
.resumeMainTop {
  overflow: hidden;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

.resumeMainTop .el-col {
  width: 60px;
  height: 80px;
  padding: 10px 0;
}
.resumeMainTop p {
  float: left;
  font-size: 18px;
  height: 80px;
  line-height: 80px;
  margin-left: 20px;
  color: #333;
}
.resumeMainHead {
  padding: 35px 0 15px;
}

.resumeMainHeadTxt {
  font-size: 14px;
}
.resumeMainHeadTxt .bi-text {
  padding: 5px 0;
}
.resumeMainHeadTxt .bi-text .bi-inline {
  margin-right: 10px;
}
.resumeMainHeadTxt .bi-text .user-name {
  font-size: 24px;
}
.resumeMainHeadTxt .bi-text .label {
  display: inline;
  padding: 0.2em 0.6em 0.3em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25em;
}
.resumeMainHeadTxt .bi-text .label-success {
  background-color: #5cb85c;
}
.resumeMainHeadImg {
  float: right;
  height: 100px;
  width: 100px;
  display: table;
}

.resumeMainMod {
  font-size: 14px;
  overflow: hidden;
}
.resumeMainModSide {
  float: left;
}
.sideTit {
  font-size: 18px;
  margin: 0;
  color: #333;
  font-weight: 500;
}
.sideMain {
  border-top: 12px solid #eee;
  margin: 5px 0 0 0px;
  padding: 10px 0 30px;
}
.sideMain ul {
  overflow: hidden;
}
.sideMain ul li {
  float: left;
  width: 100%;
  margin-right: 2%;
  /*height: 30px;*/
  line-height: 30px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.sideMain .sideMainLi {
  border-bottom: 1px dashed #eee;
  padding: 10px 0;
}
.sideMain-list {
  margin-top: 10px;
}
.sideMain-list .sideMain-item {
  margin: 0 10px 5px 0;
  color: white;
  background-color: #a7a5a5;
  padding: 2px 5px;
  border-radius: 5px;
}
.resumeBtn .el-button {
  width: 120px;
  padding: 10px 16px;
  margin: 9px 0 0;
  font-size: 15px;
  margin-top: 5px;
}
</style>
