<template>
  <el-dialog title="生产计划分配" v-model="visible" width="900px" @close="close" append-to-body draggable>
    <el-form ref="dialogForm" class="master-container" :model="queryParams">
      <div style="display: flex; margin-top: 12px">
        <el-form-item label="生产计划单号：" prop="productionPlanNo" label-width="120px">
          <el-input v-model.trim="queryParams.productionPlanNo" type="text" @keydown.enter.prevent style="width: 180px"
                    placeholder="请输入生产计划单号" :clearable="true" @keyup.enter="handleSearch"/>
        </el-form-item>
        <el-form-item label="产品描述：" prop="productDescription" label-width="120px">
          <el-input v-model.trim="queryParams.productDescription" type="text" @keydown.enter.prevent
                    style="width: 180px" placeholder="请输入产品描述" :clearable="true" @keyup.enter="handleSearch"/>
        </el-form-item>
        <el-form-item label-width="20px">
          <el-button type="info" icon="Search" @click="handleSearch">搜索</el-button>
        </el-form-item>
      </div>
    </el-form>

    <el-table ref="dialogTable" :data="subDetailList" :row-key="getRowKey" size="small" v-loading="loading" border
              height="360px" 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="生产计划单号" prop="productionPlanNo" width="110" align="center"/>
      <el-table-column label="序号" width="60" prop="lineNumber" align="center"/>
      <el-table-column label="产品描述" prop="productDescription" width="auto" align="center"/>
      <el-table-column label="工艺版本" prop="technologyVersion" width="70" align="center"/>
      <el-table-column label="投产日期" prop="issuanceDate" width="100" align="center">
        <template #default="scope">
                <span>{{
                    proxy.moment(scope.row.issuanceDate).format("YYYY-MM-DD")
                  }}</span>
        </template>
      </el-table-column>
      <el-table-column label="批次数" prop="lotTotalNumber" width="70" align="center"></el-table-column>
      <el-table-column label="待投产批数" prop="dayWorkLot" width="100" align="center">
      </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'
import {listProductionPlanDetailList} from '@/api/business/productionPlanDetail.js'

const {proxy} = getCurrentInstance()
/**生产计划分配弹窗变量  */
const total = ref(0)
const props = defineProps({
  multiple: {
    type: Boolean,
    default: false
  },
  multipleSelected: {
    type: Function,
    default: null
  }
})
const {multipleSelected} = toRefs(props)
const subDetailList = 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(row) {
  queryParams.value.pageNum = 1
  visible.value = true
  if (row) {
    queryParams.value.deptId = row.deptId
    queryParams.value.resourceGroupId = row.resourceGroupId
    getList()
  }
}

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

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

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


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

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

defineExpose({
  open
})
</script>
  