<template>
  <div class="conter">
    <div class="banner-box">
      <div class="conter">
        <div class="Toptitle">
          供需广场
        </div>
        <div class="banner-title">
          开元云供需对接广场，是企业级云服务合作核心阵地。围绕云资源、算力、网络服务、模型及应用，企业可灵活发布资源供给或业务需求，通过精准匹配打破信息壁垒。这里既能盘活企业闲置算力与云资源，又能快速对接所需技术服务与合作机会，助力企业降本增效，加速数字化与智能化转型。
        </div>
        <div class="btn">
          <div class="btn-box" @click="sendInfo('2')">发布需求</div>
          <div class="btn-box" @click="sendInfo('1')">发布商品</div>
        </div>
      </div>
    </div>
    <div class="main-box">
      <!-- <div style="margin-top: 25px;">
            <span style="margin-top: 100px;" class="title">
                <span class="leftText">
                    算力供需
                </span>
                <span class="rightText"> 广场</span></span>
        </div> -->

      <!-- 发布商品/需求弹窗 -->
      <el-dialog :title="publish_type === '2' ? '发布需求' : '发布商品'" width="60vw" top="5vh"
        :visible.sync="sendProductVisible">
        <sendProduct :isEdit="false" v-if="publish_type" @success="sendProductSuccess" :publish_type="publish_type">
        </sendProduct>
      </el-dialog>

      <!-- 审核提示弹窗 -->
      <el-dialog title="温馨提示" :visible.sync="showTip" width="30%">
        <span>您还没有完善企业信息，完善企业信息审核通过后您可以发布需求与商品。</span>
        <span slot="footer" class="dialog-footer">
          <span> <span style="margin-right: 10px;"> 跳转到</span> <el-button size="small" type="primary"
              @click="goInfo">信息完善</el-button></span>
        </span>
      </el-dialog>

      <!-- 筛选条件区域 - 整合到一个卡片中 -->
      <div class="filter-card">
        <!-- <div class="filter-header">
                <span class="filter-title">筛选条件</span>
            </div> -->

        <div class="filter-content">
          <!-- 发布类型 -->
          <div class="filter-section">
            <div class="filter-label">发布类型</div>
            <div class="filter-options">
              <label class="filter-option" :class="{ active: publish_type === '1' }">
                <input type="radio" v-model="publish_type" value="1" @change="handleTypeChange">
                <span class="option-text">企业商品</span>
              </label>
              <label class="filter-option" :class="{ active: publish_type === '2' }">
                <input type="radio" v-model="publish_type" value="2" @change="handleTypeChange">
                <span class="option-text">企业需求</span>
              </label>
            </div>
          </div>

          <!-- 所属类别 -->
          <div class="filter-section">
            <div class="filter-label">所属类别</div>
            <div class="filter-options">
              <span v-for="category in firstCategories" :key="category.id"
                :class="['filter-option', { active: activeFirstId === category.id }]"
                @click="selectFirstCategory(category.id)">
                {{ category.product_category || category.label }}
              </span>
            </div>
          </div>

          <!-- 所属品类 -->
          <div class="filter-section" v-if="secondCategories.length > 0">
            <div class="filter-label">所属品类</div>
            <div class="filter-options">
              <span v-for="category in secondCategories" :key="category.id"
                :class="['filter-option', { active: activeSecondId === category.id }]"
                @click="selectSecondCategory(category.id)">
                {{ category.product_category || category.label }}
              </span>
            </div>
          </div>

          <!-- 公司类别 -->
          <!-- <div class="filter-section">
                    <div class="filter-label">公司类别</div>
                    <div class="filter-options">
                        <span v-for="company in companies" :key="company.id"
                            :class="['filter-option', { active: selectedCompanies.includes(company.value) }]"
                            @click="selectCompany(company.value)">
                            {{ company.label }}
                        </span>
                    </div>
                </div> -->
        </div>
      </div>

      <!-- 产品列表 -->
      <div class="product-card-container">
        <div v-if="productList.length > 0">
          <productCard type="supplyAndDemandSquare" :publish_type="publish_type" :productList="productList">
          </productCard>
          <el-pagination @current-change="handleCurrentChange" :page-size="page_size" layout="total, prev, pager, next"
            :total="total" style="width: 100%; text-align: center;">
          </el-pagination>
        </div>
        <div v-else class="no-data">
          <img style="width: 150px;height: 150px;" src="./img/empty.svg" alt="">
          暂无数据
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reqGetSupplyAndDemandSquareList, reqCompanyCategorySearch, reqSupplyAndDemandFirstCategory, reqEnterpriseAuditInfoSearch } from '@/api/ncmatch'
import { mapGetters, mapState } from 'vuex'

