<template>
  <div class="page card h-100 flex-gap-10 overflow-hidden flex">
    <div class="order-status">
      <ElTree
        ref="treeRef"
        default-expand-all
        :expand-on-click-node="false"
        :default-expanded-keys="['ALL']"
        :highlight-current="true"
        node-key="code"
        :data="statusTree"
        :props="{ children: 'children', label: 'remark' }"
        class="status-tree"
        @node-click="handleStatusNodeClick"
      >
        <template #default="{ node, data }">
          <div class="tree-node">
            <div class="tree-node-label-wrapper">
              <span class="tree-node-label">{{ data.remark }}</span>
              <span
                v-if="data.code !== 'ALL' && (data.count || data.count === 0)"
                class="tree-node-count"
              >
                {{ `(${data.count})` }}
              </span>
            </div>
            <span
              v-if="data.children && data.children.length"
              class="tree-node-expand"
              @click.stop="toggleExpand(node)"
            >
              <el-icon
                ><ArrowUp v-if="node.expanded" /><ArrowDown v-else
              /></el-icon>
            </span>
          </div>
        </template>
      </ElTree>
    </div>
    <div class="order-content flex-1 flex-column overflow-hidden">
      <div class="header">
        <div class="header-filter-form">
          <ElForm
            class="search-form"
            :model="searchForm"
            :inline="true"
            label-width="70px"
          >
            <ElFormItem label="平台">
              <ElSelect
                v-model="searchForm.platform"
                placeholder="请选择"
                clearable
                filterable
                popper-class="customize-select-style"
                style="width: 140px"
              >
                <ElOption
                  v-for="(item, index) in platformJson"
                  :key="index"
                  :label="item.type"
                  :value="item.type"
                  style="width: 160px"
                >
                  <img
                    :src="`/images/icon/${item.icon.split('/').pop()}`"
                    style="height: 20px; margin: 5px 10px 0 0"
                  />
                  <span :title="item.type">{{ item.type }}</span>
                </ElOption>
              </ElSelect>
            </ElFormItem>

            <ElFormItem label="工艺">
              <LogisticsWaySelect
                v-model="searchForm.craftCode"
                :company-list="craftList"
                :start-width="'150px'"
                search-placeholder="搜索工艺名称"
                start-placeholder="请选择工艺名称"
              ></LogisticsWaySelect>
            </ElFormItem>

            <ElFormItem label="库存SKU">
              <ElInput
                v-model.trim="searchForm.stockSku"
                placeholder="库存SKU"
                clearable
                style="width: 140px"
              />
            </ElFormItem>

            <ElFormItem label="款号">
              <ElInput
                v-model.trim="searchForm.styleNo"
                placeholder="款号"
                clearable
                style="width: 140px"
              />
            </ElFormItem>

            <ElFormItem label="批次号">
              <ElInput
                v-model.trim="searchForm.batchNo"
                placeholder="批次号"
                clearable
                style="width: 140px"
              />
            </ElFormItem>

            <ElFormItem label="操作单号">
              <ElInput
                v-model.trim="searchForm.orderNumber"
                placeholder="操作单号"
                clearable
                style="width: 140px"
              />
            </ElFormItem>

            <ElFormItem label="商品类型">
              <ProductTypeFilter
                v-model="searchForm.productType"
                :options="productTypeGroups"
                :multiple="false"
                placeholder="请选择商品类型"
                style="width: 140px"
              />
            </ElFormItem>

            <ElFormItem label="数量">
              <el-radio-group v-model="searchForm.multi">
                <el-radio-button :value="false">单件</el-radio-button>
                <el-radio-button :value="true">多件</el-radio-button>
              </el-radio-group>
            </ElFormItem>

            <ElFormItem>
              <ElPopover placement="bottom" width="600" trigger="click">
                <ElForm
                  ref="searchFormPopoverRef"
                  :model="searchForm"
                  size="default"
                  inline
                  label-width="100px"
                >
                  <ElFormItem style="width: 100%; padding-right: 40px">
                    <div style="width: 100%; display: flex; flex-wrap: nowrap">
                      <el-select
                        v-model="searchForm.timeType"
                        clearable
                        :teleported="false"
                        placeholder="时间类型"
                        style="flex: 1; margin-right: 10px"
                      >
                        <el-option :value="1" label="创建时间"></el-option>
                        <el-option :value="2" label="确认时间"></el-option>
                        <el-option :value="3" label="完成时间"></el-option>
                      </el-select>
                      <el-date-picker
                        v-model="dateRange"
                        :teleported="false"
                        :default-time="[
                          new Date(0, 0, 0, 0, 0, 0),
                          new Date(0, 0, 0, 23, 59, 59),
                        ]"
                        value-format="YYYY-MM-DD HH:mm:ss"
                        type="datetimerange"
                        style="width: 280px"
                        :shortcuts="pickerOptions.shortcuts"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        clearable
                      />
                    </div>
                  </ElFormItem>
                  <ElFormItem label="订单号">
                    <ElInput
                      v-model="searchForm.factoryOrderNumber"
                      placeholder="订单号"
                      clearable
                      style="width: 150px"
                    />
                  </ElFormItem>
                  <ElFormItem label="客户">
                    <el-select
                      v-model="searchForm.userMark"
                      clearable
                      filterable
                      :teleported="false"
                      style="width: 150px"
                      placeholder="客户"
                    >
                      <el-option
                        v-for="item in userMarkList"
                        :key="item"
                        :value="item"
                        :label="item"
                      ></el-option>
                    </el-select>
                  </ElFormItem>
                  <ElFormItem label="Variant SKU">
                    <ElInput
                      v-model.trim="searchForm.sku"
                      placeholder="Variant SKU"
                      clearable
                      style="width: 150px"
                    />
                  </ElFormItem>
                  <ElFormItem label="物流跟踪号">
                    <ElInput
                      v-model.trim="searchForm.trackingNumber"
                      placeholder="物流跟踪号"
                      clearable
                      style="width: 150px"
                    />
                  </ElFormItem>
                  <ElFormItem
                    v-if="
                      ![
                        'TO_BE_ARRANGE',
                        'PICKING',
                        'TO_BE_REPLENISHMENT',
                        'IN_PRODUCTION',
                      ].includes(status)
                    "
                    label="收件国家"
                  >
                    <ElSelect
                      v-model="searchForm.receiverCountry"
                      placeholder="收件国家"
                      clearable
                      multiple
                      :teleported="false"
                      style="width: 150px"
                      filterable
                      @change="changeReplaceShipment"
                    >
                      <ElOption
                        v-for="item in receiverCountryList"
                        :key="item.countryCode"
                        :value="item.countryCode"
                        :label="item.nameCn + '(' + item.countryCode + ')'"
                      ></ElOption>
                    </ElSelect>
                  </ElFormItem>
                  <ElFormItem label="是否代发">
                    <ElSelect
                      v-model="searchForm.replaceShipment"
                      placeholder="是否代发"
                      clearable
                      :teleported="false"
                      style="width: 150px"
                      @change="changeReplaceShipment"
                    >
                      <ElOption
                        v-for="(item, index) in ['不代发', '代发']"
                        :key="index"
                        :value="index"
                        :label="item"
                      ></ElOption>
                    </ElSelect>
                  </ElFormItem>
                  <ElFormItem
                    v-if="searchForm.replaceShipment === 0"
                    label="物流类型"
                  >
                    <ElSelect
                      v-model="searchForm.shipmentType"
                      placeholder="物流类型"
                      clearable
                      :teleported="false"
                      style="width: 150px"
                    >
                      <ElOption
                        v-for="(item, index) in ['自提', '快递']"
                        :key="index"
                        :value="index"
                        :label="item"
                      ></ElOption>
                    </ElSelect>
                  </ElFormItem>
                  <ElFormItem
                    v-if="searchForm.replaceShipment === 1"
                    label="物流类型"
                  >
                    <ElSelect
                      v-model="searchForm.shipmentType"
                      placeholder="物流类型"
                      clearable
                      :teleported="false"
                      style="width: 150px"
                    >
                      <ElOption
                        v-for="(item, index) in ['自有物流', '工厂物流']"
                        :key="index"
                        :value="index"
                        :label="item"
                      ></ElOption>
                    </ElSelect>
                  </ElFormItem>
                  <ElFormItem label="ERP标签">
                    <ElSelect
                      v-model="searchForm.tagsIdArr"
                      placeholder="请选择ERP标签"
                      clearable
                      filterable
                      multiple
                      collapse-tags
                      collapse-tags-tooltip
                      :teleported="false"
                      style="width: 150px"
                    >
                      <ElOption
                        v-for="(item, index) in customTagList"
                        :key="index"
                        :value="item.id"
                        :label="item.name"
                      ></ElOption>
                    </ElSelect>
                  </ElFormItem>

                  <ElFormItem label="订单来源">
                    <ElSelect
                      v-model="searchForm.source"
                      placeholder="请选择"
                      clearable
                      :teleported="false"
                      style="width: 150px"
                    >
                      <ElOption
                        v-for="(item, index) in sourceList"
                        :key="index"
                        :value="item.id"
                        :label="item.name"
                      ></ElOption>
                    </ElSelect>
                  </ElFormItem>
                  <ElFormItem label="尺码筛选">
                    <ElSelect
                      v-model="searchForm.size"
                      placeholder="请选择"
                      clearable
                      filterable
                      :teleported="false"
                      style="width: 150px"
                    >
                      <ElOption
                        v-for="(item, index) in sizes"
                        :key="index"
                        :value="item"
                        :label="item"
                      ></ElOption>
                    </ElSelect>
                  </ElFormItem>
                  <ElFormItem label="自有物流公司">
                    <ElSelect
                      v-model="searchForm.logisticsCompanyCode"
                      placeholder="请选择"
                      clearable
                      filterable
                      :teleported="false"
                      style="width: 150px"
                    >
                      <ElOption
                        v-for="(item, index) in allCodelist"
                        :key="index"
                        :value="item.code"
                        :label="item.basicsName"
                      ></ElOption>
                    </ElSelect>
                  </ElFormItem>
                  <ElFormItem
                    v-if="status !== 'CANCEL' && status !== 'INTERCEPTED'"
                    label="拦截订单"
                  >
                    <ElSelect
                      v-model="searchForm.blocking"
                      placeholder="请选择"
                      clearable
                      filterable
                      :teleported="false"
                      style="width: 150px"
                    >
                      <ElOption
                        v-for="(_, index) in ['否', '是']"
                        :key="index"
                        :value="!!index"
                        :label="index === 0 ? '否' : '是'"
                      ></ElOption>
                    </ElSelect>
                  </ElFormItem>
                  <ElFormItem label="规范素材">
                    <ElSelect
                      v-model="searchForm.standardDesignImage"
                      placeholder="请选择"
                      clearable
                      filterable
                      style="width: 150px"
                    >
                      <ElOption
                        v-for="(_, index) in ['否', '是']"
                        :key="index"
                        :value="!!index"
                        :label="index === 0 ? '否' : '是'"
                      ></ElOption>
                    </ElSelect>
                  </ElFormItem>
                </ElForm>
                <template #reference>
                  <el-button
                    type="warning"
                    @click="searchVisible = !searchVisible"
                  >
                    <el-icon v-if="searchVisible">
                      <CaretTop />
                    </el-icon>
                    <el-icon v-else>
                      <CaretBottom />
                    </el-icon>
                  </el-button>
                </template>
              </ElPopover>
            </ElFormItem>

            <ElFormItem>
              <ElButton type="primary" @click="search"> 查询 </ElButton>
              <ElButton @click="reset"> 重置 </ElButton>
            </ElFormItem>
          </ElForm>
        </div>
      </div>

      <div class="operation-list">
        <span class="item">
          <ElButton type="success" @click="handleConfirmOrder">
            确认接单
          </ElButton>
        </span>
      </div>

      <div v-if="status === 'PENDING_ACCEPT'" class="pending-accept-subtabs">
        <div
          class="pending-accept-subtab"
          :class="{ active: pendingAcceptSubTab === 'PENDING_ACCEPT' }"
          @click="pendingAcceptSubTab = 'PENDING_ACCEPT'"
        >
          待接单<span> (0) </span>
        </div>
        <div
          class="pending-accept-subtab"
          :class="{
            active: pendingAcceptSubTab === 'ACCEPT_FAIL_OUT_OF_STOCK',
          }"
          @click="pendingAcceptSubTab = 'ACCEPT_FAIL_OUT_OF_STOCK'"
        >
          接单失败-缺货<span> (0) </span>
        </div>
      </div>
      <div class="table-content">
        <splitDiv v-loading="loading" size="55">
          <template #top>
            <div class="table-list flex-1 overflow-hidden">
              <TableView
                ref="mainTableRef"
                :paginated-data="tableData"
                :columns="mainColumns"
                serial-numberable
                selectionable
                @selection-change="handleMainSelectionChange"
                @row-click="handleMainRowClick"
              />
            </div>
            <ElPagination
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :page-sizes="[50, 100, 200, 300]"
              background
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              style="margin: 10px auto 0"
              @size-change="handlePageSizeChange"
              @current-change="handleCurrentPageChange"
            />
          </template>
          <template #bottom>
            <el-tabs v-model="activeTab" class="tabs-wrapper">
              <el-tab-pane name="product" label="包含商品">
                <div class="sub-table-wrapper">
                  <TableView
                    :paginated-data="productList"
                    :columns="productColumns"
                    serial-numberable
                  />
                </div>
              </el-tab-pane>
              <el-tab-pane name="log" label="操作日志">
                <div class="detail-table-content">
                  <LogList :log-list="logList" />
                  <div class="empty-content">暂无数据</div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </template>
        </splitDiv>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  ArrowDown,
  ArrowUp,
  CaretTop,
  CaretBottom,
} from '@element-plus/icons-vue'
import { onMounted, ref, watch } from 'vue'
import {
  ElForm,
  ElFormItem,
  ElMessage,
  ElMessageBox,
  ElTree,
} from 'element-plus'
import splitDiv from '@/components/splitDiv/splitDiv.vue'
import TableView from '@/components/TableView.vue'
import usePageList from '@/utils/hooks/usePageList'
import type { CustomColumn } from '@/types/table'
import type {
  FactoryOrderNewListData,
  LogListData,
  ProductListData,
  SearchForm,
  StatusTreeNode,
} from '@/types/api/factoryOrderNew'
import platformJson from '../../../json/platform.json'
import {
  confirmOrderApi,
  getFactoryOrderNewDetailApi,
  getFactoryOrderNewListApi,
  getFactoryOrderNewLogApi,
} from '@/api/factoryOrderNew'
import {
  getListCraftApi,
  getCustomTagListCnApi,
  allErpCodeListApi,
} from '@/api/podCnOrder'
import { getUserMarkList } from '@/api/common'
import { getAllCountryApi } from '@/api/logistics'
import LogisticsWaySelect from '@/views/logistics/components/LogisticsWaySelect'
import { IAllList } from '@/types/api/podUsOrder'
import { CraftListData } from '@/types/api/podCnOrder'
import ProductTypeFilter from './component/ProductTypeFilter.vue'
import type { ProductTypeGroup } from './component/productTypeFilterTypes'
const defaultStatusTree: StatusTreeNode[] = [
  {
    code: 'ALL',
    remark: '全部',
    count: 0,
    children: [
      { code: 'PENDING_ACCEPT', remark: '待接单', count: 0 },
      { code: 'PENDING_LOGISTICS', remark: '待创建物流', count: 0 },
      { code: 'PENDING_SCHEDULE', remark: '待排单', count: 0 },
      { code: 'BATCH_MANAGE', remark: '批次管理', count: 0 },
      { code: 'WAITING_RESTOCK', remark: '等待补货', count: 0 },
      {
        code: 'DISTRIBUTING',
        remark: '配货中',
        count: 0,
        children: [
          { code: 'PENDING_PICK', remark: '待拣胚', count: 0 },
          { code: 'PENDING_REPLENISH', remark: '待补胚', count: 0 },
          { code: 'PRODUCING', remark: '生产中', count: 0 },
          { code: 'PENDING_DISTRIBUTE', remark: '待配货', count: 0 },
        ],
      },
      { code: 'PRODUCING', remark: '生产中', count: 0 },
      { code: 'PENDING_DISTRIBUTE', remark: '待配货', count: 0 },
      { code: 'PENDING_SHIP', remark: '待发货', count: 0 },
      { code: 'COMPLETED', remark: '已完成', count: 0 },
      { code: 'SUSPENDED', remark: '挂起', count: 0 },
      { code: 'CANCELLED', remark: '已取消', count: 0 },
      { code: 'ARCHIVED', remark: '已归档', count: 0 },
    ],
  },
]

