<template>
  <!-- 主体内容区 -->
  <!-- 居中 -->
  <div class="grid grid-cols-12 gap-6 w-[1440px] mx-auto mb-10">

    <!-- 左侧热点 -->
    <div class="col-span-2">
      <div class="flex items-center justify-between mb-4">
        <div class="flex items-center">
          <div>
            <h3 class="text-xl font-bold text-black">矩阵媒体号</h3>
            <div class="w-[50px] h-1 bg-blue-500 mt-1"></div>
          </div>
        </div>
      </div>

      <div class="grid grid-cols-2 gap-5 pt-5 pb-5 pl-8 pr-8 bg-white rounded-lg">
        <div v-for="(item, index) in mediaAccountList" :key="index"
          class="relative hover:scale-105 hover:-translate-y-2">
          <el-popover v-if="item.qrCode" trigger="hover" placement="left" width="180">
            <template #reference>
              <div class="w-full">
                <div class="rounded-lg">
                  <div class="h-[40px] flex items-center justify-center">
                    <img :src="item.img" class="w-full h-full object-contain rounded-lg" alt="{{ item.name }}">
                  </div>
                  <div class="text-center text-[12px] text-black mb-3">{{ item.name }}</div>
                </div>
              </div>
            </template>
            <div class="p-0 bg-white rounded-lg">
              <img :src="item.qrCode" class="w-full h-auto object-contain p-0">
            </div>
          </el-popover>

          <!-- 无二维码时的普通展示 -->
          <div v-else class="w-full">
            <div class="rounded-lg overflow-hidden">
              <div class="h-[40px] flex items-center justify-center">
                <img :src="item.img" class="w-full h-full object-contain rounded-xl" alt="{{ item.name }}">
              </div>
              <div class="text-center text-[12px] text-black">{{ item.name }}</div>
            </div>
          </div>

          <!-- 点击跳转链接 -->
          <!-- <a v-if="item.url" :href="item.url" target="_blank" class="absolute inset-0 z-10 rounded-lg"></a> -->
          <div v-if="item.url" @click="handleClick(item.url)"
            class="absolute inset-0 z-10 rounded-lg hover:scale-105 hover:-translate-y-2"></div>
        </div>
      </div>
    </div>

    <!-- 左侧热点 -->
    <div class="col-span-5">
      <div class="flex items-center justify-between mb-4">
        <div class="flex items-center">
          <div>
            <h3 class="text-xl font-bold text-black">热点留言</h3>
            <div class="w-[50px] h-1 bg-blue-500 mt-1"></div>
          </div>
        </div>
        <router-link class="text-sm text-blue-600 hover:text-blue-300 flex items-center" to="/wm/messagelist">更多留言
          <el-icon class="ml-1">
            <ArrowRight />
          </el-icon></router-link>
      </div>
      <div class="space-y-3">
        <!-- 当有数据时显示留言列表 -->
        <template v-if="hotList && hotList.length > 0">
          <div v-for="(item, index) in hotList" :key="index"
            class="p-4 bg-white rounded-lg hover:shadow-md transition-shadow border-l-4 border-red-500"
            @click="messageClick(item.id)">
            <div class="flex items-center justify-between">
              <div class="flex items-center text-sm text-gray-500">
                <span>{{ item.contentDatetime }}</span>
                <span class="mx-5">留言人：***</span>
              </div>
              <el-tag size="small" :type="item.replyStatus === '1' ? 'success' : 'warning'">
                {{ item.replyStatus === "1" ? "已回复" : "未回复" }}
              </el-tag>
            </div>
            <h4 class="text-gray-900 font-medium mt-3 line-clamp-2">
              {{ item.title }}
            </h4>

            <p class="mt-2 text-gray-700 line-clamp-3">{{ item.content }}</p>
          </div>
        </template>
        <!-- 当没有数据时显示空状态 -->
        <template v-else>
          <div class="flex flex-col items-center justify-center p-10 bg-white rounded-lg">
            <img src="@/assets/imgs/nothing.png" alt="暂无数据" class="w-[200px] h-[200px] mb-0">
            <span class="text-gray-400 text-[14px]">暂无热点留言</span>
          </div>
        </template>
      </div>
    </div>
    <!-- 右侧回复 -->
    <div class="col-span-5">
      <div class="flex items-center justify-between mb-4">
        <div class="flex items-center">
          <div class="w-full">
            <h3 class="text-xl font-bold text-black">最新回复</h3>
            <div class="w-[50px] h-1 bg-blue-500 mt-1 rounded-full"></div>
          </div>
        </div>
        <router-link class="text-sm text-blue-600 hover:text-blue-300 flex items-center" to="/wm/recoverlist">更多回复
          <el-icon class="ml-1">
            <ArrowRight />
          </el-icon></router-link>
      </div>
      <div class="space-y-3">
        <!-- 当有数据时显示回复列表 -->
        <template v-if="recoverList && recoverList.length > 0">
          <div v-for="(item, index) in recoverList" :key="index"
            class="p-4 bg-white rounded-lg hover:shadow-md transition-shadow border-l-4 border-blue-500"
            @click="recoverClick(item.id)">
            <div class="flex items-center justify-between mb-3">
              <div class="flex-1">
                <div class="flex items-center justify-between">
                  <h4 class="text-gray-900 font-medium line-clamp-2">
                  </h4>
                  <!-- <span class="text-gray-500 text-sm">{{
                    item.contentDatetime
                  }}</span> -->
                  <div class="flex items-center text-sm text-gray-500">
                    <span>{{ item.contentDatetime }}</span>
                    <span class="mx-5">留言人：***</span>
                  </div>
                </div>
              </div>
            </div>
            <h4 class="text-gray-900 font-medium line-clamp-2 mb-2">
              {{ item.title }}
            </h4>
            <p class="text-gray-700 line-clamp-3">{{ item.content }}</p>
          </div>
        </template>
        <!-- 当没有数据时显示空状态 -->
        <template v-else>
          <div class="flex flex-col items-center justify-center p-10 bg-white rounded-lg">
            <img src="@/assets/imgs/nothing.png" alt="暂无数据" class="w-[200px] h-[200px] mb-0">
            <span class="text-gray-400 text-[14px]">暂无任何回复内容</span>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import {
  ChatDotRound,
  Comment,
  ArrowRight,
  Search,
  Tickets,
  StarFilled,
  Position,
  Iphone,
  Message,
} from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import { getHotList as rawGetHotList, getRecoverList as rawGetRecoverList } from "@/api/wm/wm";

