<template>
  <view class="new-skuName-cell">
    <view class="new-skuName-cell-left">
      <image
        class="img"
        :src="skuName.img"
        mode="scaleToFill"
        @tap="previewImg(skuName)"
      />
    </view>
    <view class="new-skuName-cell-right">
      <!-- 名字 -->
      <view class="name">
        {{ skuName.prefix ? '[' + skuName.prefix + ']' : '' }}{{ skuName.name }}
      </view>
      <!-- skuName.id -->
      <view @tap.stop="copyInfo(''+ skuName.id, '复制nameID成功')" class="skuNameId">
        <text>{{ skuName.id }}</text>
        <jx-icon icon="fuzhi" color="#818181" style="margin-left: 10rpx;"></jx-icon>
      </view>
      <!-- 价格 -->
      <view>
        <view class="update-price">
          <view class="price">¥{{ unitPrice }}</view>
          <view class="btn-updatePrice" @tap="popup.open()"></view>
        </view>
        <!-- 每斤 -->
        <view class="tips">
          {{
            skuName.unit === '份'
              ? '该价格为每斤价格'
              : '该价格为每' + skuName.unit + '价格'
          }}
        </view>
      </view>
     
      <view class="check-display" v-show="auditUnitPrice > 0">
        审核中价格:¥<text>{{ auditUnitPrice }}</text>
      </view>
    </view>

    <!-- 修改价格 -->
    <uni-popup ref="popup" type="top">
      <view class="jx-popup-update">
        <text class="text">{{ isPointStore ? '改价' : '提交改价审核' }}</text>
        <view class="tip">
          当前价格每{{ skuName.unit === '份' ? '份' : skuName.unit }}:
          <text class="money">¥{{ unitPrice }}</text>
        </view>
        <view class="tip audit" v-if="auditUnitPrice > 0">
          正在审核 ¥<text>{{ auditUnitPrice }}</text>
        </view>
        <input
          class="ipt"
          type="digit"
          v-model="currentValue"
          placeholder="请输入修改价格"
        />

        <view class="btn-root">
          <view class="btn-esc" @tap="popup.close()">取消</view>
          <view class="btn-ok" @tap="handleConfirm">确定修改</view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>
  
<script lang="ts" setup>
import shopping from '@/api/https/shopping'
import useGlobalFunc from '@/composables/useGlobalFunc'
import { store } from '@/store'
import { getStorage } from '@/utils/storage'
import toast from '@/utils/toast'
import { computed, ref } from 'vue'
import useOrderInfo from '@/composables/useOrderInfo'
const { copyInfo } = useOrderInfo()
const { previewImage } = useGlobalFunc()

/**
 * props
 */
interface SkuNameType {
  id: number
  img: string
  prefix: string
  unit: string
  name: string
  unitPrice: number
  auditUnitPrice: number
}
interface PropsType {
  skuName: SkuNameType
}

/**
 * emit
 */
const emit = defineEmits<{
  (e: 'refresh', id: number): void
}>()

const props = defineProps<PropsType>()

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

/**
 * 验证修改价格
 */
const popup = ref()
const currentValue = ref<string>('')
function handleConfirm() {
  if (isNaN(+currentValue.value)) return toast('请输入格式正确的价格')
  if (+currentValue.value < 0.01) return toast('请输入大于等于1分钱的价格')
  if (
    currentValue.value.toString().indexOf('.') > -1 &&
    currentValue.value.toString().split('.')[1].length > 2
  ) {
    return toast('最多只能有两位小数')
  }
  let updatePrice = Math.round(+currentValue.value * 100)
  if (updatePrice == props.skuName.unitPrice) {
    return toast('没有修改价格')
  }
  // 验证通过开始修改价格
  updatePriceFn(updatePrice)
}

/**
 * 验证通过开始修改价格
 */
async function updatePriceFn(price: string | number) {
  let data = {
    storeIDs: JSON.stringify([+getStorage('storeID')]),
    payload: JSON.stringify([
      {
        nameID: props.skuName.id,
        unitPrice: price,
      },
    ]),
  }
  popup.value.close() // 关闭 popup
  let udpatePrice = await shopping.update_stores_skus(data)
  if (udpatePrice.code == 0) {
    if (isPointStore || store.state.storeInfo.allStoreInfo.storeLevel === 'E') {
      toast('修改成功', 1)
      emit('refresh', props.skuName.id) // 刷新页面
    } else {
      toast(+price < props.skuName.unitPrice ? '修改成功' : '成功待审核', 1)
    }
  } else {
    toast('修改失败', 2)
  }
}

/**
 * 格式化价格
 */
const unitPrice = computed(() => {
  let newUntiPrice = (props.skuName.unitPrice / 100).toFixed(2)
  currentValue.value = newUntiPrice
  return newUntiPrice
})

/**
 * 审核价格
 */
const auditUnitPrice = computed(() => {
  let price = props.skuName.auditUnitPrice
  if (price) {
    return +((price * 1) / 100).toFixed(2)
  } else {
    return +'0.00'
  }
})

/**
 * 改价还是折扣（从vuex 里面读取）
 */
const isPointStore = computed(() => {
  return store.getters['storeInfo/isPointStore']
})
</script>
  
<style lang="scss" scoped>
@import './skuName.scss';
</style>