<template>
  <Dialog
    :title="dialogTitle"
    v-model="dialogVisible"
    :width="dialogWidth"
    :close-on-click-modal="false"
    :vLoading="formLoading"
  >
    <ContentWrap>
      <Descriptions
        :data="detailData"
        labelClassName="label-class-name"
        label-align="left"
        direction="vertical"
        :column="8"
        :schema="allSchemas.detailSchema"
        :columns="2"
        width="200px"
      />
    </ContentWrap>
    <ContentWrap>
      <el-container>
        <el-aside width="320px">
          <el-card>
            <template #header>
              <div class="card-header">
                <span>工艺路线</span>
              </div>
            </template>
            <el-table :data="processData" ref="tableProcess" style="width: 100%; height: 80%" >
              <el-table-column prop="code" label="工序编码" />
              <el-table-column prop="name" label="工序名称" />
            </el-table>
          </el-card>
        </el-aside>
        <el-main style="height: 480px; width: calc(100% - 980px);padding: 0px; margin:0px 20px">
          <div ref="graphContainer"></div
          ></el-main>
        <el-aside width="640px">
          <el-tag>工序编码：{{currentNode.id}} -工序名称:{{currentNode.name  }}</el-tag>
          <el-tabs v-model="activeName" >
            <el-tab-pane label="工序工位" name="workstation">
              <el-table :data="workstationData" ref="tableWorkstations" style="width: 100%; height: 80%">
                <el-table-column prop="stationName" label="工位名称" />
                <el-table-column prop="processCode" label="工序编码" />
              </el-table>

            </el-tab-pane>
            <el-tab-pane label="工序物料" name="materials">
                <el-table :data="showMaterialsData" ref="tableMaterials" style="width: 100%; height: 80%">
                <el-table-column prop="repMaterialCode" label="物料编码" />
                <el-table-column prop="repMaterialCounts" label="物料数量" />
                <el-table-column prop="repMaterialModel" label="物料单位" />
                <el-table-column prop="sourceMaterialCounts" label="需求物料数">
                  <template #default="scope">{{ getTotalcounts(scope.row.repMaterialCounts) }}</template>
                </el-table-column>
                <el-table-column prop="replaceFlag" label="是否替换" >
                  <template #default="scope">
                  <el-switch disabled
                    v-model="scope.row.replaceFlag"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    active-text="是"
                    inactive-text="否"
                  />
                  </template>
                </el-table-column>
              </el-table>
              <el-pagination
              small
              hide-on-single-page="true"
              layout="prev, pager, next"
              :total="page.total"
              :page-size="page.size"
              :current-page="page.current"
              @current-change="handleCurrentChangeM"
              @prev-click="handlePrevClickM"
              @next-click="handleNextClickM"
            />
            </el-tab-pane>
            <el-tab-pane label="工序人员" name="workers">
              
              <el-table :data="workerData" ref="tableWorker" style="width: 100%; height: 233px;overflow: auto;">
                <el-table-column prop="groupName" label="所属班组" />
                <el-table-column prop="workerMonitor" label="班长" />
                <el-table-column prop="workerCode" label="人员编码" />
                <el-table-column prop="workerName" label="人员昵称" />
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="工序设备" name="equipments">
              <el-table :data="equipmentData" ref="tableEquipment" style="width: 100%; height: 80%">
                <el-table-column prop="equipmentCode" label="设备编码" />
                <el-table-column prop="equipmentName" label="设备名称" />
                <el-table-column prop="equipmentType" label="设备类型" />
                <el-table-column prop="equipmentWorkstation" label="关联工位" />
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </el-aside>
      </el-container>
    </ContentWrap>
    <template #footer>
      <el-button @click="handleClose" >关闭</el-button>
    </template>
    
  </Dialog>
  
</template>

<script lang="ts" setup>

import {
  start_node,
  end_node,
  createGraph,
  getNewNode
} from '@/views/mes/processroute/components/graphbase.data'
import * as orderDayconfigApi from '@/api/mes/orderDayConfig'
import * as OrderDayApi from '@/api/mes/orderDay'
import  {ProcessSearch} from '../../publicUtil/processSearch.data'
import * as ProcessApi from '@/api/wms/process'
import {  Graph } from '@antv/x6'
import * as TeamApi from '@/api/wms/team'
import {searchUser} from "@/views/wms/basicDataManage/orderManage/team/team.data";
import {DeviceInfo, OrderDay} from "@/views/mes/orderDay/orderDay.data";
const graphContainer = ref<HTMLElement | null>(null)
const graph = ref<Graph>()
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const activeName = ref('workstation')
const formLoading = ref(false)
const dialogFormVisibleUser = ref(false)
const processData = ref([])
const processCode = ref('')
//const isPublish=ref(false)
const queryParams:orderDayconfigApi.OrderDayQueryParamVo=ref()
const props = defineProps({
  // 查询弹窗是否显示筛选按钮
  isSearchFilterButtonHide: {
    type: Boolean,
    default: false
  },
  // 显示窗口宽度设置
  basicFormWidth: {
    type: String,
    default: ''
  },

  allSchemas: {
    type: Object,
    required: true,
    default: null
  }
})
const workerData=ref([])
const detailData = ref(props.allSchemas)
const route = useRoute() // 路由信息
const routeName = ref()
routeName.value = route.name
routeName.value = routeName.value.substring(0, routeName.value.length - 4) + 'Detail'
//const updateKey = ref(0)
const dialogWidth = ref()
const materialsData = ref()
const equipmentData=ref([])
const workstationData=ref([])
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const  graphJson =ref()
const currentNode = ref({
  name:'',
  id:''
})
const showMaterialsData=ref() //物料信息分页展示
const page=ref({
  total:0,
  current:1,
  size:7
})

