<template>
  <el-dialog
    title="分组成员详情"
    :visible.sync="visible"
    width="980px"
    append-to-body
    :close-on-click-modal="false"
    @close="handleClose"
  >
    <div class="dialog-head">
      <div class="dialog-head__title">{{ groupName || '未命名分组' }}</div>
      <div class="dialog-head__desc">默认展示在职人员，可切换查看全部或离职人员。</div>
    </div>

    <el-form :inline="true" :model="query" class="filter-form" @submit.native.prevent>
      <el-form-item label="人员范围">
        <el-radio-group v-model="query.onJobStatus" size="small" @change="handleSearch">
          <el-radio-button :label="1">在职人员</el-radio-button>
          <el-radio-button :label="''">全部人员</el-radio-button>
          <el-radio-button :label="0">离职人员</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="关键字">
        <el-input v-model.trim="query.keyword" clearable placeholder="姓名/账号/手机号" @keyup.enter.native="handleSearch" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
        <el-button icon="el-icon-refresh-right" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <NCC-table v-loading="listLoading" :data="tableData" border size="mini" height="420">
      <el-table-column prop="realName" label="姓名" min-width="120" align="left" />
      <el-table-column prop="account" label="账号" min-width="140" align="left" />
      <el-table-column prop="mobilePhone" label="手机" min-width="140" align="left" />
      <el-table-column prop="storeName" label="门店" min-width="140" align="left">
        <template slot-scope="scope">
          <span>{{ scope.row.storeName || '无' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="gw" label="岗位" min-width="110" align="left">
        <template slot-scope="scope">
          <span>{{ scope.row.gw || '无' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="gwfl" label="岗位分类" min-width="110" align="left">
        <template slot-scope="scope">
          <span>{{ scope.row.gwfl || '无' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="入职时间" width="120" align="left">
        <template slot-scope="scope">
          <span>{{ scope.row.entryDate ? ncc.dateFormat(scope.row.entryDate, 'YYYY-MM-DD') : '无' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="90" align="left">
        <template slot-scope="scope">
          <el-tag :type="Number(scope.row.isOnJob) === 1 ? 'success' : 'info'" size="mini" disable-transitions>
            {{ scope.row.isOnJobText || (Number(scope.row.isOnJob) === 1 ? '在职' : '离职') }}
          </el-tag>
        </template>
      </el-table-column>
    </NCC-table>

    <div v-if="!listLoading && !tableData.length" class="empty-wrap">
      <el-empty :image-size="60" description="当前筛选条件下暂无成员" />
    </div>

    <pagination
      :hidden="!total"
      :total="total"
      :page.sync="query.currentPage"
      :limit.sync="query.pageSize"
      @pagination="loadData"
    />
  </el-dialog>
</template>

<script>
import { getAttendanceGroupUsers } from '@/api/extend/attendanceSetting'

export default {
  name: 'AttendanceGroupUserDialog',
  data() {
    return {
      visible: false,
      listLoading: false,
      groupId: '',
      groupName: '',
      tableData: [],
      total: 0,
      query: this.getDefaultQuery()
    }
  },
  methods: {
    getDefaultQuery() {
      return {
        onJobStatus: 1,
        keyword: '',
        currentPage: 1,
        pageSize: 10
      }
    },
    init(group) {
      this.visible = true
      this.groupId = group.id
      this.groupName = group.groupName || ''
      this.query = this.getDefaultQuery()
      this.tableData = []
      this.total = 0
      this.loadData()
    },
    async loadData() {
      if (!this.groupId) return
      this.listLoading = true
      try {
        const res = await getAttendanceGroupUsers({
          groupId: this.groupId,
          onJobStatus: this.query.onJobStatus === '' ? null : this.query.onJobStatus,
          keyword: this.query.keyword,
          currentPage: this.query.currentPage,
          pageSize: this.query.pageSize
        })
        const data = res.data || {}
        this.tableData = data.list || []
        this.total = data.pagination ? data.pagination.total : 0
      } finally {
        this.listLoading = false
      }
    },
    handleSearch() {
      this.query.currentPage = 1
      this.loadData()
    },
    resetQuery() {
      this.query = this.getDefaultQuery()
      this.loadData()
    },
    handleClose() {
      this.visible = false
      this.groupId = ''
      this.groupName = ''
      this.tableData = []
      this.total = 0
    }
  }
}
</script>

<style lang="scss" scoped>
.dialog-head {
  margin-bottom: 12px;
}

.dialog-head__title {
  color: #303133;
  font-size: 16px;
  font-weight: 600;
}

.dialog-head__desc {
  margin-top: 4px;
  color: #909399;
  font-size: 12px;
}

.filter-form {
  margin-bottom: 12px;
}

.empty-wrap {
  padding-top: 12px;
}
</style>
