<template>
  <view>
    <!-- 头部原生导航栏 -->
    <view class="native-header-nav">
      <view class="nav-left" @click="goBack">
        <text>←</text>
      </view>
      <view class="nav-title" @click="toggleDropdown">
        <text>{{ currentTitle || "选择分类" }}</text>
        <text class="dropdown-icon">{{ showDropdown ? "↑" : "↓" }}</text>
      </view>
      <view class="nav-right">
        <!-- <text>更多</text> -->
      </view>
    </view>

    <!-- 下拉菜单 -->
    <view class="dropdown-menu" v-if="showDropdown">
      <view
        class="dropdown-item"
        v-for="item in navTitle"
        :key="item.id"
        @click="selectItem(item)"
      >
        <text>{{ item.name }}</text>
      </view>
    </view>
    <flog v-if="currentTitle=='房地产'"></flog>
    <ylog v-if="currentTitle=='医疗'"></ylog>
    <jlog v-if="currentTitle=='教育'"></jlog>
    <slog v-if="currentTitle=='商贸'"></slog>
    <sclog v-if="currentTitle=='商超'"></sclog>
    <tlog v-if="currentTitle=='特色'"></tlog>
  </view>
</template>

<script>
import flog from "./log/flog.vue"; // 房地产
import jlog from "./log/jlog.vue"; // 房地产
import ylog from "./log/ylog.vue"; // 房地产
import slog from "./log/slog.vue"; // 房地产
import sclog from "./log/sclog.vue"; // 房地产
import tlog from "./log/tlog.vue"; // 房地产
export default {
    components: {
        flog, // 注册组件
        ylog, // 注册组件
        jlog, // 注册组件
        slog,
        sclog,
        tlog
    },
  data() {
    return {
      stylie: {
        width: "20px", // 设置宽度为 20px
        height: "20px", // 设置高度为 20px
        marginRight: "10px", // 设置右边距为 10px
      },
      showCommentModal: false, // 控制模态框的显示
      commentContent: "", // 评论内容
      currentCommentIndex: -1,
      currentCommentItem: null,
      isred: false,
      isrednum: 0,
      navTitle: [
        { id: "tabs" + 1, name: "房地产", pageid: 9 },
        { id: "tabs" + 2, name: "医疗", pageid: 10 },
        { id: "tabs" + 3, name: "教育", pageid: 11 },
        { id: "tabs" + 4, name: "商贸", pageid: 12 },
        { id: "tabs" + 5, name: "商超", pageid: 13 },
        { id: "tabs" + 6, name: "特色", pageid: 14 },
      ],
      showDropdown: false,
      currentTitle: "",
      istae: true,
     
    };
  },
  onLoad(options) {
    if (options.name) {
      this.passedName = options.name;
      this.currentTitle = options.name; // 可以根据需求设置当前标题
    }
  },
  methods: {
    goBack() {
      uni.navigateBack({
        delta: 1,
      });
    },
    toggleDropdown() {
      this.showDropdown = !this.showDropdown;
    },
    selectItem(item) {
      this.currentTitle = item.name;
      this.showDropdown = false;
    },
    torout(item) {
      const itemJson = encodeURIComponent(JSON.stringify(item));
      uni.navigateTo({
        url: `/pages/tabbar/vlog/vlindexstr?item=${itemJson}`,
      });
    },
  },
};
</script>

<style lang="scss">
.native-header-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100rpx;
  background-color: #ffffff;
  border-bottom: 1rpx solid #eeeeee;
  margin-top: 60rpx;
  position: relative;
  z-index: 1;
}

.nav-left,
.nav-right {
  width: 100rpx;
  text-align: center;
  font-size: 32rpx;
  color: #333333;
}

.nav-title {
  flex: 1;
  text-align: center;
  font-size: 36rpx;
  //   font-weight: bold;
  color: #333333;
  display: flex;
  justify-content: center;
  align-items: center;

  .dropdown-icon {
    margin-left: 10rpx;
    font-size: 28rpx;
  }
}

.dropdown-menu {
  position: absolute;
  top: 160rpx;
  left: 0;
  right: 0;
  background-color: #fff;
  border: 1rpx solid #eee;
  border-radius: 10rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  z-index: 10;
  margin: 0 20rpx;

  .dropdown-item {
    padding: 20rpx;
    font-size: 32rpx;
    color: #333;
    border-bottom: 1rpx solid #eee;

    &:last-child {
      border-bottom: none;
    }

    &:active {
      background-color: #f5f5f5;
    }
  }
}

.page-content {
  padding: 20rpx;
}
.company-profile {
  padding: 20px;
  background: #fff;
  //   margin-bottom: 15px;
}

.header {
  display: flex;
  align-items: center;
  //   margin-bottom: 20px;
}

.title {
  font-size: 18px;
  font-weight: bold;
  margin-right: 10px;
}

.badge {
  background: #ffcc00;
  color: #333;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  margin-right: 10px;
}

.follow-btn {
  color: #1890ff;
  border: 1px solid #1890ff;
  padding: 2px 10px;
  border-radius: 4px;
  font-size: 12px;
}
.stafollow-btn {
  color: #ffffff;
  border: 1px solid red;
  background: red;
  padding: 2px 10px;
  border-radius: 4px;
  font-size: 12px;
}

.info-section {
  //   border-top: 1px solid #eee;
  padding-top: 10px;
}

.info-item {
  margin-bottom: 12px;
  line-height: 1.5;
}

.info-label {
  font-weight: bold;
  color: #333;
}

.info-content {
  color: #666;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 10px;
}

.avatar-img {
  width: 100%;
  height: 100%;
}
.card {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-top: 10px;
}

.card-header {
  margin-bottom: 16px;
}

.title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  display: block;
}

.subtitle {
    font-size: 14px;
  color: #666;
  display: block;
  // 新增样式控制两行显示
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 限制显示两行 */
}

.stats-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}

.stat-item {
  flex: 1;
  text-align: center;
}

.stat-number {
  font-size: 20px;
  font-weight: bold;
  color: #1890ff;
}
.comment-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.modal-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  width: 80%;
}

.comment-input {
  width: 100%;
  height: 150px;
  margin-bottom: 20px;
}

.modal-buttons {
  display: flex;
  justify-content: space-around;
}
.img-list {
  display: flex;
  //   flex-wrap: wrap;
  gap: 10px; /* 图片之间的间距 */
}

.list-img {
  width: 250rpx; /* 图片宽度，根据需求调整 */
  height: 250rpx; /* 图片高度，根据需求调整 */
  border-radius: 8rpx; /* 图片圆角 */
  object-fit: cover; /* 图片填充方式 */
}
</style>
