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

        <div class="select">
          <a-select
            v-model:value="searchData.status"
            style="width: 270px"
            placeholder="请选择状态"
            :options="projectStateList"
            allowClear
          ></a-select>
        </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="handleAddAudienceClick">
          <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="tableData"
        :loading="loading"
        :scroll="{ x: 1500 }"
        :pagination="false"
      >
        <template #operation="{ record }">
          <a-space style="padding-right: 10px">
            <a-button
              @click="handleEditPage(record)"
              type="link"
              >
              编辑
            </a-button>
            <a-button
              @click="handleCopyClick(record)"
              type="link"
              >复制
            </a-button>
            <a-button
              v-if="
                record.status === 0
              "
              @click="handlePublish(record,1)"
              type="link"
              >发布
            </a-button>
            <a-button
              v-if="
                record.status === 1
              "
              @click="handleStopClick(record)"
              type="link"
              >停用
            </a-button>
            <a-button
              v-if="
                record.status === 2
              "
              @click="handlePublish(record,2)"
              type="link"
              >启用
            </a-button>
            
            <a-button
              v-if="
                record.status != 1
              "
              @click="handleDeleteClick(record)"
              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="tableTotal"
        class="pagination"
        @change="handelChangePage"
      />
    </div>
    <!-- 表格 -->
    <a-modal
      v-model:visible="newNext"
      :footer="null"
      :closable="false"
      style="margin-top: 250px"
      :centered="true"
    >
      <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>
    <a-modal
      v-model:visible="visibleCopyAudience"
      title="复制受众"
      width="680px"
      @ok="handleCopy"
      @cancel="handleCopyCancel"
      okText="确认">
      <div style="margin: 20px 20px">
        <a-form
          name="basic"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 16 }"
          autocomplete="off"
          
        >
          <a-form-item
            label="受众名称"
            name="audienceName"
          >
            <a-input style="width:300px" show-count :maxlength="30" v-model:value="audienceName" placeholder="请填写受众名称" />
          </a-form-item>
        </a-form>
      </div>
    </a-modal>
    <a-modal
      v-model:visible="visibleCopyAudience1"
      :footer="null"
      :closable="false"
      style="margin-top: 250px"
      :centered="true"
    >
      <div class="out">
        <div class="top">
          <!-- <img alt="add" class="topimg" src="../../assets/images/courseManage/add1.png" /> -->
          <div class="topc">复制受众</div>
          <div
            style="margin-left: 500px; cursor: pointer"
            @click="handleCopyCancel"
          >
            <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> -->
              <a-input v-model:value="audienceName" placeholder="请输入受众名称" :maxlength="30" show-count/>
            </div>
          </div>
          <div class="btn">
            <button class="samtn btn2" @click="handleCopyCancel">取消</button>
            <a-button
              class="samtn btn2"
              @click="handleCopy"
            >
              确定
            </a-button>
          </div>
        </div>
      </div>
    </a-modal>
    <!-- <a-modal
      v-model:visible="visibleDeleteAudience"
      :footer="null"
      :closable="false"
      style="margin-top: 250px"
      :centered="true"
    >
      <div class="out">
        <div class="top">
          <div class="topc">删除受众</div>
          <div
            style="margin-left: 500px; cursor: pointer"
            @click="handleDeleteCancel"
          >
            <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" style="fontSize:20px">您确定要删除此受众吗？</div>
          </div>
          <div class="btn">
            <button class="samtn btn2" @click="handleDeleteCancel">取消</button>
            <a-button
              class="samtn btn2"
              @click="handleDelete"
            >
              确定
            </a-button>
          </div>
        </div>
      </div>
    </a-modal> -->
    <a-modal v-model:visible="visibleStopAudience" width="500px" title="停用受众" @ok="handleStop">
      <div style="margin: 20px 50px">您确定要删除此受众吗？</div>
    </a-modal>
    <a-modal v-model:visible="visibleDeleteAudience" width="500px" title="删除受众" @ok="handleDelete">
      <div style="margin: 20px 50px">您确定要删除此受众吗？</div>
    </a-modal>
    <a-modal v-model:visible="visibleDeleteAudienceMember" width="500px" title="删除受众成员" @ok="handleDeleteMember">
      <div style="margin: 20px 50px">您确定要删除此受众成员吗？</div>
    </a-modal>
    <a-modal v-model:visible="visibleBatchDeleteAudienceMember" width="500px" title="批量删除受众成员" @ok="handleBatchDeleteMember">
      <div style="margin: 20px 50px">您确定要批量删除所选数据吗？</div>
    </a-modal>
    <a-modal
      v-model:visible="visibleAddAudience"
      width="1100px"
      :title="addAudienceTitle"
      @ok="handleAddAudienceNext"
      okText="下一步">
      <div style="margin: 20px 20px">
        <a-form
          :model="ruleForm"
          name="basic"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 16 }"
          autocomplete="off"
          
        >
          <a-form-item
            label="名称"
            name="audienceName"
            :rules="[{ required: true, message: '请填写名称!' }]"
          >
            <a-input style="width:300px" show-count :maxlength="30" v-model:value="ruleForm.audienceName" placeholder="请填写名称" />
          </a-form-item>

          <a-form-item
            label="描述"
            name="description"
            :rules="[{ required: false, message: '请填写描述!' }]"
          >
            <a-textarea style="width:300px" v-model:value="ruleForm.description" placeholder="请填写描述" />
          </a-form-item>
        </a-form>
      </div>
    </a-modal>
    <a-modal
      v-model:visible="visibleAudienceInfo"
      width="1100px"
      title="受众信息"
      :footer="null"
      >
      <div style="padding:10px" class="researchmanage">
          <!-- 搜索框及按钮 -->
          <div class="filter">
            <div class="filterItems">
              <div class="select">
                <a-input
                  v-model:value="searchDataMember.keyword"
                  style="width: 270px; height: 40px; border-radius: 8px"
                  placeholder="请输入姓名/工号"
                  allowClear
                />
              </div>

              <div style="display: flex; margin-bottom: 20px">
                <div class="btn btn1" @click="handleSearchMember">
                  <div class="search"></div>
                  <div class="btnText">搜索</div>
                </div>
                <div class="btnn btn2" @click="handleRestMember" style="width: 105px">
                  <div class="search"></div>
                  <div class="btnText">重置</div>
                </div>
              </div>
            </div>
            <div class="btns">
              <div style="margin-right:10px" class="btn btn3" @click="handleAddAudienceMemberClick">
                <div class="search"></div>
                <div class="btnText">添加</div>
              </div>
              <div style="margin-right:10px" class="btn btn3" @click="handleImportAudienceMemberClick">
                <!-- <div class="search"></div> -->
                <div class="btnText">导入</div>
              </div>
              <div class="btn btn3" @click="handleBatchDeleteMemberClick">
                <!-- <div class="search"></div> -->
                <div class="btnText">批量删除</div>
              </div>
            </div>
          </div>
          <!-- 搜索框及按钮 -->
          <!-- 表格 -->
          <div class="tableBox">
            <a-table
              style="border: 1px solid #f2f6fe"
              :columns="columnAudience"
              :data-source="tableDataMember"
              :loading="loading"
              :scroll="{ x: 1000 }"
              :pagination="false"
              :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
            >
              <template #operationAudience="{ record }">
                <a-space style="padding-right: 10px">
                  <a-button
                    @click="handleDeleteMemberClick(record)"
                    type="link"
                    >删除
                  </a-button>
                </a-space>
              </template>
            </a-table>
          </div>
          <div class="pa">
            <a-pagination
              :showSizeChanger="false"
              :showQuickJumper="true"
              :hideOnSinglePage="true"
              :pageSize="searchDataMember.pageSize"
              :current="searchDataMember.pageNo"
              :total="tableTotalMember"
              class="pagination"
              @change="handelChangePageMember"
            />
          </div>
          <div style="padding:10px 16px;border-top: 1px solid #f0f0f0;text-align:right">
            <a-button @click="cancelAudienceModal">取消</a-button>
            <a-button style="margin-left: 8px" @click="handleAddAudiencePre">上一步</a-button>
            <a-button type="primary" style="margin-left: 8px" @click="saveAudience">保存</a-button>
          </div>
      </div>
    </a-modal>
    <!-- <a-modal
      v-model:visible="visibleAudienceMember"
      width="1100px"
      title="添加学员"
      @ok="handleAddAudienceMember"
      okText="确认"> -->
    <a-drawer
      :visible="visibleAudienceMember"
      class="drawerStyle ProjCheckship CommonStudent"
      placement="right"
      width="80%">
      <div class="drawerMain" id="ProjCheckship" style="">
        <div class="header">
          <div class="headerTitle">
            {{"添加学员"}}
          </div>
          <img style="width: 29px; height: 29px; cursor: pointer" src="../../assets/images/basicinfo/close.png"
               @click="closeDrawer"/>
        </div>
        <div style="display: flex; overflow-x: auto; overflow-y: auto; padding:20px">
          <div style="min-width: 800px">
            <div>
              <div class="tab1">
                <a-form-item label="姓名">
                  <a-input v-model:value="searchDataUser.keyword" style="width: 270px; height: 40px; border-radius: 8px"
                            placeholder="请输入姓名"/>
                  <a-button type="primary" @click="onSearchUser" style="margin-left: 20px; border-radius: 4px">
                    <template #icon>
                      <SearchOutlined/>
                    </template>
                    搜索
                  </a-button>
                  <a-button type="primary" @click="onResetUser" style="margin-left: 20px; border-radius: 4px">重置
                  </a-button>
                </a-form-item>
              </div>
              <div class="chooseLeft" style="display: grid; grid-template-columns: 250px auto">
                <div :style="{
                        height: screenHeight - 280 + 'px',
                        overflowY: 'auto',
                      }" style="border: 1px solid #f0f0f0; overflow-y: 'auto'">
                  <div class="tree" style="margin: 10px 4px 20px 10px;">
                    <a-tree
                      v-model:expandedKeys="expandedKeys"
                      v-model:selectedKeys="selectedKeys"
                      :tree-data="treeData"
                      :load-data="onLoadData"
                      @select="onOrgSelectChange"
                      :fieldNames="{
                            children: 'directChildList',
                            key: 'id',
                            title: 'name',
                            value: 'name',
                          }"
                    >
                    </a-tree>
                  </div>
                </div>
                <div>
                  <div class="tableBox tabb" style="
                                  margin: 0px 4px 20px 10px;
                                  border: 1px solid #f0f0f0;
                                ">
                    <a-table
                      ref="userTableRef"
                      style="border: 1px solid #f2f6fe"
                      :columns="columnUser"
                      :data-source="tableDataUser"
                      :loading="loading"
                      :scroll="{ x: 400,y:screenHeight-350 }"
                      :pagination="false"
                      :row-selection="{ selectedRowKeys: selectedRowKeysUser, onChange: onSelectChangeUser }"
                    >
                    </a-table>
                  </div>
                  <div class="pa" style="margin: 0px 10px 20px 10px;">
                    <a-pagination
                      :showSizeChanger="false"
                      :showQuickJumper="true"
                      :hideOnSinglePage="true"
                      :pageSize="searchDataUser.pageSize"
                      :current="searchDataUser.pageNo"
                      :total="tableTotalUser"
                      class="pagination"
                      @change="handelChangePageUser"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div style="min-width: 200px;border-left: 1px solid #f2f6fe;margin-left:10px">
            <div class="onerow">
              <div class="onleft">
                <div class="already">已选</div>
              </div>
            </div>
            <div :style="{ 'max-height': screenHeight - 235 + 'px' }" style="overflow-y: auto">
              <div class="selecteds">
                <div v-for="(item, i) in selectedRowUser" :key="i">
                  <div class="chose">
                    {{ item.realName }}
                    <div class="ch" @click="removeUserClick(i)"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="btnn">
          <button class="btn2" @click="closeDrawer">取消</button>
          <button class="btn2" @click="handleAddAudienceMember">确定</button>
        </div>
      </div>
    </a-drawer>
    <!-- </a-modal> -->
    <!-- <import-stu v-model:Importvisible="visibleImportAudience" /> -->
    <a-drawer
      :visible="visibleImportAudience"
      class="drawerStyle impotergroupleader"
      placement="right"
      width="800px"
    >
      <div class="drawerMain">
        <div class="header">
          <div class="headerTitle">{{ "导入学员" }}</div>
          <img
            style="width: 29px; height: 29px; cursor: pointer"
            src="../../assets/images/basicinfo/close.png"
            @click="closeImportDrawer"
          />
        </div>
        <div class="main">
          <div class="minatitl" v-if="templateUrl">
            <div class="up1">请下载</div>
            <a class="up2" :href="templateUrl" target="_blank" style="cursor: pointer">模板</a>
            <div class="up1">，按要求填写数据并导入（文件需解密后再上传）</div>
          </div>
          <div class="upload">
            <div class="text">上传：</div>
            <div class="right">
              <div style="height: 176px; margin-bottom: 20px">
                <a-upload-dragger
                  :data="{ audienceId:audienceId }"
                  :multiple="false"
                  name="memberExcel"
                  :accept="accept"
                  :action="uploadUrl"
                  :maxCount="1"
                  @change="handleUploadChange"
                  v-model:file-list="fileList"
                >
                  <p class="ant-upload-drag-icon">
                    <inbox-outlined></inbox-outlined>
                  </p>
                  <p class="ant-upload-text">点击或将文件拖拽到此处上传</p>
                  <p class="ant-upload-hint">支持扩展名：.xls/.xlsx</p>
                  <template #itemRender="{ file }">
                    <div class="loadstate">
                      <div class="loadborder">
                        <div class="content">
                          <div class="img"></div>
                          <div class="timebox">
                            <div class="timetop">
                              <div class="tit">{{ file.name }}</div>
                              <div class="stateloading">{{
                                  {
                                    done: "上传成功",
                                    uploading: "正在上传",
                                    error: "上传失败",
                                    removed: "正在上传",
                                  }[file.status]
                                }}
                              </div>
                            </div>
                            <a-progress :percent="file.percent"/>
                          </div>
                          <div class="curloading">
                            <div style="color: #387df7; margin-left: 20px; cursor: pointer"
                                v-if="file.uploadState?.status === 'FAILED'"
                                @click="downloadErrorData(file.uploadState?.url)">下载失败数据
                            </div>
                            <div class="cur">100%</div>
                            <div
                              class="cancel"
                              style="margin-left: 20px; cursor: pointer"
                              @click="removeUpload"
                            >
                              删除
                            </div>
                          </div>
                        </div>
                        <a-spin :spinning="true" v-if="file.uploadState?.status === 'START'"/>
                        
                      </div>
                      <div :class="fileRes.result?.successNumber == fileRes.result?.totalNumber ?'succebox':'defeatbox'">
                          <img style="width: 14px; height: 14px; margin-left: 16px"
                              :src="fileRes.result?.successNumber == fileRes.result?.totalNumber ? success:err"/>
                          <div class="tacl">
                            {{ fileRes.result?.totalNumber || 0 }}条数据导入，{{fileRes.result?.successNumber || 0 }}条数据导入成功
                          </div>
                        </div>
                    </div>
                  </template>
                </a-upload-dragger>
              </div>
            </div>
          </div>
        </div>
        <div class="btnn">
          <button class="btn2" @click="closeImportDrawer">取消</button>
          <button class="btn2" @click="closeImportDrawer">确定</button>
        </div>
      </div>
    </a-drawer>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import {
  createResearch,
  deleteResearch,
  editAssessmentName,
  editReleaseStatus,
} from "@/api/indexResearch";
import {
  getAudienceList,
  copyAudience,
  publishAudience,
  stopAudience,
  deleteAudience,
  createAudience,
  updateAudience,
  getAudienceMemberList,
  deleteAudienceMember,
  deleteBatchAudienceMember,
  getAudienceUserList,
  getAudienceOrgList,
  getAudienceOrgInfo,
  addAudienceMember,
  getAudienceDetail,
} from "@/api/indexAudience";
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: 0,
    label: "未发布", //发布
  },
  {
    value: 1,
    label: "已发布", //撤回
  },
  {
    value: 2,
    label: "停用",
  },
];

