<template>
  <view>
    <create-goods-search
      class="shopping-cel"
      @serachShopping="serachShopping"
      @clearInpu="clearInpu"
      @scanCode="scanCode"
    />
  </view>

  <view class="main-center-root">
    <view class="left-bar-root">
      <scroll-view scroll-y style="height: calc(100vh - 92rpx)">
        <left-bar
          ref="leftBarRef"
          :dafauleData="dafauleData"
          @oneMenuClick="oneMenuClick"
        />
      </scroll-view>
    </view>
    <view></view>

    <view class="right-center">
      <create-goods-filter
        @updateTowFilter="updateTowFilter"
        :totalCount="totalCount"
      />

      <scroll-view
        scroll-y
        style="height: calc(100vh - 272rpx)"
        refresher-enabled
        :refresher-triggered="triggered"
        @refresherrefresh="refresherrefresh"
        @scrolltolower="scrolltolower"
      >
        <right-main
          :skuNames="skuNames"
          :isFocus="isFocus"
          @newCreateGoods="newCreateGoods"
          ref="rightMainRef"
        />
        <jx-empty v-show="totalCount == 0" title="此分类暂无商品" />
        <jx-load-more
          v-show="totalCount >= 4"
          :isLoad="isLoad"
          tip="没有更多商品了"
        />
      </scroll-view>

      <view class="bottom-filter">
        <view class="item" v-if="!isFocus" @tap="handleFocus(1)">
          创建({{ newGoodsNum }})
        </view>
        <view class="item" v-else @tap="handleFocus(1)"
          >删除({{ newGoodsNum }})</view
        >
      </view>
    </view>
  </view>

  <!-- 扫码创建商品 -->
  <search-goods
    v-if="isSearchGoods"
    :scanData="scanData"
    @cancel="isSearchGoods = false"
    @confirm="scanGoodConfirm"
  />

  <!-- 公共组件 -->
  <jx-loading />
</template>

<script lang="ts" setup >
import createGoodsFn from './createGoods'
import leftBar from '@/pages/goods-manager/component/left-bar/left-bar.vue'
import createGoodsSearch from './createGoodsChild/create-goods-search/create-goods-search.vue'
import createGoodsFilter from './createGoodsChild/create-goods-filter/create-goods-filter.vue'
import searchGoods from './createGoodsChild/searchGoods/searchGoods.vue'
import rightMain from './createGoodsChild/right-main/right-main.vue'
const {
  dafauleData,      // 列表默认数据
  oneMenuClick,     // 点击列表项
  skuNames,         // 商品数据
  isFocus,          // 是否关注
  totalCount,       // 未关注条数
  updateTowFilter,  // 更新筛选条件
  serachShopping,   // 输入框搜索
  clearInpu,        // 清空输入框
  scanCode,         // 扫码
  refresherrefresh, // 下来加载更多
  triggered,        // 动态显示加载
  leftBarRef,       // 右侧tab实例
  scrolltolower,    // 页面触底
  isLoad,           // 加载动画
  newCreateGoods,   // 新建可售商品
  newGoodsNum,      // 新建商品数量
  handleFocus,      // 创建和移除商品
  rightMainRef,     // 主体内容实例
  isSearchGoods,    // 是否查询到了商品
  scanData,         // 查询到的商品详情
  scanGoodConfirm,  // 创建商品
} = createGoodsFn()
</script>

<style lang="scss" scoped>
@import './createGoods.scss';
.shopping-cel {
  :deep(.uni-searchbar) {
    padding: 0 !important;
    width: 610rpx !important;
    height: 70rpx;

    .uni-searchbar__box {
      border-radius: 7rpx !important;
      height: auto !important;
    }
  }
}

.main-center-root {
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;

  .left-bar-root {
    width: 200rpx;
    box-shadow: 0rpx 10rpx 10rpx rgb(207, 207, 207);
  }

  .right-center {
    width: calc(100vw - 200rpx);
  }
}
</style>
<style >
page {
  background-color: #fff;
}
</style>