<template>
  <div class="process-overview-wrap">
    <AnalysisBox title="流程概要" :showAllBtn="false">
      <div class="main">
        <div class="left" :style="{ width: (maxLineWidth + 250) + 'px' }">
          <div class="top">
            <div class="top-line" :style="{ width: lineWidth }">
              <div class="top-line1" ref="topLineEndRef"></div>
            </div>
            <div class="start">
              <div class="icon">
                <img src="./assets/images/logo1.png" alt="" />
              </div>
              <div class="name">{{ "参议院" }}</div>
            </div>
            <div class="content-box" :style="senateBoxStyle">
              <div
                class="item-box"
                v-for="slot in senateSlots"
                :key="slot.key"
                style="width: 280px; flex-shrink: 0;"
              >
                <template v-if="slot.item">
                  <div class="item-box-dot">
                    <img src="./assets/images/top-line-dot.png" alt="" />
                  </div>
                  <div class="item-content">
                    <div class="item-header">
                      <div class="item-title" :title="slot.item.actionTitle">
                        {{ slot.item.actionTitle }} <span v-if="slot.item.versionId">({{ slot.item.versionId }})</span>
                      </div>
                      <div class="item-header-icon" @click="handleClickDetail(true, slot.item, $event)">
                        <img src="./assets/images/item-header-icon.png" alt="" />
                      </div>
                    </div>
                    <div class="item-info" v-if="slot.item.agreeVote !== null || slot.item.disagreeVote !== null">
                      {{ formatVoteText(slot.item) }}
                    </div>
                    <div class="item-main" v-if="slot.item.fynrList && slot.item.fynrList.length">
                      <div
                        class="item-main-item"
                        v-for="(sub, subIndex) in slot.item.fynrList"
                        :key="`${slot.item.id}-${subIndex}-${sub}`"
                      >
                        <div class="icon"></div>
                        <CommonPrompt :content="sub">
                          <div class="text">{{ sub }}</div>
                        </CommonPrompt>
                      </div>
                    </div>
                  </div>
                  <div class="item-time">
                    {{ slot.item.actionDate }}
                  </div>
                </template>
              </div>
            </div>
          </div>

          <div class="bottom">
            <div class="bottom-line" :style="{ width: lineWidth }">
              <div class="bottom-line1" ref="bottomLineEndRef"></div>
            </div>
            <div class="start">
              <div class="name">{{ "众议院" }}</div>

              <div class="icon">
                <img src="./assets/images/logo2.png" alt="" />
              </div>
            </div>
            <div class="content-box" :style="houseBoxStyle">
              <div
                class="item-box"
                v-for="slot in houseSlots"
                :key="slot.key"
                style="width: 280px; flex-shrink: 0;"
              >
                <template v-if="slot.item">
                  <div class="item-time">
                    {{ slot.item.actionDate }}
                  </div>
                  <div class="item-box-dot">
                    <img src="./assets/images/bottom-line-dot.png" alt="" />
                  </div>
                  <div class="item-content">
                    <div class="item-header">
                      <div class="item-title" :title="slot.item.actionTitle">
                        {{ slot.item.actionTitle }} <span v-if="slot.item.versionId">({{ slot.item.versionId }})</span>
                      </div>
                      <div class="item-header-icon" @click="handleClickDetail(true, slot.item, $event)">
                        <img src="./assets/images/item-header-icon.png" alt="" />
                      </div>
                    </div>
                    <div class="item-info" v-if="slot.item.agreeVote !== null || slot.item.disagreeVote !== null">
                      {{ formatVoteText(slot.item) }}
                    </div>
                    <div class="item-main" v-if="slot.item.fynrList && slot.item.fynrList.length">
                      <div
                        class="item-main-item"
                        v-for="(sub, subIndex) in slot.item.fynrList"
                        :key="`${slot.item.id}-${subIndex}-${sub}`"
                      >
                        <div class="icon"></div>
                        <CommonPrompt :content="sub">
                          <div class="text">{{ sub }}</div>
                        </CommonPrompt>
                      </div>
                    </div>
                  </div>
                </template>
              </div>
            </div>
          </div>
          <div class="right" :style="{ left: rightPos, top: rightTop }">
            <div class="junction-dot">
              <div class="inner-dot"></div>
            </div>
            <div class="right-line"></div>
          </div>
        </div>
      </div>
    </AnalysisBox>

    <ProcessOverviewDetailDialog
      :visible="isShowDetailDialog"
      :detailItem="currentDetailItem"
      :position="dialogPos"
      @close="handleClickDetail(false)"
    />
  </div>
