<template>
  <div id="web-jobs">
    <el-row>
      <el-col :span="24" class="webMessage" v-if="title">
        {{ title }}
      </el-col>
    </el-row>
    <span v-if="list.length > 0">
      <el-row class="rowStyle" v-for="(item, index) in list" :key="index" :gutter="10">
        <el-col :span="16">
          <el-link class="job__name" :underline="false" @click="turnToJobs(item.id)">
            <span title="查看职位">{{ item.job_name ? item.job_name : '广东省德庆县2019年引进高层次紧缺人才公告' }}</span>
          </el-link>
        </el-col>
        <el-col class="money" :span="4">
          {{ item.salary ? item.salary.text : '5K-10K/月' }}
        </el-col>
        <el-col :span="4">
          {{ item.num ? item.num : '13人' }}
        </el-col>
        <el-col :span="16"> 招聘专业 : {{ item.subject ? item.subject : '法学，经济学，人文地理与城乡规划，环境科学，劳动与社会保障' }} </el-col>
        <el-col :span="8"> {{ item.edu ? item.edu : '本科及以上' }} | {{ item.city ? item.city : '肇庆市' }} </el-col>
      </el-row>
      <el-row v-if="!type">
        <el-col :span="24" style="text-align:center">
          <el-pagination @current-change="search" :current-page="currentPage" :page-size="$limit" layout="total, prev, pager, next" :total="totalRow">
          </el-pagination>
        </el-col>
      </el-row>
    </span>
  </div>
</template>

<script>
import _ from 'lodash';
export default {
  name: 'web-jobs',
  props: {
    title: null,
    info: null,
    type: null,
    origin: null,
  },
  data: () => ({
    list: {},
    currentPage: 1,
    totalRow: 0,
  }),
  created() {
    if (!this.type) this.search();
  },
  watch: {
    info: {
      handler(val) {
        if (!this.type) this.dataPro();
        else this.$set(this, `list`, this.info);
      },
    },
  },
  methods: {
    turnToJobs(id) {
      let query = {};
      if (this.origin) query.origin = this.origin;
      if (this.type) query.type = this.type;
      query.id = id;
      this.$router.push({ path: '/jobs/detail', query: query });
    },
    search(page) {
      let skip = 0;
      if (page) {
        skip = (page - 1) * this.$limit;
      }
      let query = { skip: skip, limit: this.$limit };
      this.$emit('search', query);
    },
    dataPro() {
      this.$set(this, `totalRow`, this.info.total);
      this.$set(this, `list`, this.info.data);
    },
  },
};
</script>

<style lang="less" scoped>
.webMessage {
  border-left: 3px solid #850000;
  font-size: 16px;
  line-height: 30px;
  height: 30px;
  padding: 0 15px;
  margin: 0 0 0 -15px;
}
.rowStyle {
  border-bottom: 1px dashed #ddd;
  padding: 1rem 1.5rem;
  .el-col {
    font-size: 0.9rem;
    line-height: 2rem;
  }
  .job__name {
    font-size: 1rem;
    color: #850000;
  }
  .money {
    color: #ff9900;
  }
}
</style>
