<template>
  <view>
    <view class="header">
      <!-- 商品信息 -->
      <view class="title">
        <view>选择退款商品</view>
        <view
          >退款金额:
          <text class="refundMoney"
            >¥{{ (refundMoney / 100).toFixed(2) }}</text
          ></view
        >
      </view>
      <view class="adjust-btns">
        <view class="btn-confirm" @click="partRefundOrder">确认退款</view>
      </view>
    </view>
    <!-- 商品列表 -->
    <view class="sku-list">
      <view v-for="(sku, index) in skuList" :key="index">
        <view class="adjust-sku-cell" v-if="sku.skuID">
          <!-- 图片 -->
          <image
            mode="scaleToFill"
            @click="previewImage(sku.image)"
            :src="sku.image + '?imageView2/1/w/180/h/180'"
          />
          <!-- 秒 -->
          <view
            v-if="
              !isNewPriceDisplay &&
              sku.storeSubID &&
              storeInfo.payPercentage >= 50
            "
            style="left: 10rpx"
            class="promtion-sku-icon2"
          ></view>
          <!-- 促 -->
          <view
            v-if="
              !isNewPriceDisplay &&
              sku.salePrice < sku.shopPrice &&
              !sku.storeSubID &&
              storeInfo.payPercentage >= 50
            "
            style="left: 10rpx"
            class="promtion-sku-icon"
          ></view>
          <!-- 右边 -->
          <view class="list-right">
            <!-- 商品名 -->
            <view class="sku-name" :class="{ delete: sku.count === 0 }">
              {{ sku.skuName }}
            </view>
            <!-- 操作 -->
            <view class="adjust-count">
              <!-- 单价 -->
              <!-- 秒 -->
              <view
                class="price earning-price"
                v-if="
                  !isNewPriceDisplay &&
                  sku.storeSubID &&
                  storeInfo.payPercentage >= 50
                "
              >
                <text class="price2"
                  >结算价：¥{{ sku.earningPrice / 100 }}</text
                >
              </view>
              <!-- 有结算价但不是活动品 -->
              <view
                class="price"
                v-else-if="
                  !isNewPriceDisplay &&
                  sku.comparePrice * 100 >= sku.earningPrice &&
                  sku.storeSubID &&
                  storeInfo.payPercentage >= 50
                "
              >
                <text class="price1">¥{{ sku.earningPrice / 100 }}</text>
              </view>
              <!-- 促 普通 -->
              <view class="price" v-else>
                <text class="price1"
                  >¥{{ sku.comparePrice }} 共{{ sku.count === -1 ? 0 : sku.count }}份</text
                >
              </view>
              <view class="adjust-op">
                <uni-number-box
                  :min="0"
                  v-model="sku.afsCount"
                  :max="sku.count"
                  @change="numChange($event, sku)"
                />
              </view>
            </view>
            <!-- 商品缺货按钮@click="noGoods(sku)" :class="{active: !sku.count}" -->
            <view class="count-to-0">
              <view class="count-to-0-wrapper">
                <view class="text" v-if="sku.afsCount != 0">
                  将退 <text>{{ sku.afsCount }}</text> 份 约
                  {{ (sku.shopPrice * sku.afsCount) / 100 }}
                  元
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>

  <!-- 退款理由 -->
  <uni-popup ref="popup" type="top">
    <view class="jx-popup-update">
      <text class="text">部分退款</text>
      <view>
       <input
        class="ipt"
        type="text"
        v-model="partRefundReason"
        placeholder="请输入退款理由"
        @input="onKeyInput"
      />
      </view>

      <view class="btn-root">
        <view class="btn-esc" @tap="popup.close()">取消</view>
        <view class="btn-ok" @tap="handleConfirm">确定</view>
      </view>
    </view>
  </uni-popup>
</template>

<script lang="ts" setup >
import useGlobalFunc from '@/composables/useGlobalFunc'
import createAfterSales from './createAfterSales'
const {
  skuList,             // 商品数据
  partRefundOrder,     // 退款处理
  isNewPriceDisplay,   // 是否显示新价格
  storeInfo,           // 商户数据
  numChange,           // 获取当前退款金额
  refundMoney,         // 总共退款金额
  partRefundReason,    // 部分退款理由
  handleConfirm,       // 弹框确认
  onKeyInput,
  popup
} = createAfterSales()
const { previewImage } = useGlobalFunc()
</script>

<style lang="scss" scoped>
@import './createAfterSales.scss';
</style>