</template>

<script setup>
import { ref, onMounted, computed, nextTick } from "vue";
import { getBillDyqkSummary } from "@/api/bill";
import CommonPrompt from "../../commonPrompt/index.vue";
import ProcessOverviewDetailDialog from "../../ProcessOverviewDetailDialog.vue";


// 获取法案流程
const actionList = ref([]);
const getBillDyqkSummaryList = async () => {
  try {
    const billId = window.sessionStorage.getItem("billId");
    if (!billId) return; // 防止 id 为空
    const params = {
      id: billId
    };
    const res = await getBillDyqkSummary(params);
    if (res && res.code === 200) {
      // 确保赋值的是数组，如果 data 为 null 则给空数组
      actionList.value = Array.isArray(res.data) ? res.data : [];
    } else {
      actionList.value = [];
    }
  } catch (error) {
    actionList.value = []; // 出错时也重置为空数组
  }
};

const ORG_SENATE = "参议院";
const ORG_HOUSE = "众议院";
const PRESIDENT_KEYWORD = "呈递给总统";
const TIMELINE_ITEM_WIDTH_PX = 280;

const getTime = (actionDate) => {
  const t = new Date(actionDate).getTime();
  return Number.isFinite(t) ? t : 0;
};

const formatVoteText = (item) => {
  if (!item) return "";
  const agree = item.agreeVote ?? 0;
  const disagree = item.disagreeVote ?? 0;
  return `${agree}赞成：${disagree}反对`;
};

// 总统交汇节点（用于确定两条时间线的汇合位置）
const presidentAction = computed(() => {
  return (
    actionList.value.find(
      (item) => item.actionTitle && item.actionTitle.includes(PRESIDENT_KEYWORD)
    ) || null
  );
});

// 全局时间排序后的“时间步”
const sortedTimeline = computed(() => {
  return [...actionList.value].sort((a, b) => {
    const tA = getTime(a.actionDate);
    const tB = getTime(b.actionDate);
    if (tA !== tB) return tA - tB;

    // 时间相同的情况下用 id 保证稳定排序，避免节点在不同渲染中漂移
    const idA = String(a.id ?? "");
    const idB = String(b.id ?? "");
    return idA.localeCompare(idB);
  });
});

// 交汇点（总统节点）在全局时间线里的位置：slice endIndexExclusive 用来排除总统节点本身
const mergeIndexExclusive = computed(() => {
  if (!sortedTimeline.value.length) return 0;
  if (!presidentAction.value) return sortedTimeline.value.length;

  const idx = sortedTimeline.value.findIndex((item) => item.id === presidentAction.value.id);
  return idx >= 0 ? idx : sortedTimeline.value.length;
});

// 两条时间线共享同一组时间步（每个时间步只展示属于该阵营的事件；其他阵营用空占位对齐）
const timelineSlots = computed(() => {
  return sortedTimeline.value.slice(0, mergeIndexExclusive.value);
});

const senateSlots = computed(() => {
  return timelineSlots.value.map((step) => ({
    key: step.id,
    item: step.orgName === ORG_SENATE ? step : null
  }));
});

const houseSlots = computed(() => {
  return timelineSlots.value.map((step) => ({
    key: step.id,
    item: step.orgName === ORG_HOUSE ? step : null
  }));
});

const timelineCount = computed(() => timelineSlots.value.length);

// 计算最大线条宽度数值（两条线共享时间步长度）
const maxLineWidth = computed(() => {
  const senateWidth = 254 + timelineCount.value * TIMELINE_ITEM_WIDTH_PX;
  const houseWidth = 150 + timelineCount.value * TIMELINE_ITEM_WIDTH_PX;
  return Math.max(senateWidth, houseWidth);
});

// 绑定给线条的样式
const lineWidth = computed(() => {
  return maxLineWidth.value + 'px';
});

