<template>
  <div id="exportDetails">
    <el-row>
      <el-col :span="24" class="info">
        <el-col :span="24" class="top">
          <el-image :src="beijing"></el-image>
        </el-col>
        <el-col :span="24" class="message">
          <el-col :span="24" class="one">
            <el-image :src="exportInfo.img_path"></el-image>
            <p>
              <span>{{ exportInfo.name }}</span>
              <span>{{ exportInfo.email }}</span>
            </p>
          </el-col>
          <el-col :span="24" class="two">
            <van-tabs v-model="active" type="card" animated>
              <van-tab title="基本资料">
                <el-col :span="24" class="basic">
                  <p>
                    <span>性别</span>
                    <span>{{ exportInfo.gender }}</span>
                  </p>
                  <p>
                    <span>出生年月</span>
                    <span>{{ exportInfo.birthday }}</span>
                  </p>
                  <p>
                    <span>身份证号</span>
                    <span>{{ exportInfo.cardnumber }}</span>
                  </p>

                  <p>
                    <span>电话号码</span>
                    <span>{{ exportInfo.phone }}</span>
                  </p>
                  <p>
                    <span>毕业院校</span>
                    <span>{{ exportInfo.school }}</span>
                  </p>
                  <p>
                    <span>专业</span>
                    <span>{{ exportInfo.major }}</span>
                  </p>
                  <p>
                    <span>学历</span>
                    <span>{{ exportInfo.xl }}</span>
                  </p>
                  <p>
                    <span>学位</span>
                    <span>{{ exportInfo.xw }}</span>
                  </p>
                  <p>
                    <span>地址</span>
                    <span>{{ exportInfo.addr }}</span>
                  </p>
                </el-col>
              </van-tab>
              <van-tab title="技术能力">
                <el-col :span="24" class="basic">
                  <p>
                    <span>从事专业</span>
                    <span>{{ exportInfo.professional }}</span>
                  </p>
                  <p>
                    <span>职称名称</span>
                    <span>{{ exportInfo.levelname }}</span>
                  </p>
                  <p>
                    <span>职称级别</span>
                    <span>{{ exportInfo.level }}</span>
                  </p>
                  <p>
                    <span>职务</span>
                    <span>{{ exportInfo.position }}</span>
                  </p>
                  <p>
                    <span>项目</span>
                    <span>{{ exportInfo.project }}</span>
                  </p>
                  <p>
                    <span>学术成就</span>
                    <span>{{ exportInfo.academic }}</span>
                  </p>
                  <p>
                    <span>论文</span>
                    <span>{{ exportInfo.paper }}</span>
                  </p>
                  <p>
                    <span>备注</span>
                    <span>{{ exportInfo.remark }}</span>
                  </p>
                </el-col>
              </van-tab>
              <van-tab title="个人简介">
                <el-col :span="24" class="resume">
                  <p>{{ exportInfo.resume }}</p>
                </el-col>
              </van-tab>
            </van-tabs>
          </el-col>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  name: 'exportDetails',
  props: {
    exportInfo: null,
  },
  components: {},
  data: function() {
    return {
      beijing: require('@/assets/test1.jpg'),
      active: '1',
    };
  },
  created() {},
  methods: {},
  computed: {
    ...mapState(['user']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped>
.info {
  background: #fff;
  .top {
    height: 150px;
    overflow: hidden;
    .el-image {
      height: 150px;
      overflow: hidden;
    }
  }
  .message {
    position: relative;
    top: -40px;
    padding: 0 15px;
    .one {
      height: 80px;
      height: 80px;
      margin: 0 0 15px 0;

      .el-image {
        float: left;
        width: 80px;
        height: 80px;
        border-radius: 90px;
      }
      p {
        float: left;
        width: 65%;
        font-size: 18px;
        padding: 0 15px;
        span {
          display: inline-block;
          width: 100%;
          padding: 9px 0px;
        }
      }
    }
    .two {
      .basic {
        font-size: 16px;
        color: #000;
        p {
          padding: 0 10px;
          min-height: 40px;
          line-height: 40px;
          border-bottom: 1px dashed #f6f6f6;
          span:first-child {
            display: inline-block;
            width: 25%;
            color: #cccccc;
          }
        }
      }
      .resume {
        font-size: 16px;
        padding: 10px;
        p {
          line-height: 30px;
        }
      }
    }
  }
}
/deep/.van-tabs--card > .van-tabs__wrap {
  height: 40px;
}
/deep/.van-tabs__nav--card {
  height: 40px;
  border: 1px solid #ccc;
  margin: 0;
}
/deep/.van-tabs__nav--card .van-tab {
  color: #666;
}
/deep/.van-tabs__nav--card .van-tab.van-tab--active {
  background: transparent;
  color: #2c69fe;
  font-weight: bold;
}
/deep/.van-tabs__nav--card .van-tab {
  border-right: 1px solid #ccc;
}
</style>
