<template>
  <div>
    <Dialog v-model="dialogVisible" title="步骤功能" width="500px" :before-close="handleClose">
      <el-form
        ref="formRef"
        :model="formData"
        label-width="180px"
        label-position="left"
        class="step-function-form"
      >
        <el-form-item label="取消作业">
          <el-checkbox v-model="formData.enableCancelJob" disabled />
        </el-form-item>

        <el-form-item label="设置锁定人">
          <el-checkbox v-model="formData.enableSetLocker" disabled />
        </el-form-item>

        <el-form-item label="设置共锁人">
          <el-checkbox v-model="formData.enableSetColocker" disabled />
        </el-form-item>

        <el-form-item label="添加共锁人">
          <el-checkbox v-model="formData.enableAddColocker" disabled />
        </el-form-item>
        <el-form-item label="添加共锁人后跳转步骤">
          <el-input-number
            v-model="formData.gotoStepAfterAddingColocker"
            :min="1"
            size="default"
            placeholder="步骤号"
            disabled

          />
        </el-form-item>
        <el-form-item label="减少共锁人">
          <el-checkbox v-model="formData.enableReduceColocker" disabled />
        </el-form-item>

        <el-form-item label="上锁">
          <el-checkbox v-model="formData.enableLock" disabled />
        </el-form-item>

        <el-form-item label="共锁">
          <el-checkbox v-model="formData.enableColock" disabled />
        </el-form-item>

        <el-form-item label="解除共锁">
          <el-checkbox v-model="formData.enableReleaseColock" disabled />
        </el-form-item>

        <el-form-item label="解锁">
          <el-checkbox v-model="formData.enableUnlock" disabled />
        </el-form-item>

        <el-form-item label="结束作业">
          <el-checkbox v-model="formData.enableEndJob" disabled />
        </el-form-item>


      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose">关闭</el-button>
        </div>
      </template>
    </Dialog>
  </div>
</template>
<script setup lang="ts">
import { ref, watch, computed } from 'vue'

interface Props {
  visible: boolean
  stepData: any
}

interface Emits {
  (e: 'update:visible', value: boolean): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

// 弹框显示状态
const dialogVisible = computed({
  get: () => props.visible,
  set: (value) => emit('update:visible', value)
})

// 表单数据
const formData = ref({
  enableCancelJob: false,
  enableSetLocker: false,
  enableSetColocker: false,
  enableAddColocker: false,
  enableReduceColocker: false,
  enableLock: false,
  enableColock: false,
  enableReleaseColock: false,
  enableUnlock: false,
  enableEndJob: false,
  gotoStepAfterAddingColocker: null
})
// 监听步骤数据变化，更新表单数据
watch(
  () => props.stepData,
  (newData) => {
    if (newData && Object.keys(newData).length > 0) {
      formData.value = {
        enableCancelJob: newData.enableCancelJob || false,
        enableSetLocker: newData.enableSetLocker || false,
        enableSetColocker: newData.enableSetColocker || false,
        enableAddColocker: newData.enableAddColocker || false,
        enableReduceColocker: newData.enableReduceColocker || false,
        enableLock: newData.enableLock || false,
        enableColock: newData.enableColock || false,
        enableReleaseColock: newData.enableReleaseColock || false,
        enableUnlock: newData.enableUnlock || false,
        enableEndJob: newData.enableEndJob || false,
        gotoStepAfterAddingColocker: newData.gotoStepAfterAddingColocker || null
      }
    }
  },
  { immediate: true, deep: true }
)

// 关闭弹框
const handleClose = () => {
  dialogVisible.value = false
}
</script>

<style scoped lang="scss">
.step-function-form {
  .el-form-item {
    margin-bottom: 20px;
  }

  .el-checkbox {
    margin-right: 0;
  }
}

.dialog-footer {
  text-align: center;
}
</style>
