<template>
  <el-dialog
    v-model="visible"
    title="排班设置"
    width="600px"
    destroy-on-close
    :close-on-click-modal="false"
  >
    <el-tabs v-model="activeTab">
      <!-- 班次定义 -->
      <el-tab-pane label="班次定义" name="define">
        <el-table :data="shiftList" border stripe size="small">
          <el-table-column prop="name" label="班次名称" width="100" />
          <el-table-column prop="time" label="工作时间" width="180">
            <template #default="{ row }">
              <el-time-picker
                v-model="row.timeRange"
                is-range
                range-separator="-"
                start-placeholder="开始"
                end-placeholder="结束"
                size="small"
                format="HH:mm"
                value-format="HH:mm"
                style="width: 100%"
              />
            </template>
          </el-table-column>
          <el-table-column prop="color" label="标识颜色" width="100" align="center">
            <template #default="{ row }">
              <el-color-picker v-model="row.color" size="small" />
            </template>
          </el-table-column>
          <el-table-column label="操作" width="80" align="center">
            <template #default="{ $index }">
              <el-button type="danger" size="small" icon="delete" circle @click="removeShift($index)" />
            </template>
          </el-table-column>
        </el-table>
        <el-button class="mt-10 w-full" @click="addShift" icon="plus">新增班次</el-button>
      </el-tab-pane>

      <!-- 排班规则 -->
      <el-tab-pane label="排班规则" name="rule">
        <el-form :model="ruleForm" label-width="100px">
          <el-form-item label="循环周期">
            <el-radio-group v-model="ruleForm.cycle">
              <el-radio label="week">按周循环</el-radio>
              <el-radio label="month">按月循环</el-radio>
              <el-radio label="custom">自定义天数</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="排班人员">
            <el-select
              v-model="ruleForm.staffs"
              multiple
              placeholder="请选择参与排班的人员"
              style="width: 100%"
            >
              <el-option label="张三" value="zhangsan" />
              <el-option label="李四" value="lisi" />
              <el-option label="王五" value="wangwu" />
              <el-option label="赵六" value="zhaoliu" />
            </el-select>
          </el-form-item>
          <el-form-item label="轮班方式">
            <el-select v-model="ruleForm.mode" style="width: 100%">
              <el-option label="顺序轮班 (早-晚-休)" value="sequence" />
              <el-option label="固定班次 (专职早/晚)" value="fixed" />
            </el-select>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>

    <template #footer>
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="handleSave">保存设置</el-button>
      <el-button type="success" @click="handleGenerate">生成下月排班</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

const visible = ref(false)
const activeTab = ref('define')

const shiftList = ref([
  { name: '早班', timeRange: ['08:00', '16:00'], color: '#67c23a' },
  { name: '晚班', timeRange: ['16:00', '24:00'], color: '#409eff' },
  { name: '夜班', timeRange: ['00:00', '08:00'], color: '#909399' },
])

const ruleForm = reactive({
  cycle: 'week',
  staffs: [],
  mode: 'sequence'
})

const open = () => {
  visible.value = true
}

const addShift = () => {
  shiftList.value.push({ name: '新班次', timeRange: ['09:00', '18:00'], color: '#e6a23c' })
}

const removeShift = (index) => {
  shiftList.value.splice(index, 1)
}

const handleSave = () => {
  ElMessage.success('排班设置已保存')
  visible.value = false
}

const handleGenerate = () => {
  if (ruleForm.staffs.length === 0) {
    ElMessage.warning('请先选择排班人员')
    return
  }
  ElMessage.success('排班生成成功')
  visible.value = false
}

defineExpose({
  open
})
</script>

<style lang="scss" scoped>
.mt-10 { margin-top: 10px; }
.w-full { width: 100%; }
</style>