const statusTree = ref<StatusTreeNode[]>(defaultStatusTree)
const status = ref<string>('PENDING_ACCEPT')
const pendingAcceptSubTab = ref<'PENDING_ACCEPT' | 'ACCEPT_FAIL_OUT_OF_STOCK'>(
  'PENDING_ACCEPT',
)
const treeRef = ref<InstanceType<typeof ElTree>>()
const searchForm = ref<SearchForm>({})
const dateRange = ref<string[]>([])
const craftCode = ref<string>('')
const searchVisible = ref(false)
const searchFormPopoverRef = ref()

const userMarkList = ref<string[]>([])
const receiverCountryList = ref<{ countryCode: string; nameCn: string }[]>([])
const customTagList = ref<{ id: string; name: string }[]>([])

interface LogisticsCodeItem {
  code: string
  basicsName: string
  apiData: unknown
}
const allCodelist = ref<LogisticsCodeItem[]>([])

const sourceList = [
  { name: 'erp推送', id: 'jomall-erp' },
  { name: '第三方推送', id: 'third-party' },
]

const sizes = ['FS', 'XS', 'S', 'M', 'L', 'XL', 'XXL', '3XL', '4XL', '5XL']

const productTypeGroups = ref<ProductTypeGroup[]>([
  {
    label: '普品',
    value: 'NORMAL_ALL',
    children: [{ label: '普品', value: 'NORMAL' }],
  },
  {
    label: '胚衣',
    value: 'GREIGE_ALL',
    children: [{ label: '胚衣', value: 'GREIGE' }],
  },
  {
    label: 'POD商品',
    value: 'POD_ALL',
    children: [
      { label: '单面', value: 'POD_SINGLE' },
      { label: '多面', value: 'POD_MULTI' },
    ],
  },
  {
    label: '一件定制局部印',
    value: 'CUSTOM_PART_ALL',
    children: [
      { label: '单面', value: 'CUSTOM_PART_SINGLE' },
      { label: '多面', value: 'CUSTOM_PART_MULTI' },
    ],
  },
])

