<template>
  <div>
    <el-dialog
      title="查看数据"
      v-model="dialogVisible"
      fullscreen
      :show-close="false"
    >
      <template #header>
        <div class="text-right">
          <el-button type="danger" plain @click="dialogVisible = false"
            >关闭</el-button
          >
        </div>
      </template>
      <el-row :gutter="30">
        <el-col :span="8">
          <div>
            <div class="mb-2" style="">
              <el-input
                v-model="state.query.value"
                placeholder="请输入搜索内容"
                class="input-with-select"
                clearable
              >
                <template #prepend>
                  <el-select
                    v-model="state.query.key"
                    placeholder="请选择"
                    clearable
                    style="width: 115px"
                  >
                    <el-option
                      :label="item.name"
                      :value="item.key"
                      v-for="item in keyList"
                      :key="item.type"
                    />
                  </el-select>
                </template>
                <template #append>
                  <el-button :icon="Search" @click="handleSearch"
                    >搜索</el-button
                  >
                </template>
              </el-input>
            </div>
            <el-table
              :data="state.userTableData"
              style="width: 100%"
              @row-click="handleClickCell"
              highlight-current-row
            >
              <el-table-column>
                <template #default="{ row }">
                  <el-text>姓名：{{ row.name }}</el-text>
                </template>
              </el-table-column>
              <el-table-column>
                <template #default="{ row }">
                  <el-text>性别：{{ row.gender }}</el-text>
                </template>
              </el-table-column>
              <el-table-column>
                <template #default="{ row }">
                  <el-text>检查时年龄：{{ row.age }}岁</el-text>
                </template>
              </el-table-column>
              <el-table-column>
                <template #default="{ row }">
                  <el-text>{{ row.mergeArr.length + 1 }}项检查</el-text>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              class="justify-center mt-4"
              :current-page="state.query.page"
              :page-size="state.query.pageSize"
              :total="state.count"
              background
              layout="total, prev, pager, next, jumper"
              @current-change="
                page => {
                  state.query.page = page;
                  getUserList();
                }
              "
            ></el-pagination>
          </div>
        </el-col>
        <el-col :span="14">
          <div class="mb-3">
            <el-tag
              class="cursor-copy mr-2"
              size="large"
              v-copy:click="state.currentUserDetails[0]?.batchId"
              v-if="state.currentUserDetails[0]?.status == 1"
            >
              <span class="align-middle select-none"
                >数据批次号:{{ state.currentUserDetails[0].batchId }}</span
              >
              <CopyDocument class="inline-block align-middle ml-2 w-4 h-4" />
            </el-tag>
            <el-tag
              v-if="state.currentUserDetails[0]?.registerStatus == 1"
              class="cursor-copy"
              size="large"
              v-copy:click="state.currentUserDetails[0]?.archiveId || '-'"
            >
              <span class="align-middle select-none"
                >关联档案号:{{
                  state.currentUserDetails[0]?.archiveId || "-"
                }}</span
              >
              <CopyDocument class="inline-block align-middle ml-2 w-4 h-4" />
            </el-tag>
          </div>
          <div>
            <div>
              <h3 class="mb-2">用户信息</h3>
              <el-table :data="state.currentUserDetails" border>
                <el-table-column
                  header-align="center"
                  align="center"
                  prop="姓名"
                  label="姓名"
                >
                  <template #default="{ row }">
                    <el-text>{{ row?.name }}</el-text>
                  </template>
                </el-table-column>
                <el-table-column
                  header-align="center"
                  align="center"
                  label="性别"
                >
                  <template #default="{ row }">
                    <el-text>{{ row?.gender }}</el-text>
                  </template>
                </el-table-column>
                <el-table-column
                  header-align="center"
                  align="center"
                  label="检查时年龄"
                >
                  <template #default="{ row }">
                    <el-text>{{ row?.age }}岁</el-text>
                  </template>
                </el-table-column>
                <el-table-column
                  header-align="center"
                  align="center"
                  label="ID"
                >
                  <template #default="{ row }">
                    <el-text>{{ row?.userId }}</el-text>
                  </template>
                </el-table-column>
                <el-table-column
                  header-align="center"
                  align="center"
                  label="手机号"
                >
                  <template #default="{ row }">
                    <el-text>{{ row?.mobile }}</el-text>
                  </template>
                </el-table-column>
                <el-table-column
                  header-align="center"
                  align="center"
                  label="身份证号"
                >
                  <template #default="{ row }">
                    <el-text>{{ row?.IDCard }}</el-text>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div
              v-for="(item, index) in state.currentUserDetails[0]?.mergeArr"
              :key="index"
            >
              <h3 class="mb-3 mt-3">{{ item.title }}</h3>
              <el-table :data="item.children" border>
                <el-table-column
                  header-align="center"
                  align="center"
                  prop="name"
                  label="检查名称"
                >
                </el-table-column>
                <el-table-column
                  header-align="center"
                  align="center"
                  prop="value"
                  label="检查结果"
                >
                </el-table-column>
                <el-table-column
                  header-align="center"
                  align="center"
                  prop="unit"
                  label="单位 "
                >
                </el-table-column>
                <el-table-column
                  header-align="center"
                  align="center"
                  prop="scope"
                  label="范围"
                >
                </el-table-column>
                <el-table-column
                  header-align="center"
                  align="center"
                  prop="date"
                  label="检查日期 "
                >
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { request } from "@/utils";
import { ref, computed, defineProps, defineEmits, watch, reactive } from "vue";
import { Search } from "@element-plus/icons-vue";