const column = [
  {
    title: "名称",
    dataIndex: "audienceName",
    key: "audienceName",
    width: "10%",
    align: "center",
    ellipsis: true,
    className: "h",
    customRender: ({ text }) => {
      return text ? text : "-";
    },
  },
  {
    title: "人数",
    dataIndex: "members",
    key: "members",
    width: "5%",
    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.status) {
        case 0:
          return "未发布";
        case 1:
          return "已发布";
        case 2:
          return "停用";
      }
    },
  },
  {
    title: "类型",
    dataIndex: "type",
    key: "type",
    width: "10%",
    align: "center",
    className: "h",
    customRender: ({ record }) => {
      switch (record.type) {
        case 1:
          return "普通受众";
        case 2:
          return "自动受众";
      }
    },
  },
  {
    title: "创建时间",
    dataIndex: "createTime",
    key: "createTime",
    width: "10%",
    align: "center",
    className: "h",
    customRender: ({ text }) => {
      return text ? text : "-";
    },
  },
  {
    title: "操作",
    width: "10%",
    className: "h",
    dataIndex: "id",
    key: "id",
    fixed: "right",
    align: "right",
    slots: { customRender: "operation" },
  },
];
const columnAudience = [
  {
    title: "姓名",
    dataIndex: "userName",
    key: "userName",
    // width: "20%",
    align: "center",
    ellipsis: true,
    className: "h",
    customRender: ({ text }) => {
      return text ? text : "-";
    },
  },
  {
    title: "工号",
    dataIndex: "workNum",
    key: "workNum",
    // width: "5%",
    align: "center",
    ellipsis: true,
    className: "h",
    customRender: ({ text }) => {
      return text ? text : "-";
    },
  },
  {
    title: "部门",
    dataIndex: "departName",
    key: "departName",
    // width: "5%",
    align: "center",
    ellipsis: true,
    className: "h",
    customRender: ({ text }) => {
      return text ? text : "-";
    },
  },
  {
    title: "组织路径",
    dataIndex: "orgPath",
    key: "orgPath",
    // width: "5%",
    align: "center",
    ellipsis: true,
    className: "h",
    customRender: ({ text }) => {
      return text ? text : "-";
    },
  },
  {
    title: "操作",
    // width: "5%",
    className: "h",
    dataIndex: "id",
    key: "id",
    // fixed: "right",
    // align: "right",
    slots: { customRender: "operationAudience" },
  },
];
const columnUser = [
  {
    title: "姓名",
    dataIndex: "realName",
    key: "realName",
    // width: "20%",
    align: "center",
    ellipsis: true,
    className: "h",
    customRender: ({ text }) => {
      return text ? text : "-";
    },
  },
  {
    title: "工号",
    dataIndex: "userNo",
    key: "userNo",
    // width: "5%",
    align: "center",
    ellipsis: true,
    className: "h",
    customRender: ({ text }) => {
      return text ? text : "-";
    },
  },
  {
    title: "归属组织",
    dataIndex: "orgName",
    key: "orgName",
    // width: "5%",
    align: "center",
    ellipsis: true,
    className: "h",
    customRender: ({ text }) => {
      return text ? text : "-";
    },
  },
  {
    title: "部门",
    dataIndex: "departName",
    key: "departName",
    // width: "5%",
    align: "center",
    ellipsis: true,
    className: "h",
    customRender: ({ text }) => {
      return text ? text : "-";
    },
  },
];
const searchData = ref({
  pageNo: 1,
  pageSize: 10,
  status: null,
  audienceName: "",
  searchEndTime: "",
  searchStartTime: "",
});
const searchDataMember = ref({
  pageNo: 1,
  pageSize: 10,
  keyword: "",
  audienceId: "",
});
const searchDataUser = ref({
  pageNo: 1,
  pageSize: 10,
  keyword: "",
  departId: "",
});
const formData = ref({
  assessmentName: "",
  id: "",
  validated: 0,
});


