<template>
  <el-card class="setting-card" shadow="never">
    <div slot="header" class="card-header">
      <span>考勤分组设置</span>
      <el-button type="primary" size="mini" icon="el-icon-plus" @click="addRow">新增分组</el-button>
    </div>
    <NCC-table :data="value" border size="mini" height="260">
      <el-table-column label="分组名称" min-width="150" align="left">
        <template slot-scope="scope">
          <el-input v-model="scope.row.groupName" placeholder="例如：门店组" />
        </template>
      </el-table-column>
      <el-table-column label="上班时间" min-width="130" align="left">
        <template slot-scope="scope">
          <el-time-picker v-model="scope.row.workStartTime" value-format="HH:mm" format="HH:mm" placeholder="09:00"
            style="width: 100%" />
        </template>
      </el-table-column>
      <el-table-column label="下班时间" min-width="130" align="left">
        <template slot-scope="scope">
          <el-time-picker v-model="scope.row.workEndTime" value-format="HH:mm" format="HH:mm" placeholder="19:00"
            style="width: 100%" />
        </template>
      </el-table-column>
      <el-table-column label="月应休天数" min-width="120" align="left">
        <template slot-scope="scope">
          <el-input-number v-model="scope.row.monthlyRestDays" :min="0" :precision="0" controls-position="right"
            style="width: 100%" />
        </template>
      </el-table-column>
      <el-table-column label="可拆分半天休假天数" min-width="160" align="left">
        <template slot-scope="scope">
          <el-input-number v-model="scope.row.halfDaySplitRestDays" :min="0" :precision="0" :step="1"
            controls-position="right" style="width: 100%" />
        </template>
      </el-table-column>
      <el-table-column label="应休解锁规则" min-width="200" align="left">
        <template slot-scope="scope">
          <div class="rule-cell">
            <el-switch :value="!!(scope.row.restUnlockCycle)" @change="(v) => toggleRestUnlock(scope.row, v)" />
            <template v-if="scope.row.restUnlockCycle">
              <span class="rule-label">每上满</span>
              <el-input-number v-model="scope.row.restUnlockCycle" :min="1" :max="365" :precision="0"
                controls-position="right" style="width: 100px" />
              <span class="rule-label">天解锁1天</span>
            </template>
            <span v-else class="rule-off">不启用</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column v-if="hasAnyUnlockEnabled" label="迟到容忍" min-width="190" align="left">
        <template slot-scope="scope">
          <template v-if="scope.row.restUnlockCycle > 0">
            <div class="rule-cell">
              <el-switch :value="scope.row.lateToleranceMinutes != null"
                @change="(v) => toggleLateTolerance(scope.row, v)" />
              <template v-if="scope.row.lateToleranceMinutes != null">
                <span class="rule-label">不超过</span>
                <el-input-number v-model="scope.row.lateToleranceMinutes" :min="0" :max="999" :precision="0"
                  controls-position="right" style="width: 90px" />
                <span class="rule-label">分钟</span>
              </template>
              <span v-else class="rule-off">不计</span>
            </div>
          </template>
          <span v-else class="rule-off">—</span>
        </template>
      </el-table-column>
      <el-table-column v-if="hasAnyUnlockEnabled" label="早退容忍" min-width="190" align="left">
        <template slot-scope="scope">
          <template v-if="scope.row.restUnlockCycle > 0">
            <div class="rule-cell">
              <el-switch :value="scope.row.earlyLeaveToleranceMinutes != null"
                @change="(v) => toggleEarlyLeaveTolerance(scope.row, v)" />
              <template v-if="scope.row.earlyLeaveToleranceMinutes != null">
                <span class="rule-label">不超过</span>
                <el-input-number v-model="scope.row.earlyLeaveToleranceMinutes" :min="0" :max="999" :precision="0"
                  controls-position="right" style="width: 90px" />
                <span class="rule-label">分钟</span>
              </template>
              <span v-else class="rule-off">不计</span>
            </div>
          </template>
          <span v-else class="rule-off">—</span>
        </template>
      </el-table-column>
      <el-table-column label="是否启用" width="100" align="left">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.isEnabled" :active-value="1" :inactive-value="0" />
        </template>
      </el-table-column>
      <el-table-column label="备注" min-width="180" align="left">
        <template slot-scope="scope">
          <el-input v-model="scope.row.remark" placeholder="无" />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180" align="left">
        <template slot-scope="scope">
          <el-button type="text" @click="showUsers(scope.row)">成员详情</el-button>
          <el-popconfirm title="确认删除当前配置吗？" confirm-button-text="确认删除" cancel-button-text="取消"
            @confirm="removeRow(scope.$index)">
            <el-button slot="reference" type="text" class="danger-text">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </NCC-table>
    <div class="table-tip">月应休等事项写在「应休分组」中；此处保存会为每条考勤分组自动维护一条默认应休分组。人员未单独指定应休分组时，休假额度按门店默认考勤分组对应的本条默认应休执行。查看分组成员请点「成员详情」（以门店默认考勤分组为准）。</div>
    <el-empty v-if="!value.length" :image-size="56" description="暂无考勤分组配置" />
    <attendance-group-user-dialog ref="userDialog" />
  </el-card>
</template>

<script>
import AttendanceGroupUserDialog from './attendance-group-user-dialog'

export default {
  name: 'AttendanceGroupTable',
  components: {
    AttendanceGroupUserDialog
  },
  props: {
    value: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    hasAnyUnlockEnabled() {
      return this.value.some(row => row.restUnlockCycle > 0)
    }
  },
  methods: {
    addRow() {
      this.$emit('input', [
        ...this.value,
        {
          groupName: '',
          workStartTime: '09:00',
          workEndTime: '19:00',
          monthlyRestDays: 4,
          halfDaySplitRestDays: 0,
          restUnlockCycle: 0,
          lateToleranceMinutes: null,
          earlyLeaveToleranceMinutes: null,
          isEnabled: 1,
          remark: ''
        }
      ])
    },
    removeRow(index) {
      const list = this.value.slice()
      list.splice(index, 1)
      this.$emit('input', list)
    },
    toggleRestUnlock(row, enabled) {
      this.$set(row, 'restUnlockCycle', enabled ? 7 : 0)
      if (!enabled) {
        this.$set(row, 'lateToleranceMinutes', null)
        this.$set(row, 'earlyLeaveToleranceMinutes', null)
      }
    },
    toggleLateTolerance(row, enabled) {
      this.$set(row, 'lateToleranceMinutes', enabled ? 15 : null)
    },
    toggleEarlyLeaveTolerance(row, enabled) {
      this.$set(row, 'earlyLeaveToleranceMinutes', enabled ? 15 : null)
    },
    showUsers(row) {
      if (!row.id) {
        this.$message.warning('请先保存分组设置后再查看成员详情')
        return
      }
      this.$refs.userDialog.init(row)
    }
  }
}
</script>

<style lang="scss" scoped>
.setting-card {
  border-radius: 12px;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
}

.table-tip {
  margin-top: 8px;
  color: #909399;
  font-size: 12px;
}

.danger-text {
  color: #f56c6c;
}

.rule-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}

.rule-label {
  font-size: 12px;
  color: #606266;
  white-space: nowrap;
}

.rule-off {
  font-size: 12px;
  color: #909399;
}

::v-deep .el-card__header {
  padding: 12px 16px;
}

::v-deep .el-card__body {
  padding: 12px 14px;
}
</style>
