<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { message } from 'ant-design-vue';
import type { ColumnsType } from 'ant-design-vue/es/table/interface';
import { listMaskCombination, listCombinationAssignMask } from "@/api/pwoManage/fixtureCombination";

interface FixtureTableItem {
  key: string;
  operationTitle: string;
  operationCode: string;
  maskName: string;
  maskCode: string;
  [key: string]: any;
}

interface FixtureCombinationItem {
  key: string;
  combinationCode: string;
  combinationName: string;
  combinationStatus: string;
  [key: string]: any;
}

const fixtureColumns = [
  { title: '序号', dataIndex: 'index', key: 'index', align: 'center', width: 80 },
  { title: '工序编码', dataIndex: 'operationCode', key: 'operationCode', align: 'center' },
  { title: '工序名称', dataIndex: 'operationTitle', key: 'operationTitle', align: 'center' },
  { title: '治具编码', dataIndex: 'maskCode', key: 'maskCode', align: 'center' },
  { title: '治具名称', dataIndex: 'maskName', key: 'maskName', align: 'center' },
];

// 治具表格
const fixtureTableData = ref<FixtureTableItem[]>([]);

const fixtureInput = ref<string>('');

const openFixtureModal = ref(false)
const fixtureCombinationColumns = [
  { title: '序号', dataIndex: 'index', key: 'index', align: 'center', width: 80 },
  { title: '组合编码', dataIndex: 'combinationCode', key: 'combinationCode', align: 'center' },
  { title: '组合名称', dataIndex: 'combinationName', key: 'combinationName', align: 'center' },
  { title: '组合状态', dataIndex: 'combinationStatus', key: 'combinationStatus', align: 'center' },
  { title: '操作', dataIndex: 'action', key: 'action', align: 'center', width: 100 },
]
const fixtureCombinationTableData = ref<FixtureCombinationItem[]>([])
const fetchCombinationList = async () => {
  try {
    const { rows, total } = await listMaskCombination({})
    if (total as number <= 0) throw new Error('未查询到组合列表');
    fixtureCombinationTableData.value = rows;
  } catch (error: any) {
    message.error(error.message || '获取工单信息失败');
  }
}

const existingCombination = ref(new Set())
const handleBind = async (id: number) => {
  const { rows } = await listCombinationAssignMask(id, {
    maskStatus: "AVAILABLE",
    orderByColumn: 'id',
    orderBy: 'desc',
  })

  const newCombination = rows.filter(item => !existingCombination.value.has(item.id))
  newCombination.forEach(item => {
    fixtureTableData.value.push({
      key: item.id,
      operationCode: item.operationCode,
      operationTitle: item.operationTitle,
      maskCode: item.maskCode,
      maskName: item.maskName
    })
    existingCombination.value.add(item.id)
  })

  message.success('绑定成功')
  openFixtureModal.value = false
}

// 计算表格高度
const customTable = ref<HTMLElement | null>(null)
const tableHeight = ref(200)
const renderTableHeight = () => {
  if (customTable.value) {
    tableHeight.value = customTable.value.clientHeight - 50
    console.log('元素高度：', tableHeight.value)
  }
}

onMounted(() => {
  renderTableHeight()
})

defineExpose({
  renderTableHeight
});

fetchCombinationList()
</script>

<template>
  <div class="fixture__container">
    <a-row class="main-content" :gutter="24">
      <a-col :span="14" class="fixture-item__container">
        <div class="main-title">治具组合信息</div>
        <a-button size="large" @click="() => openFixtureModal = true">绑定治具组合</a-button>
        <div class="table-wrapper" ref="customTable">
          <a-table :dataSource="fixtureTableData" :columns="fixtureColumns as ColumnsType<FixtureTableItem>"
            :pagination="false" bordered sticky size="middle" :scroll="{ y: tableHeight }">
            <template #bodyCell="{ column, index }">
              <template v-if="column.key === 'index'">{{ index + 1 }}</template>
            </template>
          </a-table>
        </div>
      </a-col>
      <a-col :span="10" class="fixture-item__container">
        <div class="main-title">治具校验</div>
        <a-row>
          <a-col :span="20">
            <a-input size="large" v-model:value="fixtureInput" @pressEnter="" placeholder="按下回车校验" />
          </a-col>
          <a-col :span="3" :offset="1">
            <a-button size="large" @click="">校验</a-button>
          </a-col>
        </a-row>
        <div class="table-wrapper">
          <a-descriptions bordered :column="1">
            <a-descriptions-item label="治具编码">Cloud Database</a-descriptions-item>
            <a-descriptions-item label="治具名称">Prepaid</a-descriptions-item>
            <a-descriptions-item label="治具组合">YES</a-descriptions-item>
            <a-descriptions-item label="标准使用次数">YES</a-descriptions-item>
            <a-descriptions-item label="当前使用次数">YES</a-descriptions-item>
            <a-descriptions-item label="关联工序">YES</a-descriptions-item>
          </a-descriptions>
        </div>
      </a-col>
    </a-row>

    <a-modal v-model:open="openFixtureModal" title="绑定治具组合" width="50vw" :bodyStyle="{ padding: '20px 0' }">
      <a-table :dataSource="fixtureCombinationTableData" :columns="fixtureCombinationColumns as ColumnsType<FixtureCombinationItem>"
        :pagination="false" bordered sticky :scroll="{ y: tableHeight }">
        <template #bodyCell="{ column, index, record }">
          <template v-if="column.key === 'index'">{{ index + 1 }}</template>
          <template v-if="column.key === 'action'">
            <a-button @click="handleBind(record.id)">绑定</a-button>
          </template>
        </template>
      </a-table>
    </a-modal>
  </div>
</template>

<style scoped lang="scss">
.fixture__container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.main-content {
  flex: 1;
  overflow: hidden;

  .fixture-item__container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: hidden;
    height: 100%;

    .main-title {
      font-size: 20px;
      font-weight: 600;
      border-bottom: 1px solid #c9c9c9;
      padding: 0 0 8px;
    }

    .table-wrapper {
      flex: 1;
      overflow: auto;
    }
  }
}
</style>
