<template>
  <div class="evaluationUpload">
    <div class="headers">
      <div class="headers_item">
        <div class="headers_item_btn" @click="bgupload">
          <div class="btnText">报告上传</div>
        </div>
      </div>
      <!-- <div class="headers_item">
        <span class="headers_item_text">发布状态</span>
        <a-select
            v-model:value="searchParam.status"
            style="width: 270px;"
            placeholder="请选择状态"
            :options="searchStatusVal"
            allowClear
          ></a-select>
      </div> -->
      <div style="display: flex;">
        <div class="headers_item">
          <a-input
              v-model:value="searchParam.createName"
              style="width: 270px; height: 40px; border-radius: 8px"
              placeholder="请输入测评名称"
              allowClear
              showSearch
            >
            </a-input>
        </div>
        <div class="headers_item btn" @click="serchList">
          <div class="headers_item_btn btn1">
            <div class="search"></div>
            <div class="btnText">搜索</div>
          </div>
          <div class="headers_item_btn btn2" @click="serchListNo">
            <div class="search"></div>
            <div class="btnText">重置</div>
          </div>
        </div>

      </div>
    </div>
    <div class="content">
      <a-table
        :columns="columns"
        :data-source="tableData"
        :loading="tableLoading"
        :scroll="{ x: 'max-content' }"
        :pagination="false"
      >
        <template #operation="{ record, column }">
          <a-space>
            <a-button v-if="trueFalse(record.permission,1)" type="link" @click="bgcheck(record)">
              <a-tooltip>
                <template #title>查看</template>
                <span class="check"></span>
              </a-tooltip>
            </a-button>
            <a-button type="link" @click="bgupload1(record)" v-if="trueFalse(record.permission,2)||trueFalse(record.permission,4)">
              <a-tooltip>
                <template #title>上传</template>
                <span class="upload"></span>
              </a-tooltip>
            </a-button>
            <a-button v-if="trueFalse(record.permission,5)"  type="link" @click="downloadAll(record)">
              <a-tooltip>
                <template #title>下载</template>
                <span class="download"></span>
              </a-tooltip>
            </a-button>
            <div>
              
            </div>
            <a-dropdown :getPopupContainer='triggerNode=> triggerNode.parentNode' :trigger="['click']">
              <a class="ant-dropdown-link" @click.prevent>
                更多
                <DownOutlined />
              </a>
              <template #overlay>
                <a-menu>
                  <a-menu-item v-if="trueFalse(record.permission,4)" key="0">
                    <a-button type="link" class="btn_item" @click="openEdit(record)">
                      <span class="release"></span>
                      编辑
                    </a-button>
                  </a-menu-item>
                  <a-menu-item key="1">
                    <a-button type="link" class="btn_item" @click="authorityItem(record)">
                      <span class="authority"></span>
                      权限设置
                    </a-button>
                  </a-menu-item>
                  <a-menu-item key="2" v-if="trueFalse(record.permission,6)">
                    <a-button type="link" class="btn_item" @click="deleteItem(record)">
                      <span class="delete"></span>
                      删除
                    </a-button>
                  </a-menu-item>
                  <a-menu-item key="3" v-if="trueFalse(record.permission,3)">
                    <a-button type="link" class="btn_item" @click="emptyItem(record)">
                      <span class="empty"></span>
                      清空
                    </a-button>
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </a-space>
        </template>
      </a-table>
      <div class="tableBox">
        <div class="pa">
          <a-pagination
            v-if="tableDataTotal > 10"
            :showSizeChanger="true"
            :showQuickJumper="false"
            :hideOnSinglePage="true"
            :pageSize="searchParam.pageSize"
            :current="searchParam.pageNo"
            :total="tableDataTotal"
            class="pagination"
            @change="changePagination"
          />
        </div>
      </div>
    </div>
    <!-- 上传 -->
    <a-modal 
      v-model:visible="bg_check"
      :footer="null"
      closable="false"
      style="margin-top: 400px"
      @cancel="of_exit"
    >
      <div class="selectonlineface" :style="{ display: bg_check ? 'block' : 'none' }">
        <div class="bg_headers"></div>
        <div class="bg_main">
          <div class="bg_main_header">
            <div class="bg_main_header_icon"></div>
            <div>测评报告{{formData.id&&btShow?'编辑':'上传'}}</div>
            <div class="bg_main_header_close" @click="of_exit"></div>
          </div>
          <div class="bg_body">
            <div class="bg_body_bt" v-if="btShow">
              <div class="bg_body_bttext">
                <div class="bg_body_btimg">
                  <img
                    src="@/assets/images/coursewareManage/asterisk.png"
                    alt=""
                  />
                </div>
                <span>测评标题</span>
              </div>
              <div class="bg_body_input">
                <a-input 
                  v-model:value="formData.evaluationName"
                  show-count
                  :maxlength="60"
                  placeholder="请输入测评标题(限60个字以内)" />
              </div>
            </div>
            <div class="bg_body_bt" v-if="btShow">
              <div class="bg_body_bttext">测评封面图片</div>
              <div class="bg_body_input" style="display: flex;">
                <a-upload name="avatar" list-type="picture-card" class="avatar-uploader" :show-upload-list="false"
                          :headers="headers"
                  :before-upload="beforeUpload">
                  <img class="i_upload_img" v-if="formData.imageUrl" :src="formData.imageUrl" alt="avatar" />
                  <div class="i_upload" v-else>
                    <div class="addimg">
                      <div class="heng"></div>
                      <div class="shu"></div>
                    </div>
                  </div>
                </a-upload>
                <div>
                  高宽比为16:9（如：800*450）<br/>
                  png或jpg图片<br/>
                  不要大于2M
                </div>
              </div>
            </div>
            <div class="bg_body_bt" v-if="btShowEdit">
              <div class="bg_body_bttext">上传说明</div>
              <div class="bg_body_input">
                <span style="color: #999ba3">
                  1、仅支持1个zip压缩包和pdf报告上传；<br/>
                  2、单个附件命名规则：测评名称+姓名+工号（名称中间用英文输入法-连接）例如：大五职业性格测评-李玉冰-00004409.pdf
                </span>
              </div>
            </div>
            <div class="bg_body_bt" v-if="btShowEdit">
              <div class="bg_body_bttext">
                <div class="bg_body_btimg">
                  <img
                    src="@/assets/images/coursewareManage/asterisk.png"
                    alt=""
                  />
                </div>
                <span>报告上传</span>
              </div>
              <div class="bg_body_input">
                <a-upload
                  name="file"
                  :headers="headers"
                  :file-list="filesList"
                  :before-upload="beforeUpload3"
                  >
                  <!-- @change="handleChange" -->
                  <!-- action="/activityApi/evaluation/import" -->
                  <div class="upload_box">
                    <span>选择文件</span>
                  </div>
                </a-upload>
              </div>
              <span v-if="valueAll.length!=0" style="margin-right: 276px;">上传完成</span>
            </div>
            <!-- <div class="bg_body_bt" v-if="btShowEdit" style="justify-content: flex-start;">
              <div class="mbl_items12">
                <div
                  class="i12_box1"
                  v-for="(item, index) in valueAll"
                  :key="index"
                >
                  <div class="file_img"></div>
                  <div class="file_detail">
                    <div class="file_updata">
                      <div class="updatabox">
                        <div class="updatacolor"></div>
                        <div class="updataxq">上传完成</div>
                      </div>
                      <div class="upjd">
                        <span style="margin: auto 5px">100%</span>
                      </div>
                    </div>
                  </div>
                  <div class="file_operation">
                    <div class="fobox">
                      <span style="color: #4ea6ff" @click="handleDel2(index)">
                        删除
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div> -->
            <div class="bg_body_bt" v-if="btShow">
              <div class="bg_body_bttext">备注</div>
              <div class="bg_body_input">
                <a-textarea placeholder="请输入备注(限200个字以内)" style="width: 334px;height: 88px;" v-model:value="formData.remarks" showCount :maxlength="200" />
              </div>
            </div>
            <div class="bg_footer">
              <div class="btn btn6" @click="of_exit">
                <div class="btnText">取消</div>
              </div>
              <a-button
                class="btn btn6"
                :loading="uploadDownLoad"
                @click="formData.id&&btShow?showUpload():reportUpload()"
              >
                确定
              </a-button>
            </div>
          </div>
        </div>
      </div>
    </a-modal>
    <!-- 修改测评名称 -->
    <!-- <a-modal 
      v-model:visible="bg_edit"
      :footer="null"
      closable="false"
      style="margin-top: 400px"
      @cancel="of_edit"
    >
    <div class="selectonlineface" :style="{ display: bg_edit ? 'block' : 'none' }">
      <div class="bg_headers"></div>
        <div class="bg_main">
          <div class="bg_main_header">
            <div>修改测评名称</div>
            <div class="bg_main_header_close" @click="of_edit"></div>
          </div>
          <div class="bg_body">
            <div class="bg_body_bt" style="align-items: flex-start;" v-if="btShow">
              <div class="bg_body_bttext" style="margin-top: 5px;">测评名称</div>
              <div class="bg_body_input">
                <NameInput
                  ref="nameRef"
                  placeholder="请输入测评标题(限60个字以内)"
                  v-model:value="formData.evaluationName"
                  v-model:validated="formData.validated"
                  :id="formData.id"
                  :maxlength="60"
                  show-count
                ></NameInput>
              </div>
            </div>
            <div class="bg_footer">
              <div class="btn btn6" @click="of_edit">
                <div class="btnText">取消</div>
              </div>
              <a-button
                class="btn btn6"
                @click="editUpdata"
              >
                确定
              </a-button>
            </div>
          </div>
        </div>
      </div>
    </a-modal> -->
    <!-- 权限 -->
    <a-modal 
      v-model:visible="bg_setting"
      :footer="null"
      closable="false"
      style="margin-top: 400px"
      @cancel="of_setting"
    >
    <div class="selectonlineface" style="width: 1000px;" :style="{ display: bg_setting ? 'block' : 'none' }">
      <div class="bg_headers"></div>
        <div class="bg_main">
          <div class="bg_main_header">
            <div>分配普通管理员</div>
            <div class="bg_main_header_close" @click="of_setting"></div>
          </div>
          <div class="headers">
            <div class="headers_item">
              <span class="headers_item_text">状态</span>
              <a-select
                  v-model:value="searchParam.status2"
                  style="width: 270px;"
                  placeholder="请选择状态"
                  :options="searchStatusVal2"
                  allowClear
                ></a-select>
            </div>
            <div class="headers_item">
              <a-input
                v-model:value="searchParam.createNames"
                style="width: 270px; height: 40px; border-radius: 8px"
                placeholder="工号/姓名"
                allowClear
                showSearch
              >
              </a-input>
            </div>
            <div class="headers_item btn">
              <div class="headers_item_btn btn1" @click="searchSaveList">
                <div class="btnText">搜索</div>
              </div>
              <div class="headers_item_btn btn2" @click="addAuths">
                <div class="btnText">添加</div>
              </div>
            </div>
          </div>
          <div class="content" style="padding: 10px 35px;">
            <a-table
              :columns="columns2"
              :data-source="tableData1"
              :loading="tableLoadingAut"
              :scroll="{ x: '1000' }"
              :pagination="pagination"
            >
              <template #action="{ record, column }">
                <a-space>
                  <a-button type="link" @click="textEnableAdd2(record)" :disabled="record.status==0">
                    <span :class="{text_color:record.status==0?'text_color':''}">启用</span>
                  </a-button>
                  <a-button type="link" @click="textDisabled(record)" :disabled="record.status==1">
                    <span :class="record.status==1?'text_color':''">禁用</span>
                  </a-button>
                  <a-button type="link" @click="textDelete(record)">
                    <span class="download">删除</span>
                  </a-button>
                  <a-button type="link" @click="updateAuthority(record)">
                    <span class="download">修改权限</span>
                  </a-button>
                </a-space>
              </template>
            </a-table>
          </div>
          <div class="bg_body">
            <div class="bg_footer" style="margin-left: 288px;">
              <div class="btn btn6" @click="of_setting">
                <div class="btnText">取消</div>
              </div>
              <a-button
                class="btn btn6"
                @click="settingUp"
              >
                确定
              </a-button>
            </div>
          </div>
        </div>
      </div>
    </a-modal>
    <!-- 上传结果 -->
    <a-modal 
      v-model:visible="bg_results"
      :footer="null"
      closable="false"
      style="margin-top: 400px"
      @cancel="of_results"
    >
      <div class="selectonlineface" style="width: 510px;" :style="{ display: bg_results ? 'block' : 'none' }">
        <div class="bg_headers"></div>
        <div class="bg_main">
          <div class="bg_main_header">
            <div class="bg_main_header_close" @click="of_results"></div>
          </div>
          <div class="bg_body">
            <div>上传结果</div>
            <div style="margin: 25px 0 0 24px;">上传的测评报告总文件数{{totalNumber.totalEntries}}个，成功{{totalNumber.successfulEntries}}个，失败{{totalNumber.failedEntries}}个；<br/>上传结果<span @click="failedDownload" style="color: #4ea6ff;cursor: pointer;">请下载</span>查看！</div>
            <div class="bg_footer" style="margin-left: 90px;">
              <div class="btn btn6" @click="of_results">
                <div class="btnText">取消</div>
              </div>
              <a-button
                class="btn btn6"
                @click="resultsUp"
              >
                确定
              </a-button>
            </div>
          </div>
        </div>
      </div>
    </a-modal>
    <!-- 修改备注 -->
    <!-- <a-modal 
      v-model:visible="bg_remarks"
      :footer="null"
      closable="false"
      style="margin-top: 400px"
      @cancel="of_remarks"
    >
    <div class="selectonlineface" :style="{ display: bg_remarks ? 'block' : 'none' }">
      <div class="bg_headers"></div>
        <div class="bg_main">
          <div class="bg_main_header">
            <div>修改备注</div>
            <div class="bg_main_header_close" @click="of_remarks"></div>
          </div>
          <div class="bg_body">
            <div class="bg_body_bt" style="align-items: flex-start;" v-if="btShow">
              <div class="bg_body_bttext" style="margin-top: 5px;">备注</div>
              <div class="bg_body_input">
                <a-textarea style="width: 334px;height: 88px;" v-model:value="formData.remarks" showCount :maxlength="200" />
              </div>
            </div>
            <div class="bg_footer">
              <div class="btn btn6" @click="of_remarks">
                <div class="btnText">取消</div>
              </div>
              <a-button
                class="btn btn6"
                @click="remarksUpdata"
              >
                确定
              </a-button>
            </div>
          </div>
        </div>
      </div>
    </a-modal> -->
    <!-- 添加权限设置 -->
    <a-modal 
      v-model:visible="bg_addsetting"
      :footer="null"
      closable="false"
      style="margin-top: 400px"
      @cancel="of_addsetting"
    >
    <div class="selectonlineface" style="width: 1000px;" :style="{ display: bg_addsetting ? 'block' : 'none' }">
      <div class="bg_headers"></div>
        <div class="bg_main">
          <div class="bg_main_header">
            <div>添加普通管理员</div>
            <div class="bg_main_header_close" @click="of_addsetting"></div>
          </div>
          <div class="headers">
            <div class="headers_item">
              <a-input
                v-model:value="searchParam.createName"
                style="width: 270px; height: 40px; border-radius: 8px"
                placeholder="工号/姓名"
                allowClear
                showSearch
              >
              </a-input>
            </div>
            <div class="headers_item btn">
              <div class="headers_item_btn btn1" @click="searchSave">
                <div class="search"></div>
                <div class="btnText">搜索</div>
              </div>
              <div class="headers_item_btn btn2" @click="removeSave">
                <div class="search"></div>
                <div class="btnText">重置</div>
              </div>
            </div>
          </div>
          <div class="content" style="padding: 10px 35px;">
            <a-table
              :columns="columnsAdd"
              :data-source="tableDataAdd"
              :loading="tableLoadingAdd"
              :scroll="{ x: 'max-content' }"
              :pagination="paginationAdd"
            >
              <template #addAuthority="{ record, column }">
                <a-space>
                  <a-button type="link" @click="powerSetting(record)">
                    <span>权限配置</span>
                  </a-button>
                  <a-button type="link" :disabled="record.status==0||record.statusList == 0" @click="textEnableAdd(record)">
                    <span>启用</span>
                  </a-button>
                  <a-button type="link" @click="textDeleteAdd(record,index)">
                    <span class="download">删除</span>
                  </a-button>
                </a-space>
              </template>
            </a-table>
          </div>
          <div class="bg_body">
            <div class="bg_footer" style="margin-left: 288px;">
              <div class="btn btn6" @click="of_addsetting">
                <div class="btnText">取消</div>
              </div>
              <a-button
                class="btn btn6"
                @click="addSettingUp"
              >
                确定
              </a-button>
            </div>
          </div>
        </div>
      </div>
    </a-modal>
    <!-- 修改权限设置 -->
    <a-modal 
      v-model:visible="bg_power"
      :footer="null"
      closable="false"
      style="margin-top: 400px"
      @cancel="of_power"
    >
      <div class="selectonlineface" style="width: 524px" :style="{ display: bg_power ? 'block' : 'none' }">
        <div class="bg_headers"></div>
          <div class="bg_main">
            <div class="bg_main_header">
              <div>权限配置</div>
              <div class="bg_main_header_close" @click="of_power"></div>
            </div>
            <div class="bg_body">
              <div class="bg_body_bt" style="align-items: flex-start;" v-if="btShow">
                <a-checkbox-group v-model:value="checkclick">
                  <a-row>
                    <a-col :span="8" style="margin-left:120px">
                      <a-checkbox value="1">查看</a-checkbox>
                    </a-col>
                    <a-col :span="8">
                      <a-checkbox value="2">上传</a-checkbox>
                    </a-col>
                    <a-col :span="8" style="margin-left:120px">
                      <a-checkbox value="3">清空</a-checkbox>
                    </a-col>
                    <a-col :span="8">
                      <a-checkbox value="4">编辑</a-checkbox>
                    </a-col>
                    <a-col :span="8" style="margin-left:120px">
                      <a-checkbox value="5">下载</a-checkbox>
                    </a-col>
                    <a-col :span="8">
                      <a-checkbox value="6">删除</a-checkbox>
                    </a-col>
                  </a-row>
                </a-checkbox-group>
              </div>
              <div class="bg_footer" style="margin-left:106px">
                <div class="btn btn6" @click="of_power">
                  <div class="btnText">取消</div>
                </div>
                <a-button
                  class="btn btn6"
                  @click="powerTrue"
                >
                  确定
                </a-button>
              </div>
            </div>
          </div>
        </div>
      </a-modal>
      <a-modal 
      v-model:visible="bg_power2"
      :footer="null"
      closable="false"
      style="margin-top: 400px"
      @cancel="of_power"
    >
      <div class="selectonlineface" style="width: 524px" :style="{ display: bg_power2 ? 'block' : 'none' }">
        <div class="bg_headers"></div>
          <div class="bg_main">
            <div class="bg_main_header">
              <div>权限配置</div>
              <div class="bg_main_header_close" @click="of_power"></div>
            </div>
            <div class="bg_body">
              <div class="bg_body_bt" style="align-items: flex-start;" v-if="btShow">
                <a-checkbox-group v-model:value="checkclick">
                  <a-row>
                    <a-col :span="8" style="margin-left:120px">
                      <a-checkbox value="1">查看</a-checkbox>
                    </a-col>
                    <a-col :span="8">
                      <a-checkbox value="2">上传</a-checkbox>
                    </a-col>
                    <a-col :span="8" style="margin-left:120px">
                      <a-checkbox value="3">清空</a-checkbox>
                    </a-col>
                    <a-col :span="8">
                      <a-checkbox value="4">编辑</a-checkbox>
                    </a-col>
                    <a-col :span="8" style="margin-left:120px">
                      <a-checkbox value="5">下载</a-checkbox>
                    </a-col>
                    <a-col :span="8">
                      <a-checkbox value="6">删除</a-checkbox>
                    </a-col>
                  </a-row>
                </a-checkbox-group>
              </div>
              <div class="bg_footer" style="margin-left:106px">
                <div class="btn btn6" @click="of_power">
                  <div class="btnText">取消</div>
                </div>
                <a-button
                  class="btn btn6"
                  @click="powerTrue"
                >
                  确定
                </a-button>
              </div>
            </div>
          </div>
        </div>
      </a-modal>
  </div>
  <div class="aeLoading" style="z-index:999999" :style="{ display: uploadDownLoad ? 'flex' : 'none' }">
      <a-spin :spinning="uploadDownLoad" tip="" />
    </div>
