<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->

<template>
  <div class="min-h-screen bg-gray-50 p-4">
    <div class="mx-auto max-w-[1150px]">
      <!-- 顶部查询区域 -->
      <div class="mb-4 grid grid-cols-12 gap-4">
        <div class="col-span-8 space-y-4 rounded-lg bg-white p-4 shadow">
          <div class="grid grid-cols-3 gap-4">
            <div class="flex items-center space-x-2">
              <span class="whitespace-nowrap text-sm text-gray-600">工位编码:</span>
              <input v-model="workstationCode" class="flex-1 rounded-md border border-gray-300 px-3 py-2" placeholder="请输入工位编码" />
            </div>
            <div class="flex items-center space-x-2">
              <span class="whitespace-nowrap text-sm text-gray-600">报工人:</span>
              <input v-model="worker" class="flex-1 rounded-md border border-gray-300 px-3 py-2" placeholder="请输入报工人" />
            </div>
            <div class="flex items-center justify-end space-x-2">
              <span class="whitespace-nowrap text-sm text-gray-600">是否未序报工:</span>
              <div class="relative inline-block w-10 select-none">
                <input type="checkbox" v-model="isUnordered" class="toggle-checkbox absolute block h-6 w-6 cursor-pointer rounded-full border-4 border-gray-300 bg-white appearance-none" />
                <label class="toggle-label block h-6 w-10 cursor-pointer rounded-full bg-gray-300"></label>
              </div>
            </div>
          </div>
          <div class="flex items-center space-x-4">
            <div class="relative flex-1">
              <i class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
              <input v-model="keyword" class="w-full rounded-md border border-gray-300 pl-10 pr-3 py-2" placeholder="请输入关键字搜索" />
            </div>
            <button class="!rounded-button whitespace-nowrap bg-blue-600 px-4 py-2 text-white" @click="handleSearch">查询</button>
          </div>
        </div>
        <div class="col-span-4 rounded-lg bg-white p-4 shadow">
          <div class="flex items-center space-x-2">
            <div class="relative flex-1">
              <i class="fas fa-crosshairs absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
              <input v-model="scanCode" class="w-full rounded-md border border-gray-300 pl-10 pr-3 py-2" placeholder="请扫描载具" />
            </div>
            <button class="!rounded-button whitespace-nowrap bg-gray-100 px-4 py-2" @click="handleClear">清空</button>
          </div>
        </div>
      </div>

      <!-- 中间载具转换区域 -->
      <div class="mb-4 grid grid-cols-12 gap-4">
        <!-- 左侧载具列表 -->
        <div class="col-span-4 rounded-lg bg-white p-4 shadow">
          <div class="overflow-x-auto">
            <table class="min-w-full border-collapse">
              <thead>
                <tr class="bg-gray-50">
                  <th class="border px-4 py-2 text-left">序号</th>
                  <th class="border px-4 py-2 text-left">载具编码</th>
                  <th class="border px-4 py-2 text-left">载具名称</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in carrierList" :key="index" :class="{'bg-gray-50': index % 2 === 0}">
                  <td class="border px-4 py-2">{{ index + 1 }}</td>
                  <td class="border px-4 py-2">{{ item.code }}</td>
                  <td class="border px-4 py-2">{{ item.name }}</td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="mt-4 flex justify-between">
            <div class="flex space-x-2">
              <button 
                class="!rounded-button whitespace-nowrap bg-gray-100 px-3 py-1"
                :disabled="currentPage === 1"
                @click="currentPage--"
              >上一页</button>
              <span class="px-3 py-1">{{ currentPage }}</span>
              <button 
                class="!rounded-button whitespace-nowrap bg-gray-100 px-3 py-1"
                :disabled="currentPage * pageSize >= total"
                @click="currentPage++"
              >下一页</button>
            </div>
          </div>
        </div>

        <!-- 中间转换按钮 -->
        <div class="col-span-1 flex flex-col items-center justify-center space-y-4">
          <button 
            class="!rounded-button whitespace-nowrap bg-blue-600 p-2 text-white"
            :disabled="!selectedLeft"
            @click="handleTransferRight"
          >
            <i class="fas fa-arrow-right"></i>
          </button>
          <button 
            class="!rounded-button whitespace-nowrap bg-blue-600 p-2 text-white"
            :disabled="!selectedRight"
            @click="handleTransferLeft"
          >
            <i class="fas fa-arrow-left"></i>
          </button>
        </div>

        <!-- 右侧载具信息 -->
        <div class="col-span-7 grid grid-cols-2 gap-4">
          <div class="rounded-lg bg-white p-4 shadow">
            <h3 class="mb-4 text-base font-medium">消耗载具</h3>
            <div class="space-y-4">
              <div class="flex items-center space-x-2">
                <span class="whitespace-nowrap text-sm text-gray-600">载具编码:</span>
                <input v-model="consumeCarrier.code" disabled class="flex-1 rounded-md border border-gray-200 bg-gray-50 px-3 py-2" />
              </div>
              <div class="flex items-center space-x-2">
                <span class="whitespace-nowrap text-sm text-gray-600">MES 编码:</span>
                <input v-model="consumeCarrier.mesCode" disabled class="flex-1 rounded-md border border-gray-200 bg-gray-50 px-3 py-2" />
              </div>
              <div class="flex items-center space-x-2">
                <span class="whitespace-nowrap text-sm text-gray-600">生产批:</span>
                <input v-model="consumeCarrier.batch" disabled class="flex-1 rounded-md border border-gray-200 bg-gray-50 px-3 py-2" />
              </div>
              <div class="flex items-center space-x-2">
                <span class="whitespace-nowrap text-sm text-gray-600">装载数量:</span>
                <input v-model="consumeCarrier.quantity" type="number" class="flex-1 rounded-md border border-gray-300 px-3 py-2" />
              </div>
              <button class="!rounded-button whitespace-nowrap bg-blue-600 px-4 py-2 text-white">出站</button>
            </div>
          </div>
          <div class="rounded-lg bg-white p-4 shadow">
            <h3 class="mb-4 text-base font-medium">装载载具</h3>
            <div class="space-y-4">
              <div class="flex items-center space-x-2">
                <span class="whitespace-nowrap text-sm text-gray-600">载具编码:</span>
                <input v-model="loadCarrier.code" disabled class="flex-1 rounded-md border border-gray-200 bg-gray-50 px-3 py-2" />
              </div>
              <div class="flex items-center space-x-2">
                <span class="whitespace-nowrap text-sm text-gray-600">MES 编码:</span>
                <input v-model="loadCarrier.mesCode" disabled class="flex-1 rounded-md border border-gray-200 bg-gray-50 px-3 py-2" />
              </div>
              <div class="flex items-center space-x-2">
                <span class="whitespace-nowrap text-sm text-gray-600">生产批:</span>
                <input v-model="loadCarrier.batch" disabled class="flex-1 rounded-md border border-gray-200 bg-gray-50 px-3 py-2" />
              </div>
              <div class="flex items-center space-x-2">
                <span class="whitespace-nowrap text-sm text-gray-600">装载数量:</span>
                <input v-model="loadCarrier.quantity" type="number" class="flex-1 rounded-md border border-gray-300 px-3 py-2" />
              </div>
              <button class="!rounded-button whitespace-nowrap bg-blue-600 px-4 py-2 text-white">出站</button>
            </div>
          </div>
        </div>
      </div>

      <!-- 底部记录区域 -->
      <div class="grid grid-cols-2 gap-4">
        <div class="rounded-lg bg-white p-4 shadow">
          <h3 class="mb-4 text-base font-medium">入站记录</h3>
          <div class="overflow-x-auto">
            <table class="min-w-full border-collapse">
              <thead>
                <tr class="bg-gray-50">
                  <th class="border px-4 py-2 text-left">序号</th>
                  <th class="border px-4 py-2 text-left">载具编码</th>
                  <th class="border px-4 py-2 text-left">载具名称</th>
                  <th class="border px-4 py-2 text-left">入站数量</th>
                  <th class="border px-4 py-2 text-left">入站存货编码</th>
                  <th class="border px-4 py-2 text-left">入站存货名称</th>
                  <th class="border px-4 py-2 text-left">入站批次号</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in inRecords" :key="index" :class="{'bg-gray-50': index % 2 === 0}">
                  <td class="border px-4 py-2">{{ index + 1 }}</td>
                  <td class="border px-4 py-2">{{ item.carrierCode }}</td>
                  <td class="border px-4 py-2">{{ item.carrierName }}</td>
                  <td class="border px-4 py-2">{{ item.inQuantity }}</td>
                  <td class="border px-4 py-2">{{ item.inStorageCode }}</td>
                  <td class="border px-4 py-2">{{ item.inStorageName }}</td>
                  <td class="border px-4 py-2">{{ item.inBatchNo }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div class="rounded-lg bg-white p-4 shadow">
          <h3 class="mb-4 text-base font-medium">出站记录</h3>
          <div class="overflow-x-auto">
            <table class="min-w-full border-collapse">
              <thead>
                <tr class="bg-gray-50">
                  <th class="border px-4 py-2 text-left">序号</th>
                  <th class="border px-4 py-2 text-left">载具编码</th>
                  <th class="border px-4 py-2 text-left">载具名称</th>
                  <th class="border px-4 py-2 text-left">出站数量</th>
                  <th class="border px-4 py-2 text-left">出站存货编码</th>
                  <th class="border px-4 py-2 text-left">出站存货名称</th>
                  <th class="border px-4 py-2 text-left">出站批次号</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in outRecords" :key="index" :class="{'bg-gray-50': index % 2 === 0}">
                  <td class="border px-4 py-2">{{ index + 1 }}</td>
                  <td class="border px-4 py-2">{{ item.carrierCode }}</td>
                  <td class="border px-4 py-2">{{ item.carrierName }}</td>
                  <td class="border px-4 py-2">{{ item.outQuantity }}</td>
                  <td class="border px-4 py-2">{{ item.outStorageCode }}</td>
                  <td class="border px-4 py-2">{{ item.outStorageName }}</td>
                  <td class="border px-4 py-2">{{ item.outBatchNo }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      workstationCode: '',
      worker: '',
      isUnordered: false,
      keyword: '',
      scanCode: '',
      currentPage: 1,
      pageSize: 10,
      total: 100,
      selectedLeft: false,
      selectedRight: false,
      carrierList: [
        { code: 'ZJ001', name: '载具一' },
        { code: 'ZJ002', name: '载具二' },
        { code: 'ZJ003', name: '载具三' }
      ],
      consumeCarrier: {
        code: '',
        mesCode: '',
        batch: '',
        quantity: 0
      },
      loadCarrier: {
        code: '',
        mesCode: '',
        batch: '',
        quantity: 0
      },
      inRecords: [
        {
          carrierCode: 'ZJ001',
          carrierName: '载具一',
          inQuantity: 100,
          inStorageCode: 'CH001',
          inStorageName: '原料A',
          inBatchNo: 'B20230601'
        }
      ],
      outRecords: [
        {
          carrierCode: 'ZJ002',
          carrierName: '载具二',
          outQuantity: 50,
          outStorageCode: 'CH002',
          outStorageName: '成品B',
          outBatchNo: 'B20230602'
        }
      ]
    };
  },
  methods: {
    handleSearch() {
      // 处理查询逻辑
    },
    handleClear() {
      this.scanCode = '';
    },
    handleTransferLeft() {
      // 处理向左转换逻辑
    },
    handleTransferRight() {
      // 处理向右转换逻辑
    }
  }
};
</script>

<style scoped>
.toggle-checkbox:checked {
  right: 0;
  border-color: #2563eb;
}
.toggle-checkbox:checked + .toggle-label {
  background-color: #2563eb;
}
.toggle-label {
  transition: background-color 0.2s ease-in;
}

/* 移除number类型input的上下箭头 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}
</style>

