<template>
  <div id="homeOut" class="homeOut">
    <TopBox id="topBox"></TopBox>

    <!-- <div class="search-box">
      <search></search>
    </div> -->
    <div style="width: 100%;">
      <router-view></router-view>
    </div>

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

    <el-dialog :title="productDetailInfo.publish_type === '1' ? '商品详情' : '需求详情'" top="5vh" :visible.sync="showProductDetail"
      width="80%" @open="scrollToTop">
      <ProductDetail></ProductDetail>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="closeProductDetail">关 闭</el-button>
      </span>
    </el-dialog>

    <!-- Footer -->
    <div class="footer">
      <div class="left-box" style="border-bottom: 1px solid  #7A82A0">
        <div style="display: flex;flex-direction: column">
          <img v-if="JSON.stringify(logoInfoNew) !== '{}'" style="width: 148px;height: 48px;"
            :src="logoInfoNew.home.logoImg" alt="" class="img">
          <div class="content-main">
            <ul class="info">
              <li>地址：<span v-if="JSON.stringify(logoInfoNew) !== '{}'">{{ logoInfoNew.home.adress }}</span></li>
              <li v-if="JSON.stringify(logoInfoNew) !== '{}'"> 邮箱：{{ logoInfoNew.home.email }}</li>
              <li v-if="JSON.stringify(logoInfoNew) !== '{}'">电话： <span class="tel">{{ logoInfoNew.home.mobile }}</span></li>
            </ul>
          </div>
        </div>
        <ul class="bigUl"></ul>
        <div v-if="JSON.stringify(logoInfoNew) !== '{}' && logoInfoNew.home.bannerTitle !== '开元数智'" class="right-box">
          <div class="qr-box">
            <img src="../img/img.png"  style="padding: 0.08rem" alt="">

            <span class="qr-content">微信客服</span>
          </div>
          <div class="qr-box" style="margin-left: 0.667rem">
            <img src="../img/kefu.jpg" alt="">

            <span class="qr-content">关注公众号</span>
          </div>
        </div>
      </div>
      <div style="display: flex;justify-content: center;align-items: center;width: 100%; ">
        <span v-if="JSON.stringify(logoInfoNew) !== '{}'"
          style="margin:15px 0 ;width: 1400px;display:flex;justify-content:center;align-items:center;color: #7A82A0;">
          <span class="goStyle" @click="goOut('https://beian.miit.gov.cn/#/Integrated/index')">
            京ICP备{{ logoInfoNew.home.license }}&nbsp;
          </span>
          &nbsp;&nbsp;{{ logoInfoNew.home.footerTitle }}&nbsp;{{ logoInfoNew.home.copyright }}&nbsp;
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import TopBox from "@/views/homePage/components/topBox/index.vue";
import { mapGetters, mapState } from "vuex";
import search from "./search/index.vue";
import { reqEnterpriseAuditInfoSearch } from '@/api/ncmatch'
import productDetail from "./proDetail/index.vue";
export default Vue.extend({
  name: "indexLast",
  components: {
    TopBox,
    search,
    ProductDetail: productDetail,
    sendProduct: () => import('@/views/homePage/ncmatch/mainPage/sendProduct/index.vue')
  },
  data() {
    return {
      currentBaseMenu: "hot",
      // 新增发布相关状态
      sendProductVisible: false,
      showTip: false,
      publish_type: "",
    }
  },
  computed: {
    ...mapGetters(["sidebar", "avatar", "device"]),
    ...mapState({
      isShowPanel: (state) => state.product.showHomeNav,
      productDetailInfo: state => state.ncmatch.productDetail,
      navIndex: (state) => state.product.navIndex,
      gridObj: state => state.operationAnalysis.gridObj,
      mybalance: state => state.user.mybalance,
      logoutUrl: state => state.login.logoutUrl,
      loginState: state => state.login.loginState,
      logoInfoNew: state => state.product.logoInfoNew,
    }),
    showProductDetail: {
      get() {
        return this.$store.state.ncmatch.showProductDetail;
      },
      set(value) {
        this.$store.commit('SHOWPRODUCTDETAIL', value);
      }
    },
  },
  methods: {
    closeProductDetail() {
      this.$store.commit('SHOWPRODUCTDETAIL', false)
    },
    scrollToTop() {
      this.$nextTick(() => {
        const dialogBody = document.querySelector('.el-dialog__body');
        if (dialogBody) {
          dialogBody.scrollTop = 0;
        }
      });
    },
    goOut(url) {
      window.open(url)
    },
    scrollToElement(id) {
      const element = document.getElementById(id);
      if (element) {
        element.scrollIntoView({
          behavior: 'smooth',
          block: 'start',
        });
      }
    },
    clickBaseMenu(menu) {
      this.currentBaseMenu = menu.id;
    },
    async goBaidu() {
      this.scrollToElement('topBox')
      await this.$store.commit('setShowHomeNav', true)
      await this.$store.commit('setNavIndex', 0)
    },
    async goAliyun() {
      this.scrollToElement('topBox')
      await this.$store.commit('setShowHomeNav', true)
      await this.$store.commit('setNavIndex', 1)
    },

    // 发布需求/商品方法
    sendInfo(type) {
      console.log("发布类型:", 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.$message.success(this.publish_type === '1' ? '商品发布成功' : '需求发布成功');
      // 如果当前在供需广场页面，可以刷新列表数据
      if (this.$route.path === '/supplyAndDemandSquare') {
        // 触发供需广场页面的数据刷新
        this.$bus.$emit('refreshSupplyDemandList');
      }
    },

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

<style scoped lang="less">


.search-box {
  width: 100%;
  // margin: 45px 0 25px 0;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.homeOut {
  height: 100%;
  overflow: auto !important;
  min-width: 1500px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background-color: #f6f8fd;
}

.footer {
  padding: 35px 0;
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.left-box {
  width: 1400px;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 15px;
}

.right-box {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content-main {
  mix-blend-mode: normal;
  color: rgba(0, 0, 0, 1);
  font-size: 0.187rem;
}

.qr-code {
  img {
    width: 100%;
    height: 100%;
  }
  width: 1.853rem;
  height: 1.853rem;
}

.qr-content {
  mix-blend-mode: normal;
  color: rgba(24, 24, 24, 1);
  font-family: PingFang SC, serif;
  font-weight: 600;
  font-size: 0.187rem;
}

.qr-box {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  img{
    width: 120px;
    height: 120px;
  }
}

.bigUl {
  margin: 0 15px;
  margin-left: -250px;
  width: fit-content;
  display: flex;
  justify-content: flex-start;

  .bigLi {
    margin: 0 25px;
  }
  height: 100%;

  .title {
    color: #222F60;
    font-size: 18px;
    font-weight: bold;
  }

  .smallUl {
    font-size: 16px;
    color: #7A82A0;

    li {
      margin: 10px 0;
    }
  }
}

.info {
  font-size: 14px;
  color: #7A82A0;

  li {
    margin: 10px 0;
  }
}

.tel {
  color: #222F60;
  font-size: 20px;
}

.smallLi {
  &:hover {
    color: #1b5bff;
    cursor: pointer;
  }
}

.goStyle {
  cursor: pointer;
  transition: all .3s ease-in-out;

  &:hover {
    transition: all .3s ease-in-out;
    color: #1b5bff;
  }
}
/deep/.el-pagination{
  text-align: center !important;
}
</style>