const changeReplaceShipment = () => {
  searchForm.value.shipmentType = ''
}

const getUserMark = async () => {
  try {
    const res = await getUserMarkList()
    userMarkList.value = res.data
  } catch (_e) {
    /* empty */
  }
}

const getReceiverCountryList = async () => {
  try {
    const res = await getAllCountryApi()
    if (res.code !== 200) return
    receiverCountryList.value = res.data
  } catch (_e) {
    /* empty */
  }
}

const getCustomTagList = async () => {
  try {
    const res = await getCustomTagListCnApi()
    if (res.code !== 200) return
    customTagList.value = res.data
  } catch (_e) {
    /* empty */
  }
}

const getLogisticsCompanyAllCodelist = async () => {
  try {
    const res = await allErpCodeListApi()
    if (res.code !== 200) return
    allCodelist.value = res.data
  } catch (_e) {
    /* empty */
  }
}
interface ProcessTypeData {
  label: string
  value: string
}
const processType = ref<ProcessTypeData[]>([
  {
    label: '烫画',
    value: 'TH',
  },
  {
    label: '直喷',
    value: 'ZP',
  },
  {
    label: '刺绣',
    value: 'CX',
  },
  {
    label: '雕刻',
    value: 'DK',
  },
  {
    label: '白胚',
    value: 'BP',
  },
  {
    label: '其他',
    value: 'QT',
  },
])
const processTypeMap = processType.value.reduce((acc, cur) => {
  acc[cur.value] = cur.label
  return acc
}, {} as Record<string, string>)
const craftList = ref<IAllList[]>([])
const loadCraftList = async () => {
  try {
    const res = await getListCraftApi()
    if (res.code !== 200) return
    const data: CraftListData[] = res.data
    craftList.value = data.map((item) => ({
      id: item.craftCode,
      name: item.craftName,
      warehouseName: processTypeMap[item.craftType] ?? '其他',
    }))
  } catch (_e) {
    /* empty */
  }
}

