<template>
  <div>
    <div v-if="transferRawJson[0]" class="p-2">

      <el-table :data="transferRawJson[0]?.bodyData">
        <el-table-column label="项目名称" prop="name"></el-table-column>
        <el-table-column label="检查结果">
          <template #default="{ row }">
            <el-input
              v-if="editMonitoring"
              v-model="row.value"
              placeholder="请输入"
            ></el-input>
            <span v-else>{{ row.value }}</span>
          </template>
        </el-table-column>
        <el-table-column label="参考范围">
          <template #default="{ row }">
            <el-input
              v-if="editMonitoring"
              v-model="row.reference"
              placeholder="请输入"
            ></el-input>
            <span v-else>{{ row.reference }}</span>
          </template>
        </el-table-column>
        <el-table-column label="单位">
          <template #default="{ row }">
            <el-input
              v-if="editMonitoring"
              v-model="row.unit"
              placeholder="请输入"
            ></el-input>
            <span v-else>{{ row.unit }}</span>
          </template>
        </el-table-column>
        <el-table-column label="检测时间">
          <template #default="{ row }">
            <el-date-picker
              v-if="editMonitoring"
              v-model="row.date"
              type="datetime"
              placeholder="请选择日期"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
            />
            <span v-else>{{
              dayjs(row.date).format("YYYY-MM-DD HH:mm:ss")
            }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="editMonitoring" label="操作">
          <template #default="{ row, $index }">
            <el-popconfirm
              title="是否确定删除?"
              @confirm="list.splice($index, 1)"
            >
              <template #reference>
                <el-button type="danger" link>删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div class="text-right mt-4">
        <el-button
          v-if="!editMonitoring"
          type="primary"
          plain
          @click="editMonitoring = true"
          >修改数据</el-button
        >
        <el-button v-else type="primary" @click="saveMonitoring"
          >保存</el-button
        >
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  computed,
  watch,
  ref,
  reactive,
  onMounted,
  shallowRef,
  provide,
  inject,
  defineAsyncComponent
} from "vue";

import { useRoute, useRouter } from "vue-router";
import {
  CopyDocument,
  Fold,
  ArrowLeft,
  ArrowRight
} from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { request, parseJsonData, findScope } from "@/utils";
import dayjs from "dayjs";

const [route, router] = [useRoute(), useRouter()];

const getDetail = inject("getDetail");
const transferRawJson = inject("transferRawJson");

const editMonitoring = ref(false);
const saveMonitoring = async () => {
  for (const item of transferRawJson.value[0]?.bodyData) {
    if ((!item.value && item.value !== 0) || !item.date) {
      return ElMessage.error("请填写必填项");
    }
  }
  console.log(transferRawJson.value);
  transferRawJson.value[0].bodyData = transferRawJson.value[0].bodyData.map(
    item => {
      const scope = findScope(item.reference);
      item.referenceStart = scope?.start || "";
      item.referenceEnd = scope?.end || "";
      item.date = dayjs(item.date).unix();
      return item;
    }
  );
  transferRawJson.value[0].date = dayjs(Date.now()).unix();
  if (!transferRawJson.value[0]?.surveyData) {
    transferRawJson.value[0].surveyData = [];
  }
  await request.post(
    `/idcService/mechanism/medicalData/update/transferResult`,
    {
      sn: route.query.sn,
      data: transferRawJson.value
    }
  );
  ElMessage.success("保存成功");
  editMonitoring.value = false;
  getDetail && getDetail();
};
</script>

<style lang="scss" scoped></style>
