<template>
  <view
    class="skuName-cell-focus"
    v-for="(skuName, i) in skuNames"
    :key="i"
    :id="'g' + skuName.id"
  >
    <!-- skuName -->
    <view class="skuName">
      <!-- 图片 -->
      <view class="skuName-img" @tap="previewImg(skuName)">
        <image
          class="imglabel"
          mode="scaleToFill"
          lazy-load
          :src="skuName.img"
        />
      </view>
      <!-- 其他信息 -->
      <view class="skuName-info">
        <!-- 名称 -->
        <view class="skuName-name">
          {{ skuName.prefix ? '[' + skuName.prefix + ']' : ''
          }}{{ skuName.name }}
        </view>
        <!-- 价格 -->
        <view class="skuName-price">
          <text class="icon-money">¥</text>
          <text class="num" v-if="isFocus">{{ skuName.price }}</text>
          <!-- 输入价格 -->
          <view class="num-input" @click.stop v-else>
            <input
              type="digit"
              v-model="skuName.price"
              @input="priceChange($event, skuName)"
              @blur="priceBlur(skuName)"
            />
          </view>
          <text class="unit"
            >/&nbsp;{{ skuName.unit === '份' ? '斤' : skuName.unit }}</text
          >
        </view>
        <!-- 审核状态 -->
        <view class="check-display" v-show="skuName.auditUnitPrice">
          {{ isFocus ? '' : '新建' }}审核中价格:
          <jx-price :price="skuName.auditUnitPrice" />
        </view>
        <!-- 价格 -->
      </view>
    </view>
    <!-- skuName -->
    <view class="skus2" v-if="isFocus">
      <view
        class="sku-cell-forfocus"
        v-for="(sku, j) in skuName.skus"
        :key="j"
        :class="{ 'sku-cell-forfocus-green': sku.storeSkuStatus }"
      >
        {{ sku.specQuality }}{{ sku.specUnit }}
        <text v-if="skuName.unit === '份'">约</text>¥{{ sku.price }}({{
          sku.storeSkuStatus ? '可售' : '不可售'
        }})
      </view>
      <view class="checkbox">
        <checkbox-group @change="removeGoods($event, skuName)">
          <label>
            <checkbox color="#4eb331" style="transform: scale(0.8)" />选中商品
          </label>
        </checkbox-group>
      </view>
    </view>
    <!-- sku -->
    <view class="skus" v-if="!isFocus">
      <view
        v-for="(sku, j) in skuName.skus"
        :key="j"
        class="sku-cell"
        @click="updateSaleStatus(skuName, sku)"
      >
        <view
          class="sku-root"
          :class="{ 'sku-root-active': sku.comment == '' }"
        >
          <view class="sku-left">
            <view class="sku-spec">
              {{ sku.specQuality }}{{ sku.specUnit }}
            </view>
            <view class="sku-price"><text>¥</text>{{ sku.price }}</view>
          </view>
          <view class="sku-right" :class="{ isSale: sku.storeSkuStatus === 1 }">
            {{ sku.storeSkuStatus === 1 ? '可售' : '不可售' }}
          </view>
        </view>
        <view class="sku-bottom" v-if="sku.comment">{{
          sku.comment ? sku.comment : ''
        }}</view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup >
import useGlobalFunc from '@/composables/useGlobalFunc'
import rightMainFn from './right-main'
/*************************************************
 * 接收数据
 */
interface propsType {
  skuNames: Array<AnyObject>
  isFocus: boolean
}
const props = defineProps<propsType>()

const emit = defineEmits<{
  (e: 'newCreateGoods', data: Array<AnyObject>): void
}>()

/*************************************************
 * 创建完成
 */
function createSuccess() {
  focusArr.value = []
  emit('newCreateGoods', focusArr.value)
}

defineExpose({
  createSuccess,
})

const {
  updateSaleStatus, // 修改商品价格
  priceBlur, // 失去焦点事件
  priceChange, // 输入框改变事件
  focusArr, // 创建商品数据
  removeGoods, // 移除商品
} = rightMainFn(props, emit)
const { previewImage } = useGlobalFunc()

/*************************************************
 * 预览图片
 */
 function previewImg(skuName:AnyObject) {
  let arr = [skuName.img,skuName.img2,skuName.img3,skuName.img4,skuName.img5].filter(item => { return item && item.length > 0 })
  previewImage(arr)
}
</script>

<style lang="scss" scoped>
@import './right-main.scss';
</style>