<template>
  <div class="mesBusLog-container">
    <el-dialog v-model="state.isShowDialog" v-if="state.isShowDialog" width="90%" 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="equipmentCode">
                <el-input v-model="props.equipmentCode" placeholder="请输入点检设备" disabled clearable />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" class="mb20">
              <el-form-item label="设备名称" prop="equipmentName">
                <el-input v-model="props.equipmentName" placeholder="请输入设备名称" disabled clearable />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div>
          <div style="color:var(--el-color-primary);margin-bottom:10px;">维护项</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 prop="itemName" label="维护项" show-overflow-tooltip="">
              <template #default="scope">
                <span v-if="scope.row.itemInfo.itemName">{{scope.row.itemInfo.itemName}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="standVal" label="标准值" show-overflow-tooltip="" />
            <el-table-column prop="maxVal" label="上限" show-overflow-tooltip="" />
            <el-table-column prop="minVal" label="下限" show-overflow-tooltip="" />
            <el-table-column prop="opIntro" label="操作要点" show-overflow-tooltip="" />
            <el-table-column prop="itemProps" label="维护项属性" show-overflow-tooltip="">
              <template #default="scope">
                <span v-if="scope.row.itemInfo.itemProps">{{scope.row.itemInfo.itemProps}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="resultVal" label="结果" show-overflow-tooltip="">
              <template #default="scope">
                <el-input v-model="scope.row.resultVal" clearable></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="inspResult" label="结论" show-overflow-tooltip="">
              <template #default="scope">
                <el-select v-model="scope.row.inspResult" clearable>
                  <el-option  value="合格" label="合格"></el-option>
                  <el-option  value="不合格" label="不合格"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="reasoun" label="异常原因" show-overflow-tooltip="">
              <template #default="scope">
                <el-input v-model="scope.row.reasoun" clearable></el-input>
              </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 style="width:100%;display:flex;flex-direction: column;align-items: center;">
          <div style="margin-top:10px;display:flex;justify-content:space-between;width:5%;">
            <el-button type="primary" @click="submit">提 交</el-button>
            <el-button type="primary" @click="reset">重 置</el-button>
          </div>
        </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 { getEquipInspItems,saveEquipInspItems } from "/@/api/mes/mesControlBoard";

//父级传递来的参数
var props = defineProps({
	title: {
		type: String,
		default: '',
	},
  equipmentCode: {
    type: String,
    default: '',
  },
  equipmentName: {
    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 ruleForm = ref<any>({});
const handleQuery = async() => {
  loading.value = true;
  ruleForm.value.equipmentCode = props.equipmentCode
  let params = Object.assign(Object.assign(ruleForm.value, tableParams.value));
  var res = await getEquipInspItems(params);
  tableData.value = res.data.result ?? [];
  tableParams.value.total = <number>res.data.result?.total || 0;
  loading.value = false;
};

const state = reactive({
	isShowDialog: false,
});
// 选择行变更
const tableRef = ref();
const selectionList = ref([]);
const onSelectionChange = () => {
  selectionList.value = tableRef.value.getSelectionRows();
}
// 取消
const reset = () => {
	handleQuery();
};
// 签到
const submit = async () => {
  if(selectionList.value.length ==0) return ElMessage.warning('请选择维护项后操作');
  if(selectionList.value.some(item=> !item.inspResult || !item.resultVal)) return ElMessage.warning('请补充检验结果');
  await saveEquipInspItems({
        items:selectionList.value.map((item: any) => ({
          itemCode: item.itemCode,
             resultVal: item.resultVal,
             inspResult: item.inspResult,
             reasoun:item.reasoun
        })),
        equipmentCode:props.equipmentCode
      })
      ElMessage.success('提交成功');
      closeDialog()

};

// 页面加载时
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;
};

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




