shan<!-- 评估管理页面 -->
<template>
  <div class="researchmanage">
    <!-- 搜索框及按钮 -->
    <div class="filter">
      <div class="filterItems">
        <div class="select">
          <a-input
            v-model:value="searchData.assessmentName"
            style="width: 270px; height: 40px; border-radius: 8px"
            placeholder="请输入评估名称"
          />
        </div>

        <div class="select">
          <a-select
            v-model:value="searchData.releaseStatus"
            style="width: 270px"
            placeholder="请选择状态"
            :options="projectStateList"
            allowClear
          ></a-select>
        </div>
        <div class="select">
          <div class="select addTimeBox">
            <div class="addTime">创建时间：</div>
            <a-range-picker
              v-model:value="dateTime"
              style="width: 420px"
              @change="timeChange"
              format="YYYY-MM-DD"
              valueFormat="YYYY-MM-DD"
              separator="至"
              :placeholder="['      开始时间', '        结束时间']"
            />
          </div>
        </div>
        <div style="display: flex; margin-bottom: 20px">
          <div class="btn btn1" @click="handleSearch">
            <div class="search"></div>
            <div class="btnText">搜索</div>
          </div>
          <div class="btnn btn2" @click="handleRest" style="width: 105px">
            <div class="search"></div>
            <div class="btnText">重置</div>
          </div>
        </div>
      </div>
      <div class="btns">
        <div class="btn btn3" @click="handleNew">
          <div class="search"></div>
          <div class="btnText">创建评估</div>
        </div>
      </div>
    </div>
    <!-- 搜索框及按钮 -->
    <!-- 表格 -->
    <div class="tableBox">
      <a-table
        style="border: 1px solid #f2f6fe"
        :columns="column"
        :data-source="data"
        :loading="loading"
        :scroll="{ x: 1500 }"
        :pagination="false"
      >
        <template #operation="{ record }">
          <a-space style="padding-right: 10px">
            <a-button
              v-if="
                record.releaseStatus === '1'
              "
              @click="handleOper(record, 'push')"
              type="link"
              >发布
            </a-button>
            <a-button
              v-if="
                record.releaseStatus === '1'
              "
              @click="editOper(record)"
              type="link"
              >编辑
            </a-button>
            <a-button
              v-if="
                record.releaseStatus === '1'
              "
              @click="handleEditPage(record.id)"
              type="link"
              >基础信息
            </a-button>
            <a-button
              v-if="
                record.releaseStatus === '2'
              "
              @click="toManage(record.id, record)"
              type="link"
              >管理
            </a-button>
            <a-button
              v-if="checkPer(record.permissions)"
              @click="handleOper(record, 'copy')"
              type="link"
              >复制
            </a-button>
            <a-button
              v-if="
                record.releaseStatus === '2'
              "
              @click="() => handleOper(record, 'withdraw')"
              type="link"
              >撤回
            </a-button>
            <a-button
              v-if="
                record.releaseStatus === '2'
              "
              @click="handleOper(record, 'end')"
              type="link"
              >结束
            </a-button>
            <a-button
              v-if="
                record.releaseStatus !== '2'
              "
              @click="handleOper(record, 'del')"
              type="link"
              >删除
            </a-button>
          </a-space>
        </template>
      </a-table>
    </div>
    <div class="pa">
      <a-pagination
        :showSizeChanger="false"
        :showQuickJumper="true"
        :hideOnSinglePage="true"
        :pageSize="searchData.pageSize"
        :current="searchData.pageNo"
        :total="total"
        class="pagination"
        @change="handelChangePage"
      />
    </div>
    <!-- 表格 -->
    <a-modal
      v-model:visible="newNext"
      :footer="null"
      :closable="false"
      style="margin-top: 250px"
      :centered="true"
      :maskClosable="false"
    >
      <div class="out">
        <div class="top">
          <img alt="add" class="topimg" src="../../assets/images/courseManage/add1.png" />
          <div class="topc">{{ !formData.id ? "创建" : "编辑" }}评估</div>
          <div
            style="margin-left: 500px; cursor: pointer"
            @click="handleCancel"
          >
            <img
              alt="close"
              style="width: 20px; height: 20px"
              src="../../assets/images/basicinfo/close.png"
            />
          </div>
        </div>
        <div class="mid clearfix">
          <div class="name">
            <div class="inname">评估名称</div>
            <div class="in">
              <NameInput
                ref="nameRef"
                placeholder="请输入评估名称"
                v-model:value="formData.assessmentName"
                v-model:validated="formData.validated"
                :id="formData.id"
                :maxlength="15"
                show-count
                :type="4"
              ></NameInput>
            </div>
          </div>
          <div class="btn">
            <button class="samtn btn2" @click="handleCancel">取消</button>
            <a-button
              class="samtn btn2"
              @click="handleNext"
              :loading="formData.validated === 1"
            >
              {{ !formData.id ? "下一步" : "确定" }}
            </a-button>
          </div>
        </div>
      </div>
    </a-modal>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import {
  createResearch,
  deleteResearch,
  editAssessmentName,
  editReleaseStatus,
} from "@/api/indexResearch";
import { checkPer } from "@/utils/utils";
import { Form, message } from "ant-design-vue";
import NameInput from "@/components/project/NameInput";
import { useRowsPage } from "@/api/request";
import { ASSESSMENT_PAGE } from "@/api/apis";
import { useRouter } from "vue-router";
import dialog from "@/utils/dialog";

