<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="姓名" prop="nickname">
        <el-input
          clearable
          v-model="queryParams.nickname"
          placeholder="根据姓名查询"
        ></el-input>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="试用状态">
          <el-option label="试用中" value="0"></el-option>
          <el-option label="待审核" value="1"></el-option>
          <el-option label="已转正" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="部门" prop="deptId">
        <el-select
          v-model="queryParams.deptId"
          placeholder="选择部门"
          clearable
        >
          <el-option
            v-for="dept in deptOptions"
            :key="dept.deptId"
            :label="dept.deptName"
            :value="dept.deptId"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-check"
          size="mini"
          @click="handleBatchRegular"
          :disabled="multiple"
        >批量转正</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="probationList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="序号" align="center" type="index"/>
      <el-table-column label="姓名" align="center" prop="nickName"/>
      <el-table-column label="性别" align="center" prop="sex">
        <template slot-scope="scope">
          <span>{{ scope.row.sex === '0' ? '男' : '女' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="部门" align="center" prop="dept.deptName"/>
      <el-table-column label="试用期限" align="center" width="200">
        <template slot-scope="scope">
          <div>{{ scope.row.probationStart }} ~ {{ scope.row.probationEnd }}</div>
          <el-tag :type="getRemainingDaysStatus(scope.row.remainingDays)">
            剩余{{ scope.row.remainingDays }}天
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center">
        <template slot-scope="scope">
          <el-tag :type="statusMap[scope.row.status].type">
            {{ statusMap[scope.row.status].label }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="180" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleRegular(scope.row)"
            v-if="scope.row.status === '0'"
          >转正</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleDetail(scope.row)"
          >详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 转正对话框 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="500px">
      <el-form :model="form" label-width="80px">
        <el-form-item label="生效日期">
          <el-date-picker
            v-model="form.effectiveDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择转正日期"
          />
        </el-form-item>
        <el-form-item label="转正意见">
          <el-input
            type="textarea"
            :rows="4"
            v-model="form.remark"
            placeholder="请输入转正意见"
          />
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitRegular">确认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import { getProbationList, batchRegular } from '@/api/hr/probation'

export default {
  name: 'ProbationManage',
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        nickname: '',
        status: '',
        deptId: null
      },
      statusMap: {
        '0': { label: '试用中', type: 'warning' },
        '1': { label: '待审核', type: 'info' },
        '2': { label: '已转正', type: 'success' }
      },
      probationList: [],
      deptOptions: [],
      multiple: true,
      dialogVisible: false,
      dialogTitle: '',
      form: {
        userIds: [],
        effectiveDate: '',
        remark: ''
      }
    }
  },
  methods: {
    getList() {
      // getProbationList(this.queryParams).then(res => {
      //   this.probationList = res.rows
      //   this.total = res.total
      // })
    },
    handleRegular(row) {
      this.form = {
        userIds: [row.userId],
        effectiveDate: '',
        remark: ''
      }
      this.dialogTitle = `转正操作 - ${row.nickName}`
      this.dialogVisible = true
    },
    handleBatchRegular() {
      this.form.userIds = this.selectedIds
      this.dialogTitle = `批量转正 (${this.selectedIds.length}人)`
      this.dialogVisible = true
    },
    submitRegular() {
      // batchRegular(this.form).then(() => {
      //   this.$message.success('操作成功')
      //   this.dialogVisible = false
      //   this.getList()
      // })
    },
    getRemainingDaysStatus(days) {
      if (days > 7) return 'success'
      if (days > 3) return 'warning'
      return 'danger'
    }
  }
}
</script>