<template>
  <a-drawer
    :visible="ProjOwnervisible"
    class="drawerStyle ProjOwnership"
    placement="right"
    width="85%"
    @after-visible-change="afterVisibleChange"
  >
    <div class="drawerMain" id="ProjOwnership">
      <div class="header">
        <div class="headerTitle">归属权</div>
        <img
          style="width: 29px; height: 29px; cursor: pointer"
          src="../../assets/images/basicinfo/close.png"
          @click="closeDrawer"
        />
      </div>
      <div class="main">
        <div class="left">
          <div class="tabs">
            <a-tabs v-model:activeKey="activeKey">
              <a-tab-pane key="1" tab="快速选人">
                <div
                  :style="{ height: screenHeight - 235 + 'px' }"
                  style="overflow-y: auto"
                >
                  <div class="tab1">
                    <div class="nameinp">
                      <div class="namee">姓名：</div>
                      <a-input
                        v-model:value="nameSearch"
                        style="width: 270px; height: 40px; border-radius: 8px"
                        placeholder="请输入姓名"
                      />
                    </div>
                    <div class="btns">
                      <div class="btn1" @click="handleSearchStu">
                        <div class="img1">
                          <img
                            src="../../assets/images/courseManage/search0.png"
                          />
                        </div>
                        <div class="wz">搜索</div>
                      </div>
                      <div class="btn2" @click="resetStu">
                        <div class="img2">
                          <img
                            src="../../assets/images/courseManage/reset1.png"
                          />
                        </div>
                        <div class="wz">重置</div>
                      </div>
                    </div>
                  </div>
                  <!-- <div class="line">
                  <div class="inline">
                    <div class="left1">
                      <div class="img"></div>
                      <div class="text" style="margin-left: 10px">已选择</div>
                      <div class="text2">2</div>
                      <div class="text">项</div>
                      <div class="text3">列表选项总计：</div>
                      <div class="text4">9条</div>
                    </div>
                    <div class="right1">清空</div>
                  </div>
                </div> -->
                  <div class="chooseLeft">
                    <div class="boeTree">
                      <div class="boeTreeTitle">BOE组织树</div>

                      <a-tree
                        v-model:value="valueSelectboe"
                        class="treeMain"
                        :style="{ height: screenHeight - 400 + 'px' }"
                        dropdownClassName="changetreedropdownboe"
                        default-expand-all
                        :dropdown-style="{
                          maxHeight: '600px',
                        }"
                        placeholder="BOE组织树"
                        allow-clear
                        :tree-data="treeData"
                        @select="departmentSelect"
                        :selectedKeys="selectedKeys"
                        v-model:expandedKeys="openKeys"
                        :fieldNames="{
                          children: 'treeChildList',
                          key: 'id',
                          title: 'name',
                          value: 'name',
                        }"
                        :disabled="isDisabled"
                      >
                        <template #suffixIcon></template>
                      </a-tree>
                    </div>
                    <div class="tableBox tabb" style="margin-top: 16px">
                      <a-table
                        style="border: 1px solid #f2f6fe"
                        :columns="tablecolumns"
                        :data-source="tabledata"
                        :loading="tableDataTotal === -1 ? true : false"
                        expandRowByClick="true"
                        @expand="expandTable"
                        :pagination="false"
                        :row-selection="{
                          columnWidth: 20,
                          selectedRowKeys: selectedRowKeys,
                          onChange: onSelectChange,
                          type: 'radio',
                        }"
                      />
                      <div class="tableBox">  
                      <div class="pa">
                        <a-pagination
                          :showSizeChanger="false"
                          showQuickJumper="true"
                          hideOnSinglePage="true"
                          :pageSize="pageSize"
                          v-model:current="currentPage"
                          :total="tableDataTotal"
                          :pagination="false"
                          class="pagination"
                          v-if="tableDataTotal > 10"
                          @change="changePagination"
                        />
                      </div></div>
                    </div>
                  </div>
                </div>
              </a-tab-pane>
            </a-tabs>
          </div>
        </div>
        <div class="right">
          <div class="onerow">
            <div class="onleft">
              <div
                style="
                  display: flex;
                  align-items: center;
                  margin-bottom: 20px;
                  flex-wrap: wrap;
                "
              >
                <div class="already">当前归属：</div>
                <div class="chose" v-for="item in choosepeople" :key="item.key">
                  <div>{{ item.name }}</div>
                </div>
              </div>
            </div>
            <div class="clbox" @click="removeClick">
              <span class="allclear">转移归属权</span>
            </div>
          </div>
        </div>
      </div>
      <div class="btnn">
        <button class="btn1" @click="closeDrawer">取消</button>
        <button class="btn2" @click="addAuth">确定</button>
      </div>
    </div>

    <!-- 确认添加部门弹窗 -->
    <a-modal
      v-model:visible="showOrgModal"
      :footer="null"
      wrapClassName="confirmAddOrg"
      centered="true"
    >
      <div class="delete">
        <div class="del_header"></div>
        <div class="del_main">
          <div class="header">
            <div class="icon"></div>
            <span>提示</span>
            <div class="close_exit" @click="closeOrgModal"></div>
          </div>
          <div class="body">
            <span>您确定要添加此组织吗</span>
          </div>
          <div class="del_btnbox">
            <div class="del_btn btn1" @click="closeOrgModal">
              <div class="btnText">取消</div>
            </div>
            <div class="del_btn btn2" @click="addOrg">
              <div class="btnText">确定</div>
            </div>
          </div>
        </div>
      </div>
    </a-modal>
    <!-- 确认添加部门弹窗 -->
  </a-drawer>
