<template>
  <div class="growthpath">
    <div class="filterItems">
      <div class="select multi" style="min-width: 264px; height: 40px">
        <PostSelectNew v-model:value="statusPost"> </PostSelectNew>
      </div>
      <div class="select multi" style="min-width: 181px; height: 40px">
        <OfficeSelect v-model:value="statusOffice" :searchData="statusPost" />
      </div>
      <div class="select">
        <a-select
          v-model:value="statusValue"
          style="width: 181px; height: 40px"
          placeholder="请选择发布状态"
          :options="statusValues"
          allowClear
        ></a-select>
      </div>
      <!-- <div class="select">
        <a-select
          v-model:value="dataSourceValue"
          style="width: 181px; height: 40px"
          placeholder="请选择数据来源"
          :options="[
            { value: '1', label: 'AMED' },
            { value: '2', label: '手动添加' },
          ]"
          allowClear
        ></a-select>
      </div> -->
      <div class="grow_btn_left">
        <div class="btn1" @click="searchList">
          <div class="search"></div>
          <div class="btnText">搜索</div>
        </div>
        <div class="btnns2" @click="resetList">
          <div class="search"></div>
          <div class="btnText">重置</div>
        </div>
      </div>
    </div>
    <template v-if="checkMenu('growthAdd')">
      <div class="btns">
        <div class="btn btn3" @click="handleOut">
          <div class="search"></div>
          <div class="btnText">创建必修</div>
        </div>
      </div>
    </template>
    <div class="grow_con">
      <div class="grow_list">
        <div class="grow_table">
          <a-table
            :columns="columns"
            :data-source="dataList"
            :pagination="false"
            :loading="loadingList"
            :scroll="{ x: 1000 }"
          >
            <template #listData="{ record }">
              <a-button
                type="link"
                class="table_btn"
                v-if="!record.isPublished && checkMenu('growthRelease')"
                @click="releaseLearnPath(record)"
                >发布</a-button
              >
              <a-button
                v-if="checkMenu('growthEdit')"
                type="link"
                class="table_btn"
                @click="editPath(record)"
                >编辑</a-button
              >
              <a-button
                type="link"
                v-if="checkMenu('growthManage')"
                class="table_btn"
                @click="manage(record)"
                >管理</a-button
              >
              <!-- <DropDown v-if="record?.permissions?.includes('17')" value="授权">
                <TableModelStudent :id="record.id" title="转移归属权" :type="17"
                  >归属权</TableModelStudent
                >
                <TableModelStudent :id="record.id" title="添加查看权" :type="15"
                  >查看权</TableModelStudent
                >
                <TableModelStudent :id="record.id" title="添加管理权" :type="16"
                  >管理权</TableModelStudent
                >
              </DropDown> -->
              <a-dropdown
                :getPopupContainer="(triggerNode) => triggerNode.parentNode"
                :trigger="['click']"
                v-if="
                  (record.isPublished && checkMenu('growthRevoke')) ||
                  checkMenu('growthModifyDiscipline') ||
                  (record.dataSource === '2' && checkMenu('growthDelete'))
                "
              >
                <a class="ant-dropdown-link" @click.prevent>
                  更多
                  <DownOutlined />
                </a>
                <template #overlay>
                  <a-menu>
                    <a-menu-item
                      key="1"
                      v-if="record.isPublished && checkMenu('growthRevoke')"
                    >
                      <a-button type="link" @click="withdraw(record)">
                        撤回
                      </a-button>
                    </a-menu-item>
                    <a-menu-item
                      key="3"
                      v-if="checkMenu('growthModifyDiscipline')"
                    >
                      <a-button type="link" @click="updateList(record)">
                        修改记录
                      </a-button>
                    </a-menu-item>
                    <template
                      v-if="
                        record.dataSource === '2' && checkMenu('growthDelete')
                      "
                    >
                      <a-menu-item key="4">
                        <a-button type="link" @click="delData(record)">
                          删除
                        </a-button>
                      </a-menu-item>
                    </template>
                  </a-menu>
                </template>
              </a-dropdown>
            </template>
          </a-table>
          <div class="tableBox">
            <div class="pa">
              <a-pagination
                v-if="total > 1"
                :showSizeChanger="true"
                show-quick-jumper
                :hideOnSinglePage="false"
                :pageSize="pageSize"
                :current="pageNum"
                :show-total="(total) => `共 ${total} 条`"
                :total="total"
                layout="total, sizes, prev, pager, next, jumper"
                class="pagination"
                @change="changePagination"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <a-modal
    v-model:visible="bg_check"
    :footer="null"
    closable="false"
    style="margin-top: 350px"
    @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>{{ editId ? "编辑专业力必修" : "新增专业力必修" }}</div>
          <div class="bg_main_header_close" @click="of_exit"></div>
        </div>
        <div class="bg_body">
          <div class="bg_body_bt">
            <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="statusPosts"
                :disabled="editId"
                style="width: 384px; height: 40px"
                allowClear
                placeholder="填写标准岗位"
              />
            </div>
          </div>
          <div class="bg_body_bt" style="align-items: flex-start">
            <div class="bg_body_bttext" style="margin-top: 11px">
              <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="statusOffices"
                :disabled="editId"
                style="width: 384px; height: 40px"
                allowClear
                placeholder="填写任职资格等级"
              />
            </div>
          </div>
          <div class="bg_body_bt" style="align-items: flex-start">
            <div class="bg_body_bttext" style="margin-top: 11px">
              <div class="bg_body_btimg">
                <img
                  src="@/assets/images/coursewareManage/asterisk.png"
                  alt=""
                />
              </div>
              <span>Band职级</span>
            </div>
            <div class="bg_body_input">
              <a-input
                v-model:value="band"
                :disabled="editId"
                style="width: 384px; height: 40px"
                placeholder="填写Band职级"
                allowClear
              />
            </div>
          </div>
          <div class="bg_body_bt">
            <div class="bg_body_bttext">
              <span>完成选修数量</span>
            </div>
            <div class="bg_body_input">
              <a-input-number
                min="0"
                v-model:value="courseNum"
                style="width: 384px; height: 40px"
                placeholder="填写该路径需完成的选修任务数量"
                allowClear
              >
              </a-input-number>
            </div>
          </div>
          <div class="bg_body_bt" style="align-items: flex-start">
            <div class="bg_body_bttext" style="margin-top: 11px">
              <div class="bg_body_btimg">
                <img
                  src="@/assets/images/coursewareManage/asterisk.png"
                  alt=""
                />
              </div>
              <span>路径图背景</span>
            </div>
            <div class="bg_body_input">
              <div style="display: flex">
                <a-tooltip>
                  <template #title> 建议多于10个学习任务时使用</template>
                  <div
                    @click="template = 1"
                    class="learnBgItem"
                    :style="{
                      border:
                        template == 1
                          ? '2px solid rgba(78, 166, 255, 1)'
                          : '1px solid #ccc',
                    }"
                  >
                    <img
                      class="im"
                      src="../../assets/images/growthpath/path1.png"
                    />
                  </div>
                </a-tooltip>

                <a-tooltip>
                  <template #title>建议少于16个学习任务时使用</template>
                  <div
                    slot="reference"
                    @click="template = 2"
                    class="learnBgItem"
                    :style="{
                      border:
                        template == 2
                          ? '2px solid rgba(78, 166, 255, 1)'
                          : '1px solid #ccc',
                    }"
                  >
                    <img
                      class="im"
                      src="../../assets/images/growthpath/path2.png"
                    />
                  </div>
                </a-tooltip>
              </div>
            </div>
          </div>

          <!-- <div class="bg_body_bt" style="align-items: flex-start">
            <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-radio-group
                v-model:value="matchRules"
                @change="matchRulesChange"
              >
                <div style="display: flex">
                  <a-radio value="1" style="margin-bottom: 15px"
                    >自动匹配学员</a-radio
                  ><br />
                  <a-radio value="2">不自动匹配学员</a-radio>
                </div>
              </a-radio-group>
            </div>
          </div> -->
          <div class="bg_body_bt" style="align-items: flex-start">
            <div class="bg_body_bttext">
              <span>说明</span>
            </div>
            <div class="bg_body_input">
              <a-textarea
                placeholder="最多输入150个字，超出后不可输入"
                style="
                  width: 384px;
                  height: 130px;
                  background: #ffffff;
                  border-radius: 8px;
                  border: 1px solid #c7cbd2;
                "
                v-model:value="pathWays"
                showCount
                :maxlength="150"
              />
            </div>
          </div>
          <div class="bg_footer">
            <div class="button_btn btn7" @click="of_exit">
              <div class="btnText">取消</div>
            </div>
            <a-button
              class="button_btn btn6"
              :loading="uploadDownLoad"
              @click="confirm"
            >
              确定
            </a-button>
          </div>
        </div>
      </div>
    </div>
  </a-modal>
  <a-modal
    v-model:visible="matchRulesVisible"
    title="提示"
    @ok="
      () => {
        keepLearner = true;
        matchRulesVisible = false;
      }
    "
    @cancel="
      () => {
        keepLearner = false;
        matchRulesVisible = false;
      }
    "
  >
    <div style="padding: 30px 24px; font-size: 16px">
      是否保留已绑定的学员？
    </div>
  </a-modal>
  <UpdateRecord ref="UpdateRecordRef" />
