<template>
  <div class="mesBusLog-container">
    <el-dialog v-model="state.isShowDialog" v-if="state.isShowDialog" width="75%" draggable="" :close-on-click-modal="false">
      <template #header>
        <div style="color: #fff">
          <span>{{ props.title }}</span>
        </div>
      </template>
      <div style="width:100%;">
        <el-form :model="ruleForm" ref="ruleFormRef" label-width="auto" :rules="rules">
          <el-row :gutter="35">
            <el-col :xs="24" :sm="12" :md="12" :lg="4" :xl="4" class="mb20">
              <el-form-item label="工单号" prop="produceWorkOrderNo">
                <el-input v-model="ruleForm.produceWorkOrderNo" placeholder="请输入工单号" clearable />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="4" :xl="4" class="mb20">
              <el-form-item label="产品编码" prop="productCode">
                <el-input v-model="ruleForm.productCode" placeholder="请输入产品编码" clearable />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="4" :xl="4" class="mb20">
              <el-form-item label="产品名称" prop="productName">
                <el-input v-model="ruleForm.productName" placeholder="请输入产品名称" clearable />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="4" :xl="4" class="mb20">
              <el-form-item label="工序" prop="processCode">
                <el-select filterable="" v-model="ruleForm.processCode" placeholder="请选择工序" clearable >
										<el-option v-for="(item, index) in mesProcessProcessCodeDropdownList" :key="index" :value="item.value" :label="`[${item.value}]${item.label}`" />
									</el-select>
              </el-form-item>
            </el-col>

           
            <!-- <el-col :xs="24" :sm="12" :md="12" :lg="4" :xl="4" class="mb20">
              <el-form-item label="客户编码" prop="customerCode">
                <el-input v-model="ruleForm.customerCode" placeholder="请输入客户编码" clearable />
              </el-form-item>
            </el-col> -->
            <el-col :xs="24" :sm="12" :md="12" :lg="4" :xl="4" class="mb20">
              <el-form-item label="批次号" prop="batchNo">
                <el-input v-model="ruleForm.batchNo" placeholder="请输入批次号" clearable />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="4" :xl="4" class="mb20">
              <el-form-item label="规格型号" prop="specs">
                <el-input v-model="ruleForm.specs" placeholder="请输入规格型号" clearable />
              </el-form-item>
            </el-col>
            <!-- <el-col :xs="24" :sm="12" :md="12" :lg="4" :xl="4" class="mb20">
              <el-form-item label="完工日期">
                <el-date-picker style="width:48%" v-model="ruleForm.startPlanEndDate" placeholder="请选择开始日期" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
                <el-date-picker style="width:48%"  v-model="ruleForm.endPlanEndDate" placeholder="请选择结束日期" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
              </el-form-item>
            </el-col> -->
            <el-col :xs="24" :sm="12" :md="12" :lg="4" :xl="4" class="mb20">
                <el-button  @click="ruleForm={}">重置</el-button>
                <el-button type="primary" @click="handleQuery" style="margin: 0 10px;">搜索</el-button>
                <el-button type="success" @click="submit" :disabled="selectionList.length !=1">选择</el-button>
<!--                <el-button type="warning" @click="reset">选 择</el-button>-->
            </el-col>
          </el-row>
        </el-form>
        <div>
          <el-table :data="tableData" ref="tableRef" style="width: 100%" v-loading="loading" tooltip-effect="light" row-key="id" border="" @selection-change="onSelectionChange">
            <el-table-column type="selection" width="55" />
            <el-table-column type="index" label="序号" width="55" align="center" />
            <el-table-column label="" show-overflow-tooltip="" width="60">
              <template #default="scope">
                  <el-link @click="onChooseOne(scope.row)" type="warning">选择</el-link>
              </template>
            </el-table-column>
            <el-table-column prop="produceWorkOrderStatus" label="状态" show-overflow-tooltip="">
              <template #default="scope">
                  <span v-if="scope.row.produceWorkOrderStatus==0">未开立</span>
                  <span v-if="scope.row.produceWorkOrderStatus==1">已开立</span>
                  <span v-if="scope.row.produceWorkOrderStatus==2">已完成</span>
              </template>
            </el-table-column>
            <el-table-column prop="produceWorkOrderNo" label="工单号" width="120" show-overflow-tooltip="" />
            <el-table-column prop="batchNo" label="批次号" width="150"  />
            <!-- <el-table-column prop="customerName" label="客户" show-overflow-tooltip="" /> -->
            <el-table-column prop="processCode" label="工序" width="100" >
              <template #default="scope">
                [{{ scope.row.processCode }}]{{ scope.row.processName }}
              </template>
            </el-table-column>
            <el-table-column prop="partName" label="零件名称" width="150" />
            <el-table-column prop="planNum" label="工单数量" show-overflow-tooltip="" />
            <!-- <el-table-column prop="planNumM" label="工单数量（m）" show-overflow-tooltip="" /> -->
            <el-table-column prop="finishNum" label="完工数量" show-overflow-tooltip="" />
            <el-table-column prop="startWorkDate" label="开工日期" width="130"  show-overflow-tooltip="" />
            <el-table-column prop="endWorkDate" label="完工日期" width="130"  show-overflow-tooltip="" />
            <el-table-column prop="productName" label="产品名称" width="150"  />
            <el-table-column prop="partCode" label="零件编码" width="150" />           
            <el-table-column prop="productCode" label="产品编码" width="150" />            
            <el-table-column prop="specs" label="规格型号" width="150" />
           
            <!-- <el-table-column prop="cmdNo" label="指令号" show-overflow-tooltip="" /> -->
            <!-- <el-table-column prop="productPcs" label="出数PCS" show-overflow-tooltip="" /> -->
           
            <!-- <el-table-column prop="workShopName" label="工段名称" show-overflow-tooltip="" /> -->
