<template>
  <div>
    <!-- 标题 -->
    <div class="top-tit">
      开元云
    </div>

    <!-- 供应商 -->
    <div class="supplier-container">
      <div v-for="(value, index) in cloudData.secMenu" :key="index" class="supplier" @click="selectSupplier(index)">
        <div class="supplier-title" :class="{ 'active': activeSupplierIndex === index }">
          {{ value.secTitle }}
        </div>
      </div>
    </div>

    <!-- 云产品 -->
    <div class="box">
      <!-- 只显示当前选中的供应商的产品 -->
      <template v-if="cloudData.secMenu && cloudData.secMenu.length > 0 && activeSupplierIndex >= 0">
        <template v-for="thrMenu in cloudData.secMenu[activeSupplierIndex].thrMenu">
          <div v-for="product in thrMenu.value" :key="product.id" class="box-item">
            <!-- 标题 -->
            <div class="item-tit">
              {{ product.name }}
            </div>

            <!-- 产品描述（如果有） -->
            <div class="item-detail" v-if="product.description">
              {{ product.description }}
            </div>

            <!-- 供应商标签 -->
            <div class="item-desc" v-if="showProductDesc(product)">
              {{ getProductDesc(product) }}
            </div>

            <!-- 立即咨询 -->
            <div class="item-btn">
              <div class="btn" @click="openConsultDialog(product, thrMenu)">
                立即咨询
              </div>
            </div>
          </div>
        </template>
      </template>
    </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 { reqNavList } from '@/api/H5/index'
import ProductConsultDialog from '../H5_dialog/index.vue'
import { reqProductConsult } from '@/api/H5/index'

