<template>
  <div id="index">
    <list-normal>
      <template v-slot:title>
        在线招聘
      </template>
      <template #functionBar>
        <el-col :span="5" class="searchInput">
          <el-select v-model="searchInfo.is_practice" placeholder="选择招聘类型">
            <el-option label="全部类型" :value="undefined"></el-option>
            <el-option label="全职" :value="0"></el-option>
            <el-option label="实习" :value="1"></el-option>
          </el-select>
        </el-col>
        <el-col :span="5" class="searchInput">
          <el-select v-model="searchInfo.status" placeholder="选择审核状态">
            <el-option label="全部类型" :value="undefined"></el-option>
            <el-option label="未审核" value="0"></el-option>
            <el-option label="审核通过" value="1"></el-option>
            <el-option label="审核失败" value="2"></el-option>
          </el-select>
        </el-col>
        <el-col :span="2">
          <el-button type="info" circle icon="el-icon-search icons" @click="search()"></el-button>
        </el-col>
      </template>
      <template #addBtn>
        <el-col>
          <el-button type="success" icon="el-icon-plus" @click="$router.push('/jobs/jobinfo/detail')">新增</el-button>
        </el-col>
      </template>
      <template #main>
        <el-row class="profileLi">
          <el-table :data="PostInfos" style="width: 100%" border>
            <el-table-column align="center" label="序号" type="index" width="50"> </el-table-column>
            <el-table-column align="center" label="招聘标题" prop="title" width="180"> </el-table-column>
            <el-table-column align="center" label="招聘类型" prop="is_practice" width="180" sortable>
              <template v-slot="scoped">
                {{ `${scoped.row.is_practice}` === `0` ? '全职招聘' : '实习招聘' }}
              </template>
            </el-table-column>
            <el-table-column prop="status" align="center" label="状态" sortable>
              <template v-slot="scoped">
                {{ `${scoped.row.status}` === '0' ? '未审核' : `${scoped.row.status}` === '1' ? '审核通过' : '审核失败' }}
              </template>
            </el-table-column>
            <el-table-column prop="is_submit" align="center" label="类型" sortable>
              <template v-slot="scoped">
                {{ `${scoped.row.is_submit}` === '0' ? '草稿' : '已发布' }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作">
              <template v-slot="scoped">
                <el-button size="mini" @click="$router.push({ path: '/jobs/jobinfo/detail', query: { id: scoped.row.id } })">修改</el-button>
                <el-button size="mini" type="danger" @click="handleDelete(scoped.$index, scoped.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
        <el-row class="row_pagination">
          <el-col :span="24">
            <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>
      </template>
    </list-normal>
  </div>
</template>

<script>
import listNormal from '@/layout/list-normal.vue';
import _ from 'lodash';
import { mapActions, mapState } from 'vuex';
export default {
  name: 'index',
  props: {},
  components: {
    listNormal,
  },
  data: () => ({
    searchInfo: {},
    currentPage: 1,
    totalRow: 60,
    PostInfos: [],
  }),
  created() {
    this.search();
  },
  computed: {
    ...mapState(['user']),
  },
  methods: {
    ...mapActions(['jobinfoOperation']),
    async search(val) {
      let skip = 0;
      if (val) {
        this.currentPage = val;
        skip = (this.currentPage - 1) * this.$limit;
      }
      let result = await this.jobinfoOperation({
        type: 'list',
        data: { corpid: this.user.corpid, skip: skip, limit: this.$limit, ...this.searchInfo },
      });
      if (`${result.errcode}` === '0') {
        //给this=>vue的实例下在中的list属性，赋予result。data的值
        this.$set(this, 'PostInfos', result.data);
        this.$set(this, `totalRow`, result.total);
      } else {
        this.$message.error(result.errmsg ? result.errmsg : 'error');
      }
    },
    async handleDelete(index, item) {
      this.$confirm('是否删除该招聘简章?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.toDelete(item.id);
        })
        .catch(() => {});
    },
    async toDelete(id) {
      let result = await this.jobinfoOperation({ type: 'delete', data: { id: id } });
      if (`${result.errcode}` === '0') {
        this.$message.success('删除成功');
        this.search();
      } else {
        this.$message.error(result.errmsg ? result.errmsg : '删除失败');
      }
    },
  },
};
</script>

<style lang="less" scoped>
.distance30 {
  margin-top: 1.9rem;
}
.title_space {
  margin: 0.9rem 0;
  font-size: 1rem;
}
.distance10 {
  margin-top: 0.62rem;
}
.down30 {
  margin-bottom: 1.9rem;
}
.top_down10 {
  margin: 1rem 0;
}
li {
  list-style: none;
}
p {
  margin: 0;
  padding: 0;
}
.tit h4 {
  color: #333;
  font-size: 16px;
  font-weight: 500;
}
.search {
  width: 100%;
  float: left;
  height: 33px;
  margin-bottom: 10px;
  color: #333;
  font-size: 15px;
  margin-bottom: 10px;
}
/deep/.searchInput .el-input__inner {
  height: 33px;
  line-height: 33px;
  border: 1px solid #ccc;
  border-radius: 0px;
}
/deep/.searchBtn .el-button {
  width: 35px;
  height: 33px;
  border: 1px solid #ccc;
  border-radius: 0px;
  padding: 6px 7px;
  color: #555555;
  font-weight: bold;
  font-size: 15px;
  background-color: #eeeeee;
}
.add {
  float: right;
  width: 69px;
  height: 34px;
}
.add .el-button {
  float: right;
  padding: 0;
  width: 69px;
  height: 34p;
  height: 34px;
  text-align: center;
  background: #44b549;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
}
/deep/.el-button--mini {
  border: none;
  color: #337ab7;
  padding: 0;
}
/deep/.el-button--danger {
  background: none;
}
</style>