const tableData = ref([

]);
const tableDataMember = ref([

]);
const tableDataUser = ref([

]);

const tableTotal = ref(0);
const tableTotalMember = ref(0);
const tableTotalUser = ref(0);
const visibleCopyAudience = ref(false);
const visibleStopAudience = ref(false);
const visibleDeleteAudience = ref(false);
const visibleDeleteAudienceMember = ref(false);
const visibleBatchDeleteAudienceMember = ref(false);
const audienceId = ref("1073279922736201728");
const audienceName = ref("");
const memberId = ref("");
const memberIdList = ref([]);
const visibleAddAudience = ref(false);
const addAudienceTitle = ref("添加受众");
const visibleAudienceInfo = ref(false);
const visibleAudienceMember = ref(false);
const visibleImportAudience = ref(false);
const templateUrl = ref(process.env.VUE_APP_BOE_API_URL+"/upload/coursefile/受众导入模板.xlsx");
const fileList = ref([]);
const uploadUrl = ref( "/userbasic/audience/importMember");
const fileRes = ref({});
const ruleForm = ref({
  audienceName: "",
  description: "",
});
const selectedRowKeys = ref([]);
// const selectedRowKeysUser = ref(['1012311820121276416', '1035585259372150784','7003708665773555718', '7003708665777750025']);
const selectedRowKeysUser = ref([]);
const selectedRowUser = ref([]);
const temSelectedRowKeysUser = ref([]);
const temSelectedRowUser = ref([]);
const selectedRowKeysUserTotal = ref([]);
const selectedRowUserTotal = ref([]);
const userTableRef = ref();
const screenHeight = ref(document.body.clientHeight);

