<template>
  <view class="skuName-cell">
    <!-- skuName -->
    <view class="skuName">
      <!-- 图片 -->
      <view class="skuName-img" @tap="previewImg(skuName)">
        <view v-show="skuName.skuAllnoSale">不可售</view>
        <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 @tap.stop="copyInfo(''+ skuName.id, '复制nameID成功')" style="color:#818181;">
          <text>{{ skuName.id }}</text>
          <jx-icon icon="fuzhi" color="#818181" style="margin-left: 10rpx;"></jx-icon>
        </view>
        <!-- 价格 改价 -->
        <view class="skuName-price" @tap="openPriceDialog(skuName)">
          <jx-price
            :price="skuName.unitPrice"
            color="#F60D58"
            sizeM="22rpx"
            sizeN="38rpx"
          />

          <view class="icon-modify" v-if="!isAudit">
            <jx-icon icon="shuxie" color="#999" :size="38" />
          </view>
        </view>
        <!-- 提示信息 -->
        <view>
          <view class="skuName-tips" v-if="skuName.unit === '份'">
            该价格为每斤价格
          </view>
          <view class="skuName-tips green" v-if="skuName.unit !== '份'">
            该价格为每{{ skuName.unit }}价格
          </view>
          <!-- 审核状态 -->
          <view class="check-display" v-show="skuName.auditUnitPrice">
            审核中价格：<jx-price
              :price="skuName.auditUnitPrice"
              color="#f44"
              size="24rpx"
            />
          </view>
        </view>
      </view>
      <!-- 其他信息 -->
    </view>
    <!-- skuName -->
    <!-- sku2 -->
    <view class="skus-wrapper-new" v-if="!isAudit">
      <view v-for="(sku, j) in skuName.skus" :key="j" class="sku-cell2">
        <!-- 异常商品 -->
        <view
          class="error mt"
          v-if="
            sku.mtwmID !== '' &&
            (sku.mtwmSyncStatus & 16) === 16 &&
            (sku.mtwmSyncStatus & 2) !== 2 &&
            (sku.mtwmSyncStatus & 4) !== 4
          "
          >美团:该商品无法修改价格,请联系运营修改</view>
        <view
          class="error eb"
          v-if="
            sku.ebaiID !== '' &&
            (sku.ebaiSyncStatus & 16) === 16 &&
            (sku.ebaiSyncStatus & 2) !== 2 &&
            (sku.ebaiSyncStatus & 4) !== 4
          "
          >淘宝闪购:该商品无法修改价格,请联系运营修改</view
        >
        <view class="cell-top">
          <view class="price">
            <view class="sku-spec">
              {{ sku.specQuality }}{{ sku.specUnit }}
            </view>
            <view
              class="sku-price"
              :class="{ 'promotion-price': !isNewPriceDisplay && sku.actPrice }"
            >
              <jx-price
                :price="sku.comparePrice"
                sizeM="22rpx"
                sizeN="28rpx"
                color="#000"
              />
            </view>
          </view>
          <view class="btn-group">
            <view
              class="btn"
              :class="{ onActive: sku.storeSkuStatus }"
              @tap="updateSaleStatus(sku, skuName, 1)"
            >
              可售
            </view>
            <view
              class="btn"
              :class="{ onActive: !sku.storeSkuStatus && !sku.autoSaleAt }"
              @tap="updateSaleStatus(sku, skuName, 0)"
            >
              不可售
            </view>
            <view
              v-if="!isHot"
              class="btn tmpSaleNo"
              :class="{ onActive: !sku.storeSkuStatus && sku.autoSaleAt }"
              @tap="tmpSaleNo(sku, skuName)"
            >
              <text>临时</text>
              <text>不可售</text>
            </view>
          </view>
        </view>
        <!-- 库存以及位置码 -->
        <view style="display: flex;color:#666;margin-top:20rpx;justify-content: center">
          <view  @tap="openDialog(skuName,sku,'stock')"> 
            库存：{{sku.stock}} 
            <jx-icon icon="shuxie" color="#999" :size="24" />
          </view>
          <view style="margin-left: 20rpx;"  @tap="openDialog(skuName,sku,'locationCode')">
            货架码：{{sku.locationCode && sku.locationCode !== 'EMPTY_VALUE' ? sku.locationCode : ''}} 
            <jx-icon icon="shuxie" color="#999" :size="24" />
          </view>          
        </view>
        <view class="cell-bottom">{{ sku.comment ? sku.comment : '' }}</view>
        <view class="sku-autoSaleAt" v-if="sku.autoSaleAt">
          该规格将在 <text>{{ sku.autoSaleAt }}</text> 可售
        </view>
      </view>
      <view v-if="showMountTab" class="checkBoxWrap">
        <label @tap="handleSale(skuName)">
          <checkbox color="#4eb331" style="transform: scale(0.8)" />选中商品
        </label>
      </view>
    </view>

    <!-- 待审核商品操作面板 -->
    <view class="aduit-wall" v-else>
      <view class="aduit-type">{{
        skuName.type === 1 ? '【价格】正在审核中' : '【新建】正在审核中'
      }}</view>
      <!-- ((userType & 4) === 4) 运营 -->
      <view class="aduit-btn-group" v-if="(+getStorage('userType') & 4) === 4">
        <view class="btn refuse" @tap="toExamine(skuName, -1)">拒绝</view>
        <view class="btn" @tap="toExamine(skuName, 1)">批准</view>
      </view>
      <view class="aduit-btn-group" v-else>
        <view class="btn" @tap="phoneCall(storeInfo.marketManName)"
          >联系运营加快审核</view
        >
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup >
import useGlobalFunc from '@/composables/useGlobalFunc'
import { store } from '@/store'
import { getStorage } from '@/utils/storage'
import { computed } from 'vue'
import goodsListFn from './right-main'
import useOrderInfo from '@/composables/useOrderInfo'
const { copyInfo } = useOrderInfo()
const { phoneCall } = useGlobalFunc()