const pickerOptions = {
  shortcuts: [
    {
      text: '今日',
      value: () => {
        const start = new Date()
        start.setHours(0, 0, 0, 0)
        const end = new Date()
        end.setHours(23, 59, 59, 999)
        return [start, end]
      },
    },
    {
      text: '最近7天',
      value: () => {
        const end = new Date()
        end.setHours(23, 59, 59, 999)
        const start = new Date()
        start.setDate(start.getDate() - 6)
        start.setHours(0, 0, 0, 0)
        return [start, end]
      },
    },
    {
      text: '最近30天',
      value: () => {
        const end = new Date()
        end.setHours(23, 59, 59, 999)
        const start = new Date()
        start.setDate(start.getDate() - 29)
        start.setHours(0, 0, 0, 0)
        return [start, end]
      },
    },
  ],
}

const activeTab = ref<'product' | 'log'>('product')
const productList = ref<ProductListData[]>([])
const currentRow = ref<FactoryOrderNewListData | null>(null)
const selectedRowIds = ref<(number | string)[]>([])
const logList = ref<LogListData[]>([])
const mainTableRef = ref()
const mainColumns: CustomColumn<FactoryOrderNewListData>[] = [
  { key: 'orderNumber', prop: 'orderNumber', label: '订单编号', minWidth: 160 },
  {
    key: 'customerOrderNumber',
    prop: 'customerOrderNumber',
    label: '客户单号',
    minWidth: 160,
  },
  {
    key: 'shopOrderNumber',
    prop: 'shopOrderNumber',
    label: '店铺单号',
    minWidth: 160,
  },
  { key: 'statusName', prop: 'statusName', label: '订单状态', minWidth: 120 },
  { key: 'status', prop: 'status', label: '客户标签', minWidth: 160 },
  { key: 'status', prop: 'status', label: '客户编号', minWidth: 160 },
  { key: 'status', prop: 'status', label: '物流类型', minWidth: 120 },
  { key: 'status', prop: 'status', label: '物流跟踪号', minWidth: 160 },
  { key: 'status', prop: 'status', label: '总克重', minWidth: 120 },
  { key: 'status', prop: 'status', label: '商品总数量', minWidth: 120 },
  {
    key: 'logisticsWayName',
    prop: 'logisticsWayName',
    label: '物流方式',
    minWidth: 140,
  },
  {
    key: 'totalProductNum',
    prop: 'totalProductNum',
    label: '商品总数量',
    minWidth: 120,
  },
  {
    key: 'receiverName',
    prop: 'receiverName',
    label: '收货人',
    minWidth: 120,
  },
  {
    key: 'receiverPhone',
    prop: 'receiverPhone',
    label: '收货人电话',
    minWidth: 140,
  },
  {
    key: 'receiverPhone',
    prop: 'receiverPhone',
    label: '收货人邮编',
    minWidth: 140,
  },
  {
    key: 'receiverAddress',
    prop: 'receiverAddress',
    label: '收货地址',
    minWidth: 220,
    showOverflowTooltip: true,
  },
  {
    key: 'createTime',
    prop: 'createTime',
    label: '创建时间',
    minWidth: 180,
    sortable: true,
  },
  {
    key: 'acceptTime',
    prop: 'acceptTime',
    label: '接单时间',
    sortable: true,
    minWidth: 180,
  },
  {
    key: 'finishTime',
    prop: 'finishTime',
    label: '完成时间',
    sortable: true,
    minWidth: 180,
  },
  {
    key:'operation',
    prop: 'operation',
    label: '操作',
    minWidth: 120,
    slot: 'operation',
    fixed: 'right',
  },
]