<!--            <el-table-column prop="week" label="线体" show-overflow-tooltip="" />-->
            <!-- <el-table-column prop="workTeamSeqItemCode" label="班次" show-overflow-tooltip="" /> -->
         
           
            <!-- <el-table-column prop="finishNumM" label="完工数量(m)" show-overflow-tooltip="" /> -->
<!--            <el-table-column prop="week" label="未完工数量" show-overflow-tooltip="" />-->
          </el-table>
           <el-pagination v-model:currentPage="tableParams.page" v-model:page-size="tableParams.pageSize" :total="tableParams.total" :page-sizes="[10, 20, 50, 100, 200, 500]" small="" background="" @size-change="handleSizeChange" @current-change="handleCurrentChange" layout="total, sizes, prev, pager, next, jumper" />
        </div>
      </div>
    </el-dialog>
  </div>
</template>
    <style lang="scss" scoped>
:deep(.el-select),
:deep(.el-input-number) {
	width: 100%;
}
</style>
    <script lang="ts" setup>
import { ref, onMounted, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import type { FormRules } from 'element-plus';
import { formatDate } from '/@/utils/formatTime';
import {pageMesProduceOrder} from "/@/api/mes/mesProduceOrder";
import {getWorkOrderPage} from "/@/api/mes/mesControlBoard";
import { getMesProcessProcessCodeDropdown } from '/@/api/mes/mesRuleProductCapacity';

//父级传递来的参数
var props = defineProps({
	title: {
		type: String,
		default: '',
	},
  getProduceWorkOrderNo:{
    type:Function,
    default:()=>{}
  },
  processCode:{
    type:String,
    default:''
  }
});

//自行添加其他规则
const rules = ref<FormRules>({
	busCode: [{ required: true, message: '请输入业务编码！', trigger: 'blur' }],
});

//父级传递来的函数，用于回调
const emit = defineEmits(['reloadTable']);
const ruleFormRef = ref();
const tableData = ref<any>([]);
const loading = ref(false);
const tableParams = ref({
	page: 1,
	pageSize: 10,
	total: 0,
});

const handleSizeChange = (val: number) => {
	tableParams.value.pageSize = val;
	handleQuery();
};
// 改变页码序号
const handleCurrentChange = (val: number) => {
	tableParams.value.page = val;
	handleQuery();
};
const handleQuery = async () => {
  loading.value = true;
  let params = Object.assign(Object.assign(ruleForm.value, tableParams.value));
  var res = await getWorkOrderPage(params);
  tableData.value = res.data.result?.items ?? [];
  tableParams.value.total = <number>res.data.result?.total || 0;
  loading.value = false;
};
const ruleForm = ref<any>({});
const state = reactive({
	isShowDialog: false,
});

// 页面加载时
onMounted(() => {});

// 打开弹窗
const openDialog = async (row: any) => {
	// 改用detail获取最新数据来编辑
	let rowData = JSON.parse(JSON.stringify(row));
	state.isShowDialog = true;
  ruleForm.value = {};
  handleQuery()
};

// 关闭弹窗
const closeDialog = () => {
	emit('reloadTable');
	state.isShowDialog = false;
};

// 取消
const cancel = () => {
	state.isShowDialog = false;
};
const selectionList = ref([]);
const tableRef = ref();
const onSelectionChange = () => {
  selectionList.value = tableRef.value.getSelectionRows();
}
// 确定
const submit = async () => {
	// ruleFormRef.value.validate(async (isValid: boolean, fields?: any) => {
	// 	if (isValid) {
	// 	}
	// });
  if(props.getProduceWorkOrderNo) props.getProduceWorkOrderNo(selectionList.value?.[0])
  closeDialog();

};

const onChooseOne = (item:any)=>{
  if(props.getProduceWorkOrderNo) props.getProduceWorkOrderNo(item)
  closeDialog();
}

const mesProcessProcessCodeDropdownList = ref<any>([]);
const getMesProcessProcessCodeDropdownList = async () => {
	let list = await getMesProcessProcessCodeDropdown();
	mesProcessProcessCodeDropdownList.value = list.data.result ?? [];
};
getMesProcessProcessCodeDropdownList();

//将属性或者函数暴露给父组件
defineExpose({ openDialog });
</script>




