<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%" border>
              <el-table-column label="简历名称" align="center">
                <template slot-scope="scoped">
                  <el-tooltip effect="dark" content="点击显示详情" placement="left">
                    <el-col :span="24" @click.native="clickDetail(scoped.row)">{{ scoped.row.title }}</el-col>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="姓名" align="center"> </el-table-column>
              <el-table-column prop="gender" label="性别" align="center"> </el-table-column>
              <el-table-column prop="nation" label="民族" align="center"> </el-table-column>
              <el-table-column prop="birth" label="出生年月" align="center"> </el-table-column>
              <el-table-column prop="marital" label="婚姻状况" align="center">
                <template v-slot="scoped">
                  {{ `${scoped.row.marital}` === `0` ? '未婚' : '已婚' }}
                </template>
              </el-table-column>
              <el-table-column prop="education" label="学历" align="center"> </el-table-column>
              <el-table-column prop="phone" 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 label="招聘信息名称" align="center">
                <template slot-scope="scoped">
                  <el-tooltip effect="dark" content="点击显示详情" placement="left">
                    <el-col :span="24" @click.native="clickDetailgz(scoped.row)">{{ scoped.row.name }}</el-col>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column prop="profession" label="公司名称" align="center"> </el-table-column>
              <el-table-column prop="workplace" label="工作地点" align="center"> </el-table-column>
              <el-table-column prop="workexp" label="工作经验" align="center"> </el-table-column>
              <el-table-column prop="people_number" label="招聘人数" align="center"> </el-table-column>
              <el-table-column prop="education" label="学历" align="center"> </el-table-column>
              <el-table-column prop="job_nature" label="工作性质" align="center">
                <template v-slot="scoped">
                  {{ `${scoped.row.job_nature}` === `0` ? '兼职' : '全职' }}
                </template>
              </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 label="姓名" align="center">
                <template slot-scope="scoped">
                  <el-tooltip effect="dark" content="点击显示详情" placement="left">
                    <el-col :span="24" @click.native="clickDetailzj(scoped.row)">{{ scoped.row.name }}</el-col>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column prop="gender" label="性别" align="center"> </el-table-column>
              <el-table-column prop="nation" label="民族" align="center"> </el-table-column>
              <el-table-column prop="birth" label="出生年月" align="center"> </el-table-column>
              <el-table-column prop="eduback" label="学历" align="center"> </el-table-column>
              <el-table-column prop="school" label="毕业院校" align="center"> </el-table-column>
              <el-table-column prop="position" 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 label="名称" align="center">
                <template slot-scope="scoped">
                  <el-tooltip effect="dark" content="点击显示详情" placement="left">
                    <el-col :span="24" @click.native="clickDetailcm(scoped.row)">{{ scoped.row.name }}</el-col>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column prop="infotype" label="信息类型" align="center"> </el-table-column>
              <el-table-column prop="user_name" label="发布人" align="center"> </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="找合作" name="fifth" @click.native="hezuoClick()">
            <!-- <el-carousel height="360px">
              <el-carousel-item @click.native="$router.push({ path: '/supermaket/supermarket' })">
                <p class="title textOver">找合作</p>
              </el-carousel-item>
            </el-carousel> -->
          </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) {
      if (event.toElement.innerHTML === '找合作') {
        this.$router.push({ path: '/supermaket/supermarket' });
      }
    },
    clickDetail(row) {
      this.$emit('detail', { data: row });
    },
    clickDetailgz(row) {
      this.$emit('detailgz', { data: row });
    },

    clickDetailzj(row) {
      this.$emit('detailzj', { data: row });
    },
    clickDetailcm(row) {
      this.$emit('detailcm', { data: row });
    },
    hezuoClick() {
      console.log('gengxun');
    },
  },
};
</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>
