<script setup lang="ts">
import { Picture as IconPicture } from '@element-plus/icons-vue'
import { inject, onMounted, reactive, ref, watch } from 'vue'
import { getSalesListData } from '../api'
import { salesColumns } from '../utils/columns'
import emitter from '/@/utils/emitter'

const profile = <any>inject('profile')
const dateRange = <any>inject('dateRange')
// const tableData = <any>inject('tableData')
const parentAsin = ref('')
const childAsin = ref('')
const sku = ref('')

// 根据不同的点击事件发送请求获取数据
emitter.on('useSelectItem-clickParentAsinBtn', (value: any) => {
  parentAsin.value = value.selectedParentAsin
  fetchListData()
})

emitter.on('useSelectItem-clickAsinBtn', (value: any) => {
  parentAsin.value = value.selectedParentAsin
  childAsin.value = value.selectedAsin
  fetchListData()
})

emitter.on('useSelectItem-clickSkuItem', (value: any) => {
  parentAsin.value = value.selectedParentAsin
  childAsin.value = value.selectedAsin
  sku.value = value.selectedSku
  fetchListData()
})

const tableLoading = ref(false)
// const searchInp = ref('')
// const selectVal = ref('')

const gridOptions = reactive({
  height: 'auto',
  border: false,
  round: true,
  // showFooter: true,

  columnConfig: {
    resizable: true,
  },
  toolbarConfig: {
    custom: true,
    slots: {
      buttons: 'toolbar_buttons',
    },
  },
  columns: [],
  data: [],
})

async function fetchListData() {
  tableLoading.value = true
  const query = {
    profileId: profile.value.profile_id,
    startDate: dateRange.value[0],
    endDate: dateRange.value[1],
    parentAsin: parentAsin.value,
    childAsin: childAsin.value,
    sku: sku.value,
  }
  try {
    const res = await getSalesListData(query)
    gridOptions.columns = salesColumns
    gridOptions.data = res.data
  } catch (error) {
    console.log('error:', error)
  } finally {
    tableLoading.value = false
  }
}

watch(dateRange, () => {
  fetchListData()
})

// watch(tableData, () => {
//   // console.log('tableData.value', tableData.value)
//   gridOptions.data = tableData.value
// })

// function handleSearch() {
//   tableLoading.value = true
//   // const query = {}
//   console.log(1213)
//   try {
//     // const res = await xxx(query)
//     // gridOptions.data = res.data
//   } catch (error) {
//     console.log('error:', error)
//   } finally {
//     tableLoading.value = true
//   }
// }

// function handleKeydown(event) {
//   if (event.$event.key === 'Enter') {
//     handleSearch()
//   }
// }

// function handleSelect() {
//   handleSearch()
// }

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

<template>
  <div class="outer-container" v-loading="tableLoading">
    <vxe-grid v-bind="gridOptions">
      <template #toolbar_buttons>
        <!-- <vxe-input
          v-model="searchInp"
          @search-click="handleSearch"
          @keydown="handleKeydown"
          placeholder="快速查询ASIN、SKU或商品标题"
          type="search"
          class="custom-vxe-input"></vxe-input>
        <vxe-select v-model="selectVal" @change="handleSelect" class="custom-vxe-select">
          <vxe-option v-for="num in 15" :key="num" :value="num" :label="`选项${num}`"></vxe-option>
        </vxe-select> -->
      </template>

      <template v-for="col in salesColumns" #[`${col.field}_default`]="{ row }">
        <div>
          <template v-if="col.field == 'sku'">
            <div class="list-content">
              <div class="image-item">
                <img v-if="row.Image" :src="row.Image" />
                <div v-else>
                  <el-image>
                    <template #error>
                      <div class="image-slot">
                        <el-icon><icon-picture /></el-icon>
                      </div>
                    </template>
                  </el-image>
                </div>
              </div>
              <div>
                <el-tooltip effect="dark" :content="row.Title" placement="top-start">
                  <span class="item-title">{{ row.Title ? row.Title : '--' }}</span>
                </el-tooltip>
                <div>
                  <span class="item-font">{{ row.quantity ? '有库存' : '缺货' }}</span>
                </div>
                <span class="item-font">
                  ASIN: <span class="black-color">{{ row.Asin }}</span>
                </span>
                <el-tooltip effect="dark" :content="row.sku" placement="top-start">
                  <span class="item-font display-line">
                    SKU: <span class="black-color">{{ row.sku }}</span>
                  </span>
                </el-tooltip>
              </div>
            </div>
          </template>
          <template v-else>
            {{ row[col.field] ? row[col.field] : '-' }}
          </template>
        </div>
      </template>
    </vxe-grid>
  </div>
</template>

<style scoped>
.outer-container {
  overflow: hidden;
  width: 100%;
  height: 800px;
}
.custom-vxe-input {
  width: 300px;
}
.custom-vxe-select {
  margin-left: 10px;
}
.list-content {
  display: flex;
  align-items: center;
  gap: 4px;
}
.image-item {
  min-width: 72px;
  height: 72px;
}
.image-item img {
  min-width: 72px;
  height: 72px;
  border: 1px solid #dde0eb;
  border-radius: 4px;
}
.item-title {
  font-weight: 500;
  color: #1d2129;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--line-clamp);
  white-space: pre-wrap;
  --line-clamp: 1;
}
.item-font {
  color: #6b7785;
  font-size: 13px;
  line-height: 13px;
}
.display-line {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--line-clamp);
  white-space: pre-wrap;
  --line-clamp: 1;
}

.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 72px;
  height: 72px;
  border: 1px solid #dde0eb;
  border-radius: 4px;
  background: var(--el-fill-color-light);
  color: var(--el-text-color-secondary);
  font-size: 30px;
}
</style>