const router = useRouter();
const projectStateList = [
  {
    value: null,
    label: "请选择状态", //发布
  },
  {
    value: 1,
    label: "待发布", //发布
  },
  {
    value: 2,
    label: "已发布", //撤回
  },
  {
    value: 3,
    label: "已结束",
  },
];

const column = [
  {
    title: "名称",
    dataIndex: "assessmentName",
    key: "assessmentName",
    width: "20%",
    align: "center",
    ellipsis: true,
    className: "h",
    customRender: ({ text }) => {
      return text ? text : "-";
    },
  },
  {
    title: "状态",
    dataIndex: "state",
    key: "state",
    width: "10%",
    align: "center",
    className: "h",
    customRender: ({ record }) => {
      switch (record.releaseStatus) {
        case "1":
          return "待发布";
        case "2":
          return "已发布";
        case "3":
          return "已结束";
      }
    },
  },
  {
    title: "创建人",
    dataIndex: "createName",
    key: "createName",
    width: "10%",
    align: "center",
    className: "h",
    customRender: ({ text }) => {
      return text ? text : "-";
    },
  },
  {
    title: "发布时间",
    dataIndex: "releaseTime",
    key: "releaseTime",
    width: "10%",
    align: "center",
    className: "h",
    customRender: ({ text }) => {
      return text ? text : "-";
    },
  },
  {
    title: "创建时间",
    dataIndex: "createTime",
    key: "createTime",
    width: "10%",
    align: "center",
    className: "h",
    customRender: ({ text }) => {
      return text ? text : "-";
    },
  },
  {
    title: "操作",
    width: "20%",
    className: "h",
    dataIndex: "id",
    key: "id",
    fixed: "right",
    align: "right",
    slots: { customRender: "operation" },
  },
];
const searchData = ref({
  pageNo: 1,
  pageSize: 10,
  releaseStatus: null,
  assessmentName: "",
  searchEndTime: "",
  searchStartTime: "",
});
const formData = ref({
  assessmentName: "",
  id: "",
  validated: 0,
});

onMounted(() => {
  // 是否需要触发新建弹框
  let str = location.href;
  let isOpen = str.includes("openCreate=true");
  if (isOpen) {
    newNext.value = true;
  }
});

const newNext = ref(false);
const dateTime = ref([]);
const nameRef = ref();
const rulesRef = ref({
  assessmentName: [
    {
      required: true,
      message: "请输入评估名称",
    },
  ],
});

const { resetFields } = Form.useForm(searchData, {});
const { resetFields: resetFormFields, validate } = Form.useForm(
  formData,
  rulesRef
);