</template>

<script>
import { reactive, toRefs, onMounted, onUnmounted, computed } from "vue";
import elementResizeDetectorMaker from "element-resize-detector";
// import { message } from "ant-design-vue";
import * as api from "../../api/index1";
import { useStore } from "vuex";
import { message } from "ant-design-vue";
export default {
  name: "ProjOwnerShip",
  props: {
    ProjOwnervisible: {
      type: Boolean,
      default: false,
    },
    selectProjectId: {
      type: Number,
      default: null,
    },
    classify: {
      type: String,
      default: null,
    },
  },
  setup(props, ctx) {
    const store = useStore();

    const state = reactive({
      screenHeight: document.body.clientHeight, // 屏幕高度
      //快速选人分页-----
      pageSize: 10,
      currentPage: 1,
      tableDataTotal: -1,
      //快速选人分页------
      pageSize1: 10,
      currentPage1: 1,
      tableDataTotal1: 50,
      pageSize2: 10,
      currentPage2: 1,
      tableDataTotal2: 50,

      selectedRowKeys1: [],

      activeKey: "1",
      value: [], //级联选择框
      choosevalue: null, //受众选择
      valueSelect: null, //树形选择

      valueSelectboe2: null, //boe树形选择
      nameSearch: "",
      nameadd: "",
      nameaddd: "",
      com: "",
      openKeys: [],
      //组织树
      treeData: [],
      //快速选人的table
      tabledata: [
        // {
        //   key: 1,
        //   name: "小李小李小李",
        //   bum: "产研部",
        //   numb: "000000",
        //   guishu: "产品部",
        // },
      ],
      tablecolumns: [
        {
          title: "姓名",
          dataIndex: "name",
          key: "name",
          width: 80,
          align: "center",
          className: "h",
          ellipsis: true,
        },
        {
          title: "工号",
          dataIndex: "numb",
          key: "numb",
          width: 80,
          align: "center",
          className: "h",
          ellipsis: true,
        },
        {
          title: "归属组织",
          dataIndex: "guishu",
          key: "guishu",
          width: 80,
          align: "center",
          className: "h",
          ellipsis: true,
        },
        {
          title: "部门",
          dataIndex: "bum",
          key: "bum",
          width: 80,
          align: "center",
          className: "h",
          ellipsis: true,
        },
      ],

      //快速选人-------------------------------------
      valueSelectboe: null, //快速选人的选择组织
      choosepeople: [], //总的数组
      selectedKeys: [], //选中部门的key
      selectDepartment: null, //选中部门名称
      showMore: false, //是否显示快速选人的查看更多
      showHidden: false, //是否显示收回
      selectedRowKeys: [], //表格选中的key
      selectPeopleArr: [], //表格选中的人
      //快速选人-------------------------------------

      isDisabled: true, //是否可选择组织树及用户，默认为不可选
    });

    const closeDrawer = () => {
      state.activeKey = "1";
      ctx.emit("update:ProjOwnervisible", false);
      state.openKeys = [];
      state.isDisabled = true;
      state.nameSearch = "";
      state.tabledata = [];
      state.currentPage = 1;
      state.selectedKeys = [];
      state.valueSelectboe = null;
      state.choosepeople = []; //选中的组织名称

      state.selectDepartment = null; //选中部门名称
      state.showMore = false; //是否显示快速选人的查看更多
      state.showHidden = false; //是否显示收回
      state.selectedRowKeys = []; //表格选中的key
      state.selectPeopleArr = []; //表格选中的人
    };

    const afterVisibleChange = (bool) => {
      console.log("state", bool, props);
      if (bool) {
        getPeoples();
        optionAuthPerm();
      }
    };

    const getClientHeight = () => {
      state.screenHeight = document.body.clientHeight;
    };
    //获取组织树
    state.treeData = computed(() => {
      return store.state.orgtreeList ? store.state.orgtreeList : [];
    });
    //获取选中部门的人员信息
    const getPeoples = () => {
      if (!state.nameSearch && !state.selectedKeys[0]) {
        state.tableDataTotal = 0;
        return false;
      }
      // console.log("org", org);
      let obj = {
        pageNo: state.currentPage,
        pageSize: state.pageSize,
        keyWord: state.nameSearch,
        org: state.nameSearch ? null : state.selectedKeys[0],
      };
      // if (!state.selectedKeys[0]) {
      //   state.tableDataTotal = 0;
      //   return;
      // }
      console.log("obj", obj);
      api
        .getMemberInfo(obj)
        .then((res) => {
          // console.log("获取学员成功", res.data);
          if (res.data.code === 200) {
            let arr = res.data.data.rows;
            let array = [];
            arr.map((value) => {
              // console.log("学员信息", value);
              let obj = {
                key: value.id,
                id: value.id,
                name: value.realName ? value.realName : "-",
                bum: state.selectDepartment ? state.selectDepartment : "-",
                numb: value.userNo ? value.userNo : "-",
                guishu: state.selectDepartment ? state.selectDepartment : "-",
              };
              array.push(obj);
            });
            state.tabledata = array;
            state.tableDataTotal = res.data.data.total;
          }
        })
        .catch((err) => {
          console.log("获取学员失败", err);
        });
    };
    //搜索学员
    const handleSearchStu = () => {
      // deleteDepSelect();
      state.currentPage = 1;
      console.log("22222");
      getPeoples();
    };
    //重置
    const resetStu = () => {
      state.nameSearch = "";
      state.currentPage = 1;
      state.tableDataTotal = 0;
      state.tabledata = [];
    };
    // //清空选择部门信息
    // const deleteDepSelect = () => {
    //   state.selectedKeys = null;
    //   state.selectOrgId = null;
    //   state.selectOrgName = null;
    // };
    //分页
    const changePagination = () => {
      getPeoples();
    };

    //点击转移归属权
    const removeClick = () => {
      state.isDisabled = false;
    };
    //获取授权
    const optionAuthPerm = () => {
      let obj = {
        keyWord: "",
        tag: 1, //归属权
        opt: 1, //查询
        type:
          props.classify === "project"
            ? 2
            : props.classify === "learnPath"
            ? 1
            : props.classify === "course"
            ? 3
            : null,
        refId: props.selectProjectId, //项目id
        // refId: 64,
        pageNo: 1,
        pageSize: 10,
        studentList: [],
      };
      console.log("obj", obj);
      api
        .optionAuthPerm(obj)
        .then((res) => {
          console.log("获取授权成功", res);
          if (res.data.code === 200 && res.data.data.records.length > 0) {
            state.selectedRowKeys = res.data.data.records[0].memberId;

            let obj = {
              id: res.data.data.records[0].memberId,
              name: res.data.data.records[0].memberName,
            };
            state.choosepeople = [obj];
            state.selectPeopleArr = [obj];
          }
        })
        .catch((err) => {
          console.log("获取授权失败", err);
        });
    };
    //修改归属权
    const changeOwnership = () => {
      let obj = {
        keyWord: "",
        tag: 2, //归属权
        opt: 3, //修改
        type:
          props.classify === "project"
            ? 2
            : props.classify === "learnPath"
            ? 1
            : props.classify === "course"
            ? 3
            : null,
        refId: props.selectProjectId, //项目id
        // refId: 64,
        pageNo: 1,
        pageSize: 10,
        // studentList: state.selectPeopleArr,
        deptList: [],
        groupList: [],
        studentList: state.selectPeopleArr,
      };
      console.log("修改归属权obj", obj);
      api
        .optionAuthPerm(obj)
        .then((res) => {
          console.log("修改授权成功", res);
          message.success("修改归属权成功");
          closeDrawer();
        })
        .catch((err) => {
          console.log("修改授权失败", err);
        });
    };
    //确认修改归属权
    const addAuth = () => {
      changeOwnership();
    };

    onMounted(() => {
      // console.log("11111", 1);
      window.addEventListener("resize", getClientHeight, false);
    });
    onUnmounted(() => {
      window.removeEventListener("resize", getClientHeight, false);
      //  window.removeEventListener("resize", getClientHeightSelecteds, false);
    });

    // 开始 快速选人------------------------------------------------------------------
    //选中部门
    const departmentSelect = (e, k) => {
      if (k.node.treeChildList === null) {
        state.selectedKeys = [k.node.key];
        state.selectDepartment = k.node.name;

        if (!k.node.treeChildList) {
          getPeoples();
        }
      }
      // console.log("kkkkkk", k);
      // state.selectedKeys = [k.node.key];
      // state.selectDepartment = k.node.name;
      // getPeoples();
    };
    //快速选人 选中的数组
    const onSelectChange = (selectedRowKeys, item) => {
      console.log("selectedRowKeys changed: ", selectedRowKeys, item);
      state.selectedRowKeys = selectedRowKeys;
      state.choosepeople = item.reverse();

      //选中的人
      let arr = [];
      for (let i = 0; i < item.length; i++) {
        console.log("item[i]", item[i]);
        let obj = {
          id: item[i].id,
          name: item[i].name,
        };
        arr.push(obj);
      }
      state.selectPeopleArr = arr;

      // selectedsHeight();
    };
    //单个删除选中的人
    const deleteChoosePeople = (item) => {
      let arr = state.choosepeople;
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].key === item.key) {
          arr.splice(i, 1);
        }
      }
      state.choosepeople = arr;
      let array = state.selectedRowKeys;
      for (let i = 0; i < array.length; i++) {
        if (array[i] === item.key) {
          array.splice(i, 1);
        }
      }
      state.selectedRowKeys = array;
      console.log("");
    };
    //根据右侧快速选人高度，判断是否显示更多
    const selectedsHeight = () => {
      let resize = elementResizeDetectorMaker();
      resize.listenTo(
        document.getElementById("ProjOwnership").querySelector("#selecteds"),
        function (ele) {
          console.log("ele", ele.offsetHeight);
          if (ele.offsetHeight > 160 && !state.showHidden) {
            state.showMore = true;
            document
              .getElementById("ProjOwnership")
              .querySelector("#selectedsBox").style.overflow = "hidden";
            document
              .getElementById("ProjOwnership")
              .querySelector("#selectedsBox").style.height = "160px";
          } else if (ele.offsetHeight < 160) {
            state.showMore = false;
            state.showHidden = false;
            document
              .getElementById("ProjOwnership")
              .querySelector("#selectedsBox").style.overflow = "hidden";
            document
              .getElementById("ProjOwnership")
              .querySelector("#selectedsBox").style.height = "160px";
          }
        }
      );
    };
    const morePeopleShow = () => {
      state.showMore = false;
      state.showHidden = true;
      document
        .getElementById("ProjOwnership")
        .querySelector("#selectedsBox").style.overflow = "";
      document
        .getElementById("ProjOwnership")
        .querySelector("#selectedsBox").style.height = "";
    };
    const morePeopleHidden = () => {
      state.showMore = true;
      state.showHidden = false;
      document
        .getElementById("ProjOwnership")
        .querySelector("#selectedsBox").style.overflow = "hidden";
      document
        .getElementById("ProjOwnership")
        .querySelector("#selectedsBox").style.height = "160px";
    };

    // 结束 快速选人------------------------------------------------------------------

    //全部清除
    const deleteAll = () => {
      //快速选人-------------------------------------
      state.valueSelectboe = null; //快速选人的选择组织
      state.choosepeople = []; //总的数组
      state.showMore = false; //是否显示快速选人的查看更多
      state.showHidden = false; //是否显示收回
      state.selectedRowKeys = []; //表格选中的key
      //快速选人-------------------------------------
    };

    const expandTree = (e) => {
      console.log("展开", e);
    };
    return {
      ...toRefs(state),
      afterVisibleChange,
      closeDrawer,
      onSelectChange,
      // change,
      departmentSelect,
      deleteChoosePeople,
      selectedsHeight,
      morePeopleShow,
      morePeopleHidden,

      deleteAll,
      expandTree,
      changePagination,
      optionAuthPerm,
      changeOwnership,
      addAuth,
      removeClick,
      handleSearchStu,
      resetStu,
    };
  },
};
</script>