// 参议院容器宽度：线条总长 + 线条左偏移(110) - 容器左偏移(254)
const senateBoxStyle = computed(() => {
  return {
    width: (maxLineWidth.value + 110 - 254) + 'px',
    justifyContent: 'flex-start'
  };
});

// 众议院容器宽度：线条总长 + 线条左偏移(110) - 容器左偏移(150)
const houseBoxStyle = computed(() => {
  return {
    width: (maxLineWidth.value + 110 - 150) + 'px',
    justifyContent: 'flex-start'
  };
});

const rightPos = computed(() => {
  // 右侧节点位置 = 线条宽度 + 斜线水平投影长度(约90px)
  return (maxLineWidth.value + 90) + 'px';
});

const topLineEndRef = ref(null);
const bottomLineEndRef = ref(null);
const rightTop = ref('370px');

const isShowDetailDialog = ref(false);
const currentDetailItem = ref({});
const dialogPos = ref({ left: '0px', top: '0px' });

const handleClickDetail = (isShow, item = {}, event = null) => {
  isShowDetailDialog.value = isShow;
  if (isShow) {
    currentDetailItem.value = item;
    if (event) {
      // 计算弹窗位置，出现在点击位置附近（偏移一些避免挡住鼠标）
      const x = event.clientX;
      const y = event.clientY;

      // 获取包裹容器的偏移量，因为弹窗是 absolute 定位在 wrap 里的
      const wrap = document.querySelector('.process-overview-wrap');
      const rect = wrap.getBoundingClientRect();

      let left = x - rect.left + 20;
      let top = y - rect.top - 50;

      // 边界处理：防止超出右边界
      if (left + 480 > rect.width) {
        left = x - rect.left - 500;
      }

      dialogPos.value = {
        left: left + 'px',
        top: top + 'px'
      };
    }
  }
};

// 挂载阶段调用
onMounted(async () => {
  await getBillDyqkSummaryList();
  await nextTick();
  updateRightTop();
});

const updateRightTop = () => {
  // 交汇点需要精确对齐上下两条斜线端点在页面中的 y 坐标
  // rightTop 是相对 .process-overview-wrap 的 absolute top
  const wrap = document.querySelector('.process-overview-wrap');
  if (!wrap) return;

  const topLineEndEl = topLineEndRef.value;
  const bottomLineEndEl = bottomLineEndRef.value;
  if (!topLineEndEl || !bottomLineEndEl) return;

  const wrapRect = wrap.getBoundingClientRect();
  const topRect = topLineEndEl.getBoundingClientRect();
  const bottomRect = bottomLineEndEl.getBoundingClientRect();

  // 根据 CSS 的旋转原点：
  // - top-line1: rotate(45deg) 且 transform-origin: 0 0，因此左侧“尖端”约等于 rect.top
  // - bottom-line1: rotate(-45deg) 且 transform-origin: 0 100%，因此左侧“尖端”约等于 rect.bottom
  // 但我们对齐的是“斜线中心线”，而不是外包矩形边缘。
  // 该斜线块在样式里高度为 8px，所以中心线偏移 4px
  const LINE_THICKNESS_PX = 8;
  const topLineCenterY = topRect.top + LINE_THICKNESS_PX / 2;
  const bottomLineCenterY = bottomRect.bottom - LINE_THICKNESS_PX / 2;

  const desiredCenterY = (topLineCenterY + bottomLineCenterY) / 2;

  // .right 里 junction-dot 高度为 24px，flex 会让 right-line 与其垂直居中
  const junctionCenterOffsetY = 12;
  // 经验补偿：整体向上平移约 49px，使视觉交汇点精确落在两条斜线交点
  const VISUAL_OFFSET_Y = -49;
  rightTop.value = (desiredCenterY - wrapRect.top - junctionCenterOffsetY + VISUAL_OFFSET_Y) + 'px';
};
</script>

