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

        <div class="select">
          <a-select
            v-model:value="projectStatus"
            style="width: 270px"
            placeholder="请选择状态"
            :options="projectStateList"
            @change="handleProjectState"
            allowClear
          ></a-select>
        </div>
        <div class="select">
          <div class="select addTimeBox">
            <div class="addTime">创建时间：</div>
            <a-range-picker
              v-model:value="projectTime"
              style="width: 420px"
              format="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="tableDataFunc()"
        :data-source="tableData"
        :loading="tableDataTotal === -1 ? true : false"
        expandRowByClick="true"
        :scroll="{ x: 1500 }"
        @expand="expandTable"
        :pagination="false"
      />
    </div>
    <div class="pa">
      <a-pagination
        :showSizeChanger="false"
        showQuickJumper="true"
        hideOnSinglePage="true"
        :pageSize="pageSize"
        :current="currentPage"
        :total="tableDataTotal"
        class="pagination"
        @change="handelChangePage"
      />
    </div>
    <!-- 表格 -->
    <a-modal
      v-model:visible="newNext"
      :footer="null"
      :closable="false"
      style="margin-top: 250px"
      :centered="center"
    >
      <div class="out">
        <div class="top">
          <img class="topimg" src="../../assets/images/courseManage/add1.png" />
          <div class="topc">{{ !assessmentId ? "创建" : "编辑" }}评估</div>
          <div
            style="margin-left: 500px; cursor: pointer"
            @click="handleCancel"
          >
            <img
              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">
              <!-- <a-input
                v-model:value="assessmentName"
                show-count
                :maxlength="15"
                style="border-radius: 8px"
              /> -->
              <NameInput
                placeholder="请输入评估名称"
                v-model:value="assessmentName"
                v-model:validate="validate"
                :maxlength="15"
                show-count
                :type="4"
                :id="assessmentId ? assessmentId : null"
              ></NameInput>
            </div>
          </div>
          <div class="btn">
            <button class="samtn btn1" @click="handleCancel">取消</button>
            <button class="samtn btn2" @click="handleNext">
              {{ !assessmentId ? "下一步" : "确定" }}
            </button>
          </div>
        </div>
      </div></a-modal
    >
    <!--操作弹窗 -->
    <a-modal
      v-model:visible="delete_hs"
      :footer="null"
      :closable="closableQR"
      wrapClassName="DelModal"
      style="margin-top: 400px"
      @cancel="handleCancelModal"
    >
      <div class="delete" :style="{ display: delete_hs ? 'block' : 'none' }">
        <div class="del_header"></div>
        <div class="del_main">
          <div class="header">
            <img src="@/assets/images/coursewareManage/QR.png" alt="" />
            <span style="margin-left: 9px">提示</span>
            <div class="close_exit" @click="handleCancelModal"></div>
          </div>
          <div class="body">
            <div :style="{ display: del_hs ? 'block' : 'none' }">
              <span>您确定要删除此评估吗</span>
            </div>
            <div :style="{ display: over_hs ? 'block' : 'none' }">
              <span>您确定要结束此评估吗</span>
            </div>
            <div :style="{ display: copy_hs ? 'block' : 'none' }">
              <span>您确定要复制此评估吗</span>
            </div>
            <div :style="{ display: back_hs ? 'block' : 'none' }">
              <span>您确定要撤回此评估吗</span>
            </div>
            <div :style="{ display: pub_hs ? 'block' : 'none' }">
              <span>您确定要发布此评估吗</span>
            </div>
          </div>
          <div class="del_btnbox">
            <div class="del_btn btn1" @click="handleCancelModal">
              <div class="btnText">取消</div>
            </div>
            <div class="del_btn btn2" v-if="!addLoading" @click="handleSure">
              <div class="btnText">确定</div>
            </div>
            <div class="del_btn btn2" v-else>
              <div class="btnText">确定</div>
            </div>
          </div>
        </div>
      </div>
    </a-modal>
    <!--操作弹窗 -->
  </div>
  <!--  加载动画 -->
  <div
    class="aeLoading"
    style="z-index: 100"
    :style="{ display: addLoading ? 'flex' : 'none' }"
  >
    <a-spin :spinning="addLoading" tip="" />
  </div>