// 热点留言列表项接口
interface HotListItem {
  id: number;
  contentDatetime: string;
  replyStatus: string;
  title: string;
  content: string;
}

// 最新回复列表项接口
interface RecoverListItem {
  id: number;
  contentDatetime: string;
  title: string;
  content: string;
}

// API响应数据接口
interface ApiResponse<T> {
  data: {
    rows: T[];
    total?: number;
  };
  code?: number;
  message?: string;
}

// 为API函数添加类型断言
type ApiFunction<T> = (params: any) => Promise<ApiResponse<T>>;
const getHotList = rawGetHotList as ApiFunction<HotListItem>;
const getRecoverList = rawGetRecoverList as ApiFunction<RecoverListItem>;

const router = useRouter();

import gzhIcon from "@/assets/imgs/gzh-icon.png";
import wxIcon from "@/assets/imgs/wx-icon.png";
import dyIcon from "@/assets/imgs/dy-icon.png";
import sphIcon from "@/assets/imgs/sph-icon.png";
import jrttIcon from "@/assets/imgs/jrtt-icon.png";

const mediaAccountList = ref([
  {
    name: "公众号",
    img: wxIcon,
    qrCode: "",
    url: "http://wlwz.taiyuan.gov.cn:9092/wmyhs/#/",
  },
  {
    name: "抖⾳号",
    img: dyIcon,
    qrCode: "",
    url: "https://v.douyin.com/j6f2GF1moCg/",
  },
  {
    name: "视频号",
    img: sphIcon,
    qrCode: sphIcon,
    url: "",
  },
  {
    name: "今⽇头条号",
    img: jrttIcon,
    qrCode: "",
    url: "https://profile.zjurl.cn/rogue/ugc/profile/?active_tab=dongtai&app_name=news_article&device_id=65&media_id=1749004825668611&module_name=iOS_tt_url&request_source=1&share_token=8A789140-6E78-4E94-8126-3061A3884A82&tt_from=copy_link&upstream_biz=iOS_url&user_id=734914904863531&utm_campaign=client_share&utm_medium=toutiao_ios&utm_source=copy_link&version_code=14.7.0&version_name=140700",
  },
]);

function handleClick(url: string) {
  if (url) {
    window.open(url, "_blank");
  }
}

const hotList = ref<HotListItem[]>([]);
const recoverList = ref<RecoverListItem[]>([]);

getList1(6, 1);
getList2(6, 1);

//热点留言
function getList1(pageSize: number, pageNo: number) {
  const datas = {
    pageSize: pageSize,
    pageNo: pageNo,
  };
  getHotList(datas).then((response: ApiResponse<HotListItem>) => {
    const data = response.data;
    const rowsList = data.rows;
    hotList.value = rowsList;
  });
}

//最新回复
function getList2(pageSize: number, pageNo: number) {
  const datas = {
    pageSize: pageSize,
    pageNo: pageNo,
  };
  getRecoverList(datas).then((response: ApiResponse<RecoverListItem>) => {
    const data = response.data;
    const rowsList = data.rows;
    recoverList.value = rowsList;
  });
}

function messageClick(id: number) {
  router.push({
    path: "/wm/messagedetail",
    query: {
      pathType: "-1",
      id: id,
    },
  });
}
function recoverClick(id: number) {
  router.push({
    path: "/wm/messagedetail",
    query: {
      pathType: "-1",
      id: id,
    },
  });
}
//更多回复
function moreRecoverClick() { }
</script>

<style lang="scss" scoped></style>
