<template>
  <template v-if="goodsTotalCount > 0">
    <view class="skuName-wrapper" v-if="skuName">
      <skuNameCell :skuName="skuName" @refresh="refresh"></skuNameCell>
    </view>

    <view class="sku-wrapper" v-if="skuName">
      <view
        class="sku-item"
        :class="{ 'sku-active': sku.id == goodsInfo.skuID }"
        v-for="sku in skuName.skus"
        :key="sku.id"
      >
        <skuNameID :sku="sku" :skuName="skuName" @refresh="refresh"  @openDialog="openDialog"></skuNameID>
      </view>
    </view>
  </template>
  <jx-empty title="未创建商品,下拉刷新试试" v-else />

  <!-- 修改库存以及商品 -->
  <uni-popup ref="popupDialog" type="top">
    <view class="jx-popup-update" >
      <view class="text">
        {{ skuNameItem.type === 'stock' ? '修改库存' : '修改货架码' }}
      </view>
      <view class="tip">{{ skuNameItem.name }}</view>
      <view class="ipt-box">
        <input
          class="ipt"
          :type="skuNameItem.type === 'stock' ? 'number' : 'text'"
          v-model="stockOrCode"
          :placeholder="
            skuNameItem.type === 'stock' ? '请输入商品库存' : '请输入商品货架码'
          "
        />
      </view>
      <view class="btn-root">
        <view class="btn-esc" @tap="popupDialog.close()">取消</view>
        <view class="btn-ok" @tap="sureStockOrCode">确定</view>
      </view>
    </view>
  </uni-popup>

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

<script lang="ts" setup>
import skuNameCell from './skuName/skuName.vue'
import skuNameID from './skuNameID/skuNameID.vue'
import waitGoodsDetaile from './waitGoodsDetaile'
const {
  skuName,          // 商品skuName
  goodsInfo,        // nameID and skuID
  refresh,          // 刷新修改状态
  goodsTotalCount,  // 商品数量
  skuNameItem,      //  修改商品当前的数据
  popupDialog,      // 弹窗 stock locationCode
  sureStockOrCode,  // 弹窗确认 sure
  stockOrCode,      // 库存 或 货架码
  openDialog        // 打开弹框
} = waitGoodsDetaile()
</script>

<style lang="scss" scoped>
.skuName-wrapper,
.sku-wrapper {
  background-color: white;
}
.skuName-wrapper {
  padding: 0 30rpx;
}
.sku-item {
  padding: 0 30rpx;
}
.sku-active {
  background: rgba($jx-primary, 0.1);
}


.jx-popup-update {
    box-sizing: border-box;
    padding: 20rpx;
    background-color: #fff;
    border-radius: 0 0 15rpx 15rpx;

    .text {
        display: block;
        width: 100%;
        text-align: center;
        margin-bottom: 25rpx;
        padding-bottom: 10rpx;
        border-bottom: 2rpx solid rgb(209, 209, 209);
    }

    .tip {
        padding: 2rpx 0;
        height: 66rpx;
        line-height: 66rpx;
        text-align: left;
        border-bottom:1px dashed #999;

        .money {
            color: $jx-primary;
        }
    }

    .ipt-box{
      margin: 10rpx 0;
    }

    .ipt {
        border: 2rpx solid rgb(209, 209, 209);
        text-align: center;
        height: 80rpx;
        border-radius: 5rpx;
    }
      
    .btn-root {
        display: flex;
        justify-content: space-between;
        margin: 40rpx 0 0rpx 0;

        .btn-esc,
        .btn-ok {
            text-align: center;
            width: 100%;
            padding: 15rpx 0;
            border-radius: 10rpx;
            border: 2rpx solid $jx-primary;
            color: $jx-primary;
        }

        .btn-ok {
            background-color: $jx-primary;
            color: #fff;
            margin-left: 10rpx;
        }

        .btn-esc {
            margin-right: 10rpx;
        }
    }

    .delete {
        margin-top: 50rpx;
        margin-bottom: 20rpx;
        background-color: $jx-warring;
        text-align: center;
        color: #fff;
        padding: 20rpx;
        border-radius: 15rpx;
    }
}
</style>