<template>
  <div>
    <el-dialog title="数据关联" v-model="dialogVisible">
      <div>
        <div class="flex justify-between mb-3">
          <!-- <h3 class="flex items-center">
            本次数据集共包含
            <h2 style="color: #f56c6c; font-size: 30px">
              {{ state.dataCount.total }}人
            </h2>
            的数据，已上报
            <h2 style="color: #f56c6c; font-size: 30px">
              {{ state.dataCount.reported }}人
            </h2>
            ，未上报
            <h2 style="color: #f56c6c; font-size: 30px">
              {{ state.dataCount.notReported }}人
            </h2>
          </h3>
          <el-button type="primary" plain @click="getReportDataCount"
            >刷新</el-button
          > -->
          <el-button
            type="primary"
            plain
            @click="
              () => {
                getReportDataCount();
                getUserList();
              }
            "
            >刷新列表</el-button
          >
        </div>

        <el-table :data="state.tableData" class="w-full mt-4">
          <el-table-column prop="name" label="姓名"></el-table-column>
          <el-table-column prop="gender" label="性别"></el-table-column>
          <el-table-column label="检查时年龄 " prop="age"></el-table-column>
          <el-table-column label="ID " prop="userId"></el-table-column>
          <el-table-column label="手机号" prop="mobile"></el-table-column>
          <el-table-column label="身份证号" prop="IDCard"></el-table-column>
          <el-table-column label="注册状态" #default="{ row }">
            <span :class="registerStatus[row.registerStatus]?.class">{{
              registerStatus[row.registerStatus].label
            }}</span>
          </el-table-column>

          <el-table-column label="数据上报状态" #default="{ row }">
            <span :class="reportDataStatus[row.status]?.class">{{
              reportDataStatus[row.status].label
            }}</span>
          </el-table-column>
          <el-table-column label="数据批次号" prop="batchId"></el-table-column>
          <el-table-column label="数据关联状态" #default="{ row }">
            <span
              v-if="!row.registerStatus && row.status == 1"
              class="text-red-500"
              >注册后可关联</span
            >
            <span
              v-else-if="row.registerStatus != 1 && row.status != 1"
              class="text-red-500"
              >数据上报、注册后可关联</span
            >
            <span
              v-else-if="row.registerStatus == 1 && row.status != 1"
              class="text-red-500"
              >数据上报后可关联</span
            >
            <span
              v-else-if="
                row.registerStatus == 1 && row.status == 1 && !row.relateStatus
              "
              class="text-blue-500"
              >可关联</span
            >
            <span v-else>已关联</span>
          </el-table-column>
        </el-table>

        <el-pagination
          class="justify-end 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>
      <template #footer>
        <div>
          <div class="flex text-right justify-end">
            <el-text>符合数据关联（数据已上报且已注册档案的数据）共</el-text>
            <h2 style="color: #f56c6c; font-size: 30px">
              {{ state.dataCount.canRelate || 0 }}
            </h2>
            <el-text>条</el-text>
          </div>

          <el-button
            type="primary"
            @click="handleSubmit"
            :disabled="state.tableData.filter(v => v.relateStatus).length"
            >确认上报</el-button
          >
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import {
  ref,
  computed,
  defineProps,
  defineEmits,
  watch,
  reactive,
  h
} from "vue";
import { Search } from "@element-plus/icons-vue";
import { request } from "@/utils";
import { ElMessage, ElMessageBox } from "element-plus";
import { nextTick, title } from "process";

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

watch(
  () => dialogVisible.value,
  n => {
    if (n) {
      initData();
    } else {
    }
  }
);

const state = reactive({
  query: {
    key: "",
    value: "",
    page: 1,
    pageSize: 15
  },
  tableData: [],
  count: 0,
  dataCount: {},
  multipleSelection: []
});

const keyList = [
  {
    key: "name",
    name: "姓名"
  },
  {
    key: "user_id",
    name: "ID"
  },
  {
    key: "mobile",
    name: "手机号"
  },
  {
    key: "id_card",
    name: "身份证号"
  }
];

const registerStatus = {
  0: {
    label: "未注册",
    class: "text-yellow-500"
  },
  1: {
    label: "注册成功",
    class: "text-green-500"
  },
  2: {
    label: "注册失败",
    class: "text-red-500"
  }
};
const reportDataStatus = {
  0: {
    label: "未上报",
    class: "text-yellow-500"
  },
  1: {
    label: "上报成功",
    class: "text-green-500"
  },
  2: {
    label: "上报失败",
    class: "text-red-500"
  }
};
const multipleTableRef = ref();
const getUserList = () => {
  request
    .get("/dataService/dataParse/mechanism/parsed/users", {
      params: { ...state.query, dataId: props.id }
    })
    .then(resp => {
      let responseList = resp.data.list;

      state.tableData = responseList;
      state.count = resp.data.total;
      nextTick(() => {
        // 默认全选
        responseList.map(v => {
          responseList.map(v => {
            if (!v.status) {
              multipleTableRef.value!.toggleRowSelection(v);
            }
          });
        });
      });
    });
};
const getReportDataCount = () => {
  request
    .get("/dataService/dataParse/mechanism/parsed/users/count", {
      params: { dataId: props.id }
    })
    .then(resp => {
      state.dataCount = resp.data;
    });
};
const handleSelectionChange = val => {
  state.multipleSelection = val;
};
const handleSubmit = async () => {
  request
    .post("/dataService/dataParse/mechanism/parsed/relate", {
      dataId: props.id
    })
    .then(resp => {
      ElMessage.success(resp.message);
      dialogVisible.value = false;
      emits("success");
    });
};
const initData = () => {
  getUserList();
  getReportDataCount();
};
</script>