/** 打开弹窗 */
const open =  ( row?: any, titleName?: any) => {
  //console.log("scheduleDetail-182",row)
  currentNode.value.name=''
  currentNode.value.id=''
  workerData.value=[]
  equipmentData.value = []
  materialsData.value = []
  showMaterialsData.value=[]
  page.value.total = 0
  page.value.current = 1
  workstationData.value = []
  dialogVisible.value = true
  detailData.value = row
  dialogWidth.value = props.basicFormWidth + '%'
  queryParams.planNoDay=row.planNoDay
  queryParams.productCode=row.productCode
  queryParams.workroomCode=row.workroomCode
  queryParams.lineCode=row.lineCode
  queryParams.processrouteCode=row.processrouteCode
  queryParams.batchCode=row.batchCode
  //获取配置的
  if (titleName) {
    dialogTitle.value =  titleName
  } else {
    dialogTitle.value =  type
  }
  nextTick?.(() => {
    graph.value = createGraph(graphContainer.value as HTMLElement, true, 240, 320)
    graph.value.on('node:click', ({ e, x, y, node, view }) => {
      nodeClick(e, x, y, node, view)
    })
    getProcessroute()
    getConfigProcessRouteNode()
  })
}
const getTotalcounts=(a:any)=>{
  return detailData.value.planCount*a
}

//获取工序的BOM
const getProcessBom=async (code:any) => {
  queryParams.processCode=code
  let res = await orderDayconfigApi.getOrderDayBomByOrder(queryParams)
  materialsData.value=res
  if(materialsData.value.length>0){
    page.value.total = materialsData.value.length
    page.value.current = 1
    showMaterialsData.value=materialsData.value.slice(0,page.value.size)
  }
}
// const currentStartNode = ref({
//   id:''
// })
//获取配置的工艺路线信息
const getProcessroute = async () => {
  let res = await orderDayconfigApi.getConfigProcessRoute(queryParams)
  graphJson.value=JSON.parse(res.newGraphData)
  graph.value?.fromJSON(graphJson.value.cells)
  //首次打开弹窗，默认打开一个工序的数据
  //currentStartNode.value = graphJson.value.cells[0]
  currentNode.value = graphJson.value.cells[0]
  // 手动触发点击事件
  nodeClick('','','',currentNode.value,'')

}
//获取配置的工序信息
const getConfigProcessRouteNode= async () => {
  let res = await orderDayconfigApi.getConfigProcessRouteNode(queryParams)
  processData.value=res
}
//获取配置的工序工位
const getConfigProcessWorkstation= async (code:any) => {
  queryParams.processCode=code
  workstationData.value = await orderDayconfigApi.getConfigProcessWorkstation(queryParams)
}
//获取配置的工序人员
const getConfigProcessWorker= async (code:any) => {
  queryParams.processCode=code
  workerData.value = await orderDayconfigApi.getConfigProcessWorker(queryParams)
}
//获取配置的工序设备
const getConfigProcessEquipment= async (code:any) => {
  queryParams.processCode=code
  equipmentData.value = await orderDayconfigApi.getConfigProcessEquipment(queryParams)
}
const nodeClick = (e, x, y, node, view) => {
  //console.log(node.id)
  getProcessBom(node.id)
  getConfigProcessWorkstation(node.id)
  getConfigProcessWorker(node.id)
  getConfigProcessEquipment(node.id)
  processCode.value = node.id
  currentNode.value.id=node.id
  //console.log(node)
  currentNode.value.name=node.attrs.title.text
}


const handleClose=()=>{
  dialogVisible.value = false,
  emit('close')
}


const handleCurrentChangeM=(value: number)=>{
      let index=(value-1)*page.value.size
      page.value.current=value
      showMaterialsData.value=materialsData.value.slice(index,index+page.value.size)

}
const handlePrevClickM=(value: number)=>{
      page.value.current=value-1
      if(page.value.current==0) {
        page.value.current=1
      }

}
const handleNextClickM=(value: number)=>{
     page.value.current=value+1
     if(page.value.current>page.value.total/page.value.size) {
        page.value.current=page.value.total/page.value.size -1
      }
}
defineOptions({ name: 'SechledDetail' })
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
// 传递给父类
const emit = defineEmits([
  'close'
])
</script>
<style lang="scss">
.el-drawer__body {
  background: #f5f5f5 !important;
}
::v-deep(.label-class-name) {
  color: #dedede;
}
</style>
