<template>
  <div id="index">
    <list-normal>
      <template v-slot:title>
        <el-row>
          <el-col :span="24">
            面试安排
          </el-col>
        </el-row>
      </template>
      <template v-slot:functionBar>
        <el-col :span="6">
          <search v-model="select" type="select" :dataList="testList" placeholder="所有面试类型"></search>
        </el-col>
      </template>
      <template v-slot:addBtn>
        <el-button type="success" icon="el-icon-plus" @click="$router.push('/manager/plan/detail')">新增面试</el-button>
      </template>

      <template v-slot:main>
        <el-table :data="dataList" border :stripe="true">
          <el-table-column align="center" type="index" label="序号" width="50"></el-table-column>
          <el-table-column align="center" prop="time" label="面试日时间" width="200"></el-table-column>
          <el-table-column align="center" prop="person" label="面试人数" width="100"> </el-table-column>
          <el-table-column align="center" prop="type" label="面试类型" width="200">
            <template v-slot="scope">
              <span class="el-icon-s-custom"></span> {{ scope.row.type }}
            </template>
          </el-table-column>
          <el-table-column align="center" prop="status" label="状态" width="100"></el-table-column>
          <el-table-column align="center" prop="message" label="最近通知"></el-table-column>
          <el-table-column align="center" label="操作" width="200">
            <template v-slot="scope">
              <el-row>
                <el-col :span="12">
                  <el-button size="mini" type="text" @click="$router.push('/manager/plan/interview/detail')">查看详情</el-button>
                </el-col>
                <el-col :span="12">
                  <el-button size="mini" type="text" v-popover:pop>通知学生</el-button>
                  <el-popover ref="pop" placement="bottom" width="250" trigger="click" @show="toSendMsg(scope.row)">
                    <el-row style="padding-top: 1rem;">
                      <el-col>
                        <span>请输入信息</span>
                      </el-col>
                      <el-col>
                        <el-input type="textarea" :rows="10" placeholder="请输入信息"></el-input>
                      </el-col>
                    </el-row>
                    <el-row type="flex" justify="center" style="padding-top: 1rem;">
                      <el-button type="success">确认</el-button>
                      <el-button>取消</el-button>
                    </el-row>
                  </el-popover>
                </el-col>
                <el-col :span="12">
                  <el-button size="mini" type="text" @click="$router.push('/manager/plan/notify/record')">通知记录 </el-button>
                </el-col>
              </el-row>
            </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: () => ({
    testList: [
      { label: '所有面试类型', value: 1 },
      { label: '线下面试安排', value: 2 },
      { 学校视频面试: '社招', value: 3 },
      { label: '校园面试', value: 4 },
      { label: '云面试', value: 5 },
    ],
    circleUrl: '',
    dataList: [
      {
        time: '2019年7月2日10:00-11:00',
        person: '1人',
        type: '线下面试安排',
        status: '已过期',
        message: ' ',
      },
    ],
    select: '',
    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);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.search();
    },
    toSendMsg(val) {
      console.log(val);
    },
    handleDelete(val) {
      console.log(val);
    },
  },
};
</script>

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