<!-- 检定数据管理-批量编辑 -->
<script lang="ts" setup name="MeasureDataBatchEdit">
import { ElLoading, ElMessage } from 'element-plus'
import MeasureDataItem from './detail.vue'
import { updateMeasureData } from '@/api/business/taskMeasure/measureData'
const $router = useRouter()
const $route = useRoute()
const close = () => {
  $router.go(-1)
}
const batchEditRow = ref([]) as any // 批量编辑数据
onMounted(async () => {
  console.log('批量编辑从前一页获取的数据', JSON.parse($route.query.batchEditRow as string))
  batchEditRow.value = JSON.parse($route.query.batchEditRow as string)
})
// 保存
const measureRef = ref()
const save = async () => {
  // 1.先判断所有的表单验证
  let formValidate = true
  for (let i = 0; i < measureRef.value.length; i++) {
    try {
      const res = await measureRef.value[i].getFormRef().validate()
      if (!res) {
        formValidate = false
        ElMessage.error(`第${i + 1}个检定数据未通过校验`)
      }
    }
    catch (error) {
      console.log(error)
      formValidate = false
      ElMessage.error(`第${i + 1}个检定数据未通过校验`)
    }
    if (!formValidate) {
      break
    }
  }
  // 表单验证未通过
  if (!formValidate) {
    return
  }
  // 2.保存数据
  const loading = ElLoading.service({
    lock: true,
    background: 'rgba(255, 255, 255, 0.8)',
  })
  Promise.all(measureRef.value.map(async (item: any, index: number) => {
    try {
      const res = await updateMeasureData(item.solveSaveParams())
      // 保存成功后页面编辑状态置为detail
      item.setDetail()
      return Promise.resolve(res)
    }
    catch (error) {
      ElMessage.error(`第${index + 1}检定数据未保存成功`)
      return Promise.reject(error)
    }
  })).then((res) => {
    loading.close()
    ElMessage.success('保存成功')
  }).catch(() => {
    loading.close()
    console.log('未全部成功')
  })
}
</script>

<template>
  <app-container>
    <detail-page title="检定数据管理-批量编辑">
      <template #btns>
        <el-button type="primary" @click="save">
          保存
        </el-button>
        <el-button type="info" @click="close">
          关闭
        </el-button>
      </template>
    </detail-page>
    <div v-for="(item, index) in batchEditRow" :key="index" style="height: 350px; overflow-y: scroll;overflow-x: hidden;margin: 10px 0;background-color: transparent;border-radius: 8px;">
      <measure-data-item ref="measureRef" class="item" :batch-index="index" />
    </div>
  </app-container>
</template>

<style lang="scss" scoped>
// .item {
::v-deep(.app-container) {
  padding: 0 !important;
  overflow-x: hidden;
}
// }
</style>