<template>
  <div id="index">
    <list-normal>
      <template v-slot:title>
        <!-- 此处v-slot:title后可以加="data",data代表将slot传来的参数再次封装后的key=>{data:params}(data可以随意替换),
        也就是说,想取到最后的数据集,我们需要解开1层object,(template声明的名称).(slot :xxx绑定名称的 xxx)才能取到数据 -->
        <!-- 当然,我们现在没涉及用上述功能,只是就想搞明白而已╮(╯▽╰)╭ -->
        <!-- 如果组件文件夹下的needOrNot文件夹的组件可以使用,那么这部分就应该需要理解了,因为操作按钮部分是需要自己写 -->
        邀约记录
      </template>
      <template v-slot:functionBar>
        <el-col :span="5">
          <search v-model="select" type="select" placeholder="邀约状态"></search>
        </el-col>
        <el-col :span="6">
          <search v-model="input" placeholder="请输入姓名或专业名称"></search>
        </el-col>
        <el-col :span="2">
          <el-button type="info" circle icon="el-icon-search icons"></el-button>
        </el-col>
      </template>
      <template v-slot:main>
        <el-table :data="dataList" stripe border style="width: 100%">
          <el-table-column type="index" align="center" prop="num" label="序号" width="50"> </el-table-column>
          <el-table-column align="center" prop="picture" label="头像">
            <div class="demo-basic--circle">
              <div class="block"><el-avatar :size="80" :src="circleUrl"></el-avatar></div>
            </div>
          </el-table-column>
          <el-table-column prop="date" label="基本信息">
            <el-row>
              <el-col :span="24">
                <!-- 链接简历模块 -->
                <el-button type="text">姓名</el-button>
              </el-col>
              <el-col :span="24">
                性别
              </el-col>
              <el-col :span="24">
                毕业学校
              </el-col>
            </el-row>
          </el-table-column>
          <el-table-column prop="name" label="邀约职位">
            <!-- 链接到职位详情 -->
            <el-row><el-button type="text">职业</el-button></el-row>
          </el-table-column>
          <el-table-column prop="date" align="center" label="邀约时间"></el-table-column>
          <el-table-column prop="date" align="center" label="状态">
            <template v-slot="scope">
              已忽略
            </template>
          </el-table-column>
          <el-table-column align="center" prop="address" label="操作">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">查看简历</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-row class="row_pagination">
          <el-col :span="24">
            <el-pagination
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-size="15"
              layout="total, prev, pager, next, jumper"
              :total="totalRow"
            >
            </el-pagination>
          </el-col>
        </el-row>
      </template>
    </list-normal>
  </div>
</template>

<script>
import search from '@/components/search.vue';
import listNormal from '@/layout/list-normal.vue';
import _ from 'lodash';
import { mapActions, mapState } from 'vuex';
export default {
  name: 'index',
  components: {
    listNormal,
    search,
  },
  data: () => ({
    dataList: [],
    select: '',
    circleUrl: '',
    sizeList: '',
    input: '',
    listSelect: [],
    currentPage: 1,
    totalRow: 60,
  }),
  created() {
    this.search();
  },
  methods: {
    ...mapActions(['getList']),
    test() {
      console.log('in function:');
    },
    async search(val) {
      let skip = 0;
      if (val) {
        this.currentPage = val;
        skip = (this.currentPage - 1) * this.$limit;
      }
      let result = await this.getList();
      this.$set(this, `dataList`, result);
    },
    selectInfo(selection) {
      //选择/全选方法,删除或者其他批量操作使用
      let ids = [];
      selection.map(item => {
        ids.push(item.id);
      });
      this.$set(this, `listSelect`, ids);
      console.log(ids);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.search();
    },
  },
};
</script>

<style lang="less" scoped>
.row_pagination {
  text-align: right;
  margin-top: 1rem;
}
.icons {
  zoom: 2;
  position: relative;
  top: 0.5rem;
}
</style>
