<template>
  <div v-loading="loading" class="card-layout">
    <div v-if="cardData.length > 0" class="card-content">
      <div class="card-grid">
        <div
          v-for="item in cardData"
          :key="item.id"
          class="card-grid-item"
          @click="handleCardClick(item)"
        >
          <CommonCard
            :card-item="item"
            :active="isSelected(item)"
            :show-sku="false"
            :show-product-info="false"
            :image-field="'variantImage'"
            :padding-top="'100%'"
          >
            <template #bottom_left>
              <span
                class="operation-number"
                :title="`操作单号:${item.operationNo}`"
                @click.stop="String(item.operationNo)"
              >
                {{ item.operationNo }}
              </span>
            </template>
            <template #top_right>
              <img
                v-if="item.craftCode && ['ZPZY', 'CXZY', 'THZY'].includes(item.craftCode as string)"
                :src="`/images/pic/${item.craftCode}.png`"
                width="60"
                height="60"
              />
            </template>
            <template #images>
              <div class="flex-between">
                <div class="images-position">
                  <div v-if="item.imageAry" class="images-container">
                    <div
                      v-for="(img, index) in JSON.parse(item.imageAry as string)"
                      :key="index"
                      :title="img.title"
                      class="item-image"
                    >
                      <el-image
                        :src="img?.url"
                        height="50"
                        :preview-src-list="JSON.parse(item.imageAry as string).map((i: { title: string; url: string }) => i.url)"
                      />
                    </div>
                  </div>
                </div>
                <div class="flex-row flex-row-gap15">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    :content="'用户编码: ' + item?.userMark"
                    placement="bottom"
                  >
                    <span
                      style="
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        width: 100%;
                        display: inline-block;
                      "
                      @click.stop="copyText(String(item?.userMark || ''))"
                    >
                      {{ item?.userMark || 'AAAF' }}
                    </span>
                  </el-tooltip>
                  <img
                    v-if="item.platform"
                    :src="`/images/icon/${getPlatformImg(item.platform as string)}`"
                    style="width: 30px; height: 30px"
                  />
                </div>
              </div>
            </template>
            <template #operations>
              <div class="flex-row flex-row-gap6">
                <div
                  v-if="item.customizedQuantity"
                  class="quantity-badge"
                  :class="
                    item.customizedQuantity === 1
                      ? 'single-quantity-badge-color'
                      : 'multiple-quantity-badge-color'
                  "
                  :title="`类型:${
                    item.customizedQuantity === 1 ? '单面' : '双面'
                  }`"
                >
                  {{ item.customizedQuantity === 1 ? '单' : '多' }}
                </div>
                <Icon name="caozuorizhi" style="width: 28px; height: 28px">
                  <template #title>
                    <title>操作日志</title>
                  </template>
                </Icon>
                <Icon name="chakanxiangqing">
                  <template #title>
                    <title>查看详情</title>
                  </template>
                </Icon>
              </div>
            </template>
            <template #info>
              <div class="card-info-grid">
                <div class="card-info-row full">
                  <span
                    class="info-value ellipsis"
                    :title="(item.productName as string) || ''"
                  >
                    {{ item.productName }}
                  </span>
                </div>
                <div class="card-info-row">
                  <span
                    class="info-value clickable ellipsis"
                    :title="`变体SKU:${(item.variantSku as string) || ''}`"
                    @click.stop="copyText((item.variantSku as string) || '')"
                  >
                    {{ item.variantSku }}
                  </span>
                </div>
                <div class="card-info-row">
                  <span class="info-label">工艺：</span>
                  <span class="info-value">{{ item.craftName }}</span>
                </div>
                <div class="card-info-row">
                  <span
                    class="info-value clickable ellipsis"
                    :title="`库存SKU:${(item.thirdSkuCode as string) || ''}`"
                    @click.stop="copyText((item.thirdSkuCode as string) || '')"
                  >
                    {{ item.thirdSkuCode }}
                  </span>
                </div>
                <div class="card-info-row">
                  <span class="info-label">店铺单号：</span>
                  <span
                    class="info-value clickable ellipsis"
                    :title="`店铺单号:${(item.shopNumber as string) || ''}`"
                    @click.stop="copyText((item.shopNumber as string) || '')"
                    >{{ item.shopNumber }}</span
                  >
                </div>
                <div class="card-info-row">
                  <span class="info-label">款号：</span>
                  <span
                    class="info-value clickable ellipsis"
                    :title="`款号:${(item.supplierProductNo as string) || ''}`"
                    @click.stop="
                      copyText((item.supplierProductNo as string) || '')
                    "
                    >{{ item.supplierProductNo }}</span
                  >
                </div>
                <div class="card-info-row">
                  <span class="info-label">客户单号：</span>
                  <span
                    class="info-value clickable ellipsis"
                    :title="`客户单号:${(item.thirdOrderNumber as string) || ''}`"
                    @click.stop="
                      copyText((item.thirdOrderNumber as string) || '')
                    "
                    >{{ item.thirdOrderNumber }}</span
                  >
                </div>
                <div class="card-info-row">
                  <span class="info-label">批次号：</span>
                  <span
                    class="info-value clickable ellipsis"
                    :title="`批次号:${(item.batchArrangeNumber as string) || ''}`"
                    @click.stop="
                      copyText((item.batchArrangeNumber as string) || '')
                    "
                    >{{ item.batchArrangeNumber }}</span
                  >
                </div>
                <div class="card-info-row" style="color: red">
                  <span class="info-label">状态：</span>
                  <span class="info-value">{{ item.statusName }}</span>
                </div>
              </div>
            </template>
          </CommonCard>
        </div>
      </div>
    </div>
    <div v-else class="card-empty">暂无数据</div>

    <div class="card-pagination">
      <div class="card-selected-info">
        已选择
        <span class="highlight">{{ selectedItems.length }}</span>
        条数据
      </div>
      <ElPagination
        :current-page="currentPage"
        :page-size="pageSize"
        :page-sizes="[50, 100, 200, 300]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        style="margin: 0 auto"
        @size-change="onPageSizeChange"
        @current-change="onCurrentPageChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { getCardLayoutListApi } from '@/api/factoryOrderNew'
import type { PaginationData } from '@/types/api'
import usePageList from '@/utils/hooks/usePageList'
import { operateOrderListData } from '@/types/api/factoryOrderNew'
import platformJson from '../../../../json/platform.json'

const props = defineProps<{
  status: string
  queryPayload: Record<string, unknown>
  initPageSize?: number
}>()

const emit = defineEmits<{
  'selection-change': [items: operateOrderListData[]]
}>()

const {
  loading,
  currentPage,
  pageSize,
  total,
  data: cardData,
  onCurrentPageChange,
  onPageSizeChange,
  refresh,
} = usePageList<operateOrderListData>({
  initPageSize: props.initPageSize || 100,
  query: async (current, size) => {
    const payload = {
      ...props.queryPayload,
      status: props.status === 'ALL' ? undefined : props.status,
    }
    const res = await getCardLayoutListApi(payload, current, size)
    return res.data as unknown as PaginationData<operateOrderListData>
  },
})

const selectedItems = ref<operateOrderListData[]>([])

const isSelected = (item: operateOrderListData) =>
  selectedItems.value.some((s) => s.id === item.id)

const handleCardClick = (item: operateOrderListData) => {
  const idx = selectedItems.value.findIndex((s) => s.id === item.id)
  if (idx >= 0) {
    selectedItems.value.splice(idx, 1)
  } else {
    selectedItems.value.push(item)
  }
  emit('selection-change', [...selectedItems.value])
}

const copyText = (text: string) => {
  navigator.clipboard.writeText(text)
  ElMessage.success('复制成功')
}

const clearSelection = () => {
  selectedItems.value = []
  emit('selection-change', [])
}

const getSelectedIds = () => selectedItems.value.map((i) => i.id)
const getPlatformImg = (code: string) => {
  const lowerCode = code.toLowerCase()
  const item = platformJson.find((el) =>
    el.type.toLowerCase().includes(lowerCode),
  )
  if (item) {
    return item.icon.split('/').pop()
  }
  return ''
}

defineExpose({ clearSelection, getSelectedIds, refresh })
</script>

<style scoped lang="scss">
.card-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.card-content {
  flex: 1;
  overflow-y: auto;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: max-content;
  gap: 10px;
  padding: 5px;
}

.card-grid-item {
  cursor: pointer;
}

.card-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #909399;
  font-size: 14px;
}

.card-pagination {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
}

.card-selected-info {
  font-size: 13px;
  color: #606266;

  .highlight {
    color: #f56c6c;
    font-weight: bold;
  }
}

.operation-number {
  font-size: 12px;
  cursor: pointer;
}

.quantity-badge {
  background-color: #f56c6c;
  color: #fff;
  padding: 5px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.multiple-quantity-badge-color {
  background-color: #e6a23c;
}

.card-info-grid {
  display: grid;
  grid-template-columns: 1fr 150px;
  gap: 4px;
  font-size: 12px;
  margin-top: 6px;

  .full {
    grid-column: 1 / -1;
  }
}

.card-info-row {
  display: flex;
  overflow: hidden;
}

.info-label {
  flex-shrink: 0;
  color: #909399;
}

.info-value {
  flex: 1;
  min-width: 0;

  &.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  &.clickable {
    cursor: pointer;
    color: #409eff;

    &:hover {
      text-decoration: underline;
    }
  }
}
.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  overflow: hidden;
  gap: 6px;

  .images-position {
    flex: 1;
    overflow: auto hidden;
    .images-container {
      width: 100%;
      display: flex;
      gap: 6px;
    }
    .item-image {
      width: 50px;
      min-width: 50px;
      height: 50px;
      border: 1px solid #eee;
      cursor: pointer;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }

  b {
    margin-right: 5px;
    font-size: 15px;
  }
}

.flex-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}
.flex-row-gap15 {
  gap: 15px;
}
.flex-row-gap6 {
  gap: 6px;
}
</style>