<style lang="scss" scoped>
.process-overview-wrap {
  width: 1600px;
  height: 848px;
  margin-top: 16px;
  position: relative;

  .box-header {
    width: 100%;
    height: 56px;
    display: flex;
    position: relative;

    .header-left {
      margin-top: 18px;
      width: 8px;
      height: 20px;
      border-radius: 0 4px 4px 0;
      background: var(--color-main-active);
    }

    .title {
      margin-left: 14px;
      margin-top: 14px;
      height: 26px;
      line-height: 26px;
      color: var(--color-main-active);
      font-family: Microsoft YaHei;
      font-size: 20px;
      font-weight: 700;
    }

    .header-right {
      position: absolute;
      top: 14px;
      right: 12px;
      display: flex;
      justify-content: flex-end;
      gap: 4px;

      .icon {
        width: 28px;
        height: 28px;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .main {
    margin-left: 24px;
    margin-right: 24px;
    height: 790px;
    padding: 3px 10px 0px 10px;
    overflow-x: auto;
    overflow-y: hidden;

    /* 自定义滚动条样式，模拟进度条 */
    &::-webkit-scrollbar {
      height: 8px;
    }

    &::-webkit-scrollbar-track {
      background: #f1f1f1;
      border-radius: 4px;
    }

    &::-webkit-scrollbar-thumb {
      background: rgba(20, 89, 187, 0.2);
      border-radius: 4px;

      &:hover {
        background: rgba(20, 89, 187, 0.4);
      }
    }

    .left {
      height: 680px;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      /* 确保内容区域宽度足够展示所有节点和右侧汇合点 */
      min-width: fit-content;
      padding-right: 150px;

      .top {
        height: 260px;
        display: flex;
        position: relative;

        .top-line {
          position: absolute;
          left: 110px;
          top: 242px;
          height: 8px;
          width: 1100px;
          background: url("./assets/images/top-line-icon.png");

          .top-line1 {
            position: absolute;
            left: 100%;
            top: 0;
            height: 8px;
            width: 127px;
            background: url("./assets/images/top-line-icon.png");
            transform: rotate(45deg);
            transform-origin: 0 0;
          }
        }

        .start {
          width: 120px;
          height: 260px;
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
          align-items: center;

          .icon {
            width: 120px;
            height: 120px;

            img {
              width: 100%;
              height: 100%;
            }
          }

          .name {
            margin-top: 30px;
            width: 100px;
            height: 30px;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            gap: 8;
            padding: 1px 8px;
            box-sizing: border-box;
            border: 1px solid rgba(186, 224, 255, 1);
            border-radius: 4px;
            background: rgba(230, 244, 255, 1);
            color: rgba(22, 119, 255, 1);
            font-family: Microsoft YaHei;
            font-size: 16px;
            font-weight: 700;
            line-height: 20px;
          }
        }

        .content-box {
          display: flex;
          margin-left: 134px;
          margin-bottom: 19px;

          .item-box {
            padding: 2px 15px;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            position: relative;

            .item-time {
              position: absolute;
              bottom: -50px;
              left: 30px;
              height: 30px;
              color: rgba(20, 89, 187, 1);
              font-family: Microsoft YaHei;
              font-size: 16px;
              font-weight: 700;
              line-height: 30px;
            }

            .item-box-dot {
              position: absolute;
              z-index: 9999;
              left: 10px;
              bottom: -7px;
              width: 12px;
              height: 12px;

              img {
                width: 100%;
                height: 100%;
              }
            }

            .item-content {
              border-left: 1px solid rgb(20, 89, 187);
            }

            .item-header {
              display: flex;
              align-items: center;
              height: 30px;
              padding: 0 10px;
              margin-bottom: 8px;

              .item-title {
                line-height: 26px;
                color: rgb(59, 65, 75);
                font-family: Microsoft YaHei;
                font-size: 20px;
                font-weight: 700;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;

                span {
                  color: rgba(132, 136, 142, 1);
                  font-family: Microsoft YaHei;
                  font-size: 14px;
                  font-weight: 400;
                  line-height: 22px;
                }
              }

              .item-header-icon {
                margin-left: 5px;
                width: 16px;
                height: 16px;
                cursor: pointer;
                flex-shrink: 0;

                img {
                  width: 100%;
                  height: 100%;
                }
              }
            }

            .item-info {
              padding: 0 10px;
              color: rgb(59, 65, 75);
              font-family: Microsoft YaHei;
              font-size: 16px;
              font-weight: 400;
              line-height: 24px;
              margin-bottom: 4px;
            }

            .item-main {
              padding: 5px 10px;

              .item-main-item {
                display: flex;
                align-items: baseline;
                width: 269px;
                margin-bottom: 4px;

                .icon {
                  margin: 9px 12px;
                  width: 6px;
                  height: 6px;
                  border-radius: 3px;
                  background: #84888e;
                }

                .text {
                  width: 240px;
                  color: rgb(59, 65, 75);
                  font-family: Microsoft YaHei;
                  font-size: 16px;
                  font-weight: 400;
                  line-height: 24px;

                  display: -webkit-box;
                  -webkit-line-clamp: 2;
                  -webkit-box-orient: vertical;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  height: 48px;
                }

                :deep(.text-ellipsis) {
                  white-space: normal !important;
                }
              }
            }

            .item-footer {
              border-left: 1px solid rgb(20, 89, 187);
              display: flex;
              padding: 8px 15px;
              justify-content: space-between;

              .item-footer-box {
                display: flex;
                margin-left: 12px;

                .icon {
                  position: relative;
                  width: 24px;
                  height: 24px;

                  img {
                    width: 100%;
                    height: 100%;
                  }

                  .inner-icon {
                    position: absolute;
                    right: -5px;
                    top: 0;
                    width: 12px;
                    height: 12px;
                    border-radius: 6px;
                    background: rgba(255, 255, 255, 0.8);
                    display: flex;
                    box-sizing: border-box;
                    padding: 1px;

                    img {
                      width: 10px;
                      height: 10px;
                    }
                  }
                }

                .text {
                  margin-left: 9px;
                  height: 24px;
                  color: rgba(95, 101, 108, 1);
                  font-family: Microsoft YaHei;
                  font-size: 14px;
                  font-weight: 400;
                  line-height: 24px;
                }
              }
            }
          }
        }
      }

      .bottom {
        margin-top: 150px;
        // height: 300px;
        display: flex;
        position: relative;

        .bottom-line {
          position: absolute;
          left: 110px;
          top: 11px;
          height: 8px;
          width: 1100px;
          background: url("./assets/images/bottom-line-icon.png");

          .bottom-line1 {
            position: absolute;
            left: 100%;
            top: 0;
            height: 8px;
            width: 127px;
            background: url("./assets/images/bottom-line-icon.png");
            transform: rotate(-45deg);
            transform-origin: 0 100%;
          }
        }

        .start {
          width: 120px;
          // height: 260px;
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          align-items: center;

          .icon {
            margin-top: 30px;
            width: 120px;
            height: 120px;

            img {
              width: 100%;
              height: 100%;
            }
          }

          .name {
            width: 100px;
            height: 30px;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            gap: 8;
            padding: 1px 8px;
            box-sizing: border-box;
            border-radius: 4px;
            border: 1px solid rgba(255, 229, 143, 1);
            background: rgba(255, 251, 230, 1);
            color: rgba(250, 173, 20, 1);
            font-family: Microsoft YaHei;
            font-size: 16px;
            font-weight: 700;
            line-height: 20px;
          }
        }

        .content-box {
          display: flex;
          margin-left: 30px;

          .item-box {
            padding: 20px 15px;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            position: relative;

            .item-time {
              position: absolute;
              top: -30px;
              left: 30px;
              height: 30px;
              color: rgba(255, 172, 77, 1);
              font-family: Microsoft YaHei;
              font-size: 16px;
              font-weight: 700;
              line-height: 30px;
            }

            .item-box-dot {
              position: absolute;
              z-index: 9999;
              left: 10px;
              top: 7px;
              width: 12px;
              height: 12px;

              img {
                width: 100%;
                height: 100%;
              }
            }

            .item-content {
              border-left: 1px solid rgba(255, 172, 77, 1);
            }

            .item-header {
              display: flex;
              align-items: center;
              height: 30px;
              padding: 5px 10px;
              margin-top: 8px;

              .item-title {
                line-height: 26px;
                color: rgb(59, 65, 75);
                font-family: Microsoft YaHei;
                font-size: 20px;
                font-weight: 700;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;

                span {
                  color: rgba(132, 136, 142, 1);
                  font-family: Microsoft YaHei;
                  font-size: 14px;
                  font-weight: 400;
                  line-height: 22px;
                }
              }

              .item-header-icon {
                margin-left: 5px;
                width: 16px;
                height: 16px;
                cursor: pointer;
                flex-shrink: 0;

                img {
                  width: 100%;
                  height: 100%;
                }
              }
            }

            .item-info {
              padding: 0 10px;
              color: rgb(59, 65, 75);
              font-family: Microsoft YaHei;
              font-size: 16px;
              font-weight: 400;
              line-height: 24px;
              margin-top: 8px;
            }

            .item-main {
              padding: 5px 10px;

              .item-main-item {
                display: flex;
                align-items: baseline;
                width: 269px;
                margin-top: 4px;

                .icon {
                  margin: 9px 12px;
                  width: 6px;
                  height: 6px;
                  border-radius: 3px;
                  background: #84888e;
                }

                .text {
                  width: 240px;
                  color: rgb(59, 65, 75);
                  font-family: Microsoft YaHei;
                  font-size: 16px;
                  font-weight: 400;
                  line-height: 24px;
                  display: -webkit-box;
                  -webkit-line-clamp: 2;
                  -webkit-box-orient: vertical;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  height: 48px;
                }

                :deep(.text-ellipsis) {
                  white-space: normal !important;
                }
              }
            }

            .item-footer {
              border-left: 1px solid rgba(255, 172, 77, 1);
              display: flex;
              padding: 8px 15px;
              justify-content: space-between;

              .item-footer-box {
                display: flex;
                margin-left: 12px;

                .icon {
                  position: relative;
                  width: 24px;
                  height: 24px;

                  img {
                    width: 100%;
                    height: 100%;
                  }

                  .inner-icon {
                    position: absolute;
                    right: -5px;
                    top: 0;
                    width: 12px;
                    height: 12px;
                    border-radius: 6px;
                    background: rgba(255, 255, 255, 0.8);
                    display: flex;
                    box-sizing: border-box;
                    padding: 1px;

                    img {
                      width: 10px;
                      height: 10px;
                    }
                  }
                }

                .text {
                  margin-left: 9px;
                  height: 24px;
                  color: rgba(95, 101, 108, 1);
                  font-family: Microsoft YaHei;
                  font-size: 14px;
                  font-weight: 400;
                  line-height: 24px;
                }
              }
            }
          }
        }
      }

      .right {
        position: absolute;
        top: 370px;
        margin-left: 90px;
        display: flex;
        align-items: center;

        .junction-dot {
          width: 24px;
          height: 24px;
          border-radius: 50%;
          background: #5f656c;
          display: flex;
          justify-content: center;
          align-items: center;
          z-index: 10;
          margin-right: -4px; // 稍微重叠

          .inner-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #fff;
          }
        }

        .right-line {
          width: 70px;
          height: 8px;
          background: url("./assets/images/right-line-icon.png");
        }
      }
    }
  }

  .footer {
    width: 1710px;
    height: 76px;
    display: flex;
    border: 1px solid rgba(231, 241, 255, 1);
    border-radius: 4px;
    background: rgba(246, 251, 255, 1);
    margin-left: 13px;

    .footer-left {
      margin-top: 28px;
      margin-left: 12px;
      width: 19px;
      height: 20px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .footer-center {
      margin-left: 13px;
      margin-top: 8px;
      width: 1617px;
      height: 60px;
      color: var(--color-main-active);
      font-family: Microsoft YaHei;
      font-size: 14px;
      font-weight: 400;
      line-height: 24px;
    }

    .footer-right {
      margin-left: 13px;
      margin-top: 28px;
      width: 24px;
      height: 24px;
      background: rgba(231, 241, 255, 1);
      border-radius: 12px;
      background: #e7f1ff;
      box-sizing: border-box;
      padding: 3px;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .dialog-wrapper1 {
    position: absolute;
    z-index: 9999;
    top: -120px;
    width: 1600px;
    height: 1000px;
    box-sizing: border-box;
    border: 1px solid rgba(230, 231, 232, 1);
    border-radius: 10px;
    background: rgba(255, 255, 255, 1);

    .dialog-header {
      height: 48px;
      box-sizing: border-box;
      border-bottom: 1px solid rgba(240, 242, 244, 1);
      display: flex;
      justify-content: space-between;

      .header-left {
        display: flex;

        .icon {
          width: 20px;
          height: 20px;
          margin-left: 14px;
          margin-top: 14px;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .title {
          margin-left: 11px;
          margin-top: 16px;
          height: 14px;
          color: rgba(95, 101, 108, 1);
          font-family: Microsoft YaHei;
          font-size: 14px;
          font-weight: 400;
          line-height: 14px;
        }
      }

      .header-right {
        width: 16px;
        height: 16px;
        margin-top: 16px;
        margin-right: 16px;
        cursor: pointer;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }

    .dialog-info {
      display: flex;
      width: 1552px;
      height: 64px;
      margin: 12px auto;

      .info-box1 {
        span {
          color: rgba(95, 101, 108, 1);
          font-family: Microsoft YaHei;
          font-size: 14px;
          font-weight: 400;
          line-height: 14px;
        }
      }

      .info-box2 {
        margin-left: 24px;

        span {
          color: rgba(95, 101, 108, 1);
          font-family: Microsoft YaHei;
          font-size: 14px;
          font-weight: 400;
          line-height: 14px;
        }
      }

      .info-box3 {
        display: flex;

        .icon1 {
          margin-left: 25px;
          margin-top: 8px;
          width: 14px;
          height: 14px;
          border-radius: 4px;
          border: 1px solid #333;
        }

        .icon2 {
          margin-left: 25px;
          margin-top: 8px;
          width: 18px;
          height: 18px;
          border-radius: 4px;

          img {
            width: 18px;
            height: 18px;
          }
        }

        .text {
          margin-left: 9px;
          margin-top: 9px;
          color: rgba(95, 101, 108, 1);
          font-family: Microsoft YaHei;
          font-size: 14px;
          font-weight: 400;
          line-height: 14px;
        }
      }

      .info-box4 {
        margin-left: 500px;
        margin-top: 5px;
        position: relative;

        .icon {
          position: absolute;
          right: 5px;
          top: 5px;
          width: 16px;
          height: 16px;
          cursor: pointer;

          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }

    .dialog-main {
      height: 750px;
      width: 1505px;
      margin: 0 auto;
      border-bottom: 1px solid #e9e9e9;

      .dialog-main-header {
        width: 1505px;
        height: 54px;
        display: flex;
        background: rgba(59, 65, 75, 1);
        color: #fff;
        font-family: Microsoft YaHei;
        font-size: 16px;
        font-weight: 700;
        line-height: 54px;

        .dialog-main-header-left {
          flex: 1;
          padding-left: 16px;
        }

        .dialog-main-header-right {
          flex: 1;
        }
      }

      .dialog-main-item {
        width: 1505px;
        display: flex;
        padding: 16px;
        height: 139px;
        box-sizing: border-box;

        .dialog-main-left {
          flex: 1;

          .dialog-main-item-title {
            color: rgba(59, 65, 75, 1);
            font-family: Microsoft YaHei;
            font-size: 16px;
            font-weight: 700;
            line-height: 30px;
            display: flex;

            .title-left {
              width: 96px;
            }

            .title-right {
              flex: 1;
            }
          }

          .dialog-main-item-content {
            margin-left: 96px;
            color: rgba(132, 136, 142, 1);
            font-family: Microsoft YaHei;
            font-size: 14px;
            font-weight: 400;
            line-height: 18px;
          }
        }

        .dialog-main-right {
          flex: 1;

          .dialog-main-item-title {
            color: rgba(59, 65, 75, 1);
            font-family: Microsoft YaHei;
            font-size: 16px;
            font-weight: 700;
            line-height: 30px;
            display: flex;

            .title-left {
              width: 96px;
            }

            .title-right {
              flex: 1;
            }
          }

          .dialog-main-item-content {
            margin-left: 96px;
            color: rgba(132, 136, 142, 1);
            font-family: Microsoft YaHei;
            font-size: 14px;
            font-weight: 400;
            line-height: 18px;
          }
        }
      }

      .dialog-main-item:nth-child(2n-1) {
        border-radius: 4px;
        background: rgba(248, 249, 250, 1);
      }
    }

    .dialog-footer {
      height: 100px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
