<template>
  <div>
    <el-card shadow="never">
      <div>
        <el-row>
          <el-col class="" :span="6">
            <el-button type="primary" @click="state.visibleAdd = true"
              >新增数据集</el-button
            >
          </el-col>
          <el-col :span="18">
            <div class="text-right">
              <el-input
                style="width: 500px"
                class="ml-2"
                v-model="state.query.name"
                placeholder="搜索名称"
                clearable
              ></el-input>
              <el-button class="ml-2" type="primary" @click="handleSearch"
                >查询</el-button
              >
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <el-card shadow="never" class="mt-4">
      <el-table :data="state.tableData" style="width: 100%">
        <el-table-column prop="name" label="数据集名称"> </el-table-column>
        <el-table-column prop="createdAt" label="数据上传时间">
        </el-table-column>
        <el-table-column prop="fileCount" label="上传文件数"> </el-table-column>
        <el-table-column prop="userCount" label="包含用户数"> </el-table-column>
        <el-table-column prop="itemCount" label="包含检查项目数">
        </el-table-column>
        <el-table-column label="操作" #default="{ row }">
          <el-button type="primary" link @click="handleViewData(row)"
            >查看数据</el-button
          >
          <el-button type="primary" link @click="handleReportData(row)"
            >上报数据</el-button
          >
          <el-button type="primary" link @click="handleRegister(row)"
            >档案注册</el-button
          >
          <el-button type="primary" link @click="handleRelevance(row)"
            >数据关联</el-button
          >

          <el-popconfirm
            title="确定要删除这个数据集吗？删除后整理的数据都将被删除"
            @confirm="handleDelete(row.id)"
          >
            <template #reference>
              <el-button type="danger" link>删除</el-button>
            </template>
          </el-popconfirm>
        </el-table-column>
      </el-table>
      <el-pagination
        class="justify-end mt-4"
        :current-page="state.query.page"
        :page-size="state.query.pageSize"
        :total="state.total"
        background
        layout="total, prev, pager, next, jumper"
        @current-change="
          page => {
            state.query.page = page;
            getList();
          }
        "
      ></el-pagination>
    </el-card>
    <DialogAddDataSet
      v-model:show="state.visibleAdd"
      @success="handleSearch"
    ></DialogAddDataSet>
    <DialogReportData
      v-model:show="state.visibleReportData"
      :id="state.rowData.id"
    ></DialogReportData>
    <DialogRegisterData
      v-model:show="state.visibleRegisterData"
      :id="state.rowData.id"
    >
    </DialogRegisterData>
    <DialogViewData
      v-model:show="state.visibleViewData"
      :id="state.rowData.id"
    ></DialogViewData>
    <DialogRelevance
      v-model:show="state.visibleRelevance"
      :id="state.rowData.id"
    ></DialogRelevance>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive } from "vue";
import DialogAddDataSet from "./components/DialogAddDataSet.vue";
import DialogReportData from "@/views/dataCenter/components/DialogReportData.vue";
import DialogViewData from "./components/DialogViewData.vue";
import DialogRegisterData from "./components/DialogRegisterData.vue";
import DialogRelevance from "./components/DialogRelevance.vue";

import { request } from "@/utils";
import { ElMessage } from "element-plus";

const state = reactive({
  visibleAdd: false,
  visibleReportData: false,
  visibleViewData: false,
  visibleRegisterData: false,
  visibleRelevance: false,
  query: {
    name: "",
    page: 1,
    pageSize: 15
  },
  tableData: [],
  total: 0,
  rowData: {}
});
const handleReportData = row => {
  state.visibleReportData = true;
  state.rowData = row;
};
const handleRegister = row => {
  state.rowData = row;
  state.visibleRegisterData = true;
};
const handleSearch = () => {
  state.query.page = 1;
  getList();
};
const handleViewData = row => {
  state.rowData = row;
  state.visibleViewData = true;
};
const handleRelevance = row => {
  state.rowData = row;
  state.visibleRelevance = true;
};
const getList = () => {
  request
    .get("/dataService/dataParse/mechanism/parsed/paginate", {
      params: state.query
    })
    .then(resp => {
      state.tableData = resp.data.list;
      state.total = resp.data.total;
    });
};
const handleDelete = id => {
  request
    .post("/dataService/dataParse/mechanism/parsed/delete", {
      id
    })
    .then(resp => {
      ElMessage.success(resp.message);
    });
};
getList();
</script>
