<template>
  <el-dialog 
    v-model="visible" 
    title="锁定状态管理" 
    width="600px"
    class="status-lock-dialog"
    @close="handleClose">
    <div class="status-lock-content">
      <div class="status-lock-description">
        <el-icon class="status-lock-icon"><Lock /></el-icon>
        <span>请选择需要锁定的模块，锁定后将无法进行编辑操作</span>
      </div>
      
      <el-form :model="form" label-width="120px" class="status-lock-form">
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="职称管理">
              <el-switch
                inline-prompt
                v-model="form.title"                 
                active-text="已锁定"
                inactive-text="未锁定"
                active-color="#f56c6c"
                inactive-color="#67c23a">
              </el-switch>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="职业资格">
              <el-switch
                inline-prompt
                v-model="form.job"
                active-text="已锁定"
                inactive-text="未锁定"
                active-color="#f56c6c"
                inactive-color="#67c23a">
              </el-switch>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="教师资格证">
              <el-switch
                inline-prompt
                v-model="form.teacherTitle"
                active-text="已锁定"
                inactive-text="未锁定"
                active-color="#f56c6c"
                inactive-color="#67c23a">
              </el-switch>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="学历学位">
              <el-switch
                inline-prompt
                v-model="form.acade"
                active-text="已锁定"
                inactive-text="未锁定"
                active-color="#f56c6c"
                inactive-color="#67c23a">
              </el-switch>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="综合表彰">
              <el-switch
                inline-prompt
                v-model="form.remix"
                active-text="已锁定"
                inactive-text="未锁定"
                active-color="#f56c6c"
                inactive-color="#67c23a">
              </el-switch>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="岗位晋升">
              <el-switch
                inline-prompt
                v-model="form.work"
                active-text="已锁定"
                inactive-text="未锁定"
                active-color="#f56c6c"
                inactive-color="#67c23a">
              </el-switch>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    
    <template #footer>
      <div class="status-lock-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button 
          type="primary" 
          v-if="canEdit" 
          @click="handleSubmit">保存</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { Lock } from '@element-plus/icons-vue'

interface Props {
  modelValue: boolean
  formData?: any
  canEdit?: boolean
}

interface Emits {
  (e: 'update:modelValue', value: boolean): void
  (e: 'submit', data: any): void
}

const props = withDefaults(defineProps<Props>(), {
  formData: () => ({
    title: false,
    job: true,
    teacherTitle: true,
    acade: true,
    remix: true,
    work: true
  }),
  canEdit: false
})

const emit = defineEmits<Emits>()

const visible = ref(false)
const form = ref<any>({
  title: false,
  job: true,
  teacherTitle: true,
  acade: true,
  remix: true,
  work: true
})

watch(() => props.modelValue, (val) => {
  visible.value = val
  if (val && props.formData) {
    form.value = { ...props.formData }
  } else {
    form.value = {
      title: false,
      job: true,
      teacherTitle: true,
      acade: true,
      remix: true,
      work: true
    }
  }
})

watch(visible, (val) => {
  emit('update:modelValue', val)
})

const handleClose = () => {
  visible.value = false
}

const handleSubmit = () => {
  emit('submit', { ...form.value })
}
</script>

<style scoped lang="scss">
.status-lock-dialog {
  .status-lock-content {
    padding: 20px 0;
  }
  
  .status-lock-description {
    display: flex;
    align-items: center;
    padding: 16px;
    margin-bottom: 24px;
    background: #fef0f0;
    border: 1px solid #fbc4c4;
    border-radius: 6px;
    color: #f56c6c;
    font-size: 14px;
    
    .status-lock-icon {
      margin-right: 8px;
      font-size: 18px;
      color: #f56c6c;
    }
  }
  
  .status-lock-form {
    :deep(.el-form-item) {
      margin-bottom: 24px;
    }
  }
  
  .status-lock-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
  }
}
</style>