</template>

<script>
import { reactive, toRefs, ref, watch,computed,onMounted } from "vue";
import { DownOutlined } from '@ant-design/icons-vue';
import {getCookieForName} from "@/api/method";
import { useRouter } from "vue-router";
import dialog from "@/utils/dialog";
import NameInput from "@/components/project/NameInput";
import {boeRequest} from "@/api/request";
import { 
  list,
  importList,
  save,
  uploadImage,
  adminList,
  saveEvaluationDetail,
  updateStatus,
  deleteList,
  clear,
  savePermission,
  saveLists,
  deleteId
 } from "@/api/evaluation";
import { useStore } from "vuex";
import { message } from "ant-design-vue";
  export default {
    name: 'evaluationUpload',
    components:{
      DownOutlined,
      NameInput,
    },
    setup() {
      const store = useStore();
      const userInfo = computed(() => store.state.userInfo);
      const router = useRouter();
      const state = reactive({
        totalNumber: {},
        stateType:'',
        uploadDownLoad: false,
        uploadDownId: '',
        loadData: false,
        saveList: [],
        powerStatus:{},
        saveListPid: '',
        idValue: null,
        valueAll: [],
        uploadStatus: true,
        uploadId: '',
        uploadName: '',
        serchName: '',
        bg_power: false,
        bg_power2: false,
        tableLoading: false,
        tableLoadingAdd: false,
        tableLoadingAut: false,
        total: 0,
        totalAdd: 0,
        params: {
          pageNo: 1,
          pageSize: 10,
        },
        paramsAdd: {
          pageNo: 1,
          pageSize: 10,
        },
        tableDataTotal: 0,
        searchParam:{
          pageNo: 1,
          pageSize: 10,
          status: 0,
          status2: null,
        },
        errorMessage: '',
        formData: {
          evaluationName: '',
          validated: 0,
          id: '',
          imageUrl: '',
          remarks: '',
        },
        bg_check: false,
        btShow: true,
        btShowEdit: true,
        bg_edit: false,
        bg_setting: false,
        bg_addsetting: false,
        bg_results: false,
        bg_remarks: false,
        checkclick: [],
        permissionId:'',
        filesList:[],
        tableData:[],
        tableData1:[],
        tableDataAdd:[]
      })
      // const searchStatusVal = ref([
      //   { value: 0, label: "全部" },
      //   { value: 1, label: "草稿" },
      //   { value: 2, label: "更新待发布" },
      //   { value: 3, label: "已发布" },
      // ]);
      onMounted(()=>{
        state.tableLoading = true
        listData()
      })
      const trueFalse = (per,i) => {
        if (per) {
          return (per + "").split(",").some(t => t== i);
        }
      }
      //搜索
      const serchList = () => {
        state.tableLoading = true
        state.serchName = state.searchParam.createName
        state.searchParam.pageNo = 1
        listData()
      }
      const serchListNo = () => {
        state.searchParam.createName = ''
        state.searchParam.pageNo = 1
        serchList()
      }
      const listData = async () => {
        await list({
          evaluationName: state.serchName,
          pageNo: state.searchParam.pageNo,
          pageSize: state.searchParam.pageSize,
          workNum:userInfo.value.userNo
        }).then((res) => {
          console.log(res,'resdata')
          state.tableData = res.data.records
          state.tableDataTotal = res.data.total
          state.tableLoading = false
        });
      }
      //分配权限
      const searchStatusVal2 = ref([
        { value: null, label: "全部" },
        { value: 0, label: "启用" },
        { value: 1, label: "禁用" },
      ]);
      const pagination = computed(() => ({
        total: state.total,
        showSizeChanger: true,
        showQuickJumper: false,
        current: state.params.pageNo,
        pageSize: state.params.pageSize,
        onChange: changePaginations,
      }))
      const changePaginations = (page,pageSize) => {
        state.params.pageNo = page
        state.params.pageSize = pageSize
        saveListItem()
      }
      watch(()=>state.params.pageSize,()=>{
        state.params.pageNo = 1
        saveListItem()
      })
      // 添加权限
      const paginationAdd = computed(() => ({
        total: state.totalAdd,
        showSizeChanger: true,
        showQuickJumper: false,
        current: state.paramsAdd.pageNo,
        pageSize: state.paramsAdd.pageSize,
        onChange: changePaginationsAdd,
      }))
      const changePaginationsAdd = (page,pageSize) => {
        state.paramsAdd.pageNo = page
        state.paramsAdd.pageSize = pageSize
        searchSave()
      }
      const columns = ref([
        {
          title: "ID",
          dataIndex: "id",
          key: "id",
          className: "h",
          ellipsis: true,
          width: 100,
        },
        {
          title: "测评名称",
          dataIndex: "evaluationName",
          key: "evaluationName",
          className: "h",
          ellipsis: true,
          width: 100,
        },
        {
          title: "备注",
          dataIndex: "remarks",
          key: "remarks",
          className: "h",
          ellipsis: true,
          width: 100,
        },
        {
          title: "报告总量",
          dataIndex: "reportReleaseNums",
          key: "reportReleaseNums",
          className: "h",
          ellipsis: true,
          width: 100,
        },
        {
          title: "上传日期",
          dataIndex: "uploadTime",
          key: "uploadTime",
          className: "h",
          ellipsis: true,
          width: 100,
        },
        {
          title: "操作",
          width: "20%",
          dataIndex: "id",
          key: "id",
          align: "right",
          slots: { customRender: "operation" },
        },
      ])
      const columns2 = ref([
        {
          title: "姓名",
          dataIndex: "name",
          key: "name",
          className: "h",
          ellipsis: true,
          width: 100,
        },
        {
          title: "工号",
          dataIndex: "workNum",
          key: "workNum",
          className: "h",
          ellipsis: true,
          width: 100,
        },
        {
          title: "组织部门",
          dataIndex: "organizationalDepartment",
          key: "organizationalDepartment",
          className: "h",
          ellipsis: true,
          width: 150,
          customRender: ({ text }) => {
            return text ? text : "";
          },
        },
        {
          title: "添加时间",
          dataIndex: "updateTime",
          key: "updateTime",
          className: "h",
          ellipsis: true,
          width: 200,
        },
        {
          title: "权限",
          dataIndex: "permission",
          key: "permission",
          className: "h",
          ellipsis: true,
          width: 200,
          customRender: ({ text }) => {
            if(text == null){
              return ""
            }
            const permissions = text.split(',').map(Number);
            const displayTexts = [];
            for (const permission of permissions) {
              switch (permission) {
                case 1:
                  displayTexts.push("查看");
                  break;
                case 2:
                  displayTexts.push("上传");
                  break;
                case 3:
                  displayTexts.push("清空");
                  break;
                case 4:
                  displayTexts.push("编辑");
                  break;
                case 5:
                  displayTexts.push("下载");
                  break;
                case 6:
                  displayTexts.push("删除");
                  break;
              }
            }
            return displayTexts.join(", ");
          },
        },
        {
          title: "状态",
          dataIndex: "status",
          key: "status",
          className: "h",
          ellipsis: true,
          width: 100,
          customRender: (value) =>{
            if(value.record.status == 0){
              return "启用"
            }else{
              return "禁用"
            }
          }
        },
        {
          title: "操作",
          width: "150",
          dataIndex: "id",
          key: "id",
          align: "center",
          slots: { customRender: "action" },
        },
      ])
      const columnsAdd = ref([
        {
          title: "姓名",
          dataIndex: "realName",
          key: "realName",
          className: "h",
          ellipsis: true,
          width: 100,
        },
        {
          title: "工号",
          dataIndex: "departId",
          key: "departId",
          className: "h",
          ellipsis: true,
          width: 100,
        },
        {
          title: "组织部门",
          dataIndex: "departName",
          key: "departName",
          className: "h",
          ellipsis: true,
          width: 100,
        },
        {
          title: "添加时间",
          dataIndex: "addTime",
          key: "addTime",
          className: "h",
          ellipsis: true,
          width: 100,
        },
        {
          title: "操作",
          width: "20%",
          dataIndex: "id",
          key: "id",
          align: "center",
          slots: { customRender: "addAuthority" },
        },
      ])
      // const textEnable = (record) => {
      //   record.status = 1
      //   console.log(record,'aaaaa')
      // }
      const textDisabled = async (record) => {
        await updateStatus({status:1,id:record.id}).then((res)=>{
          console.log(res,'res')
          if(res.code === 200){
            message.success('禁用成功')
            saveListItem()
          }
        })
      }
      const textDelete = (record) => {
        console.log(record.id,'aaaaa')
        dialog({
          content: '是否删除？',
          ok: () => {
            deleteId({id:record.id}).then((res)=>{
              if(res.code === 200){
                message.success('删除成功')
                saveListItem()
              }
            })
          }
        })
      }
      const updateAuthority = (record) => {
        state.bg_power = true
        state.permissionId = record.id
        if(record.permission){
          state.checkclick = record.permission.split(',')
        }
      }
      const bgcheck = (record) =>{
        router.push({
          path:'/evadown',
          query:{id:record.id,name:record.evaluationName}
        })
      }
      watch(() => state.searchParam.pageSize, () => {
        state.tableLoading = true
        state.searchParam.pageNo = 1
        listData()
      })
      const changePagination = (page,pageSize) => {
        state.tableLoading = true
        state.searchParam.pageNo = page;
        state.searchParam.pageSize = pageSize;
        listData()
      };
      //报告上传
      const bgupload = () => {
        state.uploadId = ''
        state.valueAll = []
        state.bg_check = true;
        state.formData = {}
      }
      const bgupload1 = (record) => {
        console.log(record,'record')
        state.valueAll = []
        state.uploadDownId =record.id
        state.btShowEdit = trueFalse(record.permission,2)
        state.uploadId = record.id
        state.uploadName = userInfo.value.realName
        state.formData = {...record}
        state.uploadStatus = false
        state.bg_check = true;
        state.btShow = trueFalse(record.permission,4)
      }
      const downloadAll = async (record) => {
        window.open(`/activityApi/evaluation/download?id=${record.id}`);
      }
      const of_exit = () => {
        state.bg_check = false;
        state.errorMessage = ''
        // state.uploadId = ''
        state.uploadName = ''
        state.loadData = false
        state.uploadStatus = true
        state.btShow = true
        state.btShowEdit = true
      }
      // 上传结果
      const of_results = () => {
        state.bg_results = false
      }
      const resultsUp = () => {
        state.bg_results = false
      }
      const failedDownload = () => {
        console.log('aaa')
        window.open(`/activityApi/evaluation/download?id=${state.totalNumber.failedIds}`);
      }
      const reportUpload = async () => {
        if(!state.formData.evaluationName){
          message.error('请输入测评标题名称')
          return
        }
        state.tableLoading = true
        
        if(state.uploadStatus||state.btShow){
          console.log(state.uploadStatus,'state.uploadStatus')
          await save({
            id: state.uploadDownId,
            creatId:userInfo.value.userId,
            creatName:userInfo.value.realName,
            prefix:'',
            remarks:state.formData.remarks,
            evaluationName:state.formData.evaluationName,
            detailIds:state.idValue,
            imagePath:state.formData.imageUrl
          }).then((res)=>{
            console.log(res.data,'data')
          })
        }
        if(state.valueAll.length != 0 && !state.loadData){
          if(state.valueAll.length >1){
            state.bg_results = true
          }
          state.valueAll.forEach((item)=>{
            if(item.createId){
              item.createId = userInfo.value.userId
            }
          })
          // 
          await saveEvaluationDetail({evaluationDetailListlist:state.valueAll,pid:state.uploadId}).then((res)=>{
            if(res.code == 200){
              message.success(res.msg)
            }
            if(res.data.code == -1){
              message.error('保存失败')
            }
            console.log(res,'aaa')
          })
        }
        //else{
        //   state.bg_results = true
        //   state.valueAll.forEach((item)=>{
        //     if(item.createId){
        //       item.createId = userInfo.value.userId
        //     }
        //   })
        //   await saveEvaluationDetail({evaluationDetailListlist:state.valueAll,pid:state.uploadId}).then((res)=>{
        //     console.log(res.data,'json')
        //   })
        // }
        of_exit()
        listData()
      }
      const showUpload = () => {
        reportUpload()
        of_exit()
      }
      //上传图片
      const headers = { token: getCookieForName("token") };
      const beforeUpload = (file) => {
        console.log(file,'file')
        const isJpgOrPng =
          file.type === "image/jpg" ||
          file.type === "image/png"
        if (!isJpgOrPng) {
          message.error("仅支持jpg、png格式!");
          return false;
        }

        let isLt1M = file.size < 2000000;
        console.log(file.size, isLt1M)
        if (!isLt1M) {
          message.error("图片大小超过2MB!");
          return false;
        }
        const formData = new FormData();
        formData.append("file", file);
        uploadImage(formData).then((res) => {
          if (res.status === 200) {
            state.formData.imageUrl = res.data.split('Path:')[1];
          }
        });
        return false;
      };
      const beforeUpload3 = async (file) => {
        state.stateType = file.type
        const pattern = /^([0-9\u4e00-\u9fa5\a-z\A-Z]+-){2}[0-9\u4e00-\u9fa5\a-z\A-Z]+\.\w*$/;
        console.log(file,'file')
        if (!pattern.test(file.name)) {
          message.error('上传文件名称格式不对')
          return false
        }
        const isJpgOrPng =
          file.type === "application/x-zip-compressed" ||
          file.type === "application/pdf"
          console.log(isJpgOrPng,'false')
        if (!isJpgOrPng) {
          message.error("仅支持zip、pdf格式!");
          return false;
        }
        state.uploadDownLoad = true
        // const formData = new FormData();
        const formData = {
          file: file
        }
        // formData.append("file", file);
        if(state.uploadId){
            formData.pid= state.uploadId,
            formData.uploadName=userInfo.value.realName,
            formData.createId= userInfo.value.userId,
            formData.createName= userInfo.value.realName
          // formData.append("pid", state.uploadId);
          // formData.append("uploadName", userInfo.value.realName);
          // formData.append("createId", userInfo.value.userId);
          // formData.append("createName", userInfo.value.realName);
        }else{
          // formData.append("uploadName", userInfo.value.realName);
          // formData.append("createId", userInfo.value.userId);
          // formData.append("createName", userInfo.value.realName);
            // pid: state.uploadId,
            formData.uploadName=userInfo.value.realName,
            formData.createId= userInfo.value.userId,
            formData.createName= userInfo.value.realName
        }
        boeRequest('/activityApi/evaluation/import post formData',formData).then((res)=>{
          if(res.code === 200){
            if(state.stateType == "application/pdf"){
              state.idValue = res.data.map(item=>item.id)
              state.valueAll = res.data
            }else{
              state.idValue = res.data.evaluationDetailList.map(item=>item.id)
              state.valueAll = res.data.evaluationDetailList
              state.totalNumber = res.data
            }
            console.log(state.valueAll,'state.valueAll')
            state.uploadDownLoad = false
          }
        })
        // await importList(formData).then((res)=>{
        //   if(res.code === 200){
        //     if(state.stateType == "application/pdf"){
        //       state.idValue = res.data.map(item=>item.id)
        //       state.valueAll = res.data
        //     }else{
        //       state.idValue = res.data.evaluationDetailList.map(item=>item.id)
        //       state.valueAll = res.data.evaluationDetailList
        //       state.totalNumber = res.data
        //     }
        //     console.log(state.valueAll,'state.valueAll')
        //     state.uploadDownLoad = false
        //   }
        // }).catch((err)=>{
        //   state.uploadDownLoad = false
        //   console.log(err,'err')
        // })
        // try {
        //   const response = await axios.post('/activityApi/evaluation/import', formData);
        //   const jsonData = JSONbig({ storeAsString: true }).parse(response.data);

        //   if (jsonData.code === 200) {
        //     console.log(jsonData.data, 'jsondata.data')
        //   }
        // } catch (error) {
        //   console.error("Error fetching data:", error);
        // }
        return false
      }
      const handleChange = (info) => {
        // return
        console.log(info,'inffofofoffo')
        let resFileList = [...info.fileList];

        resFileList = resFileList.slice(-2);

        resFileList = resFileList.map(file => {
          if (file.response) {
            file.url = file.response.url;
          }
          return file;
        });
        state.filesList = resFileList;
      }
      const deleteItem = (record) => {
        dialog({
          content: '请您确认是否要删除测评？',
          ok: () => {
            deleteList({id:record.id}).then((res)=>{
              if(res.code === 200 ){
                message.success('删除成功')
                listData()
              }
            })
          }
        })
      }
      const emptyItem = (record) => {
        dialog({
          content: '请您确认是否要清空全部报告？',
          ok: () => {
            clear({
              createId:userInfo.value.userId,
              id:record.id
            }).then((res)=>{
              console.log(res,'data')
              message.success('清空成功')
              listData()
            })
          }
        })
      }
      // 备注
      // const openRemarks = (record) => {
      //   state.bg_remarks = true
      //   state.formData.remarks = record.remarks
      // }
      // const of_remarks = () => {
      //   state.bg_remarks = false
      // }
      // const remarksUpdata = () => {
      //   state.tableData[0].remarks = state.formData.remarks
      //   state.bg_remarks = false
      // }
      // 编辑
      const openEdit = (record) => {
        state.uploadDownId =record.id
        state.bg_check = true
        state.btShow = true
        state.btShowEdit = false
        state.loadData = true
        state.formData = {...record}
      }
      //权限列表
      const saveListItem = async () => {
        state.tableLoadingAut = true
        await boeRequest('/activityApi/permission/list post',{
          pid:state.saveListPid,
          nameOrWorkNum:state.searchParam.createNames,
          status:state.searchParam.status2,
          pageNo: state.params.pageNo,
          pageSize: state.params.pageSize
        }).then((res)=>{
          if(res.code === 200){
            state.tableData1 = res.data.records
            state.total = res.data.total
            state.tableLoadingAut = false
          }
        })
        // await saveLists({
        //   pid:state.saveListPid,
        //   nameOrWorkNum:state.searchParam.createNames,
        //   status:state.searchParam.status2,
        //   pageNo: state.params.pageNo,
        //   pageSize: state.params.pageSize
        // }).then((res)=>{
        //   console.log(res,'res')
        //   if(res.code === 200){
        //     state.tableData1 = res.data.records
        //     state.total = res.data.total
        //     state.tableLoadingAut = false
        //   }
        // })
      }
      // 权限
      const authorityItem = async (record) => {
        console.log(record,'record')
        state.saveListPid = record.id
        state.bg_setting = true
        saveListItem()
      }
      const of_setting = () => {
        state.params.pageNo = 1
        state.bg_setting = false
        // listData()
      }
      const settingUp = () => {
        state.bg_setting = false
        listData()
      }
      // 测评
      // const editName = (record) => {
      //   state.bg_edit = true
      //   console.log(record,'aaa')
      //   state.formData.evaluationName = record.evaluationName
      // }
      // const of_edit = () => {
      //   state.bg_edit = false
      // }
      // const editUpdata = () => {
      //   state.bg_edit = false
      // }
      //添加权限
      const addAuths = () => {
        state.bg_addsetting = true
        state.formData[0].checkbox = ['1','5']
      }
      //搜索权限列表
      const searchSaveList = () => {
        state.params.pageNo = 1
        saveListItem()
      }
      const of_addsetting = () => {
        state.bg_addsetting = false
        state.searchParam.createName = ''
        state.tableDataAdd = []
        state.saveList = []
      }
      //搜索权限
      const searchSave = async () => {
        state.tableLoadingAdd = true
        // await adminList({
        //   keyword:state.searchParam.createName,
        //   pageNo: state.paramsAdd.pageNo,
        //   pageSize: state.paramsAdd.pageSize,
        // }).then((res)=>{
        //   if(res.code === 200){
        //     console.log(res.data,'aaaa')
        //     state.tableDataAdd = res.data
        //     state.tableLoadingAdd = false
        //     console.log(res,'res')
        //     const workNums = state.tableData1.map(item=>item.workNum)
        //     state.tableDataAdd.forEach(item => {
        //       if(workNums.includes(item.userNo))
        //       item.status = 0
        //     })
        //   }
        // })
        await boeRequest('/activityApi/permission/adminList post',{
          keyword:state.searchParam.createName,
          pageNo: state.paramsAdd.pageNo,
          pageSize: state.paramsAdd.pageSize,
        }).then((res)=>{
          console.log(res.data,'aaaaa')
          if(res.code === 200){
            state.tableDataAdd = res.data
            state.tableLoadingAdd = false
            console.log(res,'res')
            const workNums = state.tableData1.map(item=>item.workNum)
            state.tableDataAdd.forEach(item => {
              if(workNums.includes(item.userNo))
              item.status = 0
            })
          }
        })
      }
      const removeSave = () => {
        state.searchParam.createName = ''
        state.tableDataAdd = []
      }
      //添加权限确定
      const addSettingUp = async () => {
        console.log(state.saveList,'saveList')
        await savePermission({userList:state.saveList,pid:state.saveListPid})
        saveListItem()
        of_addsetting()
        listData()
      }
      const powerSetting = async (record) => {
        state.powerStatus = (record)
        state.bg_power2 = true
        // state.checkclick = record.permission
      }
      const of_power = () => {
        state.bg_power = false
        state.bg_power2 = false
        state.powerStatus = {}
        state.permissionId = ''
        state.checkclick = []
      }
      const powerTrue = async () => {
        // state.tableLoadingAdd = true
        state.powerStatus.permission = state.checkclick.join(",")
        // state.powerStatus.permissionStatus = 0
        // state.powerStatus[0].permission = state.checkclick.join(",")
        // await savePermission({userList:state.powerStatus,pid:state.saveListPid}).then((res)=>{
        //   if(res.code === 200){
        //     searchSave()
        //     saveListItem()
        //   }
        // })
        if(state.permissionId){
          await updateStatus({id:state.permissionId,permission:state.checkclick.join(",")}).then((res)=>{
            console.log(res,'res')
            saveListItem()
          })
        }
        listData()
        of_power()
      }
      const textEnableAdd2 = async (record) => {
        await updateStatus({status:0,id:record.id}).then((res)=>{
          if(res.code === 200){
            message.success('启用成功')
            // record.statusList = 0
            // if(state.powerStatus.id === record.id){
            //   state.saveList.push(state.powerStatus)
            // }else{
            //   state.saveList.push(record)
            // }
            listData()
            saveListItem()
          }
        })
      }
      const textEnableAdd = async (record) => {
        record.statusList = 0
        if(state.powerStatus.id === record.id){
          state.powerStatus.permissionStatus = 0
          state.saveList.push(state.powerStatus)
        }else{
          record.permissionStatus = 0
          state.saveList.push(record)
        }
        // await updateStatus({status:0,id:record.id}).then((res)=>{
        //   if(res.code === 200){
        //     message.success('启用成功')
        //     record.statusList = 0
        //     if(state.powerStatus.id === record.id){
        //       state.saveList.push(state.powerStatus)
        //     }else{
        //       state.saveList.push(record)
        //     }
        //     saveListItem()
        //   }
        // })
      }
      const textDeleteAdd = (record,index) => {
        dialog({
          content: '是否删除？',
          ok: () => {
            state.tableDataAdd.splice(index,1)
          }
        })
      }
      
      return {
        ...toRefs(state),
        userInfo,
        // searchStatusVal,
        listData,
        addAuths,
        searchSaveList,
        of_addsetting,
        searchSave,
        removeSave,
        addSettingUp,
        textEnableAdd,
        textEnableAdd2,
        powerSetting,
        of_power,
        powerTrue,
        textDeleteAdd,
        searchStatusVal2,
        serchList,
        serchListNo,
        trueFalse,
        columns,
        columnsAdd,
        columns2,
        bgupload,
        of_exit,
        reportUpload,
        showUpload,
        of_results,
        resultsUp,
        failedDownload,
        of_setting,
        settingUp,
        // of_edit,
        // editUpdata,
        // createft,
        bgupload1,
        downloadAll,
        headers,
        beforeUpload,
        beforeUpload3,
        handleChange,
        bgcheck,
        deleteItem,
        emptyItem,
        // editName,
        // openRemarks,
        // of_remarks,
        // remarksUpdata,
        openEdit,
        authorityItem,
        saveListItem,
        changePagination,
        changePaginations,
        changePaginationsAdd,
        pagination,
        paginationAdd,
        textDisabled,
        textDelete,
        updateAuthority,
        // textEnable,
      }
    }
  }