</template>

<script>
import {
  reactive,
  toRefs,
  ref,
  onMounted,
  watch,
  computed,
  createVNode,
} from "vue";
import { useRouter } from "vue-router";
import { message } from "ant-design-vue";
import dialog from "@/utils/dialog";
import { DownOutlined } from "@ant-design/icons-vue";
import OrgClass from "@/components/growthpath/OrgClass";
import PostSelectNew from "@/components/growthpath/PostSelect";
import RankSelect from "@/components/growthpath/RankSelect";
import OfficeSelect from "@/components/growthpath/OfficeSelect";
import { checkGrowthPer } from "@/utils/utils";
import DropDown from "@/components/growthpath/GrowthDropDown";
import CommonStudent from "@/components/growthpath/GrowthCommonStudent";
import TableModelStudent from "@/components/growthpath/GrowthTableModel";
import UpdateRecord from "@/components/growthpath/UpdateRecord";
import { useStore } from "vuex";
import { checkMenu } from "@/utils/utils";

import {
  listData,
  published,
  withdrawal,
  updatePostInfomation,
  saveGrowth,
  delGrowth,
} from "@/api/growthpath";
export default {
  name: "growthpath",
  components: {
    OrgClass,
    DownOutlined,
    PostSelectNew,
    RankSelect,
    DropDown,
    CommonStudent,
    TableModelStudent,
    UpdateRecord,
    OfficeSelect,
  },
  setup() {
    onMounted(() => {
      // 掉接口
      listDatas();
    });
    // 动态引入图片
    const getAssetsFile = (url) => {
      return new URL(
        `../../assets/image/growthpath/${url}.png`,
        import.meta.url
      ).href;
    };
    // 路径图背景选项
    const imgData = [
      {
        url: getAssetsFile("path1"),
        code: 1,
      },
      {
        url: "../../assets/image/growthpath/addrenwu.png",
        code: 2,
      },
    ];
    const store = useStore();
    const router = useRouter();
    const state = reactive({
      band: null,
      statusOffices: null,
      bg_check: false,
      statusPostCreate: [],
      statusRankCreate: [],
      courseNum: "0",
      isPublished: false,
      matStudens: "",
      elePublishedNum: 0, // 选修发布数量
      pathWays: "",
      statusPost: null,
      matchRules: "1",
      template: 1,
      matchRulesVisible: false,
      statusPostMaps: [],
      statusPosts: null,
      editId: null,
      statusPostList: null,
      statusRank: [],
      statusOffice: null,
      statusRanks: [],
      rankList: [],
      band: "",
      statusValue: null,
      dataSourceValue: null,
      loadingList: false,
      total: 10,
      pageNum: 1,
      pageSize: 10,
      dataList: [],
      keepLearner: false,
    });
    const handleOut = () => {
      state.bg_check = true;
      state.courseNum = 0;
    };
    const releaseLearnPath = (item) => {
      dialog({
        content: "是否发布该条数据？",
        ok: () => {
          published({
            growId: item.id,
          }).then((res) => {
            if (res.data.code == 200) {
              message.success("发布成功");
              listDatas();
            } else {
              message.error(err.data.msg);
            }
          });
          // .catch((err) => {
          //   message.error(err.data.msg);
          // });
        },
      });
    };

    // 删除手动添加的专业力必修
    const delData = (item) => {
      dialog({
        content: "是否删除该条数据？",
        ok: () => {
          delGrowth(item.id)
            .then((res) => {
              if (res.data.code == 200) {
                message.success("删除成功");
                listDatas();
              } else {
                message.error(err.data.msg);
              }
            })
            .catch((err) => {
              message.error(err.data.msg);
            });
        },
      });
    };
    const statusValues = ref([
      { value: true, label: "已发布" },
      { value: false, label: "未发布" },
    ]);
    const columns = ref([
      {
        title: "标准岗位",
        dataIndex: "stdPositionName",
        key: "stdPositionName",
        align: "center",
        ellipsis: true,
        width: 400,
        customRender: ({ record }) => {
          return record.stdPosition
            ? `${record.stdPositionName}（${record.stdPosition}）`
            : `${record.stdPositionName}`;
        },
      },
      {
        title: "任职资格等级",
        dataIndex: "qualsLevelDesr",
        key: "qualsLevelDesr",
        align: "center",
        width: 120,
        ellipsis: true,
      },
      {
        title: "完成人数/总人数",
        align: "center",
        width: 140,
        ellipsis: true,
        customRender: ({ record }) => {
          return `${record.comLearnNum}/${record.learnNum}`;
        },
      },
      {
        title: "必修|选修",
        align: "center",
        width: 110,
        ellipsis: true,
        customRender: ({ record }) => {
          return `${record.requiredTaskNum}|${record.elePublishedNum}`;
        },
      },
      {
        title: "完成比例",
        dataIndex: "ratio",
        key: "ratio",
        width:100,
        align: "center",
        ellipsis: true,
        customRender: ({ record }) => {
          return `${record.ratio * 100}%`;
        },
      },
      {
        title: "状态",
        dataIndex: "isPublished",
        key: "isPublished",
        align: "center",
        width:100,
        ellipsis: true,
        customRender: ({ record }) => {
          return record.isPublished ? "已发布" : "未发布";
        },
      },
      {
        title: "更新时间",
        dataIndex: "updateTime",
        key: "updateTime",
        align: "center",
        width: 200,
        ellipsis: true,
      },
      {
        title: "操作",
        align: "right",
        fixed: "right",
        width: 200,
        slots: { customRender: "listData" },
      },
    ]);
    //自动获取band值
    const getBandCodes = (val) => {
      state.band = val;
    };
    const listDatas = async () => {
      state.loadingList = true;
      let params = {
        pageNum: state.pageNum,
        pageSize: state.pageSize,
        stdPosition: state.statusPost,
        isPublished: state.statusValue,
        bandIdList: state.statusRank, //职级
        qualsLevelCode: state.statusOffice,
        dataSource: state.dataSourceValue,
      };
      console.log(store);
      // 判断当前用户是否是专业力必修角色管理员，如果不是查询列表时需传入员工工号
      let find = store.state.userInfo.roleList.find(
        (item) => item.roleCode === "admin-growth"
      );
      if (!find) {
        params.username = store.state.userInfo.userNo;
      }
      await listData(params).then((res) => {
        if (res.data.code == 200) {
          // 临时权限
          state.dataList = res.data.data.records;
          state.total = res.data.data.total;
          state.loadingList = false;
        }
      });
    };
    const searchList = () => {
      state.pageNum = 1;
      listDatas();
    };
    const resetList = () => {
      state.statusValue = null;
      state.statusPost = null;
      state.statusRank = [];
      state.statusOffice = null;
      state.dataSourceValue = null;
      state.pageNum = 1;
      listDatas();
    };
    const changePagination = (page, pageSize) => {
      state.pageNum = page;
      state.pageSize = pageSize;
      listDatas();
    };

    //编辑
    const editPath = (record) => {
      state.editId = record.id;
      state.statusPosts = record.stdPositionDesr;
      state.statusOffices = record.qualsLevelDesr;
      state.courseNum = record.electivesCompletedNum;
      state.elePublishedNum = record.elePublishedNum;
      state.pathWays = record.description;
      state.band = record.band;
      state.template = record.template;
      state.matchRules = record.matchRules || "1";
      state.bg_check = true;
      state.isPublished = record.isPublished;
    };

    // 切换匹配学员方式
    const matchRulesChange = () => {
      state.matchRulesVisible = true;
    };
    // 确定
    const confirm = () => {
      if (!state.statusPosts) {
        return message.error("请输入标准岗位");
      }
      if (!state.band) {
        return message.error("请输入Band职级");
      }
      if (!state.statusOffices) {
        return message.error("请输入任职资格等级");
      }
      if (state.courseNum !== 0 && !state.courseNum) {
        state.courseNum = 0;
      }
      if (state.editId && state.isPublished) {
        if (state.courseNum > state.elePublishedNum) {
          message.warning("完成选修数量不能大于已发布的选修数量");
          state.courseNum = state.elePublishedNum;
          return;
        }
      }

      const params = {
        stdPositionDesr: state.statusPosts,
        qualsLevelDesr: state.statusOffices,
        electivesCompletedNum: state.courseNum,
        template: state.template,
        description: state.pathWays,
        matchRules: state.matchRules,
        id: state.editId ? state.editId : null,
        keepLearner: state.keepLearner,
        template: state.template,
        band: state.band,
      };
      if (state.editId) {
        updatePostInfomation(params)
          .then((res) => {
            if (res.data.code == 200) {
              message.success("保存成功");
              of_exit();
              listDatas();
            }
          })
          .catch((err) => {
            message.error(err.data.msg);
          });
      } else {
        saveGrowth(params)
          .then((res) => {
            if (res.data.code == 200) {
              message.success("保存成功");
              of_exit();
              listDatas();
            }
          })
          .catch((err) => {
            message.error(err.data.msg);
          });
      }
    };
    const of_exit = () => {
      state.statusPosts = null;
      state.statusOffices = null;
      state.statusPostList = null;
      state.statusRanks = [];
      state.rankList = [];
      state.bandLists = [];
      state.organCreateName = null;
      state.courseNum = "";
      state.matchRules = "1";
      state.pathWays = "";
      state.bg_check = false;
      state.editId = null;
      state.band = "";
      state.isPublished = false;
    };
    // 创建路径
    // 管理
    const manage = (record) => {
      router.push({
        path: "/pathmanage",
        query: {
          id: record.id,
          pre: record.permissions,
        },
      });
    };
    //撤回
    const withdraw = (record) => {
      dialog({
        content: "确定撤回？",
        contentTwo: "撤回后学员进度保留，发布后可继续学习",
        ok: () => {
          withdrawal(record.id).then((res) => {
            if (res.data.code == 200) {
              message.success("撤回成功");
              listDatas();
            }
          });
        },
      });
    };
    // 查看修改记录
    const UpdateRecordRef = ref(null);
    const updateList = (record) => {
      UpdateRecordRef.value.open(record);
    };
    return {
      ...toRefs(state),
      getBandCodes,
      checkGrowthPer,
      columns,
      listDatas,
      searchList,
      resetList,
      changePagination,
      statusValues,
      of_exit,
      confirm,
      editPath,
      manage,
      imgData,
      updateList,
      withdraw,
      handleOut,
      releaseLearnPath,
      delData,
      checkMenu,
      UpdateRecordRef,
      matchRulesChange,
    };
  },
};
</script>

