<template>
  <el-dialog v-model="dialogvisable">
    <el-form
      label-position="right"
      label-width="100px"
      inline
      class="search"
      v-model="searchForm"
    >
      <el-form-item label="产品名称:">
        <el-input v-model="searchForm.produdctName" />
      </el-form-item>
      <el-form-item label="产品编码:">
        <el-input v-model="searchForm.produdctCode" />
      </el-form-item>
      <el-form-item
        label="产品批次:"
        v-if="type === 'batch' || type === 'operation'"
      >
        <el-input v-model="searchForm.produdctName" />
      </el-form-item>
      <el-form-item label="工序名称:" v-if="type === 'operation'">
        <el-input v-model="searchForm.operationName" />
      </el-form-item>
      <el-form-item label="工序编码:" v-if="type === 'operation'">
        <el-input v-model="searchForm.operationCode" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getData">查询</el-button>
        <el-button @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="produdctLineName" label="产线名称" />
      <el-table-column prop="produdctName" label="产品名称" />
      <el-table-column prop="produdctCode" label="产品编码" />
      <el-table-column
        prop="batchNo"
        v-if="type === 'batch' || type === 'operation'"
        label="产品批次"
      />
      <el-table-column
        prop="operationName"
        v-if="type === 'operation'"
        label="工序名称"
      />
      <el-table-column
        prop="operationCode"
        v-if="type === 'operation'"
        label="工序编码"
      />
      <el-table-column prop="created" label="创建时间" />
    </el-table>
    <Pagination
      :total="currentOption.total"
      :page="currentOption.page"
      :limit="currentOption.limit"
      :pageSizes="currentOption.pageSizes"
      @pagination="getProdtData"
    />
    <div class="footer">
      <el-button class="btn" type="primary" @click="dialogvisable = false"
        >确定</el-button
      >
      <el-button class="btn" @click="dialogvisable = false">取消</el-button>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
const searchForm = ref({
  produdctName: "",
  produdctCode: "",
  batchNo: "",
  operationName: "",
  operationCode: "",
});

const currentOption = ref({
  total: 0,
  page: 1,
  limit: 10,
  pageSizes: [10, 20, 30, 40],
});

const dialogvisable = ref(false);
const tableData = ref([
  {
    produdctLineName: "微电子车间产线",
    produdctName: "产品A",
    produdctCode: "CODE001",
    batchNo: "BATCH001",
    operationName: "工序1",
    operationCode: "OP001",
    created: "2025-03-27 10:00:00",
  },
  {
    produdctLineName: "微电子车间产线",
    produdctName: "产品A",
    produdctCode: "CODE002",
    batchNo: "BATCH002",
    operationName: "工序2",
    operationCode: "OP002",
    created: "2025-03-27 11:00:00",
  },
  {
    produdctLineName: "微电子车间产线",
    produdctName: "产品B",
    produdctCode: "CODE003",
    batchNo: "BATCH003",
    operationName: "工序3",
    operationCode: "OP003",
    created: "2025-03-27 12:00:00",
  },
  {
    produdctLineName: "微电子车间产线",
    produdctName: "产品B",
    produdctCode: "CODE004",
    batchNo: "BATCH004",
    operationName: "工序4",
    operationCode: "OP004",
    created: "2025-03-27 13:00:00",
  },
  {
    produdctLineName: "微电子车间产线",
    produdctName: "产品C",
    produdctCode: "CODE005",
    batchNo: "BATCH005",
    operationName: "工序5",
    operationCode: "OP005",
    created: "2025-03-27 14:00:00",
  },
]);
const type = ref();

const open = (openType: String) => {
  dialogvisable.value = true;
  type.value = openType;
};

const getData = () => {
  console.log(searchForm.value);
};

const reset = () => {
  searchForm.value = {
    produdctName: "",
    produdctCode: "",
    batchNo: "",
    operationName: "",
    operationCode: "",
  };
};

const getProdtData = () => {
  console.log(tableData.value.length);
};

defineExpose({ open });
</script>

<css lang="scss" scope></css>