const { data, total, loading, fetch } = useRowsPage(
  ASSESSMENT_PAGE,
  searchData.value
);
const handle = (record) => ({
  push: () => {
    message.info("发布成功！");
    record.releaseStatus = "2";
    editReleaseStatus({ assessmentId: record.id, releaseStatus: 2 });
  },
  withdraw: () => {
    message.info("撤回成功！");
    record.releaseStatus = "1";
    editReleaseStatus({ assessmentId: record.id, releaseStatus: 1 });
  },
  end: () => {
    message.info("结束成功！");
    record.releaseStatus = "3";
    editReleaseStatus({ assessmentId: record.id, releaseStatus: 3 });
  },
  del: async () => {
    loading.value = true;
    await deleteResearch({ assessmentId: record.id }).then(()=>{
      message.info("删除成功！");
      fetch();
    }).catch(() => loading.value = false)
  },
  copy: async () => {
    loading.value = true;
    message.info("复制成功！");
    record.id = null;

    if (record.essayQuestionVoList) {
      record.essayQuestionVoList.forEach((item) => {
        item.id = null;
      });
    }
    //多选题
    let assessmentMultipleChoiceDtoList = [];
    if (record.multipleStemVoList) {
      record.multipleStemVoList.forEach((item) => {
        item.multipleChoiceVoList.forEach((a) => {
          a.id = null;
          assessmentMultipleChoiceDtoList.push(a);
        });
      });
    }
    if (record.scoringQuestionVoList) {
      record.scoringQuestionVoList.forEach((item) => {
        item.id = null;
      });
    }
    //单选题
    let assessmentSingleChoiceDtoList = [];
    if (record.singleStemVoList) {
      record.singleStemVoList.forEach((item) => {
        item.assessmentSingleChoiceVoList.forEach((a) => {
          a.id = null;
          assessmentSingleChoiceDtoList.push(a);
        });
      });
    }
    console.log("record", record);
    console.log("复制传参", {
      ...record,
      assessmentName: record.assessmentName + "(1)",
    });
    let newObj = {
      assessmentEssayQuestionDtoList: record.essayQuestionVoList,
      assessmentMultipleChoiceDtoList: assessmentMultipleChoiceDtoList,
      assessmentScoringQuestionDtoList: record.scoringQuestionVoList,
      assessmentSingleChoiceDtoList: assessmentSingleChoiceDtoList,
      assessmentMark: record.assessmentMark,
    };
    console.log("newObj", newObj);
    await createResearch({
      ...newObj,
      assessmentName: record.assessmentName + "(1)",
    });
    fetch();
  },
});
const handleMsg = {
  push: "您确定要发布此评估吗",
  withdraw: "您确定要撤回此评估吗",
  end: "您确定要结束此评估吗",
  del: "您确定要删除此评估吗",
  copy: "您确定要复制此评估吗",
};

function handleOper(record, type) {
  dialog({ content: handleMsg[type], ok: handle(record)[type] });
}

function editOper(record) {
  formData.value = { ...record };
  newNext.value = true;
}

const handelChangePage = (page) => {
  searchData.value.pageNo = page;
  fetch();
};

function timeChange(time, timeStr) {
  searchData.value.searchStartTime = timeStr[0];
  searchData.value.searchEndTime = timeStr[1];
}

const handleSearch = () => {
  fetch();
};
const handleRest = () => {
  dateTime.value = [];
  resetFields();
  fetch();
};

function handleCancel() {
  resetFormFields();
  formData.value.id = null
  newNext.value = false;
}

const handleNew = () => {
  formData.value.assessmentName = ''
  newNext.value = true;
};

function handleEditPage(id) {
  router.push("/researchadd/" + id);
}

function toManage(id, record) {
  router.push({
    path: `/managepage/${id}`,
    query: { createName: record.createName, createTime: record.createTime },
  });
}

const handleNext = async () => {
  await validate().catch(({ errorFields }) => {
    message.warning(errorFields[0].errors.join());
    throw Error("数据校验不通过");
  });
  if (!formData.value.validated) {
    message.warning("名称重复");
    return;
  }
  if (!formData.value.id) {
    router.push({
      path: "/researchadd",
      query: { name: formData.value.assessmentName },
    });
  } else {
    newNext.value = false;
    loading.value = true;
    message.info("编辑成功！");
    await editAssessmentName({
      assessmentId: formData.value.id,
      assessmentName: formData.value.assessmentName,
    });
    fetch();
    formData.value.id = null
  }
};
</script>
<style lang="scss">
.clearfix:before,
.clearfix:after {
  content: " ";
  display: block;
  clear: both;
}