const productColumns: CustomColumn<ProductListData>[] = [
  {
    key: 'productImage',
    prop: 'productImage',
    label: '商品图片',
    minWidth: 90,
    align: 'center',
    slot: 'productImage',
  },
  {
    key: 'productName',
    prop: 'productName',
    label: '商品名称',
    minWidth: 200,
    showOverflowTooltip: true,
  },
  {
    key: 'variantSku',
    prop: 'variantSku',
    label: '变体SKU',
    minWidth: 160,
  },
  {
    key: 'stockSku',
    prop: 'stockSku',
    label: '库存SKU',
    minWidth: 160,
  },
  {
    key: 'craftCode',
    prop: 'craftCode',
    label: '工艺',
    minWidth: 100,
  },
  {
    key: 'styleNo',
    prop: 'styleNo',
    label: '款号',
    minWidth: 100,
  },
  {
    key: 'price',
    prop: 'price',
    label: '价格',
    minWidth: 100,
  },
  {
    key: 'quantity',
    prop: 'quantity',
    label: '数量',
    minWidth: 100,
  },
  {
    key: 'weight',
    prop: 'weight',
    label: '克重',
    minWidth: 100,
  },
  {
    key: 'availableQuantity',
    prop: 'availableQuantity',
    label: '可用数量',
    minWidth: 100,
  },
  {
    key: 'stockQuantity',
    prop: 'stockQuantity',
    label: '库存数量',
    minWidth: 100,
  },
  {
    key: 'occupiedQuantity',
    prop: 'occupiedQuantity',
    label: '占用数量',
    minWidth: 100,
  },
  {
    key:'',
    prop: '',
    label:'英文报关名称',
    width: 160,
  },
  {
    key:'',
    prop: '',
    label:'中文报关名称',
    width: 160,
  },
  {
    key:'',
    prop: '',
    label:'申报重量(g)',
    width: 100,
  },
  {
    key:'',
    prop: '',
    label:'申报价值($)',
    width: 100,
  },
  {
    key:'',
    prop: '',
    label:'备注',
    width: 160,
  },
]

