<template>
  <div class="hllcClass" @contextmenu.prevent>
    <a-row>
      <a-col :span="12" style="padding-top: 14px;">
        {{customerInfo.name}} - 护理流程展示
      </a-col>
      <a-col :span="12" style="text-align: right;">
        <!-- <a-button type="primary" @click="handleFanhui">返回</a-button> -->
        <!-- <a-button type="primary" @click="getData(customerInfo)">加载</a-button> -->
      </a-col>
      <a-col :span="24" style="margin-top:14px;">
        <a-table
          :columns="columns"
          :data-source="dataSource"
          bordered
          size="small"
          :pagination="false"
          :rowClassName="setRowClassName"
          :customRow="handleCustomRow"
          @contextmenu.prevent
        >
        <template #bodyCell="{ column, record, text }">
          <template v-if="column.key !== 'minute'">
            <a-tooltip :title="text" placement="topLeft">
              <span class="cell-text">{{ text }}</span>
            </a-tooltip>
          </template>
        </template>
        </a-table>
      </a-col>
      <!-- <a-col :span="24" style="text-align: center;">
        <a-button type="primary" @click="handleSaveBach">保存</a-button>
      </a-col> -->
    </a-row>

    <!-- 右键菜单 -->
    <div 
      v-if="contextMenu.visible" 
      :style="{
        position: 'fixed',
        left: `${contextMenu.x}px`,
        top: `${contextMenu.y}px`,
        zIndex: 1000,
        boxShadow: '0 2px 8px rgba(0,0,0,0.15)'
      }"
      class="context-menu"
    >
      <a-menu @click="handleMenuClick" style="padding: 14px;">
        <a-menu-item key="add">新增数据</a-menu-item>
        <a-menu-item key="edit" :disabled="!contextMenu.record?.[contextMenu.columnKey]">编辑数据</a-menu-item>
        <a-menu-item key="delete" :disabled="!contextMenu.record?.[contextMenu.columnKey]">删除数据</a-menu-item>
      </a-menu>
    </div>

    <!-- 数据操作模态框 -->
    <a-modal
      v-model:visible="modalVisible"
      :title="modalTitle"
      @ok="handleModalOk"
      @cancel="handleModalCancel"
    >
      <a-form :model="formState" layout="vertical" style="padding:14px;">
        <a-form-item label="数据内容">
          <a-input v-model:value="formState.content" />
        </a-form-item>
        <a-form-item label="备注">
          <a-textarea v-model:value="formState.remark" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive, defineExpose,computed  } from 'vue';
  import { message } from 'ant-design-vue';
import { defHttp } from '/@/utils/http/axios';

  const emit = defineEmits(['register', 'success']);
  const customerInfo = ref<any>({});
  
  // 右键菜单状态
  const contextMenu = reactive({
    visible: false,
    x: 0,
    y: 0,
    record: null as DataRow | null,
    columnKey: '',
    rowIndex: -1
  });

  // 模态框状态
  const modalVisible = ref(false);
  const modalAction = ref<'add' | 'edit' | 'delete'>('add');
  const modalTitle = computed(() => {
    return {
      add: '新增数据',
      edit: '编辑数据',
      delete: '确认删除'
    }[modalAction.value];
  });

  const formState = reactive({
    content: '',
    remark: ''
  });

  // 生成列（24小时）
  const columns = [
    {
      title: '',
      dataIndex: 'minute',
      key: 'minute',
      width: '50px',
      fixed: 'left',
      align: 'center',
    }
  ];
  
  // 添加小时列
  for (let hour = 0; hour < 24; hour++) {
    columns.push({
      title: `${hour.toString().padStart(2, '0')}`,
      dataIndex: `hour_${hour}`,
      key: `hour_${hour}`,
      width: 60,
      align: 'center',
      fixed: '',
      customCell: (record: DataRow, rowIndex: number) => {
        return {
          onClick: () => handleCellClick(record, `hour_${hour}`, rowIndex, 'left'),
          onContextmenu: (event: MouseEvent) => {
            showContextMenu(event, record, `hour_${hour}`, rowIndex);
          }
        };
      }
    });
  }
  
  // 生成数据（每5分钟一行）
  interface DataRow {
    key: number;
    minute: string;
    remark?: string;
    [key: `hour_${number}`]: string;
  }
  
  const dataSource = ref<DataRow[]>([]);
  
  // 初始化数据
  const initDataSource = () => {
    const newData: DataRow[] = [];
    for (let minute = 0; minute < 60; minute += 5) {
      let row: DataRow = {
        key: minute,
        minute: `${minute.toString().padStart(2, '0')}分`
      } as DataRow;
      
      for (let hour = 0; hour < 24; hour++) {
        row[`hour_${hour}`] = '';
      }
      
      newData.push(row);
    }
    dataSource.value = newData;
  };

  // 为奇数行添加斑马纹
  function setRowClassName(record: DataRow, index: number) {
    return index % 2 === 0 ? 'even-row' : 'odd-row';
  }

  // 初始化数据
  initDataSource();
  
  // 行点击事件处理
  const handleCustomRow = (record: DataRow, index: number) => {
    return {
      onClick: () => handleRowClick(record, index),
      onContextmenu: (event: MouseEvent) => {
        event.preventDefault();
      }
    };
  };
  
  // 显示右键菜单
  const showContextMenu = (event: MouseEvent, record: DataRow, columnKey: string, rowIndex: number) => {
    // event.preventDefault();
    
    // contextMenu.visible = true;
    // contextMenu.x = event.clientX;
    // contextMenu.y = event.clientY;
    // contextMenu.record = record;
    // contextMenu.columnKey = columnKey;
    // contextMenu.rowIndex = rowIndex;
    
    // // 点击其他地方关闭菜单
    // const closeMenu = (e: MouseEvent) => {
    //   if (!(e.target as HTMLElement).closest('.context-menu')) {
    //     contextMenu.visible = false;
    //     document.removeEventListener('click', closeMenu);
    //   }
    // };
    
    // document.addEventListener('click', closeMenu);
  };
  
  // 菜单点击处理
  const handleMenuClick = ({ key }: { key: string }) => {
    const { record, columnKey } = contextMenu;
    
    switch (key) {
      case 'add':
        modalAction.value = 'add';
        formState.content = '';
        formState.remark = '';
        modalVisible.value = true;
        break;
      case 'edit':
        if (record && columnKey) {
          modalAction.value = 'edit';
          formState.content = record[columnKey];
          formState.remark = record.remark || '';
          modalVisible.value = true;
        }
        break;
      case 'delete':
        modalAction.value = 'delete';
        if (record && columnKey) {
          formState.content = record[columnKey];
          formState.remark = record.remark || '';
        }
        modalVisible.value = true;
        break;
    }
    contextMenu.visible = false;
  };
  
  // 模态框确认
  const handleModalOk = () => {
    const { record, columnKey, rowIndex } = contextMenu;
    
    if (!record || !columnKey || rowIndex === -1) return;
    
    switch (modalAction.value) {
      case 'add':
      case 'edit':
        if (!formState.content) {
          message.warning('请输入数据内容');
          return;
        }
        dataSource.value[rowIndex][columnKey] = formState.content;
        dataSource.value[rowIndex].remark = formState.remark;
        message.success(`数据${modalAction.value === 'add' ? '添加' : '更新'}成功`);
        break;
      case 'delete':
        dataSource.value[rowIndex][columnKey] = '';
        message.success('数据已删除');
        break;
    }
    
    modalVisible.value = false;
  };
  
  // 模态框取消
  const handleModalCancel = () => {
    modalVisible.value = false;
  };
  
  // 行点击事件
  function handleRowClick(record: DataRow, index: number) {
    // 可添加行点击逻辑
  }
  
  // 单元格点击事件
  function handleCellClick(record: DataRow, columnKey: string, rowIndex: number, buttonType: 'left' | 'right') {
    // 可添加单元格点击逻辑
  }

  function handleFanhui() {
    emit('success');
  }
