<template>
  <div v-if="visible" ref="dialogRef" class="dialog-wrapper" :style="position">
    <div class="dialog-box1" @mousedown="handleMouseDown">
      <div class="icon">
        <img v-if="detailItem.orgName === '参议院'" :src="logoSenate" alt="" />
        <img v-else :src="logoHouse" alt="" />
      </div>
      <div class="title">
        <div class="date">{{ detailItem.actionDate }}</div>
        <div class="text">
          {{ detailItem.actionTitle }}
        </div>
      </div>
      <div class="close" @click="handleClose">
        <img :src="closeIcon" alt="" />
      </div>
    </div>
    <div class="dialog-box2" v-if="detailItem.agreeVote !== null || detailItem.disagreeVote !== null">
      <div class="vote-bar">
        <div class="agree-bar" :style="{ flex: detailItem.agreeVote || 1 }"></div>
        <div class="disagree-bar" :style="{ flex: detailItem.disagreeVote || 1 }"></div>
      </div>
      <div class="vote-text">
        <div class="agree-text">{{ (detailItem.agreeVote || 0) + "赞成" }}</div>
        <div class="disagree-text">{{ (detailItem.disagreeVote || 0) + "反对" }}</div>
      </div>
    </div>
    <template v-if="detailItem.fynrList && detailItem.fynrList.length">
      <div class="dialog-box4">
        <div class="box4-left">
          <div class="icon">
            <img :src="changeIcon" alt="" />
          </div>
          <div class="text">{{ "变更条款" }}</div>
        </div>
      </div>
      <div class="dialog-box5">
        <div class="box5-item" v-for="(sub, subIndex) in detailItem.fynrList" :key="subIndex + '-' + sub">
          <div class="icon"></div>
          <div class="text">{{ sub }}</div>
        </div>
      </div>
    </template>
  </div>
</template>

<script setup>
import { ref } from "vue";

defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  detailItem: {
    type: Object,
    default: () => ({}),
  },
  position: {
    type: Object,
    default: () => ({ left: "0px", top: "0px" }),
  },
});

const emit = defineEmits(["close"]);

const logoSenate = new URL("@/views/bill/deepDig/processOverview/assets/images/logo1.png", import.meta.url).href;
const logoHouse = new URL("@/views/bill/deepDig/processOverview/assets/images/logo2.png", import.meta.url).href;
const closeIcon = new URL("@/views/bill/deepDig/processOverview/assets/images/close.png", import.meta.url).href;
const changeIcon = new URL("@/views/bill/deepDig/processOverview/assets/images/dialog-box4-icon.png", import.meta.url).href;

const dialogRef = ref(null);

const handleClose = () => {
  emit("close");
};

const handleMouseDown = (e) => {
  const dialog = dialogRef.value;
  if (!dialog) return;

  const startX = e.clientX;
  const startY = e.clientY;
  const initialLeft = dialog.offsetLeft;
  const initialTop = dialog.offsetTop;

  const move = (moveEvent) => {
    const deltaX = moveEvent.clientX - startX;
    const deltaY = moveEvent.clientY - startY;

    dialog.style.right = "auto";
    dialog.style.left = `${initialLeft + deltaX}px`;
    dialog.style.top = `${initialTop + deltaY}px`;
  };

  const stop = () => {
    document.removeEventListener("mousemove", move);
    document.removeEventListener("mouseup", stop);
  };

  document.addEventListener("mousemove", move);
  document.addEventListener("mouseup", stop);
};
</script>

<style lang="scss" scoped>
.dialog-wrapper {
  position: absolute;
  width: 480px;
  padding-bottom: 20px;
  box-sizing: border-box;
  border: 1px solid rgba(230, 231, 232, 1);
  border-radius: 4px;
  background: rgba(255, 255, 255, 1);
  z-index: 10000;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);

  .dialog-box1 {
    display: flex;
    min-height: 90px;
    height: auto;
    padding-bottom: 15px;
    position: relative;
    border-bottom: 1px solid rgba(240, 242, 244, 1);
    cursor: move;

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

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

    .title {
      margin-top: 20px;
      margin-left: 16px;
      width: 350px;

      .date {
        height: 22px;
        color: rgba(59, 65, 75, 1);
        font-family: Microsoft YaHei;
        font-size: 16px;
        font-weight: 700;
        line-height: 22px;
      }

      .text {
        margin-top: 4px;
        color: rgba(59, 65, 75, 1);
        font-family: Microsoft YaHei;
        font-size: 16px;
        font-weight: 700;
        line-height: 22px;

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

    .close {
      position: absolute;
      top: 14px;
      right: 15px;
      width: 16px;
      height: 16px;
      cursor: pointer;

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

  .dialog-box2 {
    height: 59px;
    padding: 0 23px;

    .vote-bar {
      display: flex;
      height: 4px;
      width: 100%;
      margin-top: 20px;
      border-radius: 2px;
      overflow: hidden;

      .agree-bar {
        background: #52c41a;
        margin-right: 2px;
      }

      .disagree-bar {
        background: #f5222d;
      }
    }

    .vote-text {
      display: flex;
      justify-content: space-between;
      margin-top: 8px;

      .agree-text {
        color: #52c41a;
        font-size: 14px;
      }

      .disagree-text {
        color: #f5222d;
        font-size: 14px;
      }
    }
  }

  .dialog-box4 {
    width: 438px;
    margin-left: 23px;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    height: 30px;

    .box4-left {
      display: flex;

      .icon {
        margin-top: 6px;
        width: 18px;
        height: 18px;

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

      .text {
        width: 64px;
        height: 30px;
        margin-left: 6px;
        color: rgba(95, 101, 108, 1);
        font-family: Microsoft YaHei;
        font-size: 16px;
        font-weight: 700;
        line-height: 30px;
      }
    }
  }

  .dialog-box5 {
    margin-top: 3px;
    margin-left: 23px;
    width: 438px;

    .box5-item {
      min-height: 30px;
      color: rgba(132, 136, 142, 1);
      font-family: Microsoft YaHei;
      font-size: 16px;
      font-weight: 400;
      line-height: 1.5;
      display: flex;
      margin-bottom: 8px;

      .icon {
        flex-shrink: 0;
        margin-left: 15px;
        width: 6px;
        height: 6px;
        margin-top: 9px;
        border-radius: 3px;
        background: #84888e;
      }

      .text {
        margin-left: 10px;
        word-break: break-all;
      }
    }
  }
}
</style>