const treeData  = ref([
  {
    title: 'parent 1',
    key: '0-0',
    children: [
      {
        title: 'parent 1-0',
        key: '0-0-0',
        disabled: true,
        children: [
          { title: 'leaf', key: '0-0-0-0', disableCheckbox: true },
          { title: 'leaf', key: '0-0-0-1' },
        ],
      },
      {
        title: 'parent 1-1',
        key: '0-0-1',
        children: [{ key: '0-0-1-0', title: 'sss' }],
      },
    ],
  },
]);

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) => {
  console.log("handelChangePage page:",page);
  searchData.value.pageNo = page;
  getAudiencePageList();
  // fetch();
};

const handelChangePageMember = (page) => {
  console.log("handelChangePageMember page:",page);
  searchDataMember.value.pageNo = page;
  getAudienceMemberPageList();
  // fetch();
};
const handelChangePageUser = (page) => {
  console.log("handelChangePageUser page:",page);
  searchDataUser.value.pageNo = page;
  getAudienceUserListFun();
};

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

const handleSearch = () => {
  searchData.value.pageNo = 1;
  console.log("handleSearch searchDate:",searchData.value);
  getAudiencePageList();
  // fetch();

};
const handleSearchMember = () => {
  console.log("handleSearch searchDate:",searchDataMember.value);
  getAudienceMemberPageList();
  // fetch();

};
const handleRest = () => {
  // dateTime.value = [];
  // resetFields();
  // fetch();
  console.log("handleRest searchData:",searchData.value);
  searchData.value.pageNo = 1;
  searchData.value.audienceName = '';
  searchData.value.status = null;
  getAudiencePageList();
};
const handleRestMember = () => {
  console.log("handleRestMember searchDataMember:",searchData.value);
  searchDataMember.value.pageNo = 1;
  searchDataMember.value.keyword = '';
  getAudienceMemberPageList();
};

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

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

function handleEditPage(record) {
  console.log("handleEditPage record:",record);
  audienceId.value = record.audienceId;
  addAudienceTitle.value = "编辑受众";
  getAudienceDetailFun();
}

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();
  }
};

const  getAudiencePageList = async () => {
  console.log("getAudiencePageList searchData:",searchData.value);
  console.log("getAudiencePageList searchData pageSize:",searchData.value.pageSize);
  let res = await getAudienceList({
    audienceName: searchData.value.audienceName,
    status: searchData.value.status,
    pageNo: searchData.value.pageNo,
    pageSize: searchData.value.pageSize,
  })
  console.log("getAudienceList res:",res);
  if(res&&res.data.status==200){
    tableData.value = res.data.result.list;
    tableTotal.value = res.data.result.total;
  }
}
getAudiencePageList();

