<template>
  <div>
    <el-card class="box-card" shadow="never">
      <el-row>
        <el-col :span="12">
          <el-button
            type="primary"
            @click="
              () => {
                rowData = {};
                visibleEditSurveyResult = true;
              }
            "
            >新增定制体检</el-button
          >
        </el-col>
        <el-col :span="12" class="flex">
          <el-select
            class="w-100"
            v-model="query.method"
            placeholder="答题方式"
          >
            <el-option
              v-for="item in addTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-select
            class="ml-2"
            v-model="query.surveyId"
            placeholder="选择问卷"
            clearable
          >
            <el-option
              v-for="item in surveyList"
              :key="item.id"
              :label="item.label"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <el-input
            class="ml-2"
            v-model="query.key"
            placeholder="请输入答题人档案ID"
            clearable
          />
          <el-button
            class="ml-2"
            type="primary"
            :icon="Search"
            @click="onSearch"
            :loading="loading"
            >查询</el-button
          >
        </el-col>
      </el-row>
    </el-card>
    <div class="mt-4">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="问卷结果编号" />

        <el-table-column prop="nickname" label="问卷信息">
          <template #default="scope">
            <div class="flex items-center">
              <el-text tag="b">编号: </el-text>
              <el-text>{{ scope.row.surveyMechanismId }}</el-text>
              <ComponentCopy
                :content="scope.row.surveyMechanismId"
              ></ComponentCopy>
            </div>
            <div class="mt-2">
              <el-text tag="b">名称: </el-text>
              <el-text>{{ scope.row.surveyMechanism.name }}</el-text>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态">
          <template #default="scope">
            <el-tag v-if="scope.row.status == 3" class="ml-2" type="success"
              >已完成</el-tag
            >
            <el-tag
              v-else-if="scope.row.status == 1"
              class="ml-2"
              type="primary"
              >填写中</el-tag
            >
            <el-tag v-else class="ml-2" type="danger">待处理</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="roles" label="答题方式">
          <template #default="{ row }">
            <div></div>
            <el-text>{{ addTypeOptions[row.method].label }}</el-text>
          </template>
        </el-table-column>
        <el-table-column prop="roles" label="开始时间">
          <template #default="{ row }">
            <el-text>{{ row.startTime }}</el-text>
          </template>
        </el-table-column>
        <el-table-column prop="roles" label="结束时间">
          <template #default="{ row }">
            <el-text>{{ row.endTime }}</el-text>
          </template>
        </el-table-column>
        <el-table-column prop="roles" label="问卷耗时">
          <template #default="{ row }">
            <el-text>{{ getInterval(row.startTime, row.endTime) }}分钟</el-text>
          </template>
        </el-table-column>
        <el-table-column prop="roles" label="答题人档案ID">
          <template #default="{ row }">
            <el-text>{{ row.archivesId }}</el-text>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="操作" fixed="right" width="320">
          <template #default="scope">
            <el-space :size="size" spacer="|">
              <el-button
                type="primary"
                link
                :disabled="scope.row.status != 3"
                @click="
                  () => {
                    visibleViewResult = true;
                    rowData = scope.row;
                  }
                "
                >查看结果</el-button
              >
              <el-button
                type="primary"
                link
                :disabled="scope.row.method == 2"
                @click="
                  () => {
                    visibleEditArchives = true;
                    rowData = scope.row;
                  }
                "
                >修改答题人</el-button
              >
              <el-button
                type="primary"
                link
                :disabled="scope.row.method == 2"
                @click="
                  () => {
                    visibleAnswerSurvey = true;
                    rowData = scope.row;
                  }
                "
                >继续答题</el-button
              >
              <el-popconfirm
                title="确定要删除此问卷结果吗"
                @confirm="onDelete(scope.row.id)"
              >
                <template #reference>
                  <el-link type="danger" :disabled="scope.row.method == 2"
                    >删除</el-link
                  >
                </template>
              </el-popconfirm>
            </el-space>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        class="mt-4 justify-end"
        background
        :current-page="query.page"
        :page-size="query.pageSize"
        :total="total"
        layout="total, prev, pager, next"
        @current-change="onChangePage"
      ></el-pagination>
    </div>
    <ComponentEditSurveyResultModal
      v-model:show="visibleEditSurveyResult"
    ></ComponentEditSurveyResultModal>
    <ComponentDialogSurvey
      v-model:show="visibleAnswerSurvey"
      :id="rowData.surveyMechanismId"
      :resultId="rowData.id"
      @success="getList()"
    ></ComponentDialogSurvey>
    <ComponentEditArchivesModal
      v-model:show="visibleEditArchives"
      :rowData="rowData"
      @success="getList()"
    ></ComponentEditArchivesModal>

    <ComponentDialogViewSurveyResult
      v-model:show="visibleViewResult"
      :rowData="rowData"
    ></ComponentDialogViewSurveyResult>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount, reactive } from "vue";
import { Search } from "@element-plus/icons-vue";
import { request } from "@/utils/http";
import { getInterval } from "@/utils";
import ComponentEditSurveyResultModal from "./Components/EditSurveyResultModal.vue";
import ComponentDialogSurvey from "./Components/DialogSurvey.vue";
import ComponentEditArchivesModal from "./Components/EditArchivesModal.vue";
import ComponentDialogViewSurveyResult from "./Components/DialogViewSurveyResult.vue";
import ComponentCopy from "@/components/Copy/index.vue";

const tableData = ref([]);
const query = ref({
  page: 1,
  pageSize: 10,
  key: "",
  method: 0,
  surveyId: undefined
});
const addTypeOptions = reactive([
  {
    label: "全部",
    value: 0
  },
  {
    label: "机构添加",
    value: 1
  },
  {
    label: "自主答题",
    value: 2
  }
]);
const surveyList = ref([]);

const loading = ref(false);
const total = ref(0);
const visibleEditSurveyResult = ref(false);
const visibleEditArchives = ref(false);
const visibleAnswerSurvey = ref(false);
const visibleViewResult = ref(false);
const rowData = ref({});

const getList = () => {
  loading.value = true;
  request
    .get("/surveyService/mechanism/surveyResult/paginate", {
      params: query.value
    })
    .then(resp => {
      tableData.value = resp.data.list;
      total.value = resp.data.total;
    })
    .finally(() => {
      loading.value = false;
    });
};
/**
 * 获取问卷列表
 */
const getSurveyList = () => {
  request
    .get("/surveyService/mechanism/survey/paginate", {
      params: {
        key: undefined,
        pageSize: 999
      }
    })
    .then(resp => {
      surveyList.value = resp.data.list.map(v => {
        return {
          ...v,
          label: `${v.name}（${v.surveyId}）`
        };
      });
    });
};

const onSearch = () => {
  query.value.page = 1;
  getList();
};
const onChangePage = page => {
  query.value.page = page;
  getList();
};
const handleEdit = row => {
  rowData.value = row;
  visibleEditSurveyResult.value = true;
};

const onDelete = id => {
  if (!id) return;
  request
    .post("/surveyService/mechanism/surveyResult/delete", { id })
    .then(resp => {
      ElMessage.success(resp.message);
      getList();
    });
};

/** 使用公共函数，避免`removeEventListener`失效 */
function onkeypress({ code }: KeyboardEvent) {
  if (code === "Enter") {
    onSearch();
  }
}

onMounted(() => {
  window.document.addEventListener("keypress", onkeypress);
});

onBeforeUnmount(() => {
  window.document.removeEventListener("keypress", onkeypress);
});

const initData = () => {
  getList();
  getSurveyList();
};
initData();
</script>