<style lang="scss">
.ProjOwnership {
  .ant-drawer-content-wrapper {
    max-width: 1300px !important;
  }
  .drawerMain {
    min-width: 600px;
    margin: 0px 32px 0px 32px;
    // overflow-y: auto;
    display: flex;
    flex-direction: column;
    overflow-x: auto;
    .header {
      height: 73px;
      border-bottom: 1px solid #e8e8e8;
      display: flex;
      flex-shrink: 0;
      justify-content: space-between;
      align-items: center;
      // background-color: red;
      margin-bottom: 20px;
      .headerTitle {
        font-size: 18px;
        font-weight: 600;
        color: #333333;
        line-height: 25px;
        // margin-left: 24px;
      }
    }
    .main {
      display: flex;
      //  min-width: 1200px;
      //height: 80%;
      margin-bottom: 72px;
      overflow-y: auto;
      //  overflow-x: auto;
      .left {
        // overflow-y: auto;
        width: 772px;
        flex-shrink: 0;
        // height: 100%;
        border-right: 1px solid rgba(233, 233, 233, 1);
        .tabs {
          margin-right: 33px;
          .tab1 {
            display: flex;
            flex-wrap: wrap;
            // justify-content: space-between;
            align-items: center;
            .t1 {
              display: flex;
              align-items: center;
              margin-bottom: 5px;
            }
            .nameinp {
              display: flex;
              align-items: center;
              margin-top: 10px;
              .namee {
                color: rgba(0, 0, 0, 0.85);
                font-size: 14px;
              }
            }
            .btns {
              display: flex;
              margin-top: 10px;
              margin-left: 34px;
              .btn1 {
                width: 100px;
                height: 40px;
                margin-right: 16px;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #ffffff;
                font-size: 14px;
                background: #4ea6ff;
                border-radius: 8px;
                border: 1px solid #4ea6ff;
                cursor: pointer;
                .wz {
                  margin-left: 10px;
                }
              }
              .btn2 {
                width: 100px;
                height: 40px;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #4ea6ff;
                font-size: 14px;
                background: #ffffff;
                border-radius: 8px;
                cursor: pointer;
                border: 1px solid #4ea6ff;
                .wz {
                  margin-left: 10px;
                }
              }
            }
          }
          .btns {
            display: flex;
            margin-top: 10px;
            .btn1 {
              width: 100px;
              height: 40px;
              margin-right: 16px;
              display: flex;
              align-items: center;
              justify-content: center;
              color: #ffffff;
              font-size: 14px;
              background: #4ea6ff;
              border-radius: 8px;
              border: 1px solid #4ea6ff;
              cursor: pointer;
              .wz {
                margin-left: 10px;
              }
            }
            .btn2 {
              width: 100px;
              height: 40px;
              display: flex;
              align-items: center;
              justify-content: center;
              color: #4ea6ff;
              font-size: 14px;
              background: #ffffff;
              border-radius: 8px;
              cursor: pointer;
              border: 1px solid #4ea6ff;
              .wz {
                margin-left: 10px;
              }
            }
          }
          .line {
            width: 100%;
            height: 40px;
            background-color: #e9f6fe;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 20px;
            border: 1px solid #c3e6fc;

            .inline {
              width: 95%;
              height: 100%;
              display: flex;
              justify-content: space-between;

              // background-color: #bfa;
              .left1 {
                height: 100%;
                display: flex;
                align-items: center;

                .img {
                  width: 14px;
                  height: 15px;
                  background-image: url(../../assets/images/leveladd/gan.png);
                  background-size: 100% 100%;
                }

                .text {
                  color: #999ba3;
                }

                .text2 {
                  color: #4ea6ff;
                  margin-left: 5px;
                  margin-right: 5px;
                }

                .text3 {
                  color: #999ba3;
                  margin-left: 20px;
                }
              }

              .right1 {
                font-size: 14px;
                font-weight: 400;
                color: #387df7;
                height: 100%;
                display: flex;
                align-items: center;
                cursor: pointer;
              }
            }
          }
          .chooseLeft {
            display: flex;
            justify-content: space-between;
            .boeTree {
              margin-right: 20px;
              // margin-top: 20px;
              // width: 300px;
              // overflow-y: auto;
              // margin-right: 10px;
              // .ant-select {
              //   .ant-select-selector {
              //     border-radius: 8px;
              //     // height: 40px;
              //     .ant-select-selection-placeholder {
              //       color: #4ea6ff;
              //       margin-left: 72px !important;
              //       margin-top: 4px !important;
              //     }
              //   }
              // }
              .boeTreeTitle {
                width: 280px;
                height: 40px;
                border-radius: 4px;
                border: 1px solid #c3c3c3;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 16px;
                font-weight: 500;
                color: #4ea6ff;
                line-height: 22px;
                margin-bottom: 8px;
                margin-top: 20px;
              }
              .treeMain {
                width: 280px;
                border-radius: 4px;
                overflow-x: auto;
                overflow-y: auto;
                border: 1px solid #c3c3c3;
                padding-top: 10px;
                padding-left: 5px;
              }
              .ant-tree .ant-tree-node-content-wrapper {
                flex-shrink: 0;
              }
              .ant-tree-indent-unit {
                width: 5px;
              }
              .ant-tree
                .ant-tree-node-content-wrapper-normal.ant-tree-node-selected {
                background-color: rgba(255, 255, 255, 0);
                color: #4ea6ff;
              }
              .ant-tree .ant-tree-node-selected {
                background-color: rgba(255, 255, 255, 0);
                // color:#4ea6ff;
              }
              //               .ant-tree .ant-tree-title{
              // background-color: pink;
              //               }
            }
            .tabb {
              flex: 1;
              // .ant-table-wrapper {
              //   min-height: 500px;
              // }
              .ant-radio {
                margin-left: 8px;
                // margin-right: 3px;
              }
              .ant-table-thead > tr > th {
                background-color: rgba(240, 246, 252, 1);
                color: rgba(0, 0, 0, 0.85);
              }
              .ant-table-tbody > tr > td {
                border-bottom: 1px solid #f0f6fc;
                color: rgba(0, 0, 0, 0.65);
              }
              th.h {
                background-color: #eff4fc !important;
              }

              .ant-table-tbody
                > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
                > td {
                background: rgba(250, 250, 250, 1);
              }
              .ant-table-selection-column {
                padding: 0 !important;
              }
              // table tr td.ant-table-selection-column {
              //   text-align: right;
              // }
              // .ant-checkbox-wrapper {
              //   align-items: center;
              //   margin-top: -2px;
              // }
              .pa {
                // left: 0;
                margin-top: 15px;
                width: 100%;
                // height: 20px;
                // background-color: red;
                display: flex;
                justify-content: center;
                // position: absolute;
                // bottom: 20px;
                .ant-pagination-item,
                .ant-pagination-prev,
                .ant-pagination-next,
                .ant-pagination-options {
                  margin-bottom: 10px;
                }
              }
            }
          }

          .tab2 {
            display: flex;
            align-items: center;
            // margin-top: 10px;
            flex-wrap: wrap;
            justify-content: space-between;
            .nameinp {
              display: flex;
              align-items: center;
              margin-top: 10px;
              .namee {
                color: rgba(0, 0, 0, 0.85);
                font-size: 14px;
              }
            }

            .t1 {
              display: flex;
              align-items: center;
              margin-bottom: 5px;
            }
            .btns {
              display: flex;
              // margin-top: -10px;
              .btn1 {
                width: 100px;
                height: 40px;
                margin-right: 16px;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #ffffff;
                font-size: 14px;
                background: #4ea6ff;
                border-radius: 8px;
                border: 1px solid #4ea6ff;
                cursor: pointer;
                .wz {
                  margin-left: 10px;
                }
              }
              .btn2 {
                width: 100px;
                height: 40px;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #4ea6ff;
                font-size: 14px;
                background: #ffffff;
                border-radius: 8px;
                cursor: pointer;
                border: 1px solid #4ea6ff;
                .wz {
                  margin-left: 10px;
                }
              }
            }
            .organize {
              color: rgba(0, 0, 0, 0.85);
              font-size: 14px;
              white-space: nowrap;
            }

            .ant-select-dropdown {
              min-width: 800px !important;
            }
            .ant-select {
              border-radius: 8px !important;
              // background-color: red;
            }
            .ant-cascader {
              width: 264px;
              height: 40px;
              border-radius: 8px !important;
              .ant-select-selector {
                height: 100%;
              }
              .ant-select-selection-search-input {
                height: 40px;
              }
            }
          }
          .boeTree {
            .boeTreeTitle {
              width: 280px;
              height: 40px;
              border-radius: 4px;
              border: 1px solid #c3c3c3;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 16px;
              font-weight: 500;
              color: #4ea6ff;
              line-height: 22px;
              margin-bottom: 8px;
              margin-top: 20px;
            }
            .treeMain {
              width: 280px;
              border-radius: 4px;
              overflow-x: auto;
              overflow-y: auto;
              border: 1px solid #c3c3c3;
              padding-top: 10px;
              padding-left: 5px;
            }
            .ant-tree .ant-tree-node-content-wrapper {
              flex-shrink: 0;
            }
            .ant-tree-indent-unit {
              width: 5px;
            }
            .ant-tree
              .ant-tree-node-content-wrapper-normal.ant-tree-node-selected {
              background-color: rgba(255, 255, 255, 0);
              color: #4ea6ff;
            }
            .ant-tree .ant-tree-node-selected {
              background-color: rgba(255, 255, 255, 0);
              // color:#4ea6ff;
            }
            //               .ant-tree-switcher_open+ .ant-tree-checkbox{
            // display: none !important;
            //               }
            //               .ant-tree-switcher_close+ .ant-tree-checkbox{
            // display: none !important;
            //               }
            //               .ant-tree .ant-tree-title{
            // background-color: pink;
            //               }
          }
        }
      }
      .right {
        width: 340px;
        flex-shrink: 0;
        overflow-y: auto;
        .onerow {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-right: 40px;
          flex-wrap: wrap;
          .onleft {
            display: flex;
            text-align: center;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            margin-left: 32px;
            .already {
              color: rgba(51, 51, 51, 1);
              font-size: 16px;
              font-weight: 500;

              white-space: nowrap;
              // margin-bottom: 20px;
            }
            .count {
              color: #4ea6ff;
              font-size: 16px;
              margin: 0 6px;
            }
            .peo {
              color: rgba(51, 51, 51, 1);
              font-size: 16px;
              font-weight: 500;
            }
            .chose {
              // width: 64px;
              padding-left: 10px;
              padding-right: 10px;
              height: 24px;
              // margin-top: 25px;
              // margin-right: 25px;
              display: flex;
              align-items: center;
              justify-content: center;
              border-radius: 2px;
              border: 1px solid rgba(56, 139, 225, 1);
              color: rgba(56, 139, 225, 1);
              font-size: 12px;
              position: relative;
              flex-shrink: 0;
              .ch {
                position: absolute;
                width: 18px;
                height: 18px;
                background-image: url(../../assets/images/basicinfo/ch.png);
                right: -8px;
                top: -8px;
              }
            }
          }
          .clbox {
            margin-left: 30px;
            margin-bottom: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            width: 104px;
            height: 32px;
            border-radius: 4px;
            background: #4ea6ff;
            .colose {
              width: 16px;
              height: 16px;
              // border-radius: 8px;
              // background: #ffffff;
              // position: relative;
              background-image: url(../../assets/images/basicinfo/ch.png);
              background-size: 100%;
              margin-right: 4px;
            }
            .allclear {
              color: rgba(255, 255, 255, 1);
              font-size: 14px;
            }
          }
        }
        .line {
          width: 90%;
          height: 1px;
          background-color: #e8e8e8;
          margin-left: 12px;
          margin-top: 20px;
        }
        .tit {
          font-size: 14px;
          font-weight: 500;
          margin-top: 12px;
          margin-left: 32px;
        }
        .selectedsBox {
          position: relative;
          // height: 160px;
          overflow: hidden;
        }
        .selecteds {
          display: flex;
          // flex-wrap:wrap;
          flex-wrap: wrap;
          align-content: flex-start;
          margin-right: 32px;
          margin-left: 32px;
          min-height: 100px;
          // overflow: hidden;
        }
      }
    }
    .btnn {
      height: 72px;
      width: 100%;
      position: absolute;
      background-color: #fff;
      bottom: 0;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16);
      .btn1 {
        width: 100px;
        height: 40px;
        border: 1px solid #4ea6ff;
        border-radius: 8px;
        color: #4ea6ff;
        background-color: #fff;
        cursor: pointer;
      }
      .btn2 {
        cursor: pointer;
        width: 100px;
        height: 40px;
        background: #4ea6ff;
        border-radius: 8px;
        border: 0;
        margin-left: 15px;
        color: #fff;
      }
    }
  }
}
.changetreedropdown {
  width: 500px !important;
  .ant-select-tree-list-scrollbar {
    width: 5px !important;
    .ant-select-tree-list-scrollbar-thumb {
      background-color: #4ea6ff !important;
    }
  }
  .ant-select-tree-indent-unit {
    width: 7px !important;
  }
}

