<template>
  <div class="main-page">
    <!-- banner图 -->
    <div class="top-box">
      <div class="title">
        <p class="title-top">
          <span class="name">开元云</span> 您身边的AI管家
        </p>
        <p class="title-btm">
          全球领先的AI服务运营商
        </p>
      </div>
    </div>

    <!-- 云筑企业基座 -->
    <div class="base-box">
      <div class="text">
        <div class="text-top">云筑企业基座</div>
        <div class="text-btm">多云结合 让上云更简单</div>
      </div>
      <!-- 内容 -->
      <div class="content">
        <div class="item-box" v-for="(item, key) in baseData" :key="key">

          <div class="item-title">{{ item.title }}</div>
          <div class="item-description">{{ item.description }}</div>

          <!-- 优势列表 -->
          <div class="advantage-list" v-if="item.list && item.list.length">
            <div class="advantage-item" v-for="listItem in item.list" :key="listItem.id">
              <p>
              <img v-if="listItem.icon" :src="getIconPath(listItem.icon)" alt="" class="advantage-icon" />
                <span v-if="listItem.name" class="advantage-name">{{ listItem.name }} : </span>
                <span class="advantage-content">{{ listItem.content }}</span>
              </p>
            </div>
          </div>

          <div class="item-price">
            <span class="price-icon">￥</span>
            <span class="price">{{ item.price }}</span> {{ item.price_unit }}
          </div>
          <div class="item-button">
            <div class="item-button-text" @click="openConsultDialog(item, '云筑企业基座')">立即咨询</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 智算未来征程 -->
    <div class="journey-box">
      <div class="text">
        <div class="text-top">智算未来征程</div>
        <div class="text-btm">多元异构 灵活短租</div>
      </div>
      <!-- 内容 -->
      <div class="content">
        <div class="item-box" v-for="(item, key) in journeyData" :key="key">
          <div class="item-title">{{ item.title }}</div>
          <div class="item-description">{{ item.description }}</div>

          <!-- 优势列表 -->
          <div class="advantage-list" v-if="item.list && item.list.length">
            <div class="advantage-item" v-for="listItem in item.list" :key="listItem.id">
              <p>
              <img v-if="listItem.icon" :src="getIconPath(listItem.icon)" alt="" class="advantage-icon" />
                <span v-if="listItem.name" class="advantage-name">{{ listItem.name }} : </span>
                <span class="advantage-content">{{ listItem.content }}</span>
              </p>
            </div>
          </div>

          <div class="item-price">
            <span class="price-icon">￥</span>
            <span class="price">{{ item.price }}</span> {{ item.price_unit }}
          </div>
          <div class="item-button">
            <div class="item-button-text" @click="openConsultDialog(item, '智算未来征程')">立即咨询</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 网织智能经纬 -->
    <div class="latitude-box">
      <div class="text">
        <div class="text-top">网织智能经纬</div>
        <div class="text-btm">云算网结合 让连接更简单</div>
      </div>
      <!-- 内容 -->
      <div class="content">
        <div class="item-box" v-for="(item, key) in latitude" :key="key">
          <div class="item-title">{{ item.title }}</div>
          <div class="item-description">{{ item.description }}</div>

          <!-- 优势列表 -->
          <div class="advantage-list" v-if="item.advantageList && item.advantageList.length">
            <div class="advantage-item" v-for="advantage in item.advantageList" :key="advantage.id">
              <p>
              <img v-if="advantage.icon" :src="getIconPath(advantage.icon)" alt="" class="advantage-icon" />
              <span class="advantage-name">{{ advantage.name }}：</span>
              <span class="advantage-content">{{ advantage.content }}</span>
              </p>
            </div>
          </div>

          <!-- 标签列表 - 添加边框 -->
          <div class="tag-list" v-if="item.tagList && item.tagList.length">
            <span class="tag-item" v-for="tag in item.tagList" :key="tag.id">
              {{ tag.name }}
            </span>
          </div>

          <div class="item-button">
            <div class="item-button-text" @click="openConsultDialog(item, '网织智能经纬')">立即咨询</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 合作伙伴 -->
    <div class="partner">
      <div class="text">
        <div class="text-top">合作伙伴</div>
        <div class="text-btm">Partners</div>
      </div>
      <!-- 滚动合作伙伴内容 -->
      <div class="partner-scroll">
        <div class="logo-scroll-wrapper">
          <div class="logo-scroll-container">
            <div v-for="(image, index) in duplicatedImages" :key="index" class="logo-item">
              <img :src="image" />
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 修改footer部分 -->
    <div class="footer">
      <div class="footer-content">
        <!-- 顶部信息 -->
        <div class="footer-top">
          <div class="logo-footer">
            <img :src="logoImg" alt="公司logo" v-if="logoImg">
            <!-- <img src="@/assets/kyy/LOGO.png" alt="公司logo" class="img"> -->
          </div>
          <div class="contact-info">
            <div class="contact-item">
              <i class="iconfont icon-dizhi"></i>
              <span class="label">地址：</span>
              <span class="value">{{ address }}</span>
            </div>
            <div class="contact-item">
              <i class="iconfont icon-dianhua"></i>
              <span class="label">电话：</span>
              <div class="phone-numbers">
                <a href="tel:400-6150805" class="phone-link">400-6150805</a>
                <span class="phone-separator">/</span>
                <a href="tel:010-65917875" class="phone-link">010-65917875</a>
              </div>
            </div>
            <div class="contact-item">
              <i class="iconfont icon-youxiang"></i>
              <span class="label">邮箱：</span>
              <a href="mailto:Open-computing@kaiyuancloud.cn" class="email-link">
                Open-computing@kaiyuancloud.cn
              </a>
            </div>
          </div>

        </div>

        <!-- 备案信息 -->
        <div class="footer-bottom">
          <div class="icp-info">
            <div class="icp-item">
              <span class="icp-text">ICP备案号：</span>
              <span class="icp-number">{{ ICP }}</span>
            </div>
            <div class="copyright">
              版权所有 © kaiyuanyun 2023
            </div>
          </div>

          <div class="record-info">
            <div class="police-record">
              <img src="@/image/login/policeInsignia/policeInsignia.png" alt="公安备案图标" class="police-icon">
              <a href="https://beian.mps.gov.cn/#/query/webSearch?code=11010502054007" rel="noreferrer" target="_blank"
                class="police-link">
                京公网安备 11010502054007号
              </a>
            </div>
            <div class="license-record">
              <router-link tag="a" target="_blank" class="license-link" :to="{ name: 'homePageImage' }">
                经营许可证：京B2-20232313
              </router-link>
            </div>
          </div>

          <!-- 移动端显示的二维码 -->
          <div class="mobile-qr">
            <div class="qr-item">
              <div class="qr-code">
                <img src="@/assets/kyy/kyy公众号.jpg" alt="微信客服二维码">
              </div>
              <span class="qr-desc">扫描关注二维码</span>
            </div>
             <div class="qr-item">
              <div class="qr-code">
                <img src="@/assets/kyy/客服wechat.png" alt="微信客服二维码">
              </div>
              <span class="qr-desc">微信客服</span>
            </div>
          </div>
        </div>
      </div>

      <!-- PC端显示的二维码（移动端隐藏） -->
      <div class="pc-qr">
        <div class="qr-box">
          <div class="qr-code">
            <img src="@/assets/kyy/客服wechat.png" alt="微信客服二维码">
          </div>
          <span class="qr-content">微信客服</span>
        </div>
      </div>
    </div>
    <!-- 产品咨询弹窗 -->
    <ProductConsultDialog :visible.sync="showConsultDialog" :platform-name="platformName" :qr-code="qrCode"
      :default-form-data="consultFormData" :submit-api="submitConsultApi" @success="handleConsultSuccess"
      @close="handleDialogClose" />
  </div>
