<template>
  <ElTabs
    v-model="activeTab"
    v-loading="loading"
    class="detail-tabs"
    @tab-click="handleTabClick"
  >
    <ElTabPane name="stockProducts" label="入库商品">
      <div class="detail-table-content">
        <TableView
          :serial-numberable="true"
          :columns="stockProductsColumns"
          :paginated-data="stockProductsData"
        />
      </div>
    </ElTabPane>
    <ElTabPane name="relatedDocuments" label="关联单据">
      <div class="detail-table-content">
        <TableView
          :serial-numberable="true"
          :columns="relatedDocumentsColumns"
          :paginated-data="relatedDocumentsData"
        />
      </div>
    </ElTabPane>

    <ElTabPane name="operationLog" label="操作日志">
      <div class="detail-table-content">
        <LogList :log-list="operationLogData" />
        <div class="empty-content">暂无数据</div>
      </div>
    </ElTabPane>
  </ElTabs>
</template>

<script setup lang="tsx">
import { ref } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import TableView from '@/components/TableView.vue'
import {
  RelatedDocumentList,
  StockingApplyOrderDetailList,
  TableData,
} from '@/types/api/warehouse/stockingApplyOrder'
import ImageView from '@/components/ImageView.vue'
import {
  getStockingApplyOrderDetailListByIdApi,
  getStockingApplyOrderLogListByIdApi,
  getStockingApplyOrderRelatedDocumentListByIdApi,
} from '@/api/warehouse/stockingApplyOrder'
import LogList from '@/components/LogList.vue'
import { LogListData } from '@/types/api/supply/stockingOrder'
const relatedDocumentsColumns = computed(() => {
  return [
    {
      label: '关联单据',
      prop: 'inNo',
      align: 'center',
    },
    {
      label: '关联单号',
      prop: 'sourceOn',
      align: 'center',
    },
    {
      label: '制单人',
      width: 120,
      prop: 'checkerName',
      align: 'center',
    },
    {
      label: '制单时间',
      width: 160,
      prop: 'createTime',
      align: 'center',
    },
    {
      label: 'SKU个数',
      width: 120,
      align: 'right',
      prop: 'skuAmount',
    },
    {
      label: '入库数量',
      width: 120,
      align: 'right',
      prop: 'total',
    },
  ]
})
const stockProductsColumns = computed(() => {
  return [
    {
      label: 'SKU图片',
      prop: 'skuImage',
      width: 100,
      align: 'center',
      render: (item: StockingApplyOrderDetailList) => (
        <div class="sku-image-cell">
          <ImageView src={item.warehouseSkuImage} width="50px" height="50px" />
        </div>
      ),
    },
    {
      label: '商品名称',
      prop: 'warehouseSkuName',
      minWidth: 200,
      align: 'left',
    },
    {
      label: '款号',
      prop: 'productNo',
      width: 120,
      align: 'center',
    },
    {
      label: '库存SKU',
      prop: 'warehouseSku',
      width: 180,
      align: 'center',
    },
    {
      label: '申请数量',
      prop: 'shipmentQuantity',
      width: 100,
      align: 'right',
    },
    {
      label: '入库数量',
      prop: 'buyStored',
      width: 120,
      align: 'right',
    },
    {
      label: '不良品数',
      prop: 'rejectsAmount',
      width: 120,
      align: 'right',
    },
    {
      label: '实际质检数',
      prop: 'finallyShipmentQuantity',
      width: 120,
      align: 'right',
    },
    {
      label: '入库待审核数',
      prop: 'storedPending',
      width: 120,
      align: 'right',
    },
    {
      label: '币种',
      prop: 'currencyCode',
      width: 100,
      align: 'center',
    },
    {
      label: '入库单价',
      prop: 'price',
      width: 100,
      align: 'right',
    },
  ]
})
const props = defineProps<{
  selectedRow: TableData | null
}>()

const stockProductsData = ref<StockingApplyOrderDetailList[]>([])
const relatedDocumentsData = ref<RelatedDocumentList[]>([])
const activeTab = ref('stockProducts')
const loading = ref(false)
const operationLogData = ref<LogListData[]>([])
watch(
  () => props.selectedRow,
  (newVal) => {
    if (newVal) {
      if (activeTab.value === 'stockProducts') {
        loadStockProducts(newVal)
      } else if (activeTab.value === 'relatedDocuments') {
        loadRelatedDocuments(newVal)
      } else if (activeTab.value === 'operationLog') {
        loadOperationLog(newVal)
      }
    } else {
      stockProductsData.value = []
      relatedDocumentsData.value = []
    }
  },
)
const loadStockProducts = async (row: TableData) => {
  loading.value = true
  try {
    const res = await getStockingApplyOrderDetailListByIdApi(row.id)
    if (res.code !== 200) return
    stockProductsData.value = res.data || []
  } catch (e) {
    console.error(e)
  } finally {
    loading.value = false
  }
}
const loadRelatedDocuments = async (row: TableData) => {
  loading.value = true
  try {
    const res = await getStockingApplyOrderRelatedDocumentListByIdApi(
      row.warehouseApplyNo,
    )
    if (res.code !== 200) return
    relatedDocumentsData.value = res.data || []
  } catch (e) {
    console.error(e)
  } finally {
    loading.value = false
  }
}

const loadOperationLog = async (row: TableData) => {
  try {
    const res = await getStockingApplyOrderLogListByIdApi(row.id)
    if (res.code !== 200) return
    operationLogData.value = res.data || []
  } catch (e) {
    console.error(e)
  } finally {
    loading.value = false
  }
}
const handleTabClick = (tab: TabsPaneContext) => {
  activeTab.value = tab.paneName as string
  if (activeTab.value === 'stockProducts') {
    loadStockProducts(props.selectedRow as TableData)
  } else if (activeTab.value === 'relatedDocuments') {
    loadRelatedDocuments(props.selectedRow as TableData)
  } else if (activeTab.value === 'operationLog') {
    loadOperationLog(props.selectedRow as TableData)
  }
}
</script>

<style lang="scss" scoped>
.detail-tabs {
  height: 100%;
  display: flex;
  :deep(.el-tab-pane) {
    height: 100%;
    overflow: hidden;
  }
}

.detail-table-content {
  height: 100%;
  overflow: hidden;
}

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

.sku-image-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
</style>