const getAudienceDetailFun = async () => {
  console.log("getAudienceDetailFun audienceId:",audienceId.value);
  let res = await getAudienceDetail({
    audienceId: audienceId.value,
  })
  console.log("getAudienceDetailFun res:",res);
  if(res&&res.data.status==200){
    ruleForm.value = res.data.result;
    visibleAddAudience.value = true;
  }else{
    message.error(res.data.message);
  }
}
const handleCopyClick = (record) => {
  console.log("handleCopyClick record:",record);
  audienceId.value = record.audienceId;
  audienceName.value = "[副本]"+ record.audienceName;
  visibleCopyAudience.value = true;
}
const handleCopy = async () => {
  console.log("handleCopy audienceId:",audienceId.value);
  if(audienceName.value.length>30){
    message.warning("受众名称小于30字符");
    return;
  }
  let res = await copyAudience({
    audienceId: audienceId.value,
    audienceName: audienceName.value,
  })
  console.log("copyAudience res:",res);
  if(res&&res.data.status==200){
    message.success("复制成功");
    visibleCopyAudience.value = false;
    getAudiencePageList();
  }else{
    message.error(res.data.message);
  }
}
const handleCopyCancel = () => {
  console.log("handleCopyCancel");
  visibleCopyAudience.value = false;
}
const handlePublish = async (record,type) => {
  console.log("handlePublish record:",record);
  console.log("handlePublish record id:",record.audienceId);
  let res = await publishAudience({
    audienceId: record.audienceId,
  })
  console.log("publishAudience res:",res);
  if(res&&res.data.status==200){
    if(type==1){
      message.success("发布成功");
    }else{
      message.success("启动成功");
    }
    getAudiencePageList();
  }else{
    message.error(res.data.message);
  }
}
const handleStop = async () => {
  console.log("handleStop:",);
  let res = await stopAudience({
    audienceId: audienceId.value,
  })
  console.log("stopAudience res:",res);
  if(res&&res.data.status==200){
    message.success("停用成功");
    visibleStopAudience.value = false;
    getAudiencePageList();
  }else{
    message.error(res.data.message);
  }
}
const handleStopClick = (record) => {
  console.log("handleStopClick record:",record);
  audienceId.value = record.audienceId;
  visibleStopAudience.value = true;
}
const handleDeleteClick = (record) => {
  console.log("handleDeleteClick record:",record);
  audienceId.value = record.audienceId;
  visibleDeleteAudience.value = true;
}
const handleDeleteMemberClick = (record) => {
  console.log("handleDeleteMemberClick record:",record);
  memberId.value = record.userId;
  visibleDeleteAudienceMember.value = true;
}
const handleBatchDeleteMemberClick = () => {
  console.log("handleBatchDeleteMemberClick");
  visibleBatchDeleteAudienceMember.value = true;
}
const handleDeleteCancel = () => {
  console.log("handleDeleteCancel");
  visibleDeleteAudience.value = false;
}
const handleDeleteMemberCancel = () => {
  console.log("handleDeleteMemberCancel");
  visibleDeleteAudienceMember.value = false;
}
const handleDelete = async () => {
  console.log("handleDelete audienceId:",audienceId.value);
  let res = await deleteAudience({
    audienceId: audienceId.value,
  })
  console.log("deleteAudience res:",res);
  if(res&&res.data.status==200){
    message.success("删除成功");
    visibleDeleteAudience.value = false;
    getAudiencePageList();
  }else{
    message.error(res.data.message);
  }
}
const handleDeleteMember = async () => {
  console.log("handleDeleteMember memberId:",memberId.value, "audienceId:",audienceId.value);
  let res = await deleteAudienceMember({
    audienceId: audienceId.value,
    memberId: memberId.value,
  })
  console.log("deleteAudienceMember res:",res);
  if(res&&res.data.status==200){
    message.success("删除成功");
    visibleDeleteAudienceMember.value = false;
    getAudienceMemberPageList();
  }else{
    message.error(res.data.message);
  }
}
const handleBatchDeleteMember = async () => {
  memberIdList.value = selectedRowKeys.value;
  console.log("handleBatchDeleteMember memberIdList:",memberIdList.value, "audienceId:",audienceId.value);
  let res = await deleteBatchAudienceMember({
    audienceId: audienceId.value,
    memberIdList: memberIdList.value,
  })
  console.log("batch deleteAudienceMember res:",res);
  if(res&&res.data.status==200){
    message.success("删除成功");
    visibleBatchDeleteAudienceMember.value = false;
    getAudienceMemberPageList();
  }else{
    message.error(res.data.message);
  }
}
const handleAddAudienceClick = () => {
  addAudienceTitle.value = "添加受众";
  ruleForm.value.audienceName = "";
  ruleForm.value.description = "";
  visibleAddAudience.value = true;
}
const handleAddAudienceNext = async () => {
  if(!ruleForm.value.audienceName){
    message.warning("请填写受众名称");
    return;
  }
  console.log("handleAddAudienceNext ruleForm:",ruleForm.value);
  var res;
  if(addAudienceTitle.value=="添加受众"){
    res = await createAudience({
      ...ruleForm.value
    })
  }else{
    res = await updateAudience({
      audienceId:audienceId.value,
      ...ruleForm.value
    })
  }
  console.log("handleAddAudienceNext res:",res);
  if(res&&res.data.status==200){
    if(addAudienceTitle.value=="添加受众"){
      message.success("创建受众成功");
      audienceId.value = res.data.result;
    }else{
      message.success("编辑受众成功");
    }
    visibleAddAudience.value = false;
    visibleAudienceInfo.value = true;
    getAudienceMemberPageList();
  }else{
    message.error(res.data.message);
  }

}
const handleAddAudiencePre = () => {
  addAudienceTitle.value = "编辑受众";
  visibleAddAudience.value = true;
  visibleAudienceInfo.value = false;
}
const cancelAudienceModal = () => {
  handleRest();
  visibleAudienceInfo.value = false;
}
const saveAudience = () => {
  handleRest();
  visibleAudienceInfo.value = false;
}

const onSelectChange = (keys) => {
  console.log('selectedRowKeys changed: ', keys);
  // state.selectedRowKeys = selectedRowKeys;
  selectedRowKeys.value = keys;
};
const onSelectChangeUser = (keys, rows) => {
  console.log('selectedRowKeysUser changed: ', keys,"rows:",rows);
  console.log('selectedRowKeysUser rows1: ', rows[0]);
  // console.log('selectedRowKeysUser rows2: ', rows[0].id);
  for(let i=0;i<rows.length;i++){
    var flag=0;
    for(let j=0;j<selectedRowUser.value.length;j++){
      if(rows[i].id==selectedRowUser.value[j].id){
        flag=1;
        break;
      }
    }
    // 这个新元素不在原数组中，添加进原数组
    if(flag==0){
      selectedRowUser.value.push(rows[i]);
      selectedRowKeysUser.value.push(keys[i]);
    }
  }
  // 删除行
  var deleteRows = [];
  for(let i=0;i<temSelectedRowUser.value.length;i++){
    var flag1=0;
    for(let j=0;j<rows.length;j++){
      if(temSelectedRowUser.value[i].id==rows[j].id){
        flag1=1;
      }
    }
    if(flag1==0){
      deleteRows.push(temSelectedRowUser.value[i]);
    }
  }
  console.log('selectedRowKeysUser deleteRows:', deleteRows);
  for(let i=0;i<deleteRows.length;i++){
    for(let j=0;j<selectedRowUser.value.length;j++){
      if(deleteRows[i].id==selectedRowUser.value[j].id){
        selectedRowKeysUser.value.splice(j,1);
        selectedRowUser.value.splice(j,1);
        break;
      }
    }
  }
  // selectedRowKeysUser.value = keys;
  // selectedRowUser.value = rows;
  temSelectedRowUser.value = rows;
  console.log('selectedRowKeysUser selectedRowUser: ', selectedRowUser.value);
};
const removeUserClick = (index) => {
  selectedRowKeysUser.value.splice(index,1);
  selectedRowUser.value.splice(index,1);
}

