<template>
  <el-dialog v-model="isVisible" width="640" align-center class="custom-leader-post-dialog">
    <template v-if="store.currentPost">
      <img src="@/assets/images/head/post-dialog-title.png" alt="" class="postTitleImage" />
      <div class="dialog-content">
        <div class="content">{{ store.currentPost.content }}</div>
        <div class="heat">
          <div class="item-heat-detail">
            <div class="item-heat-like">
              <Icon icon="ei:like" width="25" height="25" /> {{ store.currentPost.like }}
            </div>
            <div class="item-heat-comment">
              <Icon icon="la:comment-dots" width="25" height="25" /> {{ store.currentPost.comment }}
            </div>
            <div class="item-heat-transmit">
              <Icon icon="mdi:share-outline" width="25" height="25" /> {{
                store.currentPost.transmit
              }}
            </div>
          </div>
        </div>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { computed } from "vue";
import { useKeyNodeStore1 } from "@/store/keyNodeStore1";
import { Icon } from "@iconify/vue";

const store = useKeyNodeStore1();

const isVisible = computed({
  get: () => store.isPostDetailDialogVisible,
  set: (value) => {
    if (!value) {
      store.closePostDetail();
    }
  }
});
</script>

<style>
.content {
  color: #fff;
  opacity: 0.7;
}
.heat {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
.heat .item-heat-detail {
  display: flex;
}
.heat .item-heat-detail div {
  width: 70px;
  color: #fff;
  opacity: 0.7;
}
.postTitleImage {
  margin-top: -24px;
  margin-left: -2px;
}
</style>
