<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { Connection, Picture as IconPicture } from '@element-plus/icons-vue'
import { getParentAsin } from '../adManage/sp/api'
import { useShopInfo } from '../../stores/shopInfo'
import { storeToRefs } from 'pinia'


const count = ref(0)
const load = () => {
  count.value += 2
}
const parentLoading = ref(false)
const shopInfo = useShopInfo()
const { profile } = storeToRefs(shopInfo)

const gridOptions = <any>reactive({
  height: 500,
  align: null,
  columns: [
    { type: 'checkbox', width: 30 },
    { field: 'parentAsin', title: '父ASIN', slots: { default: 'parentAsin_default' } },
  ],
  data: [],
})

async function fetchParentAsin() {
  parentLoading.value = true
  const body = { profileId: profile.value.profile_id }
  try {
    const response = await getParentAsin(body)
    gridOptions.data = response.data
  } catch (error) {
    console.log('error:', error)
  } finally {
    parentLoading.value = false
  }
}

function handleScroll(event: any) {
  // 获取滚动容器
  const target = event.$event.target
  // console.log('target:', target)
  // // 计算是否达到底部：容器高度 + 滚动顶部距离 >= 滚动内容的总高度
  if (target.scrollHeight - (target.scrollTop + target.clientHeight) < 1) {
    parentLoading.value = true
    console.log('执行了')
    load()
    parentLoading.value = false
  }
}

onMounted(() => {
  fetchParentAsin()
})
</script>

<template>
  <ul v-infinite-scroll="load" class="infinite-list" style="overflow: auto">
    <li v-for="i in count" :key="i" class="infinite-list-item">{{ i }}</li>
  </ul>
  <vxe-grid
      v-loading="parentLoading"
      v-bind="gridOptions"
      :header-row-style="changeHeaderCellStyle"
      :header-cell-style="changeHeaderCellStyle"
      class="ml-2 mb-2 mt-0 border border-r-0 rounded-bl-md rounded-tl-md overflow-hidden"
      style="flex: 0 1 260px; overflow: auto"
      @scroll.native="handleScroll">
    <template #parentAsin_default="{ row }">
      <div style="display: flex">
        <el-image class="w-14 h-14 mr-1 border rounded" v-if="row.Image" :src="row.Image" alt="" fit="contain"/>
        <el-image v-else class="w-12 h-12 mr-1 border rounded">
          <template #error>
            <div class="image-slot">
              <el-icon>
                <icon-picture/>
              </el-icon>
            </div>
          </template>
        </el-image>

        <div class="flex flex-col justify-center">
          <div class="font-medium text-black">{{ row.parentAsin }}</div>
          <div>
            ASIN:<span class="text-black">{{ row.asinNum }}</span>
            <el-link
                :href="row.amazonUrl"
                target="_blank"
                :disabled="!row.amazonUrl"
                :underline="false"
                :icon="Connection"
                :style="{ marginLeft: '2px', marginBottom: '2px', color: row.amazonUrl ? '#3a83f7' : '#c0c4cc' }">
            </el-link>
            <span class="text-gray-300 mx-1">|</span>
            SKU:<span class="text-black">{{ row.skuNum }}</span>
          </div>
        </div>
      </div>
    </template>
  </vxe-grid>
</template>

<style scoped>

.infinite-list {
  height: 300px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.infinite-list .infinite-list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  background: var(--el-color-primary-light-9);
  margin: 10px;
  color: var(--el-color-primary);
}

.infinite-list .infinite-list-item + .list-item {
  margin-top: 10px;
}
</style>
