<template>
  <BasicDrawer v-bind="$attrs" title="查看时间轴" @close="closeDrawer" @register="registerDrawer" width="100%" destroyOnClose>
    <div class="timeline-container">
      <a-timeline>
        <a-timeline-item v-for="node in timelineData" :key="node.id" :color="getTimelineColor(node)">
          <div class="timeline-node">
            <div class="node-content">
              <p><strong>顺序号：</strong> {{ formatTime(node.ind) }}</p>
              <p><strong>节点名称:</strong> {{ node.name }}</p>

              <p v-if="node.des"><strong>备注:</strong> {{ node.des }}</p>
              <div v-if="node.auditItems && node.auditItems.length > 0" class="related-data">
                <h5>监管要求</h5>
                <a-tag v-for="item in node.auditItems" :key="item.id" color="blue" @click="viewBasisDetail(item)"  style="cursor: pointer;">
                  {{ item.tname }}
                </a-tag>
              </div>
              <div v-if="node.metricItems && node.metricItems.length > 0" class="related-data">
                <h5>监测指标</h5>
                <a-tag v-for="item in node.metricItems" :key="item.id" color="green"  @click="viewMetricDetail(item)" style="cursor: pointer;">
                  {{ item.tname }}
                </a-tag>
              </div>
            </div>
          </div>
        </a-timeline-item>
      </a-timeline>
    </div>
  </BasicDrawer>
  <!-- 依据详情抽屉 -->
  <AuditInnerDetailDrawer ref="AuditInnerDetailDrawerRef" :visible="showDetailDrawer" :basis="selectedBasis" @close="showDetailDrawer = false" />
  <MetricMonitorSetModal @register="registerMetricModal" @success="handleSuccess"></MetricMonitorSetModal>

</template>

<script lang="ts" name="wb.config-wbCheck" setup>
  import { ref } from 'vue';
  import { allCheckList } from '../WbCheck.api';
  import { getAllCheckMethod, alllist, deleteOne, batchDelete, saveBatch, queryAllMetric, saveOrUpdate } from '../WbCheckItem.api';
  import { BasicDrawer, useDrawerInner } from '/src/components/Drawer';
  import AuditInnerDetailDrawer from '/@/views/newlib/components/modal/AuditInnerDetailDrawer.vue';
  import MetricMonitorSetModal  from '/@/views/metric/components/MetricMonitorSetModal.vue'; 
  import {useModal} from '/@/components/Modal';
  import { defHttp } from '/@/utils/http/axios'; 
  
  
  const timelineData = ref();
  const [registerDrawer] = useDrawerInner(async (data) => {
    loadTimelineData(data);
  });
  const AuditInnerDetailDrawerRef = ref();
  const showDetailDrawer = ref(false);
  async function loadTimelineData(params) {
    try {
      const retData = await allCheckList(params);

      if (retData && retData.length > 0) {
        const nodesWithData = await Promise.all(
          retData.map(async (node) => {
            try {
              // 加载监管要求数据
              const auditResult = await alllist({ checkId: node.id, tp: 1 });
              const auditItems = auditResult || [];

              // 加载评价指标数据
              const metricResult = await alllist({ checkId: node.id, tp: 2 });
              const metricItems = metricResult || [];

              return {
                ...node,
                auditItems,
                metricItems,
              };
            } catch (error) {
              console.error('加载节点关联数据失败:', error);
              return node;
            }
          })
        );

        timelineData.value = nodesWithData;
      }
    } catch (error) {
      console.error('加载时间轴数据失败:', error);
    }
  }

  function getTimelineColor(node) {
    return 'blue';
  }

  function formatTime(timeStr) {
    if (!timeStr) return '';
    return timeStr.length > 10 ? timeStr.substr(0, 10) : timeStr;
  }

  function closeDrawer() {}

  const selectedBasis = ref<any>(null);

  const viewBasisDetail = (item: any) => {
    selectedBasis.value = item;
    const data = {
      name: item.tname,
      comeFrom: 2,
    };
    AuditInnerDetailDrawerRef.value?.open(data);
    showDetailDrawer.value = true;
  };


  const [registerMetricModal, {openModal}] = useModal();
   
  const viewMetricDetail = async (record) => {
    const queryByIdUrl = '/metric/metricMonitorSet/queryById';
    let params = { id: record.tid };
    const data = await defHttp.get({ url: queryByIdUrl, params });
  
     openModal(true, {
       record:data,
       isUpdate: true,
       showFooter: false,
     });
   }


</script>

<style scoped>
  .timeline-container {
    padding: 20px;
    background: #fafafa;
    border-radius: 8px;
    margin-top: 16px;
  }

  .timeline-node {
    background: white;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 8px;
  }

  .node-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
  }

  .node-header h4 {
    margin: 0;
    color: #1890ff;
    font-size: 16px;
    font-weight: 600;
  }

  .node-actions {
    display: flex;
    gap: 8px;
  }

  .node-content {
    color: #666;
  }

  .node-content p {
    margin: 4px 0;
  }

  .related-data {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
  }

  .related-data h5 {
    margin: 0 0 8px 0;
    color: #333;
    font-size: 14px;
    font-weight: 600;
  }

  .related-data .ant-tag {
    margin: 2px 4px 2px 0;
  }
</style>
