<script setup lang="ts" name="ProcessConfig">
import { ref } from 'vue'
import draggable from 'vuedraggable'
import { ElMessage } from 'element-plus'
import type { ISchedule, IScheduleSet } from '../task-interface'
import ProcessNode from './processNode.vue'
import ProcessNodeAdd from './processNodeAdd.vue'
import chooseLab from './chooseLab.vue'
import type { ILabList } from './lab-interface'
import { setMeasureProcess, setMeasureProcessByFfy } from '@/api/business/schedule/task'
const props = defineProps({
  type: {
    type: String,
    default: 'distribute',
  }, // 类型，决定调用哪个接口
  // 是否为详情展示页面
  detail: {
    type: Boolean,
    default: false,
  },
  // 样品id
  sampleId: {
    type: String,
    required: true,
  },
  // 委托单id
  orderId: {
    type: String,
    required: true,
  },
  list: {
    type: Array,
    default: () => [],
  },
})
const emits = defineEmits(['saveOver'])
// 默认流程节点
const defaultProcess: IScheduleSet = {
  measurePersonId: '', // 执行人
  measurePerson: '', // 执行人名称
  measureSegmentId: '', // 执行部门
  measureSegment: '', // 执行部门名称
  executiveItem: '', // 检定项目
  // alreadyCertifications: 0, // 已出具证书总数
  requireCertifications: 1, // 应出具证书总数
  measureStatus: '', // 检测状态： 待分配，待检测，检测中，检测完, 已退回/取消
  measureStatusName: '', // 检测状态： 待分配，待检测，检测中，检测完, 已退回/取消
  updateTime: '', // 流程更新时间
}
// 检定流程列表
const processList = ref<IScheduleSet[]>([
  { ...defaultProcess },
])

watch(() => props.list, (val) => {
  if (props.list.length > 0) {
    processList.value = props.list as ISchedule[]
  }
})

// 点击添加流程
const processAdd = () => {
  processList.value.push({ ...defaultProcess })
}
// 检查是否允许移动
const checkMove = (evt: any) => {
  // 目的位置元素evt.relatedContext.element
  // 当前拖动元素evt.draggedContext.element
  if (evt.relatedContext.element.measureState !== '0') {
    return false
  }
  return true
}

// 选择实验室弹窗
const chooseLabDialog = ref()
// 批量添加流程
const batchProcessAdd = () => {
  chooseLabDialog.value.initDialog(true)
}

// 批量添加实验室
const batchChooseOver = (labs: ILabList[]) => {
  for (const item of labs) {
    const processTemp: IScheduleSet = {
      measurePersonId: '', // 执行人
      measurePerson: '', // 执行人名称
      measureSegmentId: item.deptId, // 执行部门
      measureSegment: item.organizeName, // 执行部门名称
      executiveItem: '', // 检定项目
      measureSequence: '', // 监测顺序
      // alreadyCertifications: 0, // 已出具证书总数
      requireCertifications: 1, // 应出具证书总数
      measureStatus: '', // 检测状态： 待分配，待检测，检测中，检测完, 已退回/取消
      measureStatusName: '', // 检测状态： 待分配，待检测，检测中，检测完, 已退回/取消
      updateTime: '', // 流程更新时间
    }
    processList.value.push(processTemp)
  }
}

// 保存流程
const saveProcess = () => {
  const form = {
    measureProcessList: processList.value,
    orderId: props.orderId,
    sampleId: props.sampleId,
  }
  // 处理顺序
  for (const key in form.measureProcessList) {
    form.measureProcessList[key].measureSequence = (parseInt(key) + 1).toString()
  }
  if (props.type == 'distribute') {
    setMeasureProcess(form).then((res) => {
      ElMessage.success('保存成功')
      emits('saveOver')
    })
  }
  else {
    setMeasureProcessByFfy(form).then((res) => {
      ElMessage.success('保存成功')
      emits('saveOver')
    })
  }
}
// 删除流程
const deleteProcess = (index: number) => {
  processList.value.splice(index, 1)
}

// --------暴露方法
defineExpose({ saveProcess, batchProcessAdd, deleteProcess })
</script>

<template>
  <div>
    <div class="process-container">
      <draggable v-model="processList" item-key="id" class="process-draggable" handle=".handle" :move="checkMove">
        <!-- eslint-disable-next-line vue/no-unused-vars -->
        <template #item="{ process, index }">
          <process-node v-model="processList[index]" :step="index + 1" @delete="deleteProcess(index)" />
        </template>
        <template #footer>
          <process-node-add v-if="!props.detail" @click="processAdd" />
        </template>
      </draggable>
    </div>
    <choose-lab ref="chooseLabDialog" @confirm-checkout="batchChooseOver" />
  </div>
</template>

<style lang="scss" scoped>
.process-container {
  .process-draggable {
    display: flex;
    flex-wrap: wrap;
  }
}
</style>