<template>
  <div id="list">
    <el-row>
      <el-col :span="24" class="topMenu">
        <el-col :span="24">
          <el-breadcrumb separator=">">
            <el-breadcrumb-item :to="{ path: '/' }"><i class="el-icon-s-home"></i><span>网站首页</span></el-breadcrumb-item>
            <el-breadcrumb-item>
              <a href="/"><span>招聘信息</span></a>
            </el-breadcrumb-item>
            <el-breadcrumb-item><span>宣讲会</span></el-breadcrumb-item>
          </el-breadcrumb>
        </el-col>
      </el-col>
      <el-col :span="24" class="search">
        <el-col :span="12">
          <el-input size="mini" placeholder="请输入企业名称" v-model="searchInfo.corpname" @keyup.enter.native="search()">
            <el-button slot="append" icon="el-icon-search" @click="search()"></el-button>
          </el-input>
        </el-col>
        <el-col :span="12">
          &nbsp;
        </el-col>
      </el-col>
      <el-col :span="24" class="list" v-for="(item, index) in list" :key="index">
        <el-col :span="24">
          <el-col :span="3">
            <div class="block">
              <el-avatar shape="square" fit="contain" :size="75" :src="getProp(item, 'corpInfo.logo_url')"></el-avatar>
            </div>
          </el-col>
          <el-col :span="21">
            <el-col :span="24">
              <el-col :span="20" class="title">
                <el-link :underline="false" @click="$router.push({ path: '/jobs/detail', query: { id: item.id } })">
                  {{ item.job_name }}
                </el-link>
              </el-col>
              <el-col :span="4" class="time">
                {{ item.end_date }}
              </el-col>
            </el-col>
            <el-col :span="24" class="corpname">
              招聘企业：<span>{{ item.corpname }}</span>
            </el-col>
            <el-col :span="24">
              <el-col :span="20">
                职位要求：<span>{{ item.city }}/{{ item.xl_req }}/{{ item.job_number }}人</span>
              </el-col>
              <el-col :span="4" class="time">
                <span>{{ item.salary.text }}</span>
              </el-col>
            </el-col>
            <el-col :span="24">
              企业类型：<span>{{ item.category }}</span>
            </el-col>
          </el-col>
        </el-col>
      </el-col>
      <el-col :span="24" class="page">
        <el-pagination @current-change="search" :current-page="currentPage" :page-size="$limit" layout="total, prev, pager, next, jumper" :total="totalRow">
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex';
import _ from 'lodash';
export default {
  name: 'list',
  props: {},
  components: {},
  data: () => ({
    squareUrl: '',
    searchInfo: {},
    currentPage: 1,
    totalRow: 0,
    list: [],
  }),
  created() {
    this.search();
    // console.log(this.$route.params.type === 'official' ? 0 : 1);
  },
  computed: {
    type() {
      return this.$route.params.type === 'official' ? 0 : 1;
    },
  },
  watch: {
    type: 'search',
  },
  methods: {
    ...mapActions(['postOperation', 'corpOperation']),
    async search(page) {
      let skip = 0;
      if (page) {
        skip = (page - 1) * this.$limit;
      }
      let newData = { skip: skip, limit: this.$limit, ...this.searchInfo, is_publish: 1 }; //schid: 99991,
      newData['is_practice'] = this.type;
      let result = await this.postOperation({ type: 'list', data: newData });
      if (`${result.errcode}` === '0') {
        //给this=>vue的实例下在中的list属性，赋予result.data的值
        for (const item of result.data) {
          let corpInfo = await this.getLogo(item.corpid);
          item.corpInfo = corpInfo;
        }
        this.$set(this, `list`, result.data);
        this.$set(this, `totalRow`, result.total);
        // this.$set(this, `loading`);
      } else {
        this.$message.error(result.errmsg ? result.errmsg : 'error');
      }
    },
    async getLogo(corpid) {
      let result = await this.corpOperation({ type: 'component', data: { corpid: corpid } });
      if (`${result.errcode}` === '0') return result.data;
    },
    getProp(data, pos) {
      let res = _.get(data, pos);
      return res;
    },
  },
};
</script>

<style lang="less" scoped>
.topMenu {
  margin: 0 0 10px 0;
}
.search {
  margin: 15px 0;
}
/deep/.search .el-input__inner {
  border: 2px solid #850000;
  border-radius: 0;
}
/deep/.search .el-input-group__append {
  background: #850000;
  border: 2px solid #850000;
  color: #fff;
  border-radius: 0;
}
.list {
  padding: 5px 0;
  border-bottom: 1px dashed #ccc;
}
.list .title .el-link {
  font-size: 20px;
  color: #000;
}
.list .title .el-link:hover {
  color: #850000;
}
.list .time {
  color: #ff0000;
  text-align: right;
}
.list .common {
  padding: 2px 0;
}
.page {
  margin: 10px 0;
  text-align: right;
}
</style>
