  <template>
    <view class="page">
      <!-- 使用自定义导航栏组件 -->
      <custom-navbar title="走进平山" />
      <view class="header" :style="{ backgroundColor: CommonEnum.BASE_COLOR }">
        <image class="temple-image" :src="templeInfo.imgUrl" mode="aspectFill"></image>
        <view class="temple-info">
          <text class="temple-desc">{{ stripHtmlTags(templeInfo.content) || '暂无描述' }}</text>
        </view>

        <!-- 联系信息区域 -->
        <view class="contact-info" v-if="templeInfo.phone || templeInfo.address">
          <view class="contact-item" v-if="templeInfo.phone">
            <text class="contact-label">电话：</text>
            <text class="contact-value" @click="callPhone">{{ templeInfo.phone }}</text>
          </view>
          <view class="contact-item" v-if="templeInfo.address" @click="openMap">
            <text class="contact-label">地址：</text>
            <text class="contact-value">{{ templeInfo.address }}</text>
            <image class="nav-arrow" :src="CommonEnum.NAV_ARROW" mode="aspectFit"></image>
          </view>
        </view>
      </view>
    </view>
  </template>

  <script>
  import {
    CommonEnum
  } from '@/enum/common.js'
  import {
    getTempleInfo
  } from '@/api/walkInto/walkInto.js'
  import CustomNavbar from "../../components/custom-navbar/custom-navbar.vue";

  export default {
    components: {
      CustomNavbar
    },
    data() {
      return {
        CommonEnum,
        templeInfo: {
          id: '',
          name: '',
          title: '',
          content: '',
          imgUrl: '',
          address: '',
          phone: '',
          startTime: '',
          endTime: '',
          lon: null,
          lat: null
        },
        loading: false
      }
    },
    onLoad() {
      this.fetchTempleInfo()
    },
    methods: {
      async fetchTempleInfo() {
        try {
          this.loading = true
          const res = await getTempleInfo()
          if (res.code === 200 && res.data) {
            this.templeInfo = res.data
          } else {
            uni.showToast({
              title: res.msg || '获取寺庙信息失败',
              icon: 'none'
            })
          }
        } catch (e) {
          console.error('获取寺庙信息失败:', e)
          uni.showToast({
            title: '网络错误',
            icon: 'none'
          })
        } finally {
          this.loading = false
        }
      },

      // 去除 HTML 标签，返回纯文本，并根据空格进行换行
      stripHtmlTags(html) {
        if (!html) return ''; // 处理空值

        // 先去除HTML标签
        let text = html.replace(/<[^>]+>/g, '');

        // 解码HTML实体
        text = text.replace(/&nbsp;/g, ' ');
        text = text.replace(/&amp;/g, '&');
        text = text.replace(/&lt;/g, '<');
        text = text.replace(/&gt;/g, '>');
        text = text.replace(/&quot;/g, '"');

        // 根据空格进行换行处理
        // 将连续的空格替换为换行符
        text = text.replace(/\s{2,}/g, '\n');

        // 处理段落开头的空格
        text = text.replace(/^\s+/gm, '');

        // 去除多余的空行
        text = text.replace(/\n\s*\n/g, '\n');

        // 为每个段落添加缩进（在每行开头添加两个空格）
        text = text.replace(/^/gm, '    ');

        // 移除内容末尾的联系信息（因为我们在单独的区域显示）
        text = text.replace(/电话：.*$/gm, '');
        text = text.replace(/地址：.*$/gm, '');

        return text.trim();
      },

      // 拨打电话
      callPhone() {
        if (this.templeInfo.phone) {
          uni.makePhoneCall({
            phoneNumber: this.templeInfo.phone,
            success: () => {
              console.log('拨打电话成功')
            },
            fail: (err) => {
              console.error('拨打电话失败:', err)
              uni.showToast({
                title: '拨打电话失败',
                icon: 'none'
              })
            }
          })
        }
      },

      // 打开地图
      openMap() {
        if (this.templeInfo.address && this.templeInfo.lon && this.templeInfo.lat) {
          // #ifdef H5
          // H5环境下使用地址搜索
          this.openMapByAddress()
          // #endif
          
          // #ifndef H5
          // 非H5环境下使用经纬度打开地图
          uni.openLocation({
            latitude: parseFloat(this.templeInfo.lat),
            longitude: parseFloat(this.templeInfo.lon),
            name: this.templeInfo.name || '寺庙',
            address: this.templeInfo.address,
            success: () => {
              console.log('打开地图成功')
            },
            fail: (err) => {
              console.error('打开地图失败:', err)
              // 如果经纬度打开失败，尝试使用地址搜索
              this.openMapByAddress()
            }
          })
          // #endif
        } else if (this.templeInfo.address) {
          // 只有地址，使用地址搜索
          this.openMapByAddress()
        }
      },

      // 使用地址打开地图
      openMapByAddress() {
        // #ifdef H5
        // H5环境下提供多个地图选项
        uni.showActionSheet({
          itemList: ['复制地址', '百度地图', '高德地图', '腾讯地图'],
          success: (res) => {
            switch (res.tapIndex) {
              case 0:
                // 复制地址
                this.copyAddress()
                break
              case 1:
                // 百度地图
                this.openBaiduMap()
                break
              case 2:
                // 高德地图
                this.openGaodeMap()
                break
              case 3:
                // 腾讯地图
                this.openTencentMap()
                break
            }
          }
        })
        // #endif
        
        // #ifndef H5
        // 非H5环境下直接复制地址
        uni.showModal({
          title: '提示',
          content: '是否复制地址到剪贴板？',
          success: (res) => {
            if (res.confirm) {
              this.copyAddress()
            }
          }
        })
        // #endif
      },

      // 复制地址
      copyAddress() {
        uni.setClipboardData({
          data: this.templeInfo.address,
          success: () => {
            uni.showToast({
              title: '地址已复制',
              icon: 'success',
              duration: 2000
            })
          },
          fail: () => {
            uni.showToast({
              title: '复制失败',
              icon: 'none'
            })
          }
        })
      },

      // 打开百度地图
      openBaiduMap() {
        const address = encodeURIComponent(this.templeInfo.address)
        const url = `https://api.map.baidu.com/geocoder?address=${address}&output=html&src=webapp.baidu.openAPIdemo`
        window.open(url, '_blank')
      },

      // 打开高德地图
      openGaodeMap() {
        const address = encodeURIComponent(this.templeInfo.address)
        const url = `https://uri.amap.com/search?query=${address}`
        window.open(url, '_blank')
      },

      // 打开腾讯地图
      openTencentMap() {
        const address = encodeURIComponent(this.templeInfo.address)
        const url = `https://apis.map.qq.com/uri/v1/search?keyword=${address}&referer=myapp`
        window.open(url, '_blank')
      }
    }
  }
  </script>

  <style lang="scss">
  .page {
    background: #F5F0E7;
    width: 100%;
    min-height: 100vh;
    flex-direction: column;
    align-items: center;
  }

  .header {
    margin: 26rpx 28rpx;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 0 15rpx;
    padding-bottom: 40rpx;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
  }

  .temple-image {
    width: 610rpx;
    height: 324rpx;
    background: #D8D8D8; /* 灰色占位背景 */
    border-radius: 12rpx 12rpx 12rpx 12rpx;
    display: block;
    margin: 34rpx auto;
    object-fit: cover;
  }

  .temple-info {
    width: 100%;
    padding: 24rpx 42rpx;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
  }

  .temple-desc {
    display: block;
    font-weight: 400;
    font-size: 28rpx;
    color: #522510;
    line-height: 45rpx;
    text-align: left;
    font-style: normal;
    text-transform: none;
    white-space: pre-line; /* 保留换行符 */
    word-wrap: break-word; /* 长单词换行 */
  }

  /* 联系信息样式 */
  .contact-info {
    margin-top: 40rpx;
    padding: 30rpx;
    border-radius: 16rpx;

  }

  .contact-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20rpx;
    line-height: 40rpx;
  }

  .contact-item:last-child {
    margin-bottom: 0;
  }

  .contact-label {
    font-size: 28rpx;
    min-width: 100rpx;
    color: #522510;
    flex-shrink: 0;
  }

  .contact-value {
    font-size: 28rpx;
    color: #522510;
    flex: 1;
    word-wrap: break-word;
  }

  .nav-arrow {
    width: 32rpx;
    height: 32rpx;
  }
  </style>