<template>
  <el-card class="clean-data-card" shadow="hover">
    <div class="clean-data-container">
      <el-input
        v-model="trayCode"
        placeholder="请输入托盘编号"
        clearable
        class="input-tray"
      />
      <el-button
        type="primary"
        @click="handleClean"
        :loading="loading"
      >
        清理数据
      </el-button>
    </div>
  </el-card>
</template>

<script>

import {clearDataByTrayCode} from "@/api/palletDeviceBinding/binding"
export default {
  name: 'CleanData',
  data() {
    return {
      trayCode: '',      // 绑定的托盘编号
      loading: false     // 按钮 loading 状态
    };
  },
  methods: {
    // 点击清理按钮
    handleClean() {
      if (!this.trayCode.trim()) {
        this.$message.warning('请输入托盘编号');
        return;
      }

      // 弹出确认框
      this.$confirm(`确认清理托盘 ${this.trayCode} 的数据？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 用户点击确定，开始清理
        this.loading = true;
        clearDataByTrayCode(this.trayCode)
          .then(() => {
            this.$message.success('数据清理成功');
            // 可选：清理成功后重置输入框
            // this.trayCode = '';
          })
          .finally(() => {
            this.loading = false;
          });
      }).catch(() => {
        // 用户点击取消
        this.$message.info('已取消清理');
      });
    },
  }
};
</script>

<style scoped>
.clean-data-card {
  width: 500px;           /* 固定卡片宽度 */
  margin: 20px auto;      /* 水平居中，上下留一点边距 */
}

.clean-data-container {
  display: flex;
  align-items: center;
  gap: 12px;
}

.input-tray {
  flex: 1;
}
</style>
