<template>
  <div id="mainInfo">
    <el-row>
      <el-col :span="24" class="info">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="找人才" name="first">
            <el-table :data="rencaiData" stripe style="width: 100%">
              <el-table-column prop="title" label="简历名称" align="center"> </el-table-column>
              <el-table-column prop="name" label="姓名" align="center"> </el-table-column>
              <el-table-column prop="sex" label="性别" align="center"> </el-table-column>
              <el-table-column prop="age" label="年龄" align="center"> </el-table-column>
              <el-table-column prop="jingyan" label="工作经验" align="center"> </el-table-column>
              <el-table-column prop="edu" label="学历" align="center"> </el-table-column>
              <el-table-column prop="jobs" label="期望职位" align="center"> </el-table-column>
              <el-table-column prop="date" label="更新时间" align="center"> </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="找工作" name="second">
            <el-table :data="jobsData" stripe style="width: 100%">
              <el-table-column prop="title" label="招聘信息名称" align="center"> </el-table-column>
              <el-table-column prop="company" label="公司名称" align="center"> </el-table-column>
              <el-table-column prop="address" label="工作地点" align="center"> </el-table-column>
              <el-table-column prop="jingyan" label="工作经验" align="center"> </el-table-column>
              <el-table-column prop="num" label="招聘人数" align="center"> </el-table-column>
              <el-table-column prop="edu" label="学历" align="center"> </el-table-column>
              <el-table-column prop="xinzi" label="职位月薪" align="center"> </el-table-column>
              <el-table-column prop="date" label="发布时间" align="center"> </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="找专家" name="third">
            <el-table :data="zhuanjiaData" stripe style="width: 100%">
              <el-table-column prop="name" label="姓名" align="center"> </el-table-column>
              <el-table-column prop="sex" label="性别" align="center"> </el-table-column>
              <el-table-column prop="age" label="年龄" align="center"> </el-table-column>
              <el-table-column prop="zhicheng" label="职称" align="center"> </el-table-column>
              <el-table-column prop="zhiwu" label="职务" align="center"> </el-table-column>
              <el-table-column prop="lingyu" label="可咨询领域" align="center"> </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="找参谋" name="fourth">
            <el-table :data="canmoData" stripe style="width: 100%">
              <el-table-column prop="name" label="名称" align="center"> </el-table-column>
              <el-table-column prop="type" label="信息类型" align="center"> </el-table-column>
              <el-table-column prop="person" label="发布人" align="center"> </el-table-column>
              <el-table-column prop="date" label="发布时间" align="center"> </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="找合作" name="fifth">找合作</el-tab-pane>
        </el-tabs>
        <el-col :span="24" class="more">
          <el-link><el-image :src="more"></el-image></el-link>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'mainInfo',
  props: {
    rencaiData: null,
    jobsData: null,
    zhuanjiaData: null,
    canmoData: null,
  },
  components: {},
  data: () => ({
    activeName: 'first',
    more: require('@/assets/更多.png'),
  }),
  created() {},
  computed: {},
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>

<style lang="less" scoped>
.info {
  height: 360px;
  padding: 20px;
  overflow: hidden;
}
/deep/.el-tabs--card > .el-tabs__header {
  margin: 0;
  border-bottom: none;
}
/deep/.el-tabs--card > .el-tabs__header .el-tabs__nav {
  border: none;
}
/deep/.el-tabs--card > .el-tabs__header .el-tabs__item {
  border-bottom: none;
  border-left: none;
}
/deep/.el-tabs__item {
  font-size: 22px;
  font-weight: bold;
  height: 30px;
  line-height: 30px;
  margin: 0 0 10px 0;
  padding: 0 20px 0 0;
}
/deep/.el-tabs--top.el-tabs--card > .el-tabs__header .el-tabs__item:nth-child(2) {
  padding-left: 0;
}
/deep/.el-tabs__item.is-active {
  color: #22529a;
}
/deep/.el-tabs__item:hover {
  color: #22529a;
  cursor: pointer;
}
.more {
  position: absolute;
  top: 20px;
  right: 20px;
  text-align: right;
  height: 30px;
  padding: 5px 0 0 0;
}
/deep/.el-table td {
  padding: 8px 0;
}
/deep/.el-table th {
  padding: 8px 0;
  background-color: #f5f4f4;
}
/deep/ .el-table th.is-leaf {
  border-bottom: none;
  color: #000;
}
/deep/.el-table td {
  border-bottom: none;
}
</style>
