<template>
  <div class="mesBusLog-container">
    <el-dialog v-model="state.isShowDialog" v-if="state.isShowDialog" width="50%" 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="8" :xl="8" class="mb20">
              <el-form-item label="扫描模具条码" prop="moldCode">
                <el-input v-model="ruleForm.moldCode" placeholder=" "   clearable @keyup.enter.stop="getMoldList" style="width:100%"  >
                  <template #append>
                    <el-icon class="el-input__icon" style="cursor: pointer" @click="getMoldList">
                      <ele-FullScreen />
                    </el-icon>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div>
          <el-table :data="tableData" style="width: 100%" v-loading="loading" tooltip-effect="light" row-key="id" border="">
            <!-- <el-table-column type="selection" width="55" /> -->
            <el-table-column type="index" label="序号" width="55" align="center" />
            <el-table-column prop="moldCode" label="模具编码" show-overflow-tooltip="" />
            <el-table-column prop="moldName" label="模具名称" show-overflow-tooltip="" />
            <el-table-column prop="model" label="规格型号" show-overflow-tooltip="" />
            <el-table-column label="操作" width="120" align="center" fixed="right">
              <template #default="scope">
                <el-button icon="ele-Delete" size="small" type="primary" @click="subDelete(scope.row, scope.$index)"> 删除 </el-button>
              </template>
            </el-table-column>
          </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>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="relMoldHandle">确 定</el-button>
        </span>
      </template>
    </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 {queryMoldList, relMold} from "/@/api/mes/mesControlBoard";

//父级传递来的参数
var props = defineProps({
	title: {
		type: String,
		default: '',
	},
  produceWorkOrderNo: {
    type: String,
    default: '',
  },
});
const subDelete = (item,i)=>{
  tableData.value.splice(i,1);
}
//自行添加其他规则
const rules = ref<FormRules>({
  moldCode: [{ 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 = () => {};

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;
};

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

// 取消
const cancel = () => {
	state.isShowDialog = false;
};

const getMoldList = ()=>{
  ruleFormRef.value.validate(async (isValid: boolean, fields?: any) => {
    if (isValid) {
      let res = (await queryMoldList({
        keyword:ruleForm.value.moldCode,
        produceWorkOrderNo:props.produceWorkOrderNo
      }))?.data?.result || {};

      tableData.value.push({
        ...res,
        produceWorkOrderNo:props.produceWorkOrderNo
      })
    }

  });
}


const relMoldHandle = async ()=>{
  if(tableData.value.length == 0) return ElMessage.warning('请添加模具后操作');

  var dataRows = [];
  tableData.value.forEach((item:any)=>{
    dataRows.push({moldCode:item.moldCode,moldName:item.moldName});
  })

  await relMold({
    produceWorkOrderNo:tableData.value[0].produceWorkOrderNo,
    items:tableData.value
  })
  ElMessage.success('操作成功');
  closeDialog()
}

// 签到
const submit = async () => {
	ruleFormRef.value.validate(async (isValid: boolean, fields?: any) => {
		if (isValid) {
		}
	});
};

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




