<template>
  <view class="home-layout min-h-screen flex flex-col">
    <view class="content flex flex-col flex-1">
      <slot />
    </view>
    <!-- 投诉按钮 -->
    <view class="complaint-button" @click="toComplaint">
      <image
        class="w-4 h-4 mr-1 inline-block"
        src="/static/homelayout/ts.png"
        mode="aspectFit"
      />
      <text>投诉</text>
    </view>
    <view class="disclaimer">
      <view class="flex flex-col items-center">
        <view v-if="showPublicSecurityRecord" class="flex items-center">
          <image
            class="w-4 h-4 mr-2"
            src="/static/public_security_record_icon.png"
            mode="aspectFit"
          />
          <text>{{ publicSecurityRecord }}</text>
        </view>
        <view>
          <text class="text-blue-500" @click="openIcp">{{ icpRecord }}</text>
        </view>
      </view>
      <text>{{ companyName }}版权所有</text>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const companyName = ref(import.meta.env?.VITE_COMPANY_NAME || '')
const icpRecord = ref(import.meta.env?.VITE_ICP_RECORD || '')
const publicSecurityRecord = ref(import.meta.env?.VITE_PUBLIC_SECURITY_RECORD || '')
const showPublicSecurityRecord = ref(import.meta.env?.VITE_SHOW_PUBLIC_SECURITY_RECORD === 'true')

const serviceUrl = ref(import.meta.env?.VITE_SERVICE_URL || '')

const toComplaint = () => {
  if (serviceUrl.value) {
    // #ifdef H5
    window.location.href = serviceUrl.value
    // #endif
    // #ifndef H5
    uni.navigateTo({ url: '/pages/webview/index?url=' + encodeURIComponent(serviceUrl.value) })
    // #endif
  }
}

const openIcp = () => {
  // #ifdef H5
  window.open('https://beian.miit.gov.cn', '_blank')
  // #endif
}
</script>

<style scoped>
.home-layout {
  background: linear-gradient(to bottom, #cfe0fa, #f4f8ff);
}

.complaint-button {
  position: fixed;
  bottom: 6rem;
  right: 1rem;
  background: #ff6b6b;
  border-radius: 1.5rem;
  padding: 0.25rem 1rem;
  color: white;
  display: flex;
  align-items: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  z-index: 2000;
}

.disclaimer {
  padding: 10px;
  font-size: 12px;
  color: #999;
  text-align: center;
  border-top: 1px solid #e0e0e0;
  padding-bottom: 60px;
  background: #fff;
  margin-bottom: 50px;
}
</style>
