<script setup lang="ts" name="ProcessConfig">
import { ref } from 'vue'
import draggable from 'vuedraggable'
import ProcessNode from './processNode.vue'
import ProcessNodeAdd from './processNodeAdd.vue'
import chooseLab from './chooseLab.vue'
import type { ILabList } from './lab-interface'
const props = defineProps({
  // 是否为详情展示页面
  detail: {
    type: Boolean,
    default: false,
  },
  // 样品id
  sampleId: {
    type: String,
    required: true,
  },
  // 委托单id
  orderId: {
    type: String,
    required: true,
  },
})
const emits = defineEmits(['saveOver'])
// 默认流程节点
const defaultProcess = {
  id: '', // 检测节点id
  executiveItem: '', // 检测项目
  executiveDept: '', // 检测部门
  executiveDeptName: '', // 检测部门
  executivePerson: '', // 检测人员
  executivePersonName: '', // 检测人员
  measureState: '0', // 检测状态:待分发，待分配，待检测，检测中，检测完，退回，取消
  measureStateName: '', // 检测状态
  currentCertifications: '', // 当前证书数
  requireCertifications: '', // 应出具证书数
  updateTime: '', // 更新时间
  backPerson: '', // 退回人
  backReason: '', // 退回原因
  backTime: '', // 退回时间
  distributePerson: '', // 分配人
  distributeTime: '', // 分配时间
  startTime: '', // 检测开始时间
  overTime: '', // 检测结束时间
}
// 检定流程列表
const processList = ref([
  { ...defaultProcess },
])

// 获取当前样品检测流程，参数待定
const fetchProcess = () => {
  // TODO: 模拟数据
  processList.value = [
    {
      id: '1', // 检测节点id
      executiveItem: '', // 检测项目
      executiveDept: '1601423635973935106', // 检测部门
      executiveDeptName: '力学实验室', // 检测部门
      executivePerson: '', // 检测人员
      executivePersonName: '张三', // 检测人员
      measureState: '2', // 检测状态:待分发，待分配，待检测，检测中，检测完，退回，取消
      measureStateName: '待检测', // 检测状态
      currentCertifications: '0', // 当前证书数
      requireCertifications: '2', // 应出具证书数
      updateTime: '2023-02-01 09:00:05', // 更新时间
      backPerson: '', // 退回人
      backReason: '', // 退回原因
      backTime: '', // 退回时间
      distributePerson: '', // 分配人
      distributeTime: '', // 分配时间
      startTime: '', // 检测开始时间
      overTime: '', // 检测结束时间
    },
    {
      id: '2', // 检测节点id
      executiveItem: '', // 检测项目
      executiveDept: '1601423577505337346', // 检测部门
      executiveDeptName: '热学实验室', // 检测部门
      executivePerson: '', // 检测人员
      executivePersonName: '', // 检测人员
      measureState: '1', // 检测状态:待分发，待分配，待检测，检测中，检测完，退回，取消
      measureStateName: '待分配', // 检测状态
      currentCertifications: '', // 当前证书数
      requireCertifications: '', // 应出具证书数
      updateTime: '', // 更新时间
      backPerson: '', // 退回人
      backReason: '', // 退回原因
      backTime: '', // 退回时间
      distributePerson: '', // 分配人
      distributeTime: '', // 分配时间
      startTime: '', // 检测开始时间
      overTime: '', // 检测结束时间
    },
  ]
}
fetchProcess()

// 点击添加流程
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 = {
      id: '',
      executiveItem: '', // 检测项目
      executiveDept: item.deptId, // 检测部门
      executiveDeptName: item.organizeName, // 检测部门
      executivePerson: '', // 检测人员
      executivePersonName: '', // 检测人员
      measureState: '0', // 检测状态:待分发，待分配，待检测，检测中，检测完，退回，取消
      measureStateName: '', // 检测状态
      currentCertifications: '', // 当前证书数
      requireCertifications: '', // 应出具证书数
      updateTime: '', // 更新时间
      backPerson: '', // 退回人
      backReason: '', // 退回原因
      backTime: '', // 退回时间
      distributePerson: '', // 分配人
      distributeTime: '', // 分配时间
      startTime: '', // 检测开始时间
      overTime: '', // 检测结束时间
    }
    processList.value.push(processTemp)
  }
}

// 保存流程
const saveProcess = () => {
  // TODO: 保存流程
  console.log(processList.value)
  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>