<template>
  <el-dialog
    title="添加工序"
    v-model="visible"
    width="800px"
    append-to-body
    draggable
    @close="close"
  >
    <el-form ref="dialogForm" class="master-container" :model="queryParams">
      <div style="display: flex">
        <el-form-item
          label="工序编码："
          prop="processCode"
          label-width="100px"
          style="margin-top: 20px"
        >
          <el-input
            v-model.trim="queryParams.processCode"
            type="text"
            @keydown.enter.prevent
            style="width: 180px"
            placeholder="请输入工序编码"
            :clearable="true"
            @keyup.enter="handleSearch"
          />
        </el-form-item>
        <el-form-item
          label="工序简称："
          prop="processAlias"
          label-width="100px"
          style="margin-top: 20px"
        >
          <el-input
            v-model.trim="queryParams.processAlias"
            type="text"
            style="width: 180px"
            placeholder="请输入工序简称"
            :clearable="true"
            @keydown.enter.prevent
            @keyup.enter="handleSearch"
          />
        </el-form-item>
        <el-form-item label-width="20px" style="margin-top: 20px">
          <el-button
            type="info"
            icon="Search"
            size="default"
            @click="handleSearch"
            >搜索</el-button
          >
        </el-form-item>
      </div>
    </el-form>
    <el-table
      ref="dialogTable"
      :data="processList"
      :row-key="getRowKey"
      size="small"
      v-loading="loading"
      border
      height="370px"
      header-row-class-name="list-header-row"
      row-class-name="list-row"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="40"
        align="center"
        :reserve-selection="true"
      />
      <el-table-column type="index" label="行号" width="50" align="center" />
      <el-table-column label="工序编码" align="center" prop="processCode" />
      <el-table-column label="工序简称" align="center" prop="processAlias" />
      <el-table-column label="工序状态" align="center" prop="status">
        <template #default="scope">
          <dict-tag :options="process_status" :value="scope.row.status" />
        </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"
    />
    <template #footer>
      <div class="dialog-footer">
        <el-button
          type="primary"
          icon="Check"
          :disabled="selections.length == 0"
          @click="handleMultipleSelected"
          >确定</el-button
        >
        <el-button icon="Close" @click="close">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref } from "@vue/reactivity";
import { listFilterProcess } from "@/api/business/process";
const { proxy } = getCurrentInstance();
/** 字典数组区 */
const { process_status } = proxy.useDict("process_status");
/** 弹窗变量 */
const total = ref(0);
const props = defineProps({
  multipleSelected: {
    type: Function,
    default: null,
  },
});
const { multipleSelected } = toRefs(props);
const processList = ref([]);
const visible = ref(false);
const loading = ref(false);
const selections = ref([]);
/** 查询对象 */
const data = reactive({
  queryParams: {
    pageSize: 10,
    pageNum: 1,
  },
});

const { queryParams } = toRefs(data);

/***********************  方法区  ****************************/
/** 获取行 id */
function getRowKey(row) {
  return row.id;
}

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

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

/**
 * 加载数据
 */
function getList() {
  loading.value = true;
  queryParams.value.status = "NA";
  listFilterProcess(queryParams.value).then((res) => {
    processList.value = res.rows;
    total.value = res.total;
    loading.value = false;
  });
}

/**
 * 列表checkbox列选择 事件
 */
function handleSelectionChange(selection) {
  console.log(selection);
  selections.value = selection;
}

/**  搜索 事件 */
function handleSearch(type) {
  if (type && type === "clear") {
    queryParams.value = {
      processAlias: "",
      total: 0,
      pageSize: 10,
      pageNum: 1,
    };
  }
  getList();
}

/** 多选事件 */
function handleMultipleSelected() {
  if (multipleSelected.value) {
    multipleSelected.value(selections.value);
  }
  close();
}

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