<template>
  <div id="mainRight">
    <el-row>
      <el-col class="top" id="list_top">
        <el-col :span="24" class="english">
          {{ newsrightinfo.english }}
        </el-col>
        <el-col :span="24" class="title">
          {{ newsrightinfo.title }}
        </el-col>
      </el-col>
      <el-col :span="24" class="info">
        <el-col :span="24" class="infotop">
          <el-col :span="24" class="newsrightlist" v-for="(item, index) in newsrightlist" :key="index">
            <el-col :span="11" class="image">
              <el-image style="width:348px;height:229px;" :src="item.url"></el-image>
            </el-col>
            <el-col :span="13" class="text">
              <el-col :span="24" class="title" @click.native="$router.push({ name: 'master_detail', params: { type: type, id: item.id } })">
                <p>
                  {{ item.title }}
                </p>
              </el-col>
              <span v-if="type === 'talk'">
                <el-col :span="24" class="time">
                  {{ item.time }}
                </el-col>
                <el-col :span="24" class="content">
                  <p>举办企业： {{ item.corpname }}</p>
                </el-col>
                <el-col :span="24" class="content">
                  <p>主办学校：{{ item.schname }}</p>
                </el-col>
                <el-col :span="24" class="content">
                  <p>举办地址：{{ item.address }}</p>
                </el-col>
              </span>
              <span v-else-if="type === 'jobfair'">
                <el-col :span="24" class="time">
                  <p>举办时间：{{ item.time }}</p>
                </el-col>
                <el-col :span="24" class="content">
                  <p>主办方:{{ item.organizer }}</p>
                </el-col>
                <el-col :span="24" class="content">
                  <p>举办地址：{{ item.address }}</p>
                </el-col>
                <el-col :span="24" class="content">
                  <p>举办城市：{{ item.city }}</p>
                </el-col>
              </span>
              <span v-else>
                <el-col :span="24" class="content">
                  <p>招聘企业：{{ item.corpname }}</p>
                </el-col>
                <el-col :span="24" class="content">
                  <p>招聘学校：{{ item.schname }}</p>
                </el-col>
                <el-col :span="24" class="content">
                  <p>招聘类型：{{ `${item.is_practice}` === '0' ? '全职' : '实习' }}</p>
                </el-col>
              </span>
            </el-col>
          </el-col>
        </el-col>
        <el-col :span="24" class="page">
          <el-pagination @current-change="search" :page-size="4" layout="total, prev, pager, next, jumper" :total="totalRow"> </el-pagination>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'mainRight',
  props: {
    newsrightinfo: null,
    newsrightlist: null,
    totalRow: { type: Number, default: 0 },
    type: null,
  },
  components: {},
  data: () => ({}),
  created() {},
  computed: {},
  methods: {
    search(page) {
      this.$emit('search', page);
    },
  },
};
</script>

<style lang="less" scoped>
p {
  margin: 0;
  padding: 0;
}
.top {
  height: 190px;
  text-align: center;
}
.english {
  font-size: 42px;
  margin-top: 65px;
  color: #3e3c3c;
  text-transform: uppercase;
}
.title {
  font-size: 30px;
  color: #415285;
  font-family: 宋体;
}
.newsrightlist {
  background: #f9f3f3;
  height: 293px;
  overflow: hidden;
}
.newsrightlist:nth-child(2n) {
  background: #fff;
  height: 293px;
  overflow: hidden;
}
.image {
  width: 388px;
  padding: 47px 20px 20px 20px;
}
.text .title p {
  font-size: 28px;
  color: #000;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 47px 100px 0 0;
}
.text .title p:hover {
  color: #415285;
  cursor: pointer;
}
.text .time {
  font-size: 14px;
  padding: 37px 0;
}
.text .content p {
  font-size: 1px;
  color: #9a9494;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 5;
  word-break: break-all;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-height: 20px;
}
.page {
  text-align: center;
  height: 100px;
  padding: 50px 0;
}
</style>
