<template>
  <div
    class="w-[450px] effect tracking-wider relative right-show p-2 border-x rounded-md border-solid border-slate-50 shadow-2xl"
  >
    <div
      id="dy_poster"
      class="w-[400px] h-full relative mx-auto bg-white dark:bg-[#161616] dark:text-white"
    >
      <!-- 顶部占位元素 -->
      <div class="h-[180px] bg-black"></div>
      <!-- 评论区 -->
      <div class="comment_area px-5 pt-5">
        <!-- 地址区域 -->
        <div class="area_box flex items-center mb-5" v-if="headerType === 1">
          
          <img
            :src="location"
            class="w-[20px] h-[20px] rounded bg-[#57bb6c] p-[2px] mr-5"
            alt=""
          />
          <div class="flex-1">
            <div class="flex justify-between mb-[2px]">
              <div class="">
                {{ regionalInfo.currentArea }}
              </div>
              <svg-icon :name="'x'" size="20px" />
            </div>
            <div class="text-[#999] text-[12px]">
              {{ regionalInfo.viewCount }}{{ regionalInfo.viewUnit }}人看过
            </div>
          </div>
        </div>
        <!-- 大家都在搜 -->
        <div
          v-else
          class="mb-3 flex text-[15px] text-[#595b5f] dark:text-[#c8c8c8]"
        >
          <div>{{ everyoneSearch.label }}：</div>

          <div
            class="dark:text-[#e2c26d] flex-1 flex justify-between text-[#124b94]"
          >
            <div class="relative pr-[13px]">
              {{ everyoneSearch.title }}
              <div class="absolute top-[-4px] right-0">
                <el-icon size="10px"><Search /></el-icon>
              </div>
            </div>

            <svg-icon class="f" :name="'x'" size="20px" />
          </div>
        </div>
        <!-- 评论条数 -->
        <div class="total text-center text-[14px] pb-[10px]">
          {{ total }}{{ commentLabel }}
        </div>
        <!-- 评论列表 -->
        <div class="comment_list overflow-scroll h-[540px]">
          <div
            v-for="item in data"
            :key="item.id"
            class="comment_list_item flex"
          >
            <div>
              <img
                :id="item.avatar"
                class="rounded-full w-10 h-10"
                :alt="item.avatar"
                :src="item.avatar"
              />
            </div>
            <div class="flex-1 ml-3">
              <div class="flex text-[14px] dark:text-[#626262] text-[#adadad]">
                <div class="mr-[5px]">
                  {{ item.nickname }}
                </div>
                <div
                  v-if="item.isAuthor"
                  class="bg-[#f62d5a] text-white py-[1px] scale-90 rounded px-[6px] text-[12px]"
                >
                  {{ AuthorTitle }}
                </div>
              </div>

              <div
                class="item_content py-2 text-[15px] break-all tracking-[0.1px]"
              >
                {{ item.content }}
              </div>

              <el-image
                v-if="item.firstImgUrl"
                class="h-[125px] w-[110px] mb-[5px] rounded"
                :src="item.firstImgUrl"
                fit="fill"
                alt="img"
              />

              <div class="dark:text-[#626262] text-[#adadad] text-[14px]">
                <div class="flex justify-between items-center">
                  <div class="flex">
                    <div>{{ item.recoveryTime }}·{{ item.area }}</div>
                    <div class="ml-3">{{ replyTitle }}</div>
                  </div>
                  <div class="flex items-center">
                    <div
                      class="flex items-center mr-5"
                      :class="[item.isLike ? 'text-[#f62d5a]' : '']"
                    >
                      <img
                        class="w-[14px] h-[14px] mr-1"
                        :src="item.isLike ? isLike : ding"
                        alt=""
                      />

                      {{ item.likeCount }}
                    </div>
                    <div
                      class="flex items-center"
                      :class="[item.isDisLike ? 'text-[#f62d5a]' : '']"
                    >
                      <img :src="cai" class="w-5 h-5" alt="" />
                    </div>
                  </div>
                </div>
              </div>
              <div v-if="item.recoveryList" class="my-2">
                <div
                  v-for="(ctem, Cindex) in item.recoveryList"
                  :key="ctem.id"
                  class="flex my-2"
                >
                  <div>
                    <img
                      :id="ctem.avatar"
                      class="w-5 h-5 rounded-full"
                      :alt="ctem.avatar"
                      :src="ctem.avatar"
                    />
                  </div>
                  <div class="flex-1 ml-3">
                    <div
                      class="flex items-center text-[14px] dark:text-[#626262] text-[#adadad]"
                    >
                      {{ ctem.respondent }}
                      <div
                        v-if="ctem.isRespondentAuthor"
                        class="bg-[#f62d5a] text-white py-[1px] scale-90 rounded px-[6px] ml-[5px] text-[12px]"
                      >
                        作者
                      </div>
                      <div
                        class="flex items-center justify-center"
                        v-if="Cindex !== 0"
                      >
                        <el-icon>
                          <CaretRight />
                        </el-icon>
                        <div>
                          {{ ctem.recipient }}
                        </div>
                      </div>
                    </div>

                    <div
                      class="item_content py-2 text-[15px] break-all tracking-[0.1px]"
                    >
                      {{ ctem.content }}
                    </div>
                    <el-image
                      v-if="ctem.secondImgUrl"
                      class="h-[125px] w-[110px] mb-[5px] rounded"
                      :src="ctem.secondImgUrl"
                      fit="fill"
                      alt="img"
                    />
                    <div class="dark:text-[#626262] text-[#adadad] text-[14px]">
                      <div class="flex justify-between items-center">
                        <div class="flex">
                          <div>{{ ctem.recoveryTime }}·{{ ctem.area }}</div>
                          <div class="ml-3">{{ replyTitle }}</div>
                        </div>
                        <div class="flex items-center">
                          <div
                            class="flex items-center mr-5"
                            :class="[ctem.isLike ? 'text-[#f62d5a]' : '']"
                          >
                            <img
                              class="w-[14px] h-[14px] mr-1"
                              :src="ctem.isLike ? isLike : ding"
                              alt=""
                            />
                            <div>
                              {{ ctem.likeCount }}
                            </div>
                          </div>
                          <div
                            class="flex items-center"
                            :class="[ctem.isDisLike ? 'text-[#f62d5a]' : '']"
                          >
                            <img :src="cai" class="w-5 h-5" alt="" />
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 底部回复栏 -->
      <div
        class="reply_bar flex items-center absolute w-[400px] bottom-0 h-[60px] bg-white dark:bg-[#010101]"
      >
        <div
          class="flex flex-1 items-center mx-[13px] px-[12px] rounded-full bg-[#f3f3f3] dark:bg-[#0e0e0e]"
        >
          <div class="dark:text-[#888888] flex-1">善语结善缘，恶语伤人心</div>

          <div class="flex text-[0]">
            <svg
              width="36"
              height="36"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 36 36"
              class="comment-input-icon"
            >
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M10.559 10.14c-2.612 2.392-3.566 5.145-3.566 8.376C6.993 21.817 8.836 29 19.215 29c1.505 0 2.974-.21 4.405-.654 1.57-.487 2.783-1.277 3.798-2.173l.15-.133c.29-.258.606-.537.86-.898.426-.523.71-.905.741-1.198.032-.293.008-.551-.189-.74-.197-.19-.517-.267-.876-.123-.322.129-.663.434-1.02.753l-.125.11c-2.434 2.134-5.158 3.007-7.744 3.007-8.219 0-10.095-5.489-10.095-8.435 0-2.947.856-4.956 2.606-6.798 1.75-1.843 4.62-2.723 7.25-2.723 5.681 0 7.745 4.598 7.745 6.964 0 3.145-1.802 4.54-2.591 5.076-.592.402-1.213.517-1.549.517h-.01c-.365 0-.89 0-1.03-.517-.09-.34.08-1.06.263-1.828.097-.405.197-.824.262-1.207l.94-4.722c.014-.092.021-.177.021-.254 0-.72-.146-1.1-1.103-1.1-.46 0-.77.074-.931.222-.161.148-.274.44-.34.878-.365-.487-.734-.815-1.107-.984-.343-.155-.833-.233-1.468-.233-1.636 0-3.053.783-4.252 2.349-1.103 1.439-1.654 2.977-1.654 4.613 0 1.277.358 2.398 1.074 3.365.796 1.065 1.833 1.597 3.112 1.597 1.095 0 2.147-.366 3.155-1.1.453.74 1.23 1.177 2.323 1.111 5.654-.339 6.962-5.275 6.896-7.783C28.647 12.75 26.288 7 18.976 7c-3.382 0-5.806.747-8.417 3.14zm3.702 9.173c-.068-1.127.093-1.976.814-3.235 1.171-2.046 2.576-2.537 3.502-2.428.898.107 1.128.5 1.27.743l.014.023c.142.24.367.648.367 1.225 0 .938-.292 1.839-.922 3.398-.732 1.84-1.483 2.19-2.4 2.4-1.512.348-2.576-.999-2.645-2.126z"
                fill="#2F3035"
                fill-opacity="0.9"
              ></path>
            </svg>
            <svg
              width="36"
              height="36"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 36 36"
              class="comment-input-icon"
            >
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M27 18a9 9 0 11-18 0 9 9 0 0118 0zm-9 11c6.075 0 11-4.925 11-11S24.075 7 18 7 7 11.925 7 18s4.925 11 11 11zm-2-13.5c0 1.105-.672 2-1.5 2s-1.5-.895-1.5-2 .672-2 1.5-2 1.5.895 1.5 2zm5.5 2c.828 0 1.5-.895 1.5-2s-.672-2-1.5-2-1.5.895-1.5 2 .672 2 1.5 2zM18 22.03c-1.657 0-3-.96-3-2.143 0-1.183 6-1.183 6 0 0 1.184-1.343 2.143-3 2.143z"
                fill="#2F3035"
                fill-opacity="0.9"
              ></path>
            </svg>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import rightArrow from "@/assets/icon/right-arrow.png";
import useStore from "@/store";
import { storeToRefs } from "pinia";
import isLike from "@/assets/svg/isLike.svg";
import location from "@/assets/svg/location.svg";
import ding from "@/assets/svg/ding.svg";
import cai from "@/assets/svg/cai.svg";
import quote from "@/assets/svg/quote.svg";
import smile from "@/assets/svg/smile.svg";
import temp from "@/assets/svg/temp.svg";
import temp2 from "@/assets/svg/temp2.svg";
const { useThemeStore, useFormDataStore } = useStore();
const { currentTheme } = storeToRefs(useThemeStore);
const { data, total, regionalInfo, everyoneSearch,replyTitle,AuthorTitle, headerType , commentLabel } =
  storeToRefs(useFormDataStore);
</script>

<style lang="scss" scoped>
.effect {
  min-height: 820px;
  line-height: normal;
  // line-height: 1;
}
</style>
