<template>
  <div class="product-intro">
    <div class="function_bg">
      <h2
        :style="`text-align: center;font-weight:400;letter-spacing:4px; ${
          $isMobile
            ? 'padding-bottom:30px;font-size:20px'
            : 'padding-bottom: 40px;font-size:28px'
        }`">
        产品优势
      </h2>
      <div class="product-pros">
        <div class="product-pros-card">
          <div
            class="card-item"
            :class="{ active: activeTab === index }"
            v-for="(item, index) in tabItems"
            :key="index">
            <div class="card-item-name">
              <div class="card-icon">
                <i class="iconfont" :class="item.icon"></i>
              </div>
              <span>{{ item.title }}</span>
            </div>
            <div class="card-item-text">
              <div
                class="card-text"
                v-for="(t, index) in item.texts"
                :key="index">
                <span>{{ t.text }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'productIntro',
  data() {
    return {
      activeTab: 0,
      tabItems: [
        {
          icon: 'icon-shengchanguanli',
          title: '采购管理',
          texts: [
            {
              text: '自定义“补货规则”，系统结合销售周期、在途和库存数据等指标智能计算',
            },
            { text: '自动生成采购需求' },
            { text: '科学规避断货、滞销风险' },
            {
              text: '释放库存成本，建立良性库存，优化资金流结构，提高资金周转率',
            },
          ],
        },
        {
          icon: 'icon-dingdanguanli35',
          title: '订单管理',
          texts: [
            { text: '订单批量审核，异常状态标识归纳，超时自动拆单发货' },
            {
              text: '支持自定义规则进行物流商自动匹配，智能物流推荐，科学预估包裹运费，提前把控物流成本，降低亏损风险',
            },
            { text: '一键获取面单、智能打单发货、回传跟踪号到平台。' },
            { text: '订单管理与包裹管理相结合' },
          ],
        },
        {
          icon: 'icon-cangku_cangchuguanli_o',
          title: '仓储管理',
          texts: [
            { text: '科学的批次生成逻辑及拣货路径。' },
            { text: '支持扫码枪操作，软硬件协作，提高库内作业水平。' },
            {
              text: '本地仓、海外仓、FBA仓数据及时同步，一键配货和扣减库存，扣减逻辑科学合理，杜绝库存不清、超卖等问题。',
            },
          ],
        },
        {
          icon: 'icon-baobiaofenxi',
          title: '报表分析',
          texts: [
            { text: '全局数据可视化分析，快速了解核心数据，高效进行决策。' },
            { text: '多维数据报表，随时了解财务、经营状况，支撑业务决策。' },
          ],
        },
        {
          icon: 'icon-fahuoguanli',
          title: '生产管理',
          texts: [
            {
              text: '与供应商、仓库高效协同，生产数据灵活追踪，一键生成交货单。',
            },
            {
              text: '生产周期较长的大订单可拆解，支持按批次交货，以应对企业紧急采购需求。',
            },
            {
              text: '自定义内向交货数量，企业和供应商可根据产品近期销售走向和实际产能灵活增减区间。',
            },
            { text: '多供应商集中管理，建立多维度的绩效考评机制。' },
          ],
        },
        {
          icon: 'icon-shangpinguanli',
          title: '商品管理',
          texts: [
            {
              text: '数据模型完整，采用SPU+SKU的管理模式，可从SPU维度查看产品、供应商、采购URL及所有SKU信息，增减SKU方便灵活，规格型号统一管理。',
            },
            { text: '对接刊登系统，实现整套资料一键免费刊登多独立站平台。' },
            {
              text: '可以对重点产品添加Tag，便于快速筛选，优先进行销售数据分析。',
            },
            { text: '定制设计器在线创作，POD产品一键合成，实现高效出品。' },
          ],
        },
        {
          icon: 'icon-caiwuguanli',
          title: '财务管理',
          texts: [
            {
              text: '现金流向和流量的预估功能和预算实时查询，使财务人员提前做好防备措施，掌控资金安全，提高资金利用效率。',
            },
            {
              text: '可将由生产活动、销售活动、采购活动输入的信息自动计入财务模块生成总账、会计报表。',
            },
            {
              text: '根据企业需求，自定义营运分析指标公式，方便快捷核算每个阶段经营成果。',
            },
          ],
        },
        {
          icon: 'icon-dianpuguanli',
          title: '店铺管理',
          texts: [
            {
              text: '多平台、多店铺统一管理。',
            },
            {
              text: '支持多店铺之间导入商品。',
            },
            { text: '支持商品一键发布下架'},
          ],
        },
        {
          icon: 'icon-wuliuguanli',
          title: '物流管理',
          texts: [
            { text: '自定义申报报关信息，按需快速申报，避免高昂关税。' },
            { text: '物流轨迹状态实时跟踪，实现包裹一站式查询与异常提醒。' },
            { text: '统计发货、自动计算运费，方便运费核算。' },
          ],
        },
      ],
    }
  },
  methods: {
    freeTrial() {
      window.open('https://demo.jomalls.com')
    },
  },
}
</script>
<style scoped lang="scss">
.product-intro {
  padding: 100px 0;
}
.function_bg {
  width: 60vw;
  margin: 0 auto;
}

.product-pros {
  display: flex;
  align-items: stretch;
}
.product-pros-card {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
}

.card-item {
  padding: 30px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 6px;
}

.card-icon {
  width: 30px;
  height: 30px;
  background-color: #409eff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  margin-right: 6px;
}

.card-icon i {
  font-size: 20px;
}

.card-item-name {
  margin-bottom: 10px;
  font-size: 24px;
  color: #303133;
  display: flex;
  align-items: center;
}

.card-text {
  color: #606266;
  font-size: 14px;
}

.card-text:not(:last-child) {
  margin-bottom: 6px;
}

@media screen and (max-width: 1100px) {
  .function_bg {
    width: 90vw;
  }

  .product-pros {
    flex-direction: column;
  }

  .product-intro {
    padding: 40px 0;
  }
  .product-pros-card {
    grid-template-rows: repeat(1, 1fr);
    grid-template-columns: repeat(1, 1fr);
  }

  .card-item {
    padding: 20px;
  }

  .card-item-name {
    font-size: 18px;
  }

  .card-icon {
    width: 24px;
    height: 24px;

    & i {
      font-size: 16px;
    }
  }

  .card-text {
    font-size: 12px;
  }

  .card-item-name {
    font-size: 16px;
  }
}
</style>