</script>

<style lang="scss" scoped>
::v-deep .ant-dropdown{
  left: 144px !important;
}
.evaluationUpload{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .headers{
    margin-left: 38px;
    margin-right: 38px;
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .btn{
      display: flex;
    }
    .headers_item{
      margin-right: 20px;
      margin-bottom: 20px;
      .headers_item_text{
        margin-right: 15px;
      }
      .headers_item_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;
        }
      }
      .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");
        }
      }
      ::v-deep .ant-select {
        border-radius: 5px;
        width: 100%;
        height: 40px;
        .ant-select-selector {
          border-radius: 8px;
          width: 100%;
          height: 40px;
        }
        .ant-select-selection-placeholder{
          line-height: 40px;
        }
        .ant-select-selection-item{
          line-height: 40px;
        }
      }
    }
  }
  .content{
    padding: 10px 35px;
    .check{
      width: 30px;
      height: 32px;
      background: url("../../assets/images/evaluation/check.png") no-repeat;
      background-size: 100%;
    }
    .upload{
      width: 30px;
      height: 32px;
      background: url("../../assets/images/evaluation/upload.png") no-repeat;
      background-size: 100%;
    }
    .download{
      width: 30px;
      height: 32px;
      background: url("../../assets/images/evaluation/download.png") no-repeat;
      background-size: 100%;
    }
    .tableBox {
      padding-bottom: 20px;
      margin: 20px 38px 30px;
      ::v-deep .ant-select-dropdown{
        display: inline-block;
      }
      ::v-deep .ant-select-selection-item{
        margin-left: 3px;
      }
      ::v-deep .ant-pagination-options-size-changer.ant-select{
        width: 84px;
      }
      .pa {
        width: 100%;
        display: flex;
        justify-content: right;
      }
    }
  }
}
.selectonlineface{
    z-index: 999;
    width: 679px;
    background: #ffffff;
    box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
    position: absolute;
    left: 50%;
    top: -100%;
    transform: translate(-50%, -50%);
    .bg_headers {
      position: absolute;
      width: 100%;
      height: 40px;
      background: linear-gradient(
        rgba(78, 166, 255, 0.2) 0%,
        rgba(78, 166, 255, 0) 100%
      );
    }
    .bg_main {
      width: 100%;
      position: relative;
      .bg_main_header {
        display: flex;
        align-items: center;
        padding-top: 20px;
        padding-left: 26px;
        font-size: 16px;
        .bg_main_header_icon {
          width: 16px;
          height: 16px;
          margin-right: 10px;
          background-image: url(@/assets/images/evaluation/uploads.png);
          background-size: 100% 100%;
        }
        .bg_main_header_close {
          position: absolute;
          right: 42px;
          cursor: pointer;
          width: 20px;
          height: 20px;
          background-image: url(@/assets/images/coursewareManage/close.png);
          background-size: 100% 100%;
        }
      }
      .text_color{
        color:#d9d9d9;
      }
      .bg_body {
        width: 80%;
        margin: 3px auto;

        .bg_body_bt {
          display: flex;
          align-items: center;
          justify-content: end;
          margin: 14px auto;

          .bg_body_bttext {
            width: 110px;
            display: flex;
            justify-content: end;
            margin-right: 20px;
            .bg_body_btimg{
              width: 10px;
              height: 10px;
              margin-top: -3px;
              margin-right: 6px;
              background-size: 100% 100%;
            }
          }
          .mbl_items12 {
            // width: 300px;
            margin-left: 128px;
            .item_text{
              width: 300px;
              white-space: nowrap; /* 不换行 */
              overflow: hidden; /* 超出部分隐藏 */
              text-overflow: ellipsis; /* 使用省略号表示被隐藏的部分 */
            }
            .i12_box1 {
              display: flex;
              align-items: center;
              padding: 17px 0px 17px 21px;
              border: 1px solid #eff4fc;
              border-radius: 8px;
              margin-bottom: 10px;

              .file_img {
                width: 27px;
                height: 32px;
                background-image: url(@/assets/images/coursewareManage/imgs.png);
                margin-right: 22px;

                img {
                  width: 100%;
                  height: 100%;
                }
              }

              .file_detail {
                width: 250px;
                margin-right: 21px;

                .file_updata {
                  display: flex;
                  align-items: center;

                  .updatabox {
                    position: relative;
                    width: 230px;
                    height: 5px;
                    background-color: rgba(192, 192, 192, 0.25);
                    border-radius: 3px;

                    .updatacolor {
                      position: absolute;
                      left: 0;
                      width: 100%;
                      height: 5px;
                      background-color: #57c887;
                      border-radius: 3px;
                    }

                    .updatacolor2 {
                      position: absolute;
                      left: 0;
                      width: 80%;
                      height: 5px;
                      background-color: #ff7474;
                      border-radius: 3px;
                    }

                    .updatacolor3 {
                      position: absolute;
                      left: 0;
                      width: 60%;
                      height: 5px;
                      background-color: #4ea6ff;
                      border-radius: 3px;
                    }

                    .updataxq {
                      position: absolute;
                      right: 2px;
                      top: -30px;
                      color: #57c887;
                    }

                    .updataxq2 {
                      position: absolute;
                      right: 2px;
                      top: -30px;
                      color: #ff7474;
                    }

                    .updataxq3 {
                      position: absolute;
                      right: 2px;
                      top: -30px;
                      color: #4ea6ff;
                    }
                  }
                }
              }

              .file_operation {
                display: flex;

                .fobox {
                  margin-right: 5px;
                  cursor: pointer;
                }
              }
            }
          }
        }
        .bg_body_input {
          flex: 1;
          position: relative;
          .ant-upload-picture-card-wrapper{
            width: 200px;
            margin-right: 18px;
          }
          .i_upload_img {
              width: 200px;
              height: 112px;
            }
            ::v-deep .ant-upload.ant-upload-select-picture-card{
              width: 200px;
              height: 112px;
            }
            .i_upload {
              width: 200px;
              height: 112px;
              text-align: center;
              align-items: center;
              cursor: pointer;

              .addimg {
                position: relative;

                .heng {
                  position: absolute;
                  top: 59px;
                  left: 71px;
                  width: 60px;
                  border: 1px solid #d9d9d9;
                }

                .shu {
                  position: absolute;
                  top: 30px;
                  left: 100px;
                  height: 60px;
                  border: 1px solid #d9d9d9;
                }
              }
            }
          .upload_box{
            border: 1px solid #d9d9d9;
            padding: 2px 5px;
            background-color: #d9d9d9;
            border-radius: 2px;
            cursor: pointer;
          }
          .error-message{
            color: red;
            font-size: 11px;
            margin-top: 2px;
            margin-bottom: 0;
          }
        }
        .bg_footer {
          width: 100%;
          margin-left: 174px;
          margin-top: 25px;
          margin-bottom: 20px;
          display: flex;

          .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;
            }
          }

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

          .btn6 {
            background-color: #4ea6ff;
            color: #ffffff;
          }
        }
      }
      .headers{
        margin-left: 38px;
        margin-right: 38px;
        margin-top: 30px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        .btn{
          display: flex;
        }
        .headers_item{
          margin-right: 20px;
          margin-bottom: 20px;
          .headers_item_text{
            margin-right: 15px;
          }
          .headers_item_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;
            }
          }
          .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");
            }
          }
          ::v-deep .ant-select {
            border-radius: 5px;
            width: 100%;
            height: 40px;
            .ant-select-selector {
              border-radius: 8px;
              width: 100%;
              height: 40px;
            }
            .ant-select-selection-placeholder{
              line-height: 40px;
            }
            .ant-select-selection-item{
              line-height: 40px;
            }
          }
        }
      }
    }
  }
.btn_item{
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  .release{
    width: 20px;
    height: 22px;
    background: url("../../assets/images/evaluation/release.png") no-repeat;
    background-size: 100%;
    margin-right: 2px;
  }
  .authority{
    width: 20px;
    height: 22px;
    background: url("../../assets/images/evaluation/authority.png") no-repeat;
    background-size: 100%;
    margin-right: 2px;
  }
  .edit{
    width: 20px;
    height: 22px;
    background: url("../../assets/images/evaluation/edit.png") no-repeat;
    background-size: 100%;
    margin-right: 2px;
  }
  .delete{
    width: 20px;
    height: 22px;
    background: url("../../assets/images/evaluation/delete.png") no-repeat;
    background-size: 100%;
    margin-right: 2px;
  }
  .empty{
    width: 20px;
    height: 22px;
    background: url("../../assets/images/evaluation/empty.png") no-repeat;
    background-size: 100%;
    margin-right: 2px;
  }
}

</style>