<template>
  <el-dialog title="添加工序" v-model="visible" width="600px" @close="close" append-to-body draggable>
    <el-form ref="dialogForm" class="master-container" :model="queryParams">
      <div style="display: flex">
        <el-form-item label="工序简称：" prop="processAlias" label-width="100px">
          <el-input
            v-model.trim="queryParams.processAlias"
            size="small"
            type="text"
            style="width: 180px"
            placeholder="请输入工序简称"
            :clearable="true"
          />
        </el-form-item>
        <el-form-item label-width="20px">
          <el-button type="success" icon="Search" size="small" @click="handleSearch">搜索</el-button>
          <el-button type="primary" icon="Delete" size="small" plain @click="handleSearch('clear')">清空</el-button>
        </el-form-item>
      </div>
    </el-form>

    <el-table
      ref="dialogTable"
      :data="processList"
      :row-key="getRowKey"
      size="small"
      v-loading="loading"
      border
      height="500px"
      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>
    <el-pagination class="pagination-container" background layout="prev, pager, next" :total="total" @pagination="getList"> </el-pagination>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" icon="Finished" :disabled="selections.length === 0" @click="handleMultipleSelected">确认添加</el-button>
        <el-button @click="close">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref } from '@vue/reactivity'
import { listProcess } from '@/api/business/process'
const { proxy } = getCurrentInstance()
const { process_status } = proxy.useDict('process_status')
const total = ref(0)
const props = defineProps({
  multiple: {
    type: Boolean,
    default: false
  },
  selected: {
    type: Array,
    defalut: []
  },
  singleSelected: {
    type: Function,
    default: null
  },
  multipleSelected: {
    type: Function,
    default: null
  }
})

const { singleSelected, multipleSelected, selected } = toRefs(props)
const processList = ref([])
const visible = ref(false)
const loading = ref(false)
const data = reactive({
  queryParams: {
    pageSize: 10,
    pageNum: 1
  }
})
const selections = ref([])
const { queryParams } = toRefs(data)

/** 获取行 id */
function getRowKey(row) {
  return row.id
}

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

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

/**
 * 加载数据
 */
function getList() {
  loading.value = true
  listProcess(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 selectable(row, index) {
  if (selected.value.length > 0) {
    return !selected.value.some((l) => l.personId === row.id)
  } else {
    return true
  }
}

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

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

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

defineExpose({
  open
})
</script>
<style scoped></style>
