<!--
  Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

  https://www.mall4j.com/

  未经允许，不可做商业用途！

  版权所有，侵权必究！
-->

<template>
  <z-paging
    ref="pagingRef"
    v-model="allProdList"
    class="Mall4j page-table-rate"
    :paging-style="{'top': '0'}"
    :safe-area-inset-bottom="true"
    @query="onGetAllProd"
  >
    <!--空数据组件-->
    <template #empty>
      <empty-tips
        class="noData"
        :tips-list="[$t('zanWuShuJu')]"
      />
    </template>

    <template #top>
      <view class="title">
        <search-bar
          :key-word="selectName"
          :placeholder="$t('qingShuRuKaQuanMingCheng')"
          @handle-search="search"
        />
      </view>
    </template>
    <view class="body">
      <template
        v-for="cardItem in allProdList"
        :key="cardItem.voucherId"
      >
        <view
          :class="['list', cardItem.voucherId === selectVoucherItem.voucherId ? 'active' : '']"
          @tap="selectedCard(cardItem)"
        >
          <view class="left">
            <view class="iconfont option">
              &#xe659;
            </view> <view class="txt">
              {{ cardItem.name }}
            </view>
          </view>
          <view class="right txt-wrap">
            <text>{{ $t('weiFaFang') }}{{ cardItem.notEnabledNum }}</text>
          </view>
        </view>
      </template>
    </view>
    <template #bottom>
      <view
        v-if="allProdList.length"
        class="footer"
      >
        <button
          class="button default-btn"
          type="default"
          @tap="toPostProd(false)"
        >
          {{ $t('quXiao-0') }}
        </button>
        <button
          class="button"
          type="primary"
          @tap="toPostProd(true)"
        >
          {{ $t('queDing') }}
        </button>
      </view>
    </template>
  </z-paging>
</template>

<script setup>
const skuIndex = ref(null)
onLoad((options) => {
  skuIndex.value = Number(options.skuIndex)
})

const pagingRef = ref(null)
const allProdList = ref([])
const selectName = ref('')
const pages = ref(0) // 总页数
const onGetAllProd = (current, size) => {
  if (pages.value && current > pages.value) {
    pagingRef.value?.complete([])
    return
  }
  http.request({
    url: '/multishop/voucher/page',
    method: 'GET',
    data: {
      current,
      size,
      skuRelation: 0,
      notInVoucherIds: filterIdArr.value,
      name: selectName.value,
      reserveVoucherIds: reserveVoucherIds.value
    }
  })
    .then(({ data }) => {
      pages.value = data.pages || 0
      pagingRef.value?.complete(data.records)
      if (!data.records?.length) {
        uni.showToast({
          title: $t('couponEmptyListTips'),
          mask: true,
          icon: 'none',
          duration: 1500
        })
      }
    })
}

const reserveVoucherIds = ref([]) // 原先选择保存的卡券id
const filterIdArr = ref([]) // 已选的卡券id
const prodStore = useProdStore()
onShow(() => {
  if (skuIndex.value || skuIndex.value === 0) {
    const { stocks, voucherId, voucherName } = prodStore.dataForm.skuList[skuIndex.value]
    selectVoucherItem.value.voucherId = voucherId
    selectVoucherItem.value.notEnabledNum = stocks
    selectVoucherItem.value.name = voucherName

    prodStore.dataForm.skuList?.forEach((item, index) => {
      if (index === skuIndex.value) return
      if (item.voucherId) filterIdArr.value.push(item.voucherId)
    })
  } else {
    if (prodStore.dataForm.skuList[0]) {
      const { stocks, voucherId, voucherName } = prodStore.dataForm.skuList[0]
      selectVoucherItem.value.voucherId = voucherId
      selectVoucherItem.value.notEnabledNum = stocks
      selectVoucherItem.value.name = voucherName
    }
  }
  // 之前保存数据id记录
  if (prodStore.dataForm?.oldSkuList?.length) {
    prodStore.dataForm.oldSkuList?.forEach(item => {
      reserveVoucherIds.value.push(item.voucherId)
    })
  }
  uni.setNavigationBarTitle({
    title: $t('guanLianKaQuan-0')
  })
})