const  getAudienceMemberPageList = async () => {
  console.log("getAudienceMemberPageList searchData:",searchData.value);
  console.log("getAudienceMemberPageList searchData pageSize:",searchData.value.pageSize);
  let res = await getAudienceMemberList({
    audienceId: audienceId.value,
    keyword: searchDataMember.value.keyword,
    pageNo: searchDataMember.value.pageNo,
    pageSize: searchDataMember.value.pageSize,
  })
  console.log("getAudienceMemberPageList res:",res);
  if(res&&res.data.status==200){
    let dataList=[];
    res.data.result.list.forEach(item=>{
      let oneItem = {
        ...item,
        key:item.userId,
      }
      dataList.push(oneItem);
    });
    tableDataMember.value = dataList;
    tableTotalMember.value = res.data.result.total;
  }
};
// 后面要删除
// getAudienceMemberPageList();

const handleAddAudienceMemberClick = async () => {
  // visibleAddAudience.value = true;
  selectedRowKeysUser.value = [];
  selectedRowUser.value = [];
  searchDataUser.value.departId = "";
  searchDataUser.value.keyword = "";
  searchDataUser.value.pageNo = 1;
  searchDataUser.value.pageSize = 10;
  getAudienceUserListFun();
  getAudienceOrgListFun();
  setTimeout(()=>{
    visibleAudienceMember.value = true;
  },500)

}
const getAudienceOrgListFun = async () => {
  let res = await getAudienceOrgList({})
  console.log("getAudienceOrgList res:",res);
  if(res&&res.data.status==200){
    treeData.value = res.data.result;
  }
}
const getAudienceUserListFun = async () => {
  let res = await getAudienceUserList({
    departId: searchDataUser.value.departId,
    keyword: searchDataUser.value.keyword,
    pageNo: searchDataUser.value.pageNo,
    pageSize: searchDataUser.value.pageSize,
  })
  console.log("getAudienceUserList res:",res);
  if(res&&res.data.status==200){
    let dataList=[];
    var selectedRowUserTemp = [];
    res.data.result.list.forEach(item=>{
      let oneItem = {
        ...item,
        key:item.id,
      }
      dataList.push(oneItem);

      // 本页已选择项
      selectedRowUser.value.forEach(item1=>{
        if(item.id==item1.id){
          selectedRowUserTemp.push(item1);
          return
        }
      })
    });
    console.log("getAudienceUserList selectedRowUserTemp:",selectedRowUserTemp);
    temSelectedRowUser.value = selectedRowUserTemp;
    tableDataUser.value = dataList;
    tableTotalUser.value = res.data.result.total;
  }
}
const onLoadData = async (treeNode) => {
  console.log("onLoadData treeNode:",treeNode);
  var nodes = [];
  let res = await getAudienceOrgInfo({
    orgId: treeNode.dataRef.id,
  })
  console.log("getAudienceOrgInfo res:",res);
  if(res&&res.data.status==200){
    nodes = res.data.result.directChildList;
  }
  return new Promise(resolve => {
    if (treeNode.dataRef.directChildList) {
      resolve();
      return;
    }
    setTimeout(() => {
      // treeNode.dataRef.directChildList = [
      //   { name: 'Child Node', id: `${treeNode.eventKey}-0` },
      //   { name: 'Child Node', id: `${treeNode.eventKey}-1` },
      // ];
      treeNode.dataRef.directChildList = nodes;
      treeData.value = [...treeData.value];
      resolve();
    }, 1000);
  });
};
const onOrgSelectChange = (e, l) => {
  console.log("onOrgSelectChange e:",e,"l:",l)
  searchDataUser.value.departId = e[0];
  getAudienceUserListFun();
}
const onSearchUser = () => {
  getAudienceUserListFun();
}
const onResetUser = () => {
  searchDataUser.value.departId = "";
  searchDataUser.value.keyword = "";
  searchDataUser.value.pageNo = 1;
  getAudienceUserListFun();
}
const handleImportAudienceMemberClick = () => {
  visibleImportAudience.value = true;
}
// 关闭导入学员抽屉
const closeImportDrawer = () => {
  fileList.value = [];
  visibleImportAudience.value = false;
}
const handleAddAudienceMember = async () => {
  let res = await addAudienceMember({
    audienceId: audienceId.value,
    memberIdList: selectedRowKeysUser.value,
  })
  console.log("addAudienceMember res:",res);
  if(res&&res.data.status==200){
    getAudienceMemberPageList();
    message.success("添加成功！");
    visibleAudienceMember.value = false;
  }else{
    message.error(res.data.message);
  }
}
const closeDrawer = () => {
  visibleAudienceMember.value = false;
}

const handleUploadChange = (record) => {
  console.log("handleUploadChange value:",record);
  if (record) {
    var FileExt = record.file.name.replace(/.+\./, "");
    if (["xls", "xlsx"].indexOf(FileExt.toLowerCase()) === -1) {
      fileList.value = [];
      message.error("请上传正确的文件格式");
      return;
    }
  }
  
  fileRes.value = {};
  if(record.file.status == "done"){
    if(record.file.response.status==200){
      fileRes.value = record.file.response;
      message.success("上传成功");
      getAudienceMemberPageList();
    }else{
      message.error(record.file.response.message);
    }
  }
}

//删除
const removeUpload = () => {
  fileList.value = [];
};