export default {
  name: 'supplyAndDemandSquare',
  components: {
    productCard: () => import('@/views/homePage/ncmatch/mainPage/productCard/index.vue'),
    sendProduct: () => import('@/views/homePage/ncmatch/mainPage/sendProduct/index.vue')
  },
  data() {
    return {
      page_size: 8,
      current_page: 1,
      typeList: [],
      publish_type: '1',
      selectedCategory: '',
      selectedCompanies: [],
      categories: [],
      companies: [],
      productList: [],
      total: 0,
      firstCategories: [],
      secondCategories: [],
      activeFirstId: null,
      activeSecondId: null,
      showTip: false,
      sendProductVisible: false,
    }
  },
  created() {
    this.initAllData()
  },
  computed: {
    isNcmatchHome() {
      return window.location.href.includes('ncmatchHome')
    },
    ...mapGetters(["sidebar", "avatar", "device"]),
    ...mapState({
      isShowPanel: (state) => state.product.showHomeNav,
      navIndex: (state) => state.product.navIndex,
      gridObj: state => state.operationAnalysis.gridObj,
      mybalance: state => state.user.mybalance,
      logoutUrl: state => state.login.logoutUrl,
      loginStateVuex: state => state.login.loginState,
      logoInfoNew: state => state.product.logoInfoNew,
    }),
    loginState() {
      const userId = sessionStorage.getItem('userId');
      return this.loginStateVuex || (userId !== null && userId !== 'null' && userId !== '');
    },
  },
  methods: {
    // 发布需求/商品方法
    sendInfo(type) {
      if (this.loginState) {
        reqEnterpriseAuditInfoSearch({
          url_link: window.location.href,
        }).then(res => {
          const dataList = res && res.data && res.data.data
          const hasAuditInfo = Array.isArray(dataList) && dataList.length !== 0
          const roles = sessionStorage.getItem('jueseNew')
          const isCustomer = roles ? roles.includes('客户') : true

          if (hasAuditInfo && dataList[0]) {
            const auditStatus = dataList[0].audit_status

            if (auditStatus === 'pending') {
              this.$message.warning('您的审核状态为待审核，请等待审核通过后发布~')
            } else if (auditStatus === 'rejected') {
              this.$message.warning('您的审核状态为驳回，请重新提交~')
            } else {
              this.publish_type = type
              this.sendProductVisible = true
            }
          } else if (!isCustomer) {
            this.publish_type = type
            this.sendProductVisible = true
          } else {
            this.showTip = true
          }
        })
      } else {
        this.$router.push('/login')
      }
    },

    // 发布成功回调
    sendProductSuccess() {
      this.sendProductVisible = false;
      this.initData()
    },

    // 跳转到信息完善页面
    goInfo() {
      this.showTip = false
      this.$router.push('/customer/approve')
    },

    handleCurrentChange(val) {
      this.current_page = val
      this.initData()
    },

    initAllData() {
      this.init_product_category().then(() => {
        this.init_company_category().then(() => {
          this.initData()
        })
      })
    },

    init_company_category() {
      return reqCompanyCategorySearch({ url_link: window.location.href }).then(res => {
        if (res.status) {
          this.company_category_list = []
          for (let item of res.data) {
            this.company_category_list.push({
              label: item.company_category,
              value: item.company_category
            })
          }
          this.companies = this.company_category_list
        }
        return res
      })
    },

    // 选中一级分类
    selectFirstCategory(id) {
      if (id === this.activeFirstId) return
      this.activeFirstId = id
      this.activeSecondId = null
      this.selectedCategory = id
      this.loadSecondCategories(id)
      this.initData()
    },

    // 选中二级分类
    selectSecondCategory(id) {
      if (id === this.activeSecondId) return
      this.activeSecondId = id
      this.selectedCategory = id
      this.initData()
    },

    init_product_category() {
      return reqSupplyAndDemandFirstCategory({ to_page: 'show', url_link: window.location.href }).then(res => {
        if (res.status) {
          this.firstCategories = Array.isArray(res.data) ? res.data : []
          if (this.firstCategories.length > 0) {
            this.activeFirstId = this.firstCategories[0].id
            this.selectedCategory = this.activeFirstId
            this.activeSecondId = null
            return this.loadSecondCategories(this.activeFirstId)
          } else {
            this.activeFirstId = null
            this.activeSecondId = null
            this.selectedCategory = ''
            this.secondCategories = []
          }
        }
        return res
      })
    },

    loadSecondCategories(firstId) {
      return reqSupplyAndDemandFirstCategory({ to_page: 'show', url_link: window.location.href, first_level_id: firstId }).then(res => {
        if (res.status) {
          this.secondCategories = Array.isArray(res.data) ? res.data : []
        } else {
          this.secondCategories = []
        }
        return res
      })
    },

    handleTypeChange() {
      console.log('切换到:', this.publish_type)
      this.initData()
    },

    initData() {
      let ploay = {
        product_category: this.selectedCategory,
        to_page: "square",
        url_link: window.location.href,
        page_size: this.page_size,
        current_page: this.current_page,
        company_type: this.selectedCompanies.length > 0 ? this.selectedCompanies.join(",") : "",
        publish_type: this.publish_type
      }
      reqGetSupplyAndDemandSquareList(ploay).then(res => {
        if (res.status) {
          if (res.data.length === 0) {
            this.productList = []
          } else {
            this.productList = res.data[0].product_list
          }
          this.total = res.data[0].total_count
        }
      })
    },

    selectCompany(companyId) {
      const index = this.selectedCompanies.indexOf(companyId)
      if (index > -1) {
        this.selectedCompanies.splice(index, 1)
      } else {
        this.selectedCompanies.push(companyId)
      }
      this.initData()
    },
  }
}
</script>

