<template>
  <el-dialog
    v-model="batchsVisible"
    :title="`${productCode} - 批号管理`"
    size="900px"
    :append-to-body="true"
    @closed="batchsVisible = false"
  >
    <div class="batch-input-container">
      <el-input
        v-model="newBatchCode"
        placeholder="输入批号"
        class="batch-input"
      />
      <el-button type="primary" @click="addBatch" class="batch-add-btn">
        新增
      </el-button>
    </div>

    <el-divider class="batch-divider" />

    <el-table :data="data" style="width: 100%" class="batch-table">
      <el-table-column prop="batchCode" label="产品批号" align="center" />
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button
            link
            type="danger"
            size="small"
            @click="handleDelete(scope.row)"
          >
            删除
          </el-button>
          <el-button
            link
            type="primary"
            size="small"
            @click="handleProgress(scope.row)"
          >
            项目进度
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination
      v-model:current-page="page.currentPage"
      v-model:page-size="page.pageSize"
      :total="page.total"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-dialog>
  <el-drawer
    v-model="batchsDrawerVisible"
    :title="`${currentBatchCode} - 检验进度`"
    size="900px"
    direction="rtl"
    :append-to-body="true"
    @closed="batchsDrawerVisible = false"
  >
    <!-- <el-button type="primary" style="width: 75px"> 批量完成</el-button> -->
    <el-table :data="drawerData" style="width: 100%" class="batch-table">
      <!-- <el-table-column type="selection" width="55" /> -->
      <el-table-column prop="name" label="检验项目" align="center" />
      <el-table-column prop="duration" label="周期(小时)" align="center" />
      <el-table-column prop="status" label="状态" align="center">
        <template #default="scope">
          <el-tag :type="scope.row.status == '1' ? 'success' : 'info'">
            {{ scope.row.status == "1" ? "已完成" : "未完成" }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button
            v-if="scope.row.status == 0"
            link
            type="primary"
            size="small"
            @click="handleFinishOne(scope.row)"
          >
            完成
          </el-button>
          <el-button
            v-if="scope.row.status == 1"
            link
            type="danger"
            size="small"
            @click="handleCancelOne(scope.row)"
          >
            取消
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:current-page="drawerPage.currentPage"
      v-model:page-size="drawerPage.pageSize"
      :total="drawerPage.total"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="handleDrawerSizeChange"
      @current-change="handleDrawerCurrentChange"
      style="margin-top: 20px; padding: 10px"
    />
  </el-drawer>
</template>

<script setup>
import { ref } from "vue";
import * as Api from "@/api/statistic/consistencyInspection";

const batchsVisible = ref(false);
const batchsDrawerVisible = ref(false);
const newBatchCode = ref("");
const data = ref([]); // 表格数据
const productId = ref(null);
const productCode = ref("");
const drawerData = ref([]);
const currentBatchCode = ref(""); // 当前批号

// 分页配置
const page = ref({
  currentPage: 1,
  pageSize: 10,
  total: 0,
});
const drawerPage = ref({
  currentPage: 1,
  pageSize: 10,
  total: 0,
});

const fetchDrawerData = (params = {}) => {
  const query = {
    pageNum: drawerPage.value.currentPage,
    pageSize: drawerPage.value.pageSize,
    batchCode: currentBatchCode.value,
    productId: productId.value,
    ...params,
  };

  Api.getBatchOptionPage(query).then((res) => {
    drawerData.value = res.data.records || [];
    drawerPage.value.total = res.data.totalCount || 0;
  });
};

// 获取数据
const fetchData = (params = {}) => {
  const query = {
    pageNum: page.value.currentPage,
    pageSize: page.value.pageSize,
    productId: productId.value,
    ...params,
  };

  Api.getBatchPage(query).then((res) => {
    data.value = res.data.records || [];
    page.value.total = res.data.totalCount || 0;
  });
};

const openBatchs = (row) => {
  productId.value = row.id;
  productCode.value = row.productCode;
  fetchData();
  batchsVisible.value = true;
};

const addBatch = () => {
  if (!newBatchCode.value) {
    return ElMessage.error("批号不能为空");
  }

  const newBatch = {
    batchCode: newBatchCode.value,
    productId: productId.value,
  };

  Api.addBatch(newBatch).then(() => {
    newBatchCode.value = "";
    ElMessage.success("批号添加成功");
    fetchData();
  });
};

// 删除操作
const handleDelete = (row) => {
  ElMessageBox.confirm("确认删除此批号吗？", "提示", {
    type: "warning",
  }).then(() => {
    Api.deleteBatchRow({
      batchCode: row.batchCode,
      productId: productId.value,
    }).then(() => {
      ElMessage.success("删除成功");
      fetchData();
    });
  });
};

// 项目进度操作
const handleProgress = (row) => {
  currentBatchCode.value = row.batchCode;
  fetchDrawerData();
  batchsDrawerVisible.value = true;
};

// 分页事件
const handleSizeChange = (val) => {
  page.value.pageSize = val;
  fetchData();
};

const handleCurrentChange = (val) => {
  page.value.currentPage = val;
  fetchData();
};

const handleDrawerSizeChange = (val) => {
  drawerPage.value.pageSize = val;
  fetchDrawerData();
};

const handleDrawerCurrentChange = (val) => {
  drawerPage.value.currentPage = val;
  fetchDrawerData();
};

const handleFinishOne = (row) => {
  Api.updateStatus({
    id: row.id,
    status: 1,
  }).then(() => {
    ElMessage.success("检验项目已完成");
    fetchDrawerData();
  });
};

const handleCancelOne = (row) => {
  Api.updateStatus({
    id: row.id,
    status: 0,
  }).then(() => {
    ElMessage.success("检验项目已取消");
    fetchDrawerData();
  });
};

defineExpose({
  openBatchs,
});
</script>

<style scoped>
.batch-input-container {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  margin-top: 10px;
}

.batch-input {
  width: 300px;
  margin-right: 10px;
}

.batch-divider {
  margin: 10px 0;
}

.batch-table {
  margin-top: 10px;
}

.el-pagination {
  margin-top: 20px;
  justify-content: flex-end;
}
</style>