</template>

<script>
import { reqHotProduct } from '@/api/H5/index.js'
import { getLogoAPI } from "@/api/login"
import ProductConsultDialog from '../H5_dialog/index.vue'
import { reqProductConsult } from '@/api/H5/index'

export default {
  name: 'MainPage',
  components: {
    ProductConsultDialog
  },

  data() {
    return {
      baseData: {},
      journeyData: {},
      latitude: {},
      images: [
        require('../images/top/img.png'),
        require('../images/top/img_1.png'),
        require('../images/top/img_2.png'),
        require('../images/top/img_3.png'),
        require('../images/top/img_4.png'),
        require('../images/top/img_5.png'),
        require('../images/top/img_6.png'),
        require('../images/top/img_8.png'),
        require('../images/top/img_9.png')
      ],
      logoImg: require("@/assets/logo/colorLogo.png"),
      logoText: "开元云(北京)科技有限公司",
      url: window.location.href,
      photosUrl: [],
      ICP: "京ICP备2022001945号-1",
      address: "农业展览馆13号瑞辰国际中心518B(团结湖地铁站c东南口步行420米)",

      // 咨询弹窗相关
      showConsultDialog: false,
      platformName: '开元云',
      qrCode: '',
      consultFormData: {
        content: '',
        custom_type: '1',
        name: '',
        phone: '',
        company: '',
        email: '',
        checked: false
      },
      currentItem: null,
      currentCategory: null
    }
  },
  computed: {
    duplicatedImages() {
      return [...this.images, ...this.images]
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    async loadData() {
      try {
        await this.getHotProduct()
        await this.getCompanyInfo()
      } catch (error) {
        console.error('数据加载失败:', error)
      }
    },

    async getHotProduct() {
      const res = await reqHotProduct()
      console.log('热门产品数据', res)

      if (res.status) {
        // 直接使用对象结构
        this.baseData = res.data.base || {}
        this.journeyData = res.data.suan || {}
        this.latitude = res.data.net || {}
      }
    },

    async getCompanyInfo() {
      const params = {
        url_link: this.parseURL(this.url)
      }

      const res = await getLogoAPI(params)

      if (res.status && res.data && res.data.length) {
        this.photosUrl = res.data[0]

        if (this.photosUrl.orgname !== '业主机构') {
          this.logoImg = this.photosUrl.logo || this.logoImg
          this.logoText = this.photosUrl.orgname || this.logoText
          this.ICP = this.photosUrl.license_number || this.ICP
          this.address = this.photosUrl.address || this.address
        }
      } else {
        this.showErrorMessage(res.msg || '获取公司信息失败')
      }
    },

    parseURL(url) {
      if (url.includes("#")) {
        return url.split("#")[0]
      }
      return url
    },

    showErrorMessage(message) {
      this.$message({
        message,
        type: "error"
      })
    },

    // 获取图标路径
    getIconPath(iconPath) {
      // 如果图标路径是绝对路径或网络路径，直接返回
      if (iconPath.startsWith('http') || iconPath.startsWith('//') || iconPath.startsWith('data:')) {
        return iconPath
      }
      // 如果是相对路径，尝试使用 require 加载
      try {
        // 注意：这里可能需要根据实际路径调整
        // 假设图标在 @/views/homePage/mainPage/ 目录下
        return require(`@/views/homePage/mainPage/${iconPath}`)
      } catch (e) {
        console.warn('图标加载失败:', iconPath)
        return ''
      }
    },

    // 打开咨询弹窗
    openConsultDialog(item, category) {
      this.currentItem = item
      this.currentCategory = category

      // 构建优势列表文本
      let advantageText = ''
      if (item.list && item.list.length) {
        advantageText = item.list.map(listItem => {
          return listItem.name ? `${listItem.name}：${listItem.content}` : listItem.content
        }).join('\n')
      } else if (item.advantageList && item.advantageList.length) {
        advantageText = item.advantageList.map(advantage => {
          return advantage.name ? `${advantage.name}：${advantage.content}` : advantage.content
        }).join('\n')
      }

      // 构建标签列表文本
      let tagText = ''
      if (item.tagList && item.tagList.length) {
        tagText = item.tagList.map(tag => tag.name).join('、')
      }

      // 设置咨询表单的预填内容
      this.consultFormData = {
        ...this.consultFormData,
        content: `我想咨询关于【${item.title}】（${category}）的产品信息\n产品描述：${item.description}\n${advantageText ? '产品优势：\n' + advantageText : ''}${tagText ? '\n产品标签：' + tagText : ''}${item.price ? '\n参考价格：' + item.price + (item.price_unit || '') : ''}`
      }

      this.showConsultDialog = true
    },

    // 提交咨询API
    async submitConsultApi(data) {
      // 如果有额外的产品信息，可以添加到提交数据中
      const submitData = {
        ...data,
        product_name: this.currentItem?.title || '',
        product_description: this.currentItem?.description || '',
        product_category: this.currentCategory || '',
        product_price: this.currentItem?.price || '',
        product_price_unit: this.currentItem?.price_unit || '',
        page_type: 'main_page'
      }

      return await reqProductConsult(submitData)

    },

    // 咨询成功回调
    handleConsultSuccess(response) {
      console.log('咨询提交成功:', response)
      // 可以在这里添加后续逻辑，比如记录咨询历史等
      this.$message.success('咨询提交成功，我们将尽快联系您！')
    },

    // 弹窗关闭回调
    handleDialogClose() {
      this.currentItem = null
      this.currentCategory = null
      // 重置表单数据
      this.consultFormData = {
        content: '',
        custom_type: '1',
        name: '',
        phone: '',
        company: '',
        email: '',
        checked: false
      }
    }
  }
}
</script>

<style lang="less">
html,
body {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

body {
  overflow-y: auto !important;
  background-color: #f8fafd;
}
</style>

<style lang="less" scoped>
@import url('../less/official/index.less');
</style>
