<template>
  <div>
    <div class="count-list" v-if="auditData">
      <div class="count-item">全部：{{auditData.countAllStatus}}</div>
      <div class="count-item">审核中：{{auditData.countWaitAudit}}</div>
      <div class="count-item">开放中：{{auditData.countOpen}}</div>
      <div class="count-item">停止招聘：{{auditData.countOffline}}</div>
    </div>
    <div class="content" v-if="auditData && auditData.list">
      <el-table :data="auditData.list" @row-click="clickRow" height="100%" border style="width: 100%">
        <el-table-column prop="id" label="岗位ID" width="70"></el-table-column>
        <el-table-column prop="occupationName" label="职位类型"></el-table-column>
        <el-table-column prop="workTypeName" label="工作方式"></el-table-column>
        <el-table-column label="工作周期">
          <template slot-scope="scope">
            <span>{{scope.row.month}}个月</span>
          </template>
        </el-table-column>
        <el-table-column label="驻场地区">
          <template slot-scope="scope">
            <span>{{scope.row.cityName || '-'}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="salaryName" label="薪酬范围"></el-table-column>
        <el-table-column prop="auditAtFormat" label="发布日期"></el-table-column>
        <el-table-column prop="countApplied" label="已投递" width="70"></el-table-column>
        <el-table-column prop="countTalk" label="沟通中"  width="70"></el-table-column>
        <el-table-column prop="statusName" label="岗位状态"  width="90"></el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <div v-if="scope.row.status==='2'">
              <el-button type="primary" class="btn" @click.stop="handleApproveClick(scope.row.id)">通过</el-button>
              <el-button type="danger" class="btn" @click.stop="handleRejectClick(scope.row.id)">不通过</el-button>
            </div>
            <div v-if="scope.row.status==='3'">
              <el-button type="danger" class="btn" @click.stop="handleRejectClick(scope.row.id)">不通过</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination class="order-footer" background layout="prev, pager, next" :page-size="20" :total="Number(auditData.total)" @current-change="handleCurrentChange"/>
    <el-dialog title="请输入审核不通过的原因" :visible.sync="isDialogShow">
      <el-form :model="form">
        <el-form-item label="">
          <el-input v-model="form.reason"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancleClick()">取 消</el-button>
        <el-button type="primary" @click="handleComfirmClick()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      page: 1,
      auditData: "",
      form: {
        reason: ''
      },
      isDialogShow: false
    };
  },
  mounted() {
    this.getAuditList();
  },
  methods: {
    async getAuditList() {
      const page = this.page;
      const data = {
        page
      };
      let res = await this.$post("/api/admin/recruit/getAuditList", data);
      if (res && res.status === 1) {
        this.auditData = res.data;
        console.log(this.auditData);
      }
    },
    async handleApproveClick(recruitId) {
      const action = 'approve'
      const data = {
        recruitId,
        action
      };
      let res = await this.$post("/api/admin/recruit/audit", data);
      if (res && res.status === 1) {
        console.log(res)
        this.$message({
          message: res.info,
          type: 'success'
        })
        this.getAuditList()
      }
    },
    async handleRejectClick(recruitId) {
      this.recruitId = recruitId
      this.isDialogShow = true
    },
    handleCancleClick() {
      this.form = {
        reason: ''
      }
      this.isDialogShow = false
    },
    async handleComfirmClick() {
      const recruitId = this.recruitId
      const action = 'reject'
      const reason = this.form.reason
      const data = {
        recruitId,
        action,
        reason
      };
      let res = await this.$post("/api/admin/recruit/audit", data);
      if (res && res.status === 1) {
        console.log(res)
        this.$message({
          message: res.info,
          type: 'success'
        })
        this.getAuditList()
      }
      this.form = {
        reason: ''
      }
      this.isDialogShow = false
    },
    handleCurrentChange(val) {
      this.page = val
      this.getAuditList()
    },
    clickRow(row) {
      const id = row.id
      this.$router.push({
        path: "/main/job",
        query: {
          id
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.count-list {
  padding-bottom: 10px;
  display: flex;
  align-items: center;
}

.count-item {
  margin-right: 20px;
  font-size: 16px;
}

.content {
  white-space: nowrap;
  overflow-x: scroll;
  height: calc(100vh - 150px);
}

.btn {
  width: 80px;
}

.order-footer {
  margin-top: 10px;
}
</style>