<style scoped lang="scss">
.conter{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.banner-box {
  height: 600px!important;
  background: url('./img/tt-banner.png') no-repeat ;
  width: 100%;
  // padding-bottom: 10px;

  .conter {
    width: 700px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 100px 280px 0px;
  }

  .Toptitle {
    font-size: 30px;
    font-weight: 600;
    margin-bottom: 18px;
    color: #000;
  }

  .banner-title {
    width: 700px;
    font-size: 16px;
    color: #8890ab;
    line-height: 2 !important;
  }

  .btn{
    display: flex;
  }

  .btn-box{
    padding: 10px 20px;
    background: linear-gradient(90deg, rgb(39, 90, 255), rgb(46, 189, 250));
    border-radius: 14px;
    color: #fff;
    margin-right: 20px;
    margin-top: 20px;
    cursor: pointer;
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(39, 90, 255, 0.3);
    }
  }
}
.title {
  color: #666 !important;
  font-size: 36px;
  margin: 25px;

  .leftText {
    background: linear-gradient(to right, #275AFF, #2EBDFA);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
  }
}

.product-card-container {
  margin-top: 30px;
  width: 100%;
}

.main-box {
  width: 90%;
  // min-width: 1600px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 1600px;
}

/* 筛选卡片样式 */
.filter-card {
  width: 100%;
  max-width: 1400px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  margin: 20px 0;
  transition: all 0.3s ease;
  overflow: hidden;

  &:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
  }
}

.filter-header {
  padding: 20px 25px;
  border-bottom: 1px solid #f0f0f0;
  background: linear-gradient(135deg, #f8faff 0%, #f0f4ff 100%);
}

.filter-title {
  font-size: 18px;
  font-weight: 600;
  color: #111e52;
  display: flex;
  align-items: center;

  &::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 16px;
    background: linear-gradient(135deg, #275AFF, #2EBDFA);
    border-radius: 2px;
    margin-right: 10px;
  }
}

.filter-content {
  padding: 25px;
}

.filter-section {
  display: flex;
  align-items: flex-start;
  margin-bottom: 25px;

  &:last-child {
    margin-bottom: 0;
  }
}

.filter-label {
  font-size: 14px;
  color: #333;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 32px;
  width: 80px;
  margin-right: 20px;
}

.filter-options {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  flex: 1;
}

.filter-option {
  position: relative;
  padding: 8px 20px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 14px;
  color: #666;
  cursor: pointer;
  transition: all 0.3s ease;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 80px;
  text-align: center;

  &:hover {
    border-color: #275AFF;
    color: #275AFF;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(39, 90, 255, 0.2);
  }

  &.active {
    background: linear-gradient(135deg, #275AFF, #2EBDFA);
    color: white;
    border-color: #275AFF;
    box-shadow: 0 2px 8px rgba(39, 90, 255, 0.3);
  }

  /* 隐藏原生radio */
  input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
  }

  .option-text {
    font-weight: 500;
    pointer-events: none;
  }
}

.no-data {
  min-height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  color: #7A82A0;
  flex-direction: column;
}

.el-pagination {
  text-align: center;
  margin-top: 30px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .filter-card {
    margin: 15px 10px;
  }

  .filter-content {
    padding: 15px;
  }

  .filter-section {
    flex-direction: column;
    margin-bottom: 20px;
  }

  .filter-label {
    width: 100%;
    margin-bottom: 10px;
    margin-right: 0;
  }

  .filter-options {
    width: 100%;
    gap: 8px;
  }

  .filter-option {
    padding: 6px 12px;
    font-size: 12px;
    min-width: 60px;
  }
}

@media (max-width: 1200px) {
  .filter-card {
    max-width: calc(100% - 40px);
    margin: 20px;
  }
}
</style>