const selectVoucherItem = ref({
  voucherId: 0
})
const selectedCard = (selectItem) => {
  selectVoucherItem.value = selectItem
}

const toPostProd = (isSumit) => {
  // 更新商品数据
  if (isSumit && selectVoucherItem.value.voucherId) {
    if (skuIndex.value || skuIndex.value === 0) {
      prodStore.dataForm.skuList[skuIndex.value].voucherId = selectVoucherItem.value.voucherId
      prodStore.dataForm.skuList[skuIndex.value].voucherName = selectVoucherItem.value.name
      prodStore.dataForm.skuList[skuIndex.value].stocks = selectVoucherItem.value.notEnabledNum
      prodStore.dataForm.skuList[skuIndex.value].warehouseStock = selectVoucherItem.value.notEnabledNum
    } else {
      if (prodStore.dataForm.skuList[0]) {
        prodStore.dataForm.skuList[0].voucherId = selectVoucherItem.value.voucherId
        prodStore.dataForm.skuList[0].voucherName = selectVoucherItem.value.name
        prodStore.dataForm.skuList[0].stocks = selectVoucherItem.value.notEnabledNum
        prodStore.dataForm.skuList[0].warehouseStock = selectVoucherItem.value.notEnabledNum
      } else {
        prodStore.dataForm.skuList[0] = {}
        prodStore.dataForm.skuList[0].voucherId = selectVoucherItem.value.voucherId
        prodStore.dataForm.skuList[0].voucherName = selectVoucherItem.value.name
        prodStore.dataForm.skuList[0].stocks = selectVoucherItem.value.notEnabledNum
        prodStore.dataForm.skuList[0].warehouseStock = selectVoucherItem.value.notEnabledNum
      }
      prodStore.dataForm.stocks = selectVoucherItem.value.notEnabledNum
      prodStore.dataForm.warehouseStock = selectVoucherItem.value.notEnabledNum
      prodStore.dataForm.totalStocks = selectVoucherItem.value.notEnabledNum
    }
  }
  if (skuIndex.value || skuIndex.value === 0) {
    uni.redirectTo({
      url: '/package-prod/pages/specification-breakdown/specification-breakdown'
    })
  } else {
    uni.redirectTo({
      url: '/package-prod/pages/post-prod/post-prod'
    })
  }
}

const search = (displayName) => {
  selectName.value = displayName
  pagingRef.value?.reload()
}
</script>

<style lang="scss" scoped>
.page-table-rate {
  width: 100%;
  position: fixed;
  overflow: auto;
  top: 0;
  left: 0;
  height: 100vh;
  font-size: 28rpx;
  background-color: #f8f8f8;
  color: #333;
  font-family: PingFang SC;

  .title {
    border-radius: 10px;
    padding: 20rpx 30rpx;
    background-color: #fff;
  }
  .body {
    border-radius: 10rpx;
    margin-top: 20rpx;
    background-color: #fff;
    padding: 0 30rpx;
    .list {
      display: flex;
      justify-content: space-between;
      height: 90rpx;
      border-bottom: 2rpx solid #F2F2F2;
      line-height: 90rpx;

      .left {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        -webkit-align-items: center;
        -webkit-justify-content: flex-start;
        .txt {
          display: inline-block;
          width: 460rpx;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .option {
          display: inline-block;
          width: 36rpx;
          height: 36rpx;
          border-radius: 50%;
          border: 2rpx solid #D1D1D1;
          box-sizing: border-box;
          text-align: center;
          font-size: 12rpx;
          line-height: 36rpx;
          color: #fff;
          margin-right: 16rpx;
        }
      }
      .right {
        flex-shrink: 0;
        -webkit-flex-shrink: 0;
        color: #333;
      }
    }

    .active {
      .left {
        .option {
          border: none;
          background-color: #082BA6;
        }
      }
    }
  }
  .footer {
    font-size: 24rpx;
    padding: 10rpx 30rpx;
    background-color: #fff;
    button {
      display: inline-block;
      text-align: center;
      background-color: #082BA6;
      height: 70rpx;
      line-height: 70rpx;
      width: 330rpx;
    }
    .default-btn {
      color: #082BA6;
      background: #fff;
      margin-right: 30rpx;
    }
  }
}
</style>
