<template>
  <el-dialog
    title="选择客户"
    v-model="visible"
    width="1300px"
    height="400px"
    @close="close"
    append-to-body
    draggable
  >
    <el-form
      ref="dialogForm"
      class="master-container"
      :model="queryParams"
      :inline="true"
      style="align-items: center"
    >
      <div style="display: flex">
        <el-form-item label="计划单号：" prop="productionPlanNo" style="margin-top: 10px;">
          <el-input
            v-model.trim="queryParams.productionPlanNo"
            type="text"
            @keydown.enter.prevent
            style="width: 120px"
            placeholder="请输入计划单号"
            :clearable="true"
            @keyup.enter="handleSearch"
          />
        </el-form-item>
        <el-form-item label="图号：" prop="drawingNumber" style="margin-top: 10px;">
          <el-input
            v-model.trim="queryParams.drawingNumber"
            type="text"
            @keydown.enter.prevent
            style="width: 120px"
            placeholder="请输入图号"
            :clearable="true"
            @keyup.enter="handleSearch"
          />
        </el-form-item>
        <el-form-item label="规格：" prop="specification" style="margin-top: 10px;">
          <el-input
            v-model.trim="queryParams.specification"
            type="text"
            @keydown.enter.prevent
            style="width: 120px"
            placeholder="请输入规格"
            :clearable="true"
            @keyup.enter="handleSearch"
          />
        </el-form-item>
        <el-form-item label="产品描述：" prop="productDescription" style="margin-top: 10px;">
          <el-input
            v-model.trim="queryParams.productDescription"
            type="text"
            @keydown.enter.prevent
            style="width: 120px"
            placeholder="请输入产品描述"
            :clearable="true"
            @keyup.enter="handleSearch"
          />
        </el-form-item>
        <el-form-item label="客户简称：" prop="companyAlias" style="margin-top: 10px;">
          <el-input
            v-model.trim="queryParams.companyAlias"
            type="text"
            @keydown.enter.prevent
            style="width: 120px"
            placeholder="请输入客户简称"
            :clearable="true"
            @keyup.enter="handleSearch"
          />
        </el-form-item>
        <el-form-item style="margin-top: 10px;">
          <el-button type="info" icon="Search" @click="handleSearch" 
            >搜索</el-button
          >
        </el-form-item>
      </div>
    </el-form>

    <el-table
      ref="dialogTable"
      :data="dataList"
      size="small"
      v-loading="loading"
      border
      height="370px"
    >
      <el-table-column type="index" label="行号" width="50" align="center" />
      <el-table-column label="计划单号" align="center" prop="productionPlanNo" width="120" />
      <el-table-column
        label="序号"
        align="center"
        prop="lineNumber"
        width="70"
      />
      <el-table-column
        label="图号"
        align="center"
        prop="drawingNumber"
        width="120"
      />
      <el-table-column
        label="规格"
        align="center"
        prop="specification"
        width="120"
      />
      <el-table-column
        label="产品描述"
        align="center"
        prop="productDescription"
  
      />
      <el-table-column
        label="客户简称"
        align="center"
        prop="companyAlias"
        width="120"
      />
      <el-table-column label="操作" width="64" align="center">
        <template #default="scope">
          <el-button
            type="success"
            icon="finished"
            circle
            @click="handleSingleSelected(scope.row)"
          />
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </el-dialog>
</template>
<script setup>
import { listProductionPlanDetail } from "@/api/business/productionPlanDetail";
const { proxy } = getCurrentInstance();
/** 字典数组区 */
const { process_status } = proxy.useDict("process_status");
/** 工序变量 */
const total = ref(0);
const props = defineProps({
  singleSelected: {
    type: Function,
    default: null,
  },
});

const { singleSelected } = toRefs(props);
const dataList = ref([]);
const visible = ref(false);
const loading = ref(false);
const queryParams = ref({
  productionPlanNo: null,
  pageNum: 1,
  pageSize: 10,
  companyAlias: null,
});

/**
 * 对话框打开 事件
 */
function open() {
  visible.value = true;
  getList();
}

/**
 * 对话框关闭 事件
 */
function close() {
  proxy.$refs.dialogForm.resetFields();
  proxy.$refs.dialogTable.clearSelection();
  queryParams.value.pageNum = 1;
  visible.value = false;
}

/**
 * 加载数据
 */
function getList() {
  loading.value = true;
  listProductionPlanDetail(queryParams.value).then((res) => {
    dataList.value = res.rows;
    total.value = res.total;
    loading.value = false;
  });
}


/**  搜索 事件 */
function handleSearch() {
  getList();
}

/** 单选事件 */
function handleSingleSelected(row) {
  if (singleSelected.value) {
    singleSelected.value(row);
  }
  close();
}

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