<template>
    <vxe-modal
      v-model="showEdit"
      :z-index="1006"
      @hide="onHide"
      title="选择订单项次"
      width="800"
      esc-closable
      mask-closable
      show-footer
    >
      <vxe-table
        ref="xTable"
        size="small"
        min-height="460"
        border
        :loading="loading"
        :data="tableData"
      >
        <vxe-column type="expand" title="尺码" width="120">
          <template #default="{row}">
            {{row.sizeListDto!==null?'尺码信息':'无尺码'}}
          </template>
          <template #content="{ row }">
            <div style="width: 1024px"  v-if="row.sizeListDto!=null">
            <el-row>
              <el-col :span="24">
                <el-table
                :data="[{}]" size="small"
                border
                style="width: 100%">
                  <el-table-column
                   v-for="(value,key) in row.sizeListDto.referNameJson"
                    :prop="key"
                    :label="key"
                   >
                    <template #default="{ row }">
                            {{ value }}
                        </template>
                  </el-table-column>
              </el-table>
              </el-col>
            </el-row>
            <el-row>

              <el-col :span="24">
                  <vxe-table :data="row.sizeListDto.sizeList" size="mini" max-height="300px" align="center">
                    <vxe-column field="size" title="尺码" width="100"></vxe-column>
                    <vxe-column field="num" title="尺码数量" width="100"></vxe-column>
                    <vxe-colgroup title="全码对照" v-if="row.sizeListDto.referTitles.length>0">
                      <vxe-column   v-for="(title) in row.sizeListDto.referTitles"   :title="title">
                        <template #default="{ row }">
                            {{ row.sizeRefer[title] }}
                        </template>
                    </vxe-column>
                   </vxe-colgroup>
                  </vxe-table>
              </el-col>
            </el-row>
          </div>
          </template>
        </vxe-column>
        <vxe-column field="orderNo" title="订单编码" width="120"></vxe-column>
        <vxe-column field="rowNo" title="项次行" width="120"></vxe-column>
        <vxe-column field="brandName" title="品牌名称" width="180"></vxe-column>
        <vxe-column field="customerName" title="客户名称" width="240"></vxe-column>
        <vxe-column field="clientCmd" title="客户指令号" width="240"></vxe-column>
        <vxe-column field="productType" title="产品类型" width="120"></vxe-column>
        <vxe-column field="productCode" title="产品编码" width="120"></vxe-column>
        <vxe-column field="productName" title="产品名称" width="240"></vxe-column>
      </vxe-table>
      <template #footer>
        <el-button type="primary" @click="showEdit = false">关闭</el-button>
      </template>
    </vxe-modal>
  </template>
  
<script lang="ts" setup>
import { nextTick, onMounted, reactive, ref } from 'vue'
import {
    apiOrderVarPage,
 } from '@/api/var'


  const showEdit = ref(false)
  const errors = ref([])
  const loading = ref(false)
  const tableData = ref([])

  const onHide = () => {
    errors.value = []
  }
  const openModal = (errs) => {
    showEdit.value = true
    errors.value = errs || []
  }

  const onQuery = async () => {
    loading.value = true
    try {
        const query = {}
        const { data } = await apiOrderVarPage(query)
        tableData.value = data.result.records
    } catch {}
    loading.value = false
  }
  
  defineExpose({
    openModal
  })

  onMounted(() => {
    onQuery()
  })


</script>
<style lang="scss" scoped></style>
  