.addTimeBox {
  position: relative;
  display: flex;
  align-items: center;

  .addTime {
    position: absolute;
    z-index: 10;
    margin-left: 10px;
    color: rgba(0, 0, 0, 0.4);
  }

  .ant-picker {
    padding-left: 85px;
  }

  .ant-picker-range .ant-picker-active-bar {
    margin-left: 85px;
  }
}

.out {
  //display: flex;
  display: block;
  position: absolute;
  width: 680px;
  // height: 525px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(118, 136, 166, 0.21);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  .top {
    width: 100%;
    height: 68px;

    background: linear-gradient(
      rgba(78, 166, 255, 0.2) 0%,
      rgba(78, 166, 255, 0) 100%
    );
    display: flex;
    align-items: center;

    .topimg {
      width: 18px;
      height: 18px;
      margin-left: 27px;
    }

    .topc {
      color: #000000;
      font-size: 16px;
      margin-left: 8px;
    }
  }

  .mid {
    width: 100%;
    height: 100%;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;

    .d {
      // margin-top: 8px;
      // color: #ff4e4e;
      margin-left: -5px;
    }

    .name {
      width: 78%;
      // background-color: lightcoral;
      display: flex;
      margin-top: 20px;
      align-items: center;
      height: 40px;
      // border: 1px solid black;

      .inname {
        color: #6f6f6f;
        font-size: 14px;
        margin-left: 7px;
      }

      .in {
        margin-left: 14px;
        width: 81%;

        .ant-input {
          border-radius: 5px;
          // height: 120%;
          width: 100%;
          height: 30px;
        }

        .showcount {
          position: absolute;
          right: 10px;
          color: #c7cbd2;
          bottom: 5px;
        }
      }
    }

    .btn {
      width: 33%;
      margin-top: 30px;
      display: flex;
      justify-content: space-between;
      margin-bottom: 30px;

      .samtn {
        width: 100px;
        height: 40px;
        font-size: 14px;
        border: 1px solid #4ea6ff;
        border-radius: 8px;
        cursor: pointer;
      }

      .btn1 {
        background-color: #fff;
        color: #4ea6ff;
      }

      .btn2 {
        margin-left: 10px;
        background-color: #4ea6ff;
        color: #fff;
      }
    }
  }
}

.researchmanage {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;

  .filter {
    margin-left: 38px;
    margin-right: 38px;
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    .filterItems {
      display: flex;
      flex-wrap: wrap;

      .select {
        margin-right: 20px;
        margin-bottom: 20px;
      }

      .btn {
        padding: 0 26px 0 26px;
        height: 38px;
        background: #4ea6ff;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 14px;
        flex-shrink: 0;
        cursor: pointer;

        .search {
          background-size: 100%;
        }

        .btnText {
          font-size: 14px;
          font-weight: 400;
          color: #ffffff;
          line-height: 36px;
          margin-left: 5px;
        }
      }

      .btnn {
        padding: 0 26px 0 26px;
        height: 38px;
        background: #4ea6ff;
        border-radius: 8px;
        border: 1px solid rgba(64, 158, 255, 1);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 14px;
        flex-shrink: 0;
        cursor: pointer;

        .search {
          background-size: 100%;
        }

        .btnText {
          font-size: 14px;
          font-weight: 400;
          color: #fff;
          line-height: 36px;
          margin-left: 5px;
        }
      }

      .btn1 {
        .search {
          width: 15px;
          height: 17px;
          background-image: url("../../assets/images/courseManage/search0.png");
        }
      }

      .btn2 {
        .search {
          width: 16px;
          height: 18px;
          background-image: url("../../assets/images/courseManage/reset0.png");
        }
      }

      // .btn1:hover {
      //   background: rgba(64, 158, 255, 0.76);

      //   .search {
      //     background-image: url("../../assets/images/courseManage/search0.png");
      //   }

      //   .btnText {
      //     color: #ffffff;
      //   }
      // }

      .btn1:active {
        background: #0982ff;
      }

      // .btn2:hover {
      //   background: rgba(64, 158, 255, 0.1);
      // }

      .btn2:active {
        background: rgba(64, 158, 255, 0.2);
      }
    }

    .btns {
      display: flex;

      .btn {
        padding: 0 26px;
        height: 38px;
        background: #4ea6ff;
        border-radius: 8px;
        //border: 1px solid rgba(64, 158, 255, 1);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 14px;
        flex-shrink: 0;
        cursor: pointer;

        .search {
          background-size: 100%;
        }

        .btnText {
          font-size: 14px;
          font-weight: 400;
          color: #ffffff;
          line-height: 36px;
          margin-left: 5px;
        }
      }

      .btn3 {
        margin-right: 0;

        .search {
          width: 17px;
          height: 18px;
          background-image: url("../../assets/images/courseManage/add0.png");
        }
      }

      // .btn3:hover {
      //   background: rgba(64, 158, 255, 0.76);

      //   .search {
      //     background-image: url("../../assets/images/courseManage/add0.png");
      //   }

      //   .btnText {
      //     color: #ffffff;
      //   }
      // }

      .btn3:active {
        background: #0982ff;
      }
    }
  }

  .tableBox {
    margin: 20px 38px 30px;
    display: flex;
    flex: 1;
    flex-direction: column;

    th.ant-table-cell {
      background-color: #eff4fc !important;
      text-align: center;
      color: #999ba3;
    }

    td.ant-table-cell {
      text-align: center;
    }
  }

  .pa {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 20px;

    .pagination {
      margin-bottom: 20px;
    }

    .ant-pagination-item-link,
    .ant-pagination-item,
    .ant-select-selector,
    .ant-pagination-options-quick-jumper input {
      border-radius: 8px;
    }
  }

  .unout {
    display: none;
  }

  .operation {
    display: flex;
    justify-content: right;

    .fb {
      display: flex;
      margin-right: 20px;

      .jc {
        color: #4ea6ff;
        font-size: 14px;
        margin-left: 20px;
        white-space: nowrap;
        cursor: pointer;
      }
    }
  }
}