/*************************************************
 * 接收数据
 */
interface propType {
  skuName: AnyObject
  isAudit: boolean
  isHot: boolean
  showMountTab: boolean
}

const prop = defineProps<propType>()

const {
  isNewPriceDisplay,   // 列表判断条件
  updateSaleStatus,    // 修改商品售卖状态
  tmpSaleNo,           // 临时不可售
} = goodsListFn(prop)
const {
  previewImage, // 预览图片
} = useGlobalFunc()

const emit = defineEmits<{
  (e: 'handleSale', data: AnyObject): void
  (e: 'openPriceDialog', data: AnyObject): void
  (e: 'openDialog', data: AnyObject): void
  (e: 'toExamine', data: AnyObject): void
}>()
function handleSale(skuName: AnyObject) {
  emit('handleSale', skuName)
}

/*************************************************
 * 预览图片
 */
 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)
}

/*************************************************
 * 修改操作
 */
function openPriceDialog(skuName: AnyObject) {
  if (prop.isAudit) return
  emit('openPriceDialog', skuName)
}


function openDialog(skuName: AnyObject,sku:AnyObject,type:String) {
  let payload = {
    nameID:skuName.id,
    Skus:[{
        skuID:sku.id,
        stock:sku.stock,
        locationCode:sku.locationCode && sku.locationCode !== 'EMPTY_VALUE' ? sku.locationCode : ''
      }]
  }
  emit('openDialog', {payload,type,name:skuName.name})
}

/*************************************************
 * 拒绝改价
 */
function toExamine(skuName: AnyObject, type: any) {
  let data = {
    status: type,
    nameID: skuName.nameID,
    storeID: getStorage('storeID'),
    auditPrice: skuName.auditUnitPrice,
  }
  emit('toExamine', data)
}

/***************************************************************
 * 获取门店信息
 */
const storeInfo = computed(() => {
  return store.state.storeInfo.allStoreInfo
})
</script>

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