.changetreedropdownboe {
  width: 240px !important;
  border-radius: 5px;
  min-height: 600px !important;
  .ant-select-tree-list-scrollbar {
    width: 5px !important;
    .ant-select-tree-list-scrollbar-thumb {
      background-color: #4ea6ff !important;
    }
  }
  .ant-select-tree-indent-unit {
    width: 7px !important;
  }
}
.confirmAddOrg {
  .ant-modal {
    width: 424px !important;
    height: 258px !important;
    .ant-modal-content {
      width: 424px !important;
      height: 258px !important;
      .ant-modal-body {
        width: 424px !important;
        height: 258px !important;
        padding: 0 !important;
        .delete {
          z-index: 999;
          width: 424px;
          height: 258px;
          background: #ffffff;
          box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
          border-radius: 4px;
          // position: absolute;
          // left: 50%;
          // top: 10%;
          // transform: translate(-50%, -50%);
          .del_header {
            position: absolute;
            width: calc(100%);
            height: 68px;
            background: linear-gradient(
              rgba(78, 166, 255, 0.2) 0%,
              rgba(78, 166, 255, 0) 100%
            );
          }
          .del_main {
            width: 100%;
            position: relative;
            .header {
              display: flex;
              align-items: center;
              padding-top: 20px;
              padding-left: 26px;
              font-size: 16px;
              .icon {
                width: 16px;
                height: 16px;
                margin-right: 10px;
                background-image: url(@/assets/images/taskpage/gan.png);
                background-size: 100% 100%;
              }
              .close_exit {
                position: absolute;
                right: 42px;
                cursor: pointer;
                width: 20px;
                height: 20px;
                background-image: url(@/assets/images/coursewareManage/close.png);
                background-size: 100% 100%;
              }
            }
            .body {
              width: 100%;
              margin: 34px auto 56px auto;
              display: flex;
              justify-content: center;
              align-items: center;
              flex-direction: column;
              // background-color: red;
              position: relative;
              .back {
                position: absolute;
                top: 30px;
                font-size: 12px;
                font-weight: 400;
                color: #666666;
              }
            }
            .del_btnbox {
              display: flex;
              margin: 30px auto;
              justify-content: center;
              .del_btn {
                width: 100px;
                height: 40px;
                background: rgba(64, 158, 255, 0);
                border-radius: 8px;
                display: flex;
                align-items: center;
                justify-content: center;

                flex-shrink: 0;
                cursor: pointer;
                .btnText {
                  font-size: 14px;
                  font-weight: 400;
                  line-height: 40px;
                }
              }
              .btn1 {
                border: 1px solid rgba(64, 158, 255, 1);
                color: #4ea6ff;
                margin-right: 14px;
              }
              .btn2 {
                background-color: #4ea6ff;
                color: #ffffff;
              }
            }
          }
        }
      }
    }
    .ant-modal-close-x {
      display: none;
    }
  }
}
</style>