.DelModal {
  .ant-modal {
    .ant-modal-content {
      width: 424px !important;

      .ant-modal-body {
        .delete {
          z-index: 9999;
          width: 424px;
          background: #ffffff;
          box-shadow: 0 1px 35px 0 rgba(118, 136, 166, 0.21);
          border-radius: 4px;
          position: absolute;
          left: 50%;
          top: 10%;
          transform: translate(-50%, -50%);

          .del_header {
            position: absolute;
            width: calc(100%);
            height: 40px;
            background: linear-gradient(
              rgba(78, 166, 255, 0.2) 0%,
              rgba(78, 166, 255, 0) 100%
            );
          }

          .del_main {
            width: 100%;
            position: relative;

            .header {
              display: flex;
              align-items: center;
              padding-top: 20px;
              padding-left: 26px;
              font-size: 16px;

              .del-icon {
                width: 16px;
                height: 16px;
                position: relative;
                margin-right: 10px;

                img {
                  width: 100%;
                  height: 100%;
                  position: absolute;
                  top: 0;
                  left: 0;
                  background-size: 100% 100%;
                }
              }

              .icon {
                width: 16px;
                height: 16px;
                margin-right: 10px;
                background-image: url(@/assets/images/coursewareManage/QR.png);
                background-size: 100% 100%;
              }

              .close_exit {
                position: absolute;
                right: 42px;
                cursor: pointer;
                width: 20px;
                height: 20px;
                background-image: url(@/assets/images/coursewareManage/close.png);
                background-size: 100% 100%;
              }
            }

            .body {
              width: 100%;
              margin: 34px auto 56px auto;
              display: flex;
              justify-content: center;
              align-items: center;
            }

            .del_btnbox {
              display: flex;
              margin: 30px auto;
              justify-content: center;

              .del_btn {
                width: 100px;
                height: 40px;
                background: rgba(64, 158, 255, 0);
                border-radius: 8px;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-right: 14px;
                flex-shrink: 0;
                cursor: pointer;

                .btnText {
                  font-size: 14px;
                  font-weight: 400;
                  line-height: 40px;
                }
              }

              .btn1 {
                border: 1px solid rgba(64, 158, 255, 1);
                color: #4ea6ff;
              }

              .btn2 {
                background-color: #4ea6ff;
                color: #ffffff;
              }
            }
          }
        }
      }
    }
  }
}
</style>