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

emitter.on('TopFilter', (value: any) => {
  if (value) {
    fetchParentAsin()
  } else {
    gridOptions.data = []
  }
})
const profile = <Ref>inject('profile')
const parentLoaing = ref(false)

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

const gridOptionsRight = <any>reactive({
  height: 500,
  align: null,
  columns: [
    { type: 'checkbox', width: 30 },
    { field: 'name', title: 'name', width: '300' },
    { field: 'role', title: 'role', width: '300' },
    { field: 'sex', title: 'sex', width: '300' },
    { field: 'age', title: 'age', width: '300' },
    { field: 'address', title: 'address', width: '300' },
  ],
  data: [
    { id: 10001, name: 'Test1', nickname: 'T1', role: 'Develop', sex: 'Man', age: 28, address: 'Shenzhen' },
    { id: 10002, name: 'Test2', nickname: 'T2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
    { id: 10003, name: 'Test3', nickname: 'T3', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
  ],
})

async function fetchParentAsin() {
  parentLoaing.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 {
    parentLoaing.value = false
  }
}

function changeheaderCellStyle(value) {
  return {
    // backgroundColor: '#eef0f7',
    padding: '3px',
  }
}

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

<template>
  <div class="flex">
    <vxe-grid
      v-loading="parentLoaing"
      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">
      <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>
    <vxe-grid
      v-bind="gridOptionsRight"
      :header-cell-style="changeheaderCellStyle"
      class="mr-2 mb-2 mt-0 border rounded-br-md rounded-tr-md overflow-hidden w-0"
      style="flex: 2 1 0">
    </vxe-grid>
  </div>
</template>

<style scoped>
/* 移除默认边框 */
:deep(.vxe-table--render-default .vxe-table--border-line) {
  border: none;
}
.img-part {
  width: 65px;
  height: 65px;
  margin: 0 5px 0 0;
  border: 1px solid #e5e6eb;
  border-radius: 4px;
}
.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 65px;
  height: 65px;
  background: var(--el-fill-color-light);
  color: var(--el-text-color-secondary);
  font-size: 30px;
}
.image-slot .el-icon {
  font-size: 30px;
}
.custom-bg {
  background-color: black;
}
/* 修改表头填充颜色 默认会有空隙 */
:deep(.vxe-table--header-wrapper.body--wrapper) {
  background-color: #eef0f7;
}
</style>
