<template>
  <view class="page">
    <base-background />
    <!-- 使用自定义导航栏组件 -->
    <custom-navbar title="寺庙高僧" />
    <view class="header" :style="{ backgroundColor: CommonEnum.BASE_COLOR }">
      <!-- 状态展示 -->
      <status-display
          v-if="loading"
          type="loading"
          loading-text="加载中..."
      />
      <!-- 页面内容将在这里添加 -->
    </view>



    </view>
</template>

<script>
import {
  CommonEnum
} from '@/enum/common.js'
import {
  MonkEnum
} from '@/enum/monk.js'
import {
  getMonkList
} from '@/api/monk/monk.js'
import CustomNavbar from "../../components/custom-navbar/custom-navbar.vue";
import BaseBackground from "../../components/base-background/base-background.vue";
import SearchBox from "../../components/search-box/search-box.vue";
import StatusDisplay from "../../components/status-display/status-display.vue";

export default {
  components: {
    StatusDisplay,
    CustomNavbar,
    BaseBackground,
    MonkSearchBox: SearchBox
  },
  data() {
    return {
      bgc: {
        backgroundColor: "#F5F0E7"
      },
      CommonEnum,
      MonkEnum,
      monkList: [],
      searchName: ''
    }
  },
  onLoad() {
    this.fetchMonkList()
  },
  methods: {
    async fetchMonkList() {
      try {
        const res = await getMonkList({ name: this.searchName })
        if (res.code === 200 && Array.isArray(res.rows)) {
          this.monkList = res.rows
        } else {
          uni.showToast({
            title: res.msg || '获取失败',
            icon: 'none'
          })
        }
      } catch (e) {
        uni.showToast({
          title: '网络错误',
          icon: 'none'
        })
      }
    },

    // 去除 HTML 标签，返回纯文本
    stripHtmlTags(html) {
      if (!html) return ''; // 处理空值
      return html.replace(/<[^>]+>/g, ''); // 正则替换所有 HTML 标签
    },

  }
}
</script>

<style lang="scss">
.page {
  width: 100%;
  min-height: 100vh;
  background: transparent;
  border-radius: 0rpx 0rpx 0rpx 0rpx;
  /* 移除padding-top，因为导航栏已经处理了状态栏适配 */
}

.header {
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  padding: 0 15rpx;
  padding-bottom: 40rpx;
}
</style>