</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;
              }
            }
          }
        }
      }
    }
  }
}
.onerow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-right: 40px;
  flex-wrap: wrap;

  width: 100%;

  .onleft {
    display: flex;
    text-align: center;

    .already {
      color: rgba(51, 51, 51, 1);
      font-size: 16px;
      font-weight: 500;
      margin-left: 32px;
      white-space: nowrap;
      // margin-bottom: 20px;
    }

    .count {
      color: #4ea6ff;
      font-size: 16px;
      margin: 0 6px;
    }

    .peo {
      color: rgba(51, 51, 51, 1);
      font-size: 16px;
      font-weight: 500;
    }
  }

  .clbox {
    margin-right: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    width: 104px;
    height: 32px;
    border-radius: 4px;
    background: #4ea6ff;

    .colose {
      width: 16px;
      height: 16px;
      // border-radius: 8px;
      // background: #ffffff;
      // position: relative;
      background-image: url(../../assets/images/basicinfo/ch.png);
      background-size: 100%;
      margin-right: 4px;
    }

    .allclear {
      color: rgba(255, 255, 255, 1);
      font-size: 14px;
    }
  }
}
.selecteds {
  display: flex;
  flex-wrap: wrap;
  margin-left: 32px;

  .person {
    width: 100%;
    margin-top: 20px;
    border-top: 1px solid #f2f6fe;
  }

  .chose {
    width: 64px;
    height: 24px;
    margin-top: 25px;
    margin-right: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    border: 1px solid rgba(56, 139, 225, 1);
    color: rgba(56, 139, 225, 1);
    font-size: 12px;
    position: relative;

    .ch {
      position: absolute;
      width: 18px;
      height: 18px;
      background-image: url(../../assets/images/basicinfo/ch.png);
      right: -8px;
      top: -8px;
    }
  }

  .ifsw {
    display: flex;
    align-items: end;
    justify-content: center;
    color: #4ea6ff;
  }

  .sw {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: justify;
    color: #4ea6ff;
    margin-top: 23px;
    margin-left: 10px;
  }

  .dept {
    width: 100%;
    margin-top: 30px;
    border-top: 1px solid #f2f6fe;
  }

  .chose1 {
    //width: 90px;
    height: 24px;
    margin-top: 25px;
    margin-right: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    border: 1px solid rgba(56, 139, 225, 1);
    color: rgba(56, 139, 225, 1);
    font-size: 12px;
    position: relative;

    .span {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .ch1 {
      position: absolute;
      width: 18px;
      height: 18px;
      background-image: url(../../assets/images/basicinfo/ch.png);
      right: -8px;
      top: -8px;
    }
  }

  .group {
    width: 100%;
    margin-top: 30px;
    border-top: 1px solid #f2f6fe;
  }

  .chose2 {
    //width: 120px;
    height: 24px;
    margin-top: 25px;
    margin-right: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    border: 1px solid rgba(56, 139, 225, 1);
    color: rgba(56, 139, 225, 1);
    font-size: 12px;
    position: relative;

    .span {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .ch2 {
      position: absolute;
      width: 18px;
      height: 18px;
      background-image: url(../../assets/images/basicinfo/ch.png);
      right: -8px;
      top: -8px;
    }
  }
}
.CommonStudent > .ant-drawer-content-wrapper {
  min-width: 1200px !important;
  width: 1200px !important;
}

.CommonStudent {
  .ant-btn-primary {
    background-color: #4ea6ff !important;
  }

  .cus-select {
    height: 40px;
    border-radius: 8px;
  }

  .tableBox .ant-table-row .ant-table-cell {
    height: 48px;
    font-size: 14px;
    font-weight: 400;
    color: #4f5156;
    line-height: 29px;
    padding: 0px;
  }

  .tableBox .ant-table-thead tr th {
    font-size: 14px;
  }

  .ant-tabs-tabpane {
    height: 100%;
  }

  .ant-tabs {
    overflow: visible;
  }

  .right1 {
    border-left: 1px solid #f2f6fe;
    margin-left: 20px;

    .onerow {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-right: 40px;
      flex-wrap: wrap;

      width: 100%;

      .onleft {
        display: flex;
        text-align: center;

        .already {
          color: rgba(51, 51, 51, 1);
          font-size: 16px;
          font-weight: 500;
          margin-left: 32px;
          white-space: nowrap;
          // margin-bottom: 20px;
        }

        .count {
          color: #4ea6ff;
          font-size: 16px;
          margin: 0 6px;
        }

        .peo {
          color: rgba(51, 51, 51, 1);
          font-size: 16px;
          font-weight: 500;
        }
      }

      .clbox {
        margin-right: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        width: 104px;
        height: 32px;
        border-radius: 4px;
        background: #4ea6ff;

        .colose {
          width: 16px;
          height: 16px;
          // border-radius: 8px;
          // background: #ffffff;
          // position: relative;
          background-image: url(../../assets/images/basicinfo/ch.png);
          background-size: 100%;
          margin-right: 4px;
        }

        .allclear {
          color: rgba(255, 255, 255, 1);
          font-size: 14px;
        }
      }
    }

    .selecteds {
      display: flex;
      flex-wrap: wrap;
      margin-left: 32px;

      .person {
        width: 100%;
        margin-top: 20px;
        border-top: 1px solid #f2f6fe;
      }

      .chose {
        width: 64px;
        height: 24px;
        margin-top: 25px;
        margin-right: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 2px;
        border: 1px solid rgba(56, 139, 225, 1);
        color: rgba(56, 139, 225, 1);
        font-size: 12px;
        position: relative;

        .ch {
          position: absolute;
          width: 18px;
          height: 18px;
          background-image: url(../../assets/images/basicinfo/ch.png);
          right: -8px;
          top: -8px;
        }
      }

      .ifsw {
        display: flex;
        align-items: end;
        justify-content: center;
        color: #4ea6ff;
      }

      .sw {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: justify;
        color: #4ea6ff;
        margin-top: 23px;
        margin-left: 10px;
      }

      .dept {
        width: 100%;
        margin-top: 30px;
        border-top: 1px solid #f2f6fe;
      }

      .chose1 {
        //width: 90px;
        height: 24px;
        margin-top: 25px;
        margin-right: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 2px;
        border: 1px solid rgba(56, 139, 225, 1);
        color: rgba(56, 139, 225, 1);
        font-size: 12px;
        position: relative;

        .span {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .ch1 {
          position: absolute;
          width: 18px;
          height: 18px;
          background-image: url(../../assets/images/basicinfo/ch.png);
          right: -8px;
          top: -8px;
        }
      }

      .group {
        width: 100%;
        margin-top: 30px;
        border-top: 1px solid #f2f6fe;
      }

      .chose2 {
        //width: 120px;
        height: 24px;
        margin-top: 25px;
        margin-right: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 2px;
        border: 1px solid rgba(56, 139, 225, 1);
        color: rgba(56, 139, 225, 1);
        font-size: 12px;
        position: relative;

        .span {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .ch2 {
          position: absolute;
          width: 18px;
          height: 18px;
          background-image: url(../../assets/images/basicinfo/ch.png);
          right: -8px;
          top: -8px;
        }
      }
    }
  }
}
.drawerStyle {
  .drawerMain {
    .header {
      height: 73px;
      border-bottom: 1px solid #e8e8e8;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      .headerTitle {
        font-size: 18px;
        font-weight: 600;
        color: #333333;
        line-height: 25px;
        // margin-left: 24px;
      }
    }
    .contentMain {
      .vote {
        display: flex;
        align-items: center;
        margin-top: 32px;
        margin-left: 20px;
        .votebox {
          width: 100px;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          // background-color: pink;
          .voteimg {
            width: 10px;
            height: 10px;
            margin-right: 5px;
          }
          .votename {
            font-size: 14px;
            font-weight: 400;
            color: #333333;
            line-height: 20px;
          }
        }

        .votebtn {
          width: 130px;
          height: 40px;
          background: #4ea6ff;
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          font-size: 14px;
          font-weight: 400;
          color: #ffffff;
          line-height: 20px;
        }
        .voteclassify {
          font-size: 14px;
          font-weight: 400;
          color: #999999;
          line-height: 20px;
          margin-top: 16px;
        }
        .ant-picker {
          width: 424px;
        }
      }
    }
    .btnn {
      height: 72px;
      width: 100%;
      position: absolute;
      background-color: #fff;
      bottom: 0;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16);

      .btn1 {
        width: 100px;
        height: 40px;
        border: 1px solid #4ea6ff;
        border-radius: 8px;
        color: #4ea6ff;
        background-color: #fff;
        cursor: pointer;
      }

      .btn2 {
        cursor: pointer;
        width: 100px;
        height: 40px;
        background: #4ea6ff;
        border-radius: 8px;
        border: 0;
        margin-left: 15px;
        color: #fff;
      }
    }
  }
}
.main {

  .minatitl {
    display: flex;

    .up1 {
      font-size: 16px;
      font-weight: 400;
      color: #333333;
    }

    .up2 {
      font-size: 16px;
      font-weight: 400;
      color: #4ea6ff;
      margin-left: 4px;
    }
  }

  .upload {
    margin-top: 32px;
    display: flex;

    .text {
      font-size: 14px;
      font-weight: 400;
      color: #333333;
    }

    .right {
      margin-left: 6px;
      width: 500px;

      .load {
        width: 500px;
        height: 176px;
        background: #f5f9fd;
        border-radius: 4px;
        // opacity: 0.3;
        border: 1px dashed #caddfd;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 20px;

        .cloud {
          margin-top: 52px;
          width: 28px;
          height: 28px;
          background-image: url(../../assets/images/basicinfo/cloud.png);
        }

        .tip {
          font-size: 14px;
          font-weight: 400;
          color: #4ea6ff;
          margin-top: 15px;
          cursor: pointer;
        }

        .tipz {
          font-size: 14px;
          font-weight: 400;
          color: #999999;
          margin-top: 10px;
        }
      }

      .loadstate {
        width: 500px;
        margin-bottom: 80px;

        .loadborder {
          width: 500px;
          height: 173px;
          border-radius: 4px;
          border: 1px dashed #eaeaea;
          margin-top: 10px;
          margin-bottom: 10px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          position: relative;

          .content {
            display: flex;
            margin-left: 20px;
            position: relative;

            .defeat {
              width: 262px;
              padding: 10px 20px;
              position: absolute;
              left: 46px;
              top: 42px;
              font-size: 14px;
              font-weight: 500;
              height: 32px;
              border-radius: 2px;
              border: 1px solid #387df7;
              display: flex;
              justify-content: center;
              align-items: center;
              cursor: pointer;

              .detext {
                font-size: 14px;
                font-weight: 400;
                color: #387df7;
              }
            }

            .img {
              width: 30px;
              height: 34px;
              background-image: url(../../assets/images/basicinfo/exl.png);
            }

            .timebox {
              margin-left: 15px;
              margin-top: -5px;

              .timetop {
                display: flex;
                width: 262px;
                justify-content: space-between;
                // margin-bottom: 8px;
                .tit {
                  font-size: 14px;
                  font-weight: 400;
                  color: #333333;
                  width: 200px;
                  height: 21px;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                }

                .stateloading {
                  font-size: 14px;
                  font-weight: 400;
                  color: #4ea6ff;
                }

                .statedefeat {
                  font-size: 14px;
                  font-weight: 400;
                  color: #ff7474;
                }

                .statesucce {
                  font-size: 14px;
                  font-weight: 400;
                  color: #35ae69;
                }
              }

              .prog {
                width: 262px;
                height: 5px;
                background: #eaf1fe;
                border-radius: 4px;

                .inprogloading {
                  width: 55%;
                  height: 5px;
                  border-radius: 4px;

                  background: #4ea6ff;
                }

                //下载失败条
                .inprogdefeat {
                  width: 55%;
                  height: 5px;
                  border-radius: 4px;

                  background: #ff7474;
                }

                //下载成功条
                .inprogsucce {
                  width: 100%;
                  height: 5px;
                  border-radius: 4px;

                  background: #57c887;
                }
              }
            }

            .curloading {
              margin-left: 15px;
              margin-top: 15px;
              display: flex;

              .cur {
                font-size: 14px;
                font-weight: 400;
                color: #333333;
              }

              .cancel {
                font-size: 14px;
                font-weight: 400;
                color: #387df7;
              }
            }
          }

          .downloadErr {
            width: 120px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 2px;
            border: 1px solid #387df7;
            font-size: 14px;
            font-weight: 400;
            color: #387df7;
            line-height: 20px;
            cursor: pointer;
            margin-left: 66px;
            margin-top: 16px;
            position: absolute;
            bottom: 28px;
          }
        }

        .defeatbox {
          width: 500px;
          height: 40px;
          margin-top: 20px;
          background: rgba(255, 116, 116, 0.1);
          border: 1px solid #ff7474;
          display: flex;
          align-items: center;

          .lefimg {
            width: 14px;
            height: 14px;
            margin-right: 8px;
            background-size: 100%;
          }

          .tacl {
            font-size: 14px;
            font-weight: 400;
            margin-left: 17px;
            color: #ff7474;
          }
        }

        .succebox {
          width: 500px;
          height: 40px;
          background: rgba(53, 174, 105, 0.1);
          border: 1px solid #35ae69;
          display: flex;
          align-items: center;

          .lefimg {
            width: 14px;
            height: 14px;
            margin-left: 17px;
            margin-right: 8px;
            background-size: 100%;
          }

          .tacl {
            font-size: 14px;
            font-weight: 400;

            color: rgba(0, 0, 0, 0.65);
          }
        }
      }
    }
  }
}
</style>