function getData(record: any) { 
  defHttp.get({ 
    url: "/nuIpadApi/nuBizNuCustomerServer/getNclist", 
    params: { nuId: record.nuId, customerId: record.id } 
  }).then((data) => {
    console.log("获取到的数据:", data);
    
    // 初始化数据源
    initDataSource();
    
    // 处理返回的数据
    if (Array.isArray(data)) {
      data.forEach((hourData) => {
        const hour = parseInt(hourData.positioning);
        
        // 处理该小时的所有子项
        if (hourData.children && hourData.children.length > 0) {
          hourData.children.forEach((item) => {
            // 解析开始时间
            const [startHour, startMinute] = item.startTime.split(':').map(Number);
            const rowIndex = Math.floor(startMinute / 5); // 每5分钟一行
            
            // 确保行索引在有效范围内
            if (rowIndex >= 0 && rowIndex < dataSource.value.length) {
              // 构建显示内容
              const content = [
                item.directiveName,
                item.typeName,
                item.categoryName,
                item.tagName,
                item.cycleType,
                item.startTime,
                item.endTime,
              ].filter(Boolean).join(' / ');
              
              // 更新对应单元格
              dataSource.value[rowIndex][`hour_${hour}`] = content;
              
            }
          });
        }
      });
    }
  });
}

function handleSaveBach(){
  console.log("🚀 ~ handleSaveBach ~ dataSource:", dataSource)
}

  function init(record: any) {
    customerInfo.value = record;
    console.log("初始化数据:", record);
    getData(record)
  }

  defineExpose({
    init
  });
</script>

<style lang="less" scoped>
  .hllcClass {
    background: white;
    width: 100%;
    height: calc(100vh - 90px);
    padding: 14px;
    border-radius: 8px; 
    position: relative;
  }
  
  /* 斑马纹样式 */
  :deep(.ant-table) {
    .even-row {
      background-color: #fafafa;
    }
    .odd-row {
      background-color: #ffffff;
    }
    
    /* 单元格悬停效果 */
    .ant-table-tbody > tr > td {
      &:hover {
        background-color: #e6f7ff !important;
        cursor: pointer;
      }
    }
    
    /* 有数据的单元格样式 */
    .has-data {
      background-color: #f6ffed;
    }
  }

  /* 右键菜单样式 */
  .context-menu {
    background: white;
    border-radius: 4px;
    overflow: hidden;
    
    .ant-menu {
      border-right: none;
    }
    
    .ant-menu-item {
      margin: 0;
      padding: 5px 12px;
    }
  }
  .cell-text {
  // display: inline-block;
  // max-width: 50px;
  // overflow: hidden;
  // text-overflow: ellipsis;
  // white-space: nowrap;
  
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 限制文本为2行 */
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>