const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  id: {
    type: [String, Number]
  }
});
const emits = defineEmits(["update:show"]);
const dialogVisible = computed({
  get() {
    return props.show;
  },
  set(n) {
    emits("update:show", n);
  }
});

watch(
  () => dialogVisible.value,
  n => {
    if (n) {
      initData();
    } else {
      onReset();
    }
  }
);
const state = reactive({
  details: {},
  query: {
    key: "",
    value: "",
    page: 1,
    pageSize: 15
  },
  count: 0,
  userTableData: [],
  currentUserDetails: []
});
const keyList = [
  {
    key: "name",
    name: "姓名"
  },
  {
    key: "user_id",
    name: "ID"
  },
  {
    key: "mobile",
    name: "手机号"
  },
  {
    key: "id_card",
    name: "身份证号"
  },
  {
    key: "archive_id",
    name: "档案号"
  },
  {
    key: "batch_id",
    name: "批次号"
  }
];
const getDetails = () => {};
const handleSearch = () => {
  state.query.page = 1;
  getUserList();
};

const handlerDatas = arr => {
  let obj = {};
  arr.forEach((item, index) => {
    let { belongTo } = item;
    if (!obj[belongTo]) {
      obj[belongTo] = {
        title: belongTo,
        children: []
      };
    }
    obj[belongTo].children.push(item);
  });
  let data = Object.values(obj); // 最终输出
  return data;
};

const getUserList = () => {
  request
    .get("/dataService/dataParse/mechanism/parsed/users", {
      params: { ...state.query, dataId: props.id }
    })
    .then(resp => {
      state.userTableData = resp?.data?.list.map(v => {
        v.data.forEach(vv => {
          vv["date"] = v.date;
        });
        v.mergeArr = handlerDatas(v.data, "belongTo");
        return v;
      });
      state.count = resp.data.total;
      if (resp.data.list.length) {
        state.currentUserDetails = [resp.data.list[0]];
      } else {
        state.currentUserDetails = [];
      }
      console.log("state.userTableData", state.userTableData);
    });
};
const handleClickCell = (row, column) => {
  state.currentUserDetails = [row];
};
const initData = () => {
  handleSearch();
};
const onReset = () => {
  state.currentUserDetails = [];
  state.query = {
    key: "",
    value: "",
    page: 1,
    pageSize: 15
  };
};
</script>