<style lang="scss" scoped>
::v-deep .ant-pagination-total-text {
  color: #818a92;
}

::v-deep .ant-select-multiple .ant-select-selection-item {
  line-height: 26px !important;
}

.growthpath {
  width: 100%;

  .filterItems {
    display: flex;
    flex-wrap: wrap;
    margin: 40px 16px 0 24px;
    position: relative;
    .growth_switch {
      width: 40px;
      height: 40px;
      position: absolute;
      right: 32px;
      cursor: pointer;
      top: 0px;
    }
    .grow_btn_left {
      display: flex;
      margin-bottom: 20px;
      .btn1 {
        width: 100px;
        height: 40px;
        background: #409eff;
        border-radius: 8px;
        box-sizing: border-box;
        color: #ffffff;
        cursor: pointer;
        text-align: center;
        line-height: 31px;
        display: flex;
        justify-content: center;
        align-items: center;
        .search {
          width: 15px;
          height: 17px;
          margin-right: 5px;
          background-image: url("../../assets/images/courseManage/search0.png");
        }
      }
      .btnns2 {
        width: 100px;
        height: 40px;
        background: #ffffff;
        border-radius: 8px;
        border: 1px solid #388be1;
        margin-left: 10px;
        background-color: #ffffff;
        box-sizing: border-box;
        color: #578afc;
        cursor: pointer;
        text-align: center;
        line-height: 31px;
        display: flex;
        justify-content: center;
        align-items: center;
        .search {
          width: 16px;
          height: 18px;
          margin-right: 5px;
          background-image: url("../../assets/images/courseManage/reset1.png");
        }
      }
    }
    .select {
      margin-right: 20px;
      margin-bottom: 20px;
    }
  }
  .btns {
    display: flex;
    padding-left: 24px;
    padding-bottom: 10px;
    // flex-wrap: wrap;
    .btn {
      padding: 0px 26px 0px 26px;
      height: 38px;
      background: #4ea6ff;
      border-radius: 8px;
      //border: 1px solid rgba(64, 158, 255, 1);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 14px;
      flex-shrink: 0;
      cursor: pointer;

      .search {
        background-size: 100%;
      }

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

    .btn3 {
      margin-right: 0px;

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

    .btn3:active {
      background: #0982ff;
    }
  }
  .grow_list {
    margin-left: 24px;
    .grow_btn {
      margin-bottom: 16px;
      display: flex;
      justify-content: space-between;
      .grow_btn_left {
        display: flex;
        .btn1 {
          width: 70px;
          height: 31px;
          border-radius: 5px;
          background-color: #578afc;
          box-sizing: border-box;
          color: #ffffff;
          cursor: pointer;
          text-align: center;
          line-height: 31px;
        }
        .btnns2 {
          margin-left: 10px;
          width: 70px;
          height: 31px;
          border-radius: 5px;
          border: 1px solid #578afc;
          background-color: #ffffff;
          box-sizing: border-box;
          color: #578afc;
          cursor: pointer;
          text-align: center;
          line-height: 31px;
        }
      }
    }
    .grow_table {
      margin: 0 24px 16px 0;
      .table_btn {
        margin-right: 8px;
      }
      .tableBox {
        padding-bottom: 20px;
        margin: 20px 38px 30px;
        ::v-deep .ant-select {
          min-height: 32px;
          .ant-select-selector {
            min-height: 32px;
          }
          .ant-select-selection-item {
            line-height: 32px;
          }
        }
        ::v-deep .ant-pagination-options .ant-select-arrow {
          display: block;
        }
        ::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: 92px;
        }
        .pa {
          width: 100%;
          display: flex;
          justify-content: center;
        }
      }
    }
  }
}
.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(
      180deg,
      rgba(103, 64, 255, 0.2) 0%,
      rgba(166, 168, 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%;
      }
    }

    .bg_body {
      width: 80%;
      margin: 3px auto;
      .bg_body_bt {
        display: flex;
        align-items: center;
        justify-content: end;
        margin: 28px 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%;
          }
        }
      }
      .bg_body_input {
        flex: 1;
        position: relative;
        .learnBgItem {
          border-radius: 8px;
          width: 136px;
          height: 106px;
          background-size: 100%;
          background-repeat: no-repeat;
          margin-bottom: 20px;
          margin-right: 6px;
          .im {
            width: 100%;
            height: 100%;
          }
        }
        .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;

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

        .btn6 {
          background-color: #4ea6ff;
          color: #ffffff;
        }
        .btn7 {
          width: 100px;
          height: 40px;
          border-radius: 4px;
          border: 1px solid #387df7;
          color: #387df7;
        }
      }
    }
  }
}
::v-deep .ant-select {
  border-radius: 5px;
  width: 100%;
  min-height: 40px;
  .ant-select-selector {
    border-radius: 8px;
    width: 100%;
    min-height: 40px;
  }
  .ant-select-selection-placeholder {
    line-height: 40px;
  }
  .ant-select-selection-item {
    line-height: 40px;
  }
}
</style>
