<template>
  <div id="index">
    <list-normal>
      <template v-slot:title>
        <el-row>
          <el-col :span="24"> 职位管理<span style="color :#999999; font-size :12px;"></span> </el-col>
        </el-row>
      </template>
      <template v-slot:functionBar>
        <el-col :span="6">
          <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="2">
          <el-button type="info" circle icon="el-icon-search icons" @click="search()"></el-button>
        </el-col>
      </template>
      <template v-slot:addBtn>
        <el-button type="success" icon="el-icon-plus" @click="$router.push('/manager/jobs/detail')">新增</el-button>
      </template>

      <template v-slot:main>
        <!-- <el-row type="flex" justify="end" style="padding:0.5rem">
          <el-col :span="4">
            <el-button type="success" size="small" icon="el-icon-plus" @click="toPublish()">发布职位</el-button>
          </el-col>
        </el-row> -->
        <el-table :data="postList" :border="true" :stripe="true" @select="selectInfo" @select-all="selectInfo">
          <el-table-column align="center" type="selection" width="40"> </el-table-column>
          <el-table-column align="center" type="index" label="序号"></el-table-column>
          <el-table-column align="center" prop="job_name" label="职位名称"></el-table-column>
          <el-table-column align="center" prop="is_practice" label="工作性质" sortable>
            <template v-slot="scoped">
              {{ `${scoped.row.is_practice}` === `0` ? '全职' : '实习' }}
            </template>
          </el-table-column>
          <el-table-column align="center" prop="category" label="职位分类"></el-table-column>
          <el-table-column align="center" prop="xl_req" label="学历要求"></el-table-column>
          <el-table-column align="center" prop="zy_req" label="专业要求"></el-table-column>
          <el-table-column align="center" prop="job_number" label="招聘人数"></el-table-column>
          <el-table-column align="center" prop="end_date" label="截止时间" sortable></el-table-column>
          <el-table-column align="center" label="操作">
            <template v-slot="scope">
              <el-row>
                <el-col :span="24">
                  <!-- <el-button size="mini" type="text" @click="$router.push({ path: '/manager/jobs/resume', query: { id: scope.row.id } })">简历筛选</el-button> -->
                  <el-button size="mini" type="text" @click="$router.push({ path: '/manager/jobs/detail', query: { id: scope.row.id } })">
                    修改
                  </el-button>
                </el-col>
                <el-col :span="24">
                  <el-button v-if="`${scope.row.is_publish}` === '1'" size="mini" type="text" @click="toPublish(scope.row.id, scope.row.is_publish)">
                    取消发布
                  </el-button>
                  <el-button v-else size="mini" type="text" @click="toPublish(scope.row.id, scope.row.is_publish)">
                    发布
                  </el-button>
                  <el-button size="mini" type="text" @click="handleDelete(scope.$index, scope.row)">删除</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="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',
  components: {
    listNormal,
  },
  data: () => ({
    testList: [{ label: '职位类型', value: 1 }, { label: '校招', value: 2 }, { label: '社招', value: 3 }, { label: '实习', value: 4 }],
    select: '',
    searchInfo: {},
    listSelect: [],
    currentPage: 1,
    totalRow: 60,
    postList: [],
  }),
  created() {
    this.search();
  },
  computed: {
    ...mapState(['user']),
  },
  methods: {
    ...mapActions(['postOperation']),
    selectInfo(selection) {
      //选择/全选方法,删除或者其他批量操作使用
      let ids = [];
      selection.map(item => {
        ids.push(item.id);
      });
      this.$set(this, `listSelect`, ids);
    },
    async search(val) {
      let skip = 0;
      if (val) {
        this.currentPage = val;
        skip = (this.currentPage - 1) * this.$limit;
      }
      //1直接拿着参数发送请求
      let result = await this.postOperation({ 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, `postList`, 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.postOperation({ type: 'delete', data: { id: id } });
      if (`${result.errcode}` === '0') {
        this.$message.success('删除成功');
        this.search();
      } else {
        this.$message.error(result.errmsg ? result.errmsg : '删除失败');
      }
    },
    async toPublish(id, state) {
      let result = await this.postOperation({ type: 'update', data: { id: id, info: { is_publish: `${state}` === '0' ? 1 : 0 } } });
      if (`${result.errcode}` === '0') {
        this.$message.success('操作成功');
        this.search();
      } else {
        this.$message.error(result.errmsg ? result.errmsg : '操作失败');
      }
    },
  },
};
</script>

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