const {
  loading,
  currentPage,
  pageSize,
  total,
  data: tableData,
  onCurrentPageChange,
  onPageSizeChange,
  refresh,
} = usePageList<FactoryOrderNewListData>({
  query: (page, size) =>
    getFactoryOrderNewListApi(
      {
        ...searchForm.value,
        craftCode: craftCode.value,
        startTime: dateRange.value?.[0] || null,
        endTime: dateRange.value?.[1] || null,
      },
      page,
      size,
      status.value === 'ALL'
        ? undefined
        : status.value === 'PENDING_ACCEPT'
        ? pendingAcceptSubTab.value
        : status.value,
    ).then((res) => res.data),
})

const search = () => {
  onCurrentPageChange(1)
  refresh()
}

const reset = () => {
  searchForm.value = {}
  dateRange.value = []
  craftCode.value = ''
  search()
}

const handleStatusNodeClick = (node: StatusTreeNode) => {
  status.value = node.code
  if (node.code !== 'PENDING_ACCEPT') {
    pendingAcceptSubTab.value = 'PENDING_ACCEPT'
  }
  // refresh()
}

const toggleExpand = (node: { expanded?: boolean }) => {
  node.expanded = !node.expanded
}

const handlePageSizeChange = (size: number) => {
  onPageSizeChange(size)
}

