<template>
  <div id="list">
    <el-row>
      <el-col :span="1"><i class="el-icon-s-home"></i></el-col>
      <el-col :span="23" style="margin-top:0.3rem">
        <el-breadcrumb separator=">">
          <el-breadcrumb-item :to="{ path: '/' }"><span style="color:#666666">网站首页</span></el-breadcrumb-item>
          <el-breadcrumb-item>
            <a href="/"><span style="color:#666666">招聘信息</span></a>
          </el-breadcrumb-item>
          <el-breadcrumb-item><span style="color:#999999">宣讲会</span></el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" style="margin-top: 1rem; width:50%">
        <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-row>
    <el-row class="rowstyle" v-for="(item, index) in list" :key="index">
      <!-- <el-col :span="3">
        <div class="demo-basic--circle">
          <div class="block"><el-avatar shape="square" :size="75" :src="squareUrl"></el-avatar></div>
        </div>
      </el-col> -->
      <el-col :span="21" type="flex" justify="start">
        <el-row>
          <el-col :span="18">
            <el-link style="color:#850000 " @click="$router.push({ path: '/talk/detail', query: { id: item.id } })">
              <!-- 敏实集团2020届实习生招聘 -->{{ item.title }}
            </el-link>
          </el-col>
          <!-- <el-col :span="6" style="text-align:center">
            <span style="color:red;"></span>
          </el-col> -->
        </el-row>
        <el-row>
          <el-col :span="10">
            <span class="el-icon-office-building"></span>
            举办企业:
            <span style="color:#606266">{{ item.corpname }}</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <span class="el-icon-school"></span>
            学校:
            <span style="color:#606266">{{ item.schname }}</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <span class="el-icon-location"></span>
            地点:
            <span style="color:#606266">{{ item.address }}</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <span class="el-icon-time"></span>
            举办时间:
            <span style="color:#ff4400">{{ item.date }} {{ item.time }}</span>
          </el-col>
        </el-row>
        <!-- <el-row>
          <el-col :offset="10" :span="10"><span style="color:#606266">制造业</span></el-col>
          <el-col :span="4" style="color:#606266"><i class="el-icon-view">3722 </i></el-col>
        </el-row> -->
      </el-col>
    </el-row>
    <el-row style="margin-top:1rem;" type="flex" justify="end">
      <el-pagination @current-change="search" :current-page="currentPage" :page-size="$limit" layout="total, prev, pager, next, jumper" :total="totalRow">
      </el-pagination>
    </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();
  },
  computed: {
    type() {
      return this.$route.params.type;
    },
    date() {
      return this.$route.query.date;
    },
  },
  watch: {
    type: 'search',
    date: 'search',
  },
  methods: {
    ...mapActions(['postTalksInfo']),
    async search(page) {
      let skip = 0;
      if (page && _.isNumber(page)) {
        skip = (page - 1) * this.$limit;
      }
      if (this.date) {
        this.searchInfo['date'] = this.date;
      }
      let newData = { skip: skip, limit: this.$limit, ...this.searchInfo };
      this.type === 'in' ? (newData['schid'] = this.$site) : '';
      let result = await this.postTalksInfo({ type: 'list', data: newData });
      if (`${result.errcode}` === '0') {
        //给this=>vue的实例下在中的list属性，赋予result。data的值
        this.$set(this, 'list', result.data);
        this.$set(this, `totalRow`, result.total);
      } else {
        this.$message.error(result.errmsg ? result.errmsg : 'error');
      }
    },
  },
};
</script>

<style lang="less" scoped>
.rowstyle {
  border-bottom-style: solid;
  border-width: 1px;
  border-color: #ebeef5;
  font-size: small;
  padding: 1rem 0;
}
</style>