export default {
  components: {
    ProductConsultDialog
  },

  data() {
    return {
      cloudData: {},
      activeSupplierIndex: 0, // 默认选中第一个供应商

      // 咨询弹窗相关
      showConsultDialog: false,
      platformName: '开元云',
      qrCode: '',
      consultFormData: {
        content: '',
        custom_type: '1',
        name: '',
        phone: '',
        company: '',
        email: '',
        checked: false
      },
      currentProduct: null,
      currentCategory: null
    }
  },
  created() {
    this.getCloudData()
  },
  computed: {
    // 当前选中的供应商标题
    currentSupplierTitle() {
      if (this.cloudData.secMenu && this.cloudData.secMenu[this.activeSupplierIndex]) {
        return this.cloudData.secMenu[this.activeSupplierIndex].secTitle
      }
      return ''
    }
  },
  methods: {
    // 判断是否显示供应商标签
    showProductDesc(product) {
      // 如果是百度云且有label字段
      if (this.currentSupplierTitle === '百度云' && product.label) {
        return true
      }

      // 如果是阿里云，总是显示（因为阿里云数据中没有label字段）
      if (this.currentSupplierTitle === '阿里云') {
        return true
      }

      // 其他情况
      return false
    },

    // 获取供应商标签内容
    getProductDesc(product) {
      // 获取当前供应商标题
      const supplierTitle = this.currentSupplierTitle

      // 处理百度云
      if (supplierTitle === '百度云') {
        // 如果product有ssecTitle字段（虽然你的数据中没有），使用它
        if (product.ssecTitle && product.ssecTitle.trim() !== '') {
          return product.ssecTitle
        }
        // 否则使用label字段
        return product.label || '百度云'
      }

      // 处理阿里云 - 阿里云数据中没有ssecTitle和label字段，所以直接显示供应商名称
      if (supplierTitle === '阿里云') {
        // 如果阿里云的数据结构中有ssecTitle字段，使用它
        if (product.ssecTitle && product.ssecTitle.trim() !== '') {
          return product.ssecTitle
        }
        // 如果阿里云的数据结构中有label字段，使用它
        if (product.label && product.label.trim() !== '') {
          return product.label
        }
        // 否则显示"阿里云"
        return '阿里云'
      }

      // 默认返回供应商标题
      return supplierTitle
    },

    // 获取云数据
    async getCloudData() {
      const res = await reqNavList({ url_link: window.location.href })
      if (res.status == true) {
        this.cloudData = res.data.product_service[0]
        console.log('云产品数据:', this.cloudData)

        // 确保有数据时选中第一个
        if (this.cloudData.secMenu && this.cloudData.secMenu.length > 0) {
          this.activeSupplierIndex = 0

          // 打印数据结构以帮助调试
          this.cloudData.secMenu.forEach((supplier, index) => {
            console.log(`供应商 ${index} (${supplier.secTitle}):`)
            if (supplier.thrMenu && supplier.thrMenu.length > 0) {
              supplier.thrMenu.forEach((category, catIndex) => {
                console.log(`  分类 ${catIndex} (${category.thrTitle}):`)
                if (category.value && category.value.length > 0) {
                  // 只打印第一个产品作为示例
                  const firstProduct = category.value[0]
                  console.log(`    第一个产品:`, {
                    name: firstProduct.name,
                    description: firstProduct.description,
                    label: firstProduct.label,
                    ssecTitle: firstProduct.ssecTitle,
                    source: firstProduct.source
                  })
                }
              })
            }
          })
        }
      }
    },

    // 选择供应商（不允许取消选中）
    selectSupplier(index) {
      this.activeSupplierIndex = index
    },

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

      // 设置咨询表单的预填内容
      this.consultFormData = {
        ...this.consultFormData,
        content: `我想咨询关于【${product.name}】的产品信息`
      }

      this.showConsultDialog = true
    },

    // 提交咨询API
    async submitConsultApi(data) {
      // 如果有额外的产品信息，可以添加到提交数据中
      const submitData = {
        ...data,
        product_name: this.currentProduct?.name || '',
        product_description: this.currentProduct?.description || '',
        product_label: this.currentProduct?.label || '',
        product_category: this.currentCategory?.thrTitle || '',
        supplier_name: this.cloudData.secMenu[this.activeSupplierIndex]?.secTitle || '',
        page_type: 'product_list'
      }

      return await reqProductConsult(submitData)
    },

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

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

<style>
html,
body {
  height: 100%;
  overflow-y: auto;
}
</style>
<style lang="less" scoped>
.top-tit {
  display: flex;
  justify-content: center;
  background: linear-gradient(90deg, #275AFF 0%, #2EBDFA 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: .3rem;
  font-weight: bold;
  margin-bottom: .3rem;
}

.supplier-container {
  display: flex;
  flex-wrap: wrap;
  /* 允许换行 */
  padding: .2rem .22rem;
  gap: .15rem;
  /* 使用gap控制间距 */
}

.supplier {
  flex-shrink: 0;
  /* 防止收缩 */

  .supplier-title {
    font-size: .2rem;
    color: #000;
    padding: .12rem .2rem;
    background-color: #f5f5f5;
    border-radius: 0.12rem;
    cursor: pointer;
    transition: all 0.3s ease;

    white-space: nowrap;
    /* 防止文字换行 */

    &:hover {
      background-color: #e0e0e0;
      transform: translateY(-0.02rem);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    &.active {
      background: linear-gradient(90deg, #275aff, #2ebdfa);
      color: #fff;
      box-shadow: 0 .04rem .12rem rgba(39, 90, 255, 0.3);
      transform: translateY(-0.02rem);
    }
  }
}

.box {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 .3rem;

  .box-item {
    display: flex;
    width: 48%;
    flex-direction: column;
    align-items: self-start;
    border: .02rem solid #f0f0f0;
    border-radius: .2rem;
    padding: .15rem .2rem;
    margin: .34rem 0;
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-0.05rem);
      box-shadow: 0 .08rem .2rem rgba(0, 0, 0, 0.1);
      border-color: #1f70ff;
    }

    .item-tit {
      font-size: .16rem;
      color: #000;
      font-weight: bold;
      margin-bottom: .1rem;
    }

    .item-detail {
      color: #666;
      font-size: .13rem;
      margin: .15rem 0;
      line-height: 1.4;
      min-height: .4rem; // 确保有最小高度
    }

    .item-desc {
      color: #666;
      background-color: #f8f9fa;
      font-size: .12rem;
      padding: .08rem .12rem;
      border-radius: .1rem;
      margin-bottom: .15rem;
      border: .01rem solid #e9ecef;
      min-height: .32rem; // 确保有最小高度
      display: flex;
      align-items: center;
    }

    .item-btn {
      width: 100%;
      display: flex;
      justify-content: flex-end;

      .btn {
        background: linear-gradient(90deg, #1f70ff, #3a8cff);
        color: #fff;
        padding: .08rem .2rem;
        border-radius: .15rem;
        font-size: 0.14rem;
        cursor: pointer;
        transition: all 0.3s ease;
        border: none;

        &:hover {
          background: linear-gradient(90deg, #0d5aff, #2a7aff);
          transform: translateY(-0.02rem);
          box-shadow: 0 .04rem .1rem rgba(31, 112, 255, 0.3);
        }
      }
    }
  }
}
</style>