const handleCurrentPageChange = (page: number) => {
  onCurrentPageChange(page)
}

const handleMainSelectionChange = (rows: FactoryOrderNewListData[]) => {
  selectedRowIds.value = rows.map((row) => row.id)
}

const loadSubTables = async () => {
  if (!currentRow.value) {
    productList.value = []
    logList.value = []
    return
  }
  try {
    const [productRes, logRes] = await Promise.all([
      getFactoryOrderNewDetailApi(currentRow.value.id),
      getFactoryOrderNewLogApi(currentRow.value.id),
    ])
    productList.value = productRes.data || []
    logList.value = logRes.data || []
  } catch (e) {
    console.error(e)
  }
}

const handleMainRowClick = (row: FactoryOrderNewListData) => {
  currentRow.value = row
  loadSubTables()
}

watch(
  () => pendingAcceptSubTab.value,
  () => {
    if (status.value === 'PENDING_ACCEPT') {
      onCurrentPageChange(1)
      refresh()
    }
  },
)

watch(
  () => activeTab.value,
  () => {
    if (currentRow.value) {
      loadSubTables()
    }
  },
)

const confirmBatchAction = async (message: string) => {
  if (!selectedRowIds.value.length) {
    ElMessage.warning('请先选择订单')
    return false
  }
  await ElMessageBox.confirm(message, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
  return true
}

const handleConfirmOrder = async () => {
  const ok = await confirmBatchAction('确认接单所选订单？')
  if (!ok) return
  await confirmOrderApi(selectedRowIds.value)
  ElMessage.success('操作成功')
  refresh()
}

onMounted(() => {
  if (treeRef.value) {
    treeRef.value.setCurrentKey(status.value, true)
  }
  loadCraftList()
  getUserMark()
  getCustomTagList()
  getLogisticsCompanyAllCodelist()
  getReceiverCountryList()
})
</script>

<style scoped lang="scss">
.page {
  display: flex;
}

.order-status {
  width: 180px;

  :deep(.el-tree-node__content) {
    height: 30px;
    line-height: 30px;
  }

  :deep(.el-tree-node__expand-icon) {
    display: none;
  }

  :deep(.status-tree .el-tree-node.is-current > .el-tree-node__content) {
    background-color: #ecf5ff !important;
    color: #409eff !important;

    .tree-node-label,
    .tree-node-count {
      color: #409eff !important;
    }
    .el-icon {
      color: #409eff !important;
    }
  }
}

.tree-node {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: #333;
  font-weight: 500;
  width: 100%;
  justify-content: space-between;
}

.tree-node-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tree-node-count {
  flex-shrink: 0;
}

.tree-node-expand {
  flex-shrink: 0;
  cursor: pointer;
  display: inline-flex;

  &:hover {
    color: #409eff;
  }
}

.pending-accept-subtabs {
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid #e5e6eb;
  border-bottom: 1px solid #e5e6eb;
  margin-top: 10px;
}

.pending-accept-subtab {
  font-size: 14px;
  line-height: 32px;
  padding: 0 12px;
  cursor: pointer;
  user-select: none;
  color: #333;
  position: relative;

  &.active {
    background: #ecf5ff;
    color: #409eff;
    border-bottom: 2px solid #409eff;
  }
}

.right {
  flex: 1;
  flex-shrink: 0;
  background: #fff;
  overflow: hidden;
}

.btn-list {
  padding: 0 10px 10px;
}

.main-table-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.main-table-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.main-table-scroll :deep(.table-view) {
  height: 100%;
}

.main-table-pagination {
  flex-shrink: 0;
  margin: 10px auto 0;
}

.tabs-wrapper {
  height: 100%;

  :deep(.el-tabs__content) {
    height: calc(100% - 40px);
  }

  :deep(.el-tab-pane) {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
}

.sub-table-wrapper,
.log-table-wrapper {
  flex: 1;
  overflow: hidden;
}
.table-content {
  flex: 1;
  margin-top: 10px;
  overflow: hidden;
  :deep(#top) {
    height: 100%;
  }
}
.header-filter-form {
  width: 100%;
  min-width: 0;
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  min-width: 0;

  :deep(.el-form-item) {
    margin-right: 10px;
    margin-bottom: 10px;
  }

  :deep(.el-form-item__content) {
    min-width: 0;
  }
}
</style>
<style lang="scss">
.customize-select-style {
  .el-select-dropdown__list {
    width: 500px;
    display: flex;
    flex-wrap: wrap;
  }
}
</style>