</template>
<script>
import { reactive, toRefs, onMounted, ref } from "vue";
// import { message } from "ant-design-vue";
import {
  queryResearchDetailList,
  editAssessmentName,
  editReleaseStatus,
  deleteResearch,
  createResearch,
} from "@/api/indexResearch";
import { traverseArr } from "../../utils/utils";
import { useRouter } from "vue-router";
import { toDate } from "../../api/method.js";
import store from "@/store";
import { message } from "ant-design-vue";
import NameInput from "@/components/project/NameInput";
import { validateName } from "@/api/index1";
export default {
  name: "learningPath",
  components: {
    NameInput,
  },
  setup() {
    const router = useRouter();
    const state = reactive({
      addLoading: false,
      // projectNameList: [
      //   {
      //     id: 1,
      //     value: "项目一",
      //     label: "项目一",
      //   },
      //   {
      //     id: 2,
      //     value: "项目二",
      //     label: "项目二",
      //   },
      //   {
      //     id: 3,
      //     value: "项目三",
      //     label: "项目三",
      //   },
      //   {
      //     id: 4,
      //     value: "项目四",
      //     label: "项目四",
      //   },
      // ],
      projectStateList: [
        {
          value: 1,
          label: "待发布", //发布
        },
        {
          value: 2,
          label: "已发布", //撤回
        },
        {
          value: 3,
          label: "已结束",
        },
      ],
      projectName: "",
      projectStatus: null,
      projectTime: "",

      newNext: false,
      number: null,
      selectTime: null,
      tableData: [
        // {
        //   key: 1,
        //   number: 1,
        //   manager: "产品经理评估",
        //   state: "已发布",
        //   creater: "管理员",
        //   pubtime: "2022-07-20 9:03",
        //   cretime: "2022-07-20 9:03",
        //   haspub: false,
        // },
        // {
        //   key: 2,
        //   number: 2,
        //   manager: "高级产品经理评估",
        //   state: "已发布",
        //   creater: "管理员",
        //   pubtime: "2022-07-20 9:03",
        //   cretime: "2022-07-20 9:03",
        //   haspub: false,
        // },
        // {
        //   key: 3,
        //   number: 3,
        //   manager: "管理者进阶腾飞班管理者进阶腾飞班评估",
        //   state: "待发布",
        //   creater: "管理员",
        //   pubtime: "2022-07-20 9:03",
        //   cretime: "2022-07-20 9:03",
        //   haspub: true,
        // },
        // {
        //   key: 4,
        //   number: 4,
        //   manager: "HR评估",
        //   state: "已结束",
        //   creater: "管理员",
        //   pubtime: "2022-07-20 9:03",
        //   cretime: "2022-07-20 9:03",
        //   haspub: true,
        // },
      ],
      currentPage: 1,
      tableDataTotal: 0,
      pageSize: 10,
      // value1: " ",

      assessmentId: "", //区分新建/编辑
      assessmentName: "",
      copyItem: {},

      value2: ref(),
      valueE: ref(" "),
      valueEE: ref(" "),
      valuei: ref(" "),
      delete_hs: false,
      del_hs: false,
      over_hs: false,
      copy_hs: false,
      back_hs: false,
      pub_hs: false,

      validate: true,
    });
    const tableDataFunc = () => {
      const columns = [
        //   {
        //       title: "序号",
        //       dataIndex: "number",
        //  //      key: "number",
        //     width: 100,
        //     align: "center",
        //    className: "h",
        //    customRender: ({ index }) => {
        //{ text, record, index, column }
        //      return index + 1;
        //   },
        //   },
        {
          title: "名称",
          dataIndex: "manager",
          key: "manager",
          width: "30%",
          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: "pubtime",
          key: "pubtime",
          width: "10%",
          align: "center",
          className: "h",
          customRender: ({ text }) => {
            return text ? text : "-";
          },
        },
        {
          title: "创建时间",
          dataIndex: "cretime",
          key: "cretime",
          width: "10%",
          align: "center",
          className: "h",
          customRender: ({ text }) => {
            return text ? text : "-";
          },
        },
        {
          title: "操作",
          className: "h",
          dataIndex: "opacation",
          key: "opacation",
          width: "20%",
          align: "center",
          fixed: "right",
        },
      ];
      return columns;
    };

    const getTableDate = async () => {
      // let data = state.tableData;
      state.addLoading = true;
      let startTime,
        endTime = "";
      if (state.projectTime) {
        startTime = toDate(
          new Date(state.projectTime[0].$d).getTime() / 1000,
          "Y-M-D"
        );
        endTime = toDate(
          new Date(state.projectTime[1].$d).getTime() / 1000,
          "Y-M-D"
        );
      }
      let res = await queryResearchDetailList({
        pageNo: state.currentPage,
        pageSize: state.pageSize,
        releaseStatus: state.projectStatus,
        assessmentName: state.projectName,
        searchEndTime: endTime,
        searchStartTime: startTime,
      });
      const { rows, total } = res.data.data;
      state.tableDataTotal = total;
      const data = traverseArr(
        rows,
        {
          key: "assessmentId",
          number: "assessmentId",
          manager: "assessmentName",
          state: "releaseStatus",
          creater: "createUserName",
          pubtime: "releaseTime",
          cretime: "createTime",
          haspub: "assessmentId",
        },
        true
      );
      state.addLoading = false;
      data.map((value) => {
        {
          //单层项目
          value.opacation = (
            <div class="operation">
              {value.state === "2" ? (
                <div class="fb">
                  <div
                    class="jc"
                    onClick={() => {
                      handleToManagepage(value, "/managepage");
                    }}
                  >
                    管理
                  </div>

                  <div
                    class="jc"
                    onClick={() => {
                      handleCopy(value);
                    }}
                  >
                    复制
                  </div>
                  <div
                    class="jc"
                    onClick={() => {
                      handleStatuts(value, "2");
                    }}
                  >
                    撤回
                  </div>
                  <div
                    class="jc"
                    onClick={() => {
                      handleStatuts(value, "3");
                    }}
                  >
                    结束
                  </div>
                </div>
              ) : (
                <div></div>
              )}
              {value.state === "1" ? (
                <div class="fb">
                  <div
                    class="jc"
                    onClick={() => {
                      handleStatuts(value, "1");
                    }}
                  >
                    发布
                  </div>
                  <div
                    class="jc"
                    onClick={() => {
                      handleToResearchadd(value, "/researchadd");
                    }}
                  >
                    基础信息
                  </div>
                  <div
                    class="jc"
                    onClick={() => {
                      handleCopy(value);
                    }}
                  >
                    复制
                  </div>
                  <div
                    class="jc"
                    onClick={() => {
                      handleEditName(value);
                    }}
                  >
                    编辑
                  </div>
                  <div
                    class="jc"
                    onClick={() => {
                      handleDel(value);
                    }}
                  >
                    删除
                  </div>
                </div>
              ) : (
                <div></div>
              )}
              {value.state === "3" ? (
                <div class="fb">
                  <div
                    class="jc"
                    onClick={() => {
                      handleCopy(value);
                    }}
                  >
                    复制
                  </div>
                  <div
                    class="jc"
                    onClick={() => {
                      handleDel(value);
                    }}
                  >
                    删除
                  </div>
                </div>
              ) : (
                <div></div>
              )}
            </div>
          );
        }
      });
      state.tableData = data;
    };
    getTableDate();
    const handelChangePage = (page, pageSize) => {
      state.currentPage = page;
      state.pageSize = pageSize;
      getTableDate();
    };
    const handleSearch = () => {
      getTableDate();
    };
    const handleRest = () => {
      state.projectName = "";
      state.projectStatus = null;
      state.projectTime = "";
      getTableDate();
    };

    const handleProjectState = (value) => {
      state.projectStatus = value;
    };
    const handleNew = () => {
      state.newNext = true;
    };
    const handleEditName = (item) => {
      state.id = item.id;
      state.assessmentName = item.assessmentName;
      state.newNext = true;
    };
    const handleNext = async () => {
      if (!state.id) {
        if (!state.assessmentName) {
          message.destroy();
          message.error("请输入评估名称");
          return false;
        }
        if (!state.validate) {
          message.destroy();
          return message.warning("该评估名称已存在");
        }
        const offName = await validateName({
          name: state.assessmentName,
          type: 4,
          id: state.id,
        }).then((res) => {
          return res.data.data == 1;
        });
        if (offName) {
          message.destroy();
          return message.warning("课程名称重复，请重新填写");
        }

        store.commit("SET_assessmentName", state.assessmentName);
        router.push("/researchadd");
        handleCancel();
      } else {
        if (!state.assessmentName) {
          message.destroy();
          message.error("请输入评估名称");
          return false;
        }
        editAssessmentName({
          assessmentId: state.id,
          assessmentName: state.assessmentName,
        }).then((res) => {
          if (res.data.code === 200) {
            getTableDate();
            handleCancel();
          }
        });
      }
    };
    const handleCancel = () => {
      state.id = "";
      state.assessmentName = "";
      // store.commit("SET_assessmentName", "");
      state.newNext = false;
    };

    const handleStatuts = (item, status) => {
      state.id = item.id;
      switch (status) {
        case "1":
          // 发布
          state.delete_hs = true;
          state.pub_hs = true;
          break;
        case "2":
          // 撤回
          state.delete_hs = true;
          state.back_hs = true;
          break;
        case "3":
          // 结束
          state.delete_hs = true;
          state.over_hs = true;
          break;
      }
    };
    const handleDel = (item) => {
      state.id = item.id;
      state.delete_hs = true;
      state.del_hs = true;
    };
    const handleCopy = (item) => {
      state.id = item.id;
      state.copyItem = item;
      state.delete_hs = true;
      state.copy_hs = true;
    };
    const handleSure = () => {
      // 发布
      if (state.pub_hs) {
        editReleaseStatus({
          assessmentId: state.id,
          releaseStatus: "2",
        }).then((res) => {
          console.log(res);
          handleCancelModal();
          getTableDate();
        });
      }
      // 撤回
      if (state.back_hs) {
        editReleaseStatus({
          assessmentId: state.id,
          releaseStatus: "1",
        }).then((res) => {
          console.log(res);
          handleCancelModal();
          getTableDate();
        });
      }
      // 结束
      if (state.over_hs) {
        editReleaseStatus({
          assessmentId: state.id,
          releaseStatus: "3",
        }).then((res) => {
          console.log(res);
          handleCancelModal();
          getTableDate();
        });
      }
      // 删除
      if (state.del_hs) {
        deleteResearch({
          assessmentId: Number(state.id),
        }).then((res) => {
          console.log(res);
          handleCancelModal();
          getTableDate();
        });
      }
      // 复制
      if (state.copy_hs) {
        state.addLoading = true;
        let resultPost = restData(state.copyItem);
        resultPost.assessmentName = resultPost.assessmentName + "(1)";
        console.log("resultPost");
        console.log(resultPost);
        createResearch(resultPost).then((res) => {
          state.addLoading = false;
          console.log(res);
          handleCancelModal();
          getTableDate();
        });
      }
    };
    const handleCancelModal = () => {
      state.id = "";
      state.delete_hs = false;
      state.del_hs = false;
      state.over_hs = false;
      state.copy_hs = false;
      state.back_hs = false;
      state.pub_hs = false;
    };
    const handleToManagepage = (item, path) => {
      router.push({
        path: path + "/" + item.id,
      });
    };
    const handleToResearchadd = (item, path) => {
      // console.log("item.id");
      // console.log(item.id);
      // console.log(item);
      router.push({
        path: path + "/" + item.id,
      });
    };

    onMounted(() => {
      // console.log("执行");
    });

    // 转换成后端格式
    const restData = (obj) => {
      const resultArr = {
        assessmentName: obj.assessmentName,
        assessmentMark: obj.assessmentMark,
        assessmentSingleChoiceDtoList: [],
        assessmentMultipleChoiceDtoList: [],
        assessmentEssayQuestionDtoList: [],
        assessmentScoringQuestionDtoList: [],
      };
      if (obj.singleStemVoList.length) {
        let single = obj.singleStemVoList;
        let singleArr = [];
        single.forEach((item) => {
          item.assessmentSingleChoiceVoList.forEach((itm) => {
            singleArr.push({
              singleStemName: item.singleStemName,
              questionType: item.questionType,
              orderNumber: item.orderNumber,
              optionOrderNum: itm.optionOrderNum,
              singleOptionName: itm.singleOptionName,
              singleOptionPictureAddress: itm.singleOptionPictureAddress,
            });
          });
        });
        resultArr.assessmentSingleChoiceDtoList = singleArr;
      }
      if (obj.multipleStemVoList.length) {
        let multi = obj.multipleStemVoList;
        let multiArr = [];
        multi.forEach((item) => {
          item.multipleChoiceVoList.forEach((itm) => {
            multiArr.push({
              multipleStemName: item.multipleStemName,
              questionType: item.questionType,
              orderNumber: item.orderNumber,
              optionOrderNum: itm.optionOrderNum,
              multipleOptionName: itm.multipleOptionName,
              multipleOptionPictureAddress: itm.multipleOptionPictureAddress,
            });
          });
        });
        resultArr.assessmentMultipleChoiceDtoList = multiArr;
      }
      if (obj.essayQuestionVoList.length) {
        let Ques = obj.essayQuestionVoList;
        let QuesArr = [];
        Ques.forEach((item) => {
          QuesArr.push({
            questionType: item.questionType,
            assessmentQaTitle: item.assessmentQaTitle,
            assessmentQaDescribe: item.assessmentQaDescribe,
            orderNumber: item.orderNumber,
          });
        });
        resultArr.assessmentEssayQuestionDtoList = QuesArr;
      }
      if (obj.scoringQuestionVoList.length) {
        let scor = obj.scoringQuestionVoList;
        let scorsArr = [];
        scor.forEach((item) => {
          scorsArr.push({
            questionType: item.questionType,
            assessmentScTitle: item.assessmentScTitle,
            assessmentMinScore: item.assessmentMinScore,
            assessmentMaxScore: item.assessmentMaxScore,
            weightScale: item.weightScale,
            orderNumber: item.orderNumber,
          });
        });
        resultArr.assessmentScoringQuestionDtoList = scorsArr;
      }
      console.log(111);
      console.log(resultArr);
      return resultArr;
    };

    const expandTable = (e, a) => {
      // console.log("惦记了");
      console.log("e", e, a);
    };
    const chooseImg = (id) => {
      console.log(id);
    };

    return {
      ...toRefs(state),
      handleProjectState,
      expandTable,
      tableDataFunc,
      chooseImg,
      getTableDate,
      handleCopy,
      handleSure,
      handleCancelModal,
      handelChangePage,
      handleSearch,
      handleRest,
      handleCancel,
      handleNext,
      handleNew,
      handleEditName,
      handleStatuts,
      handleDel,
      handleToManagepage,
      handleToResearchadd,
    };
  },
};
</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: 0px 26px 0px 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: 0px 26px 0px 26px;
        height: 38px;
        background: #ffffff;
        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: #4ea6ff;
          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/reset1.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: 0px 26px 0px 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: 0px;
        .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;
    }

    .ant-table-tbody
      > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
      > td {
      background: #f6f9fd;
    }
  }
  .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: 0px 1px 35px 0px 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: 0px;
                  left: 0px;
                  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>
