<!-- 学习路径图的查看权 -->
<template>
  <a-drawer
    :visible="Managevisible"
    class="drawerStyle ManageRight"
    placement="right"
    width="85%"
    @after-visible-change="afterVisibleChange"
  >
    <div class="drawerMain" id="ManageRight">
      <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="name"
                        style="width: 270px; height: 40px; border-radius: 8px"
                        placeholder="请输入姓名"
                      />
                    </div>
                    <div class="btns">
                      <div class="btn1">
                        <div class="img1">
                          <img
                            src="../../assets/images/courseManage/search0.png"
                          />
                        </div>
                        <div class="wz">搜索</div>
                      </div>
                      <div class="btn2">
                        <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"
                        defaultExpandAll
                        :dropdown-style="{
                          maxHeight: '600px',
                        }"
                        placeholder="BOE组织树"
                        allow-clear
                        tree-default-expand-all
                        :tree-data="treeData"
                        @select="departmentSelect"
                        v-model:selectedKeys="selectedKeys"
                      >
                        <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,
                        }"
                      />
                      <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-tab-pane key="2" tab="添加组织" force-render>
                <div
                  :style="{ height: screenHeight - 235 + 'px' }"
                  style="overflow-y: auto"
                >
                  <div class="tab2">
                    <div class="nameinp">
                      <div class="namee">组织：</div>
                      <a-input
                        v-model:value="com"
                        style="width: 230px; height: 40px; border-radius: 8px"
                        placeholder="请输入组织"
                      />
                    </div>
                    <div class="btns">
                      <div class="btn1" @click="searchOrg">
                        <div class="img1">
                          <img
                            src="../../assets/images/courseManage/search0.png"
                          />
                        </div>
                        <div class="wz">搜索</div>
                      </div>
                      <div class="btn2">
                        <div class="img2">
                          <img
                            src="../../assets/images/courseManage/reset1.png"
                          />
                        </div>
                        <div class="wz">重置</div>
                      </div>
                    </div>
                    <!-- <div class="t1">
                      <div class="organize">姓名：</div>
                      <a-input
                        v-model:value="nameadd"
                        style="width: 200px; height: 40px; border-radius: 8px"
                        placeholder="请输入姓名"
                      />
                    </div> -->
                  </div>
                  <div class="boeTree">
                    <div class="boeTreeTitle">BOE组织树</div>

                    <a-tree
                      class="treeMain treeMain2"
                      :style="{ height: screenHeight - 430 + 'px' }"
                      dropdownClassName="changetreedropdownboe"
                      defaultExpandAll
                      :dropdown-style="{
                        maxHeight: '600px',
                      }"
                      placeholder="BOE组织树"
                      allow-clear
                      tree-default-expand-all
                      :tree-data="treeData"
                      @select="departmentSelect1"
                      multiple
                      v-model:selectedKeys="selectedKeys1"
                    >
                      <!-- <template #title="{ title }">
                        <span v-if="title.indexOf(com) > -1">
                          {{ title.substr(0, title.indexOf(com)) }}
                          <span style="color: #f50">{{ com }}</span>
                          {{ title.substr(title.indexOf(com) + com.length) }}
                        </span>
                        <span v-else>{{ title }}</span>
                      </template> -->
                    </a-tree>
                    <div
                      class="boeTreeTitle"
                      style="margin-top: 8px; cursor: pointer"
                      @click="addOrgModal"
                    >
                      确认添加
                    </div>
                  </div>
                </div>
              </a-tab-pane>
              <a-tab-pane key="3" tab="受众关联">
                <div
                  :style="{ height: screenHeight - 235 + 'px' }"
                  style="overflow-y: auto"
                >
                  <div class="tab1">
                    <div class="t1">
                      <!-- <div class="nameinp">
                        <div class="namee">选择受众：</div>
                        <div class="select">
                          <a-select
                            v-model:value="choosevalue"
                            style="width: 200px; border-radius: 8px"
                            placeholder="请选择受众群体"
                            :options="organizeList1"
                          />
                        </div>
                      </div> -->
                    </div>
                    <div class="t1" style="margin-top: 10px">
                      <div class="organize">受众名称：</div>
                      <a-input
                        v-model:value="nameaddd"
                        style="width: 260px; height: 40px; border-radius: 8px"
                        placeholder="请输入受众名称"
                      />
                    </div>
                    <div class="btns">
                      <div class="btn1">
                        <div class="img1">
                          <img
                            src="../../assets/images/courseManage/search0.png"
                          />
                        </div>
                        <div class="wz">搜索</div>
                      </div>
                      <div class="btn2">
                        <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="tableBox tabb" style="margin-top: 16px">
                    <a-table
                      style="border: 1px solid #f2f6fe"
                      :columns="tablecolumns2"
                      :data-source="tabledata2"
                      :loading="tableDataTotal === -1 ? true : false"
                      expandRowByClick="true"
                      :scroll="{ x: 500 }"
                      @expand="expandTable"
                      :pagination="false"
                      :row-selection="{
                        columnWidth: 30,
                        selectedRowKeys: selectedRowKeys2,
                        onChange: onSelectChange2,
                      }"
                    />
                    <div class="pa" style="margin-top: 20px">
                      <a-pagination
                        :showSizeChanger="false"
                        showQuickJumper="true"
                        hideOnSinglePage="true"
                        :pageSize="pageSize2"
                        :current="currentPage2"
                        :total="tableDataTotal2"
                        class="pagination"
                        v-if="tabledata2 > 10"
                      />
                    </div>
                  </div>
                </div>
              </a-tab-pane>
            </a-tabs>
          </div>
        </div>
        <div class="right">
          <div class="onerow">
            <div class="onleft">
              <div class="already">已选</div>
              <!-- <div class="count">6</div>
              <div class="peo">人</div> -->
            </div>
            <div class="clbox" @click="deleteAll">
              <div class="colose"></div>
              <span class="allclear">全部清除</span>
            </div>
          </div>
          <div class="line"></div>
          <div class="tit">快速选人</div>
          <div style="position: relative; min-height: 180px">
            <div style="height: 160px" class="selectedsBox" id="selectedsBox">
              <div class="selecteds" id="selecteds">
                <!-- 遍历生成 -->
                <div class="chose" v-for="item in choosepeople" :key="item.key">
                  <div>{{ item.name }}</div>
                  <div class="ch" @click="deleteChoosePeople(item)"></div>
                </div>
              </div>
            </div>
            <div
              class="chose"
              style="
                display: flex;
                justify-content: flex-end;
                margin-right: 20px;
                font-size: 12px;
                font-weight: 500;
                color: #4ea6ff;
                line-height: 22px;
              "
              v-if="showMore"
              @click="morePeopleShow"
            >
              <div>
                查看更多
                <img
                  style="width: 10px; height: 12px; margin-top: -2px"
                  src="../../assets/images/projectadd/go.png"
                />
              </div>
            </div>
            <div
              class="chose"
              style="
                display: flex;
                justify-content: flex-end;
                margin-right: 20px;
                font-size: 12px;
                font-weight: 500;
                color: #4ea6ff;
                line-height: 22px;
              "
              v-if="showHidden"
              @click="morePeopleHidden"
            >
              <div>
                收起
                <img
                  style="width: 10px; height: 12px; margin-top: -2px"
                  src="../../assets/images/projectadd/pickUp.png"
                />
              </div>
            </div>
          </div>
          <div class="line"></div>
          <div class="tit">添加组织</div>
          <div style="position: relative; min-height: 180px">
            <div
              style="position: relative; height: 160px"
              class="selectedsBox"
              id="selectedsBox1"
            >
              <div class="selecteds" id="selecteds1">
                <!-- 遍历生成 -->
                <div
                  class="chose"
                  v-for="item in chooseorganization1"
                  :key="item.key"
                >
                  <div>{{ item.value }}</div>
                  <div class="ch" @click="deleteChoosePeople1(item)"></div>
                </div>
              </div>
            </div>
            <div
              class="chose"
              style="
                display: flex;
                justify-content: flex-end;
                margin-right: 20px;
                font-size: 12px;
                font-weight: 500;
                color: #4ea6ff;
                line-height: 22px;
              "
              v-if="showMore1"
              @click="morePeopleShow1"
            >
              <div>
                查看更多
                <img
                  style="width: 10px; height: 12px; margin-top: -2px"
                  src="../../assets/images/projectadd/go.png"
                />
              </div>
            </div>
            <div
              class="chose"
              style="
                display: flex;
                justify-content: flex-end;
                margin-right: 20px;
                font-size: 12px;
                font-weight: 500;
                color: #4ea6ff;
                line-height: 22px;
              "
              v-if="showHidden1"
              @click="morePeopleHidden1"
            >
              <div>
                收起
                <img
                  style="width: 10px; height: 12px; margin-top: -2px"
                  src="../../assets/images/projectadd/pickUp.png"
                />
              </div>
            </div>
          </div>
          <div class="line"></div>
          <div class="tit">受众关联</div>
          <div
            style="position: relative; min-height: 180px; padding-bottom: 40px"
          >
            <div style="height: 160px" class="selectedsBox" id="selectedsBox2">
              <div class="selecteds" id="selecteds2">
                <!-- 遍历生成 -->
                <div
                  class="chose"
                  v-for="item in relationpeople"
                  :key="item.key"
                >
                  <div>{{ item.name }}</div>
                  <div class="ch" @click="deleteRelationPeople(item)"></div>
                </div>
              </div>
            </div>
            <div
              class="chose"
              style="
                display: flex;
                justify-content: flex-end;
                margin-right: 20px;
                font-size: 12px;
                font-weight: 500;
                color: #4ea6ff;
                line-height: 22px;
              "
              v-if="showMore2"
              @click="morePeopleShow2"
            >
              <div>
                查看更多
                <img
                  style="width: 10px; height: 12px; margin-top: -2px"
                  src="../../assets/images/projectadd/go.png"
                />
              </div>
            </div>
            <div
              class="chose"
              style="
                display: flex;
                justify-content: flex-end;
                margin-right: 20px;
                font-size: 12px;
                font-weight: 500;
                color: #4ea6ff;
                line-height: 22px;
              "
              v-if="showHidden2"
              @click="morePeopleHidden2"
            >
              <div>
                收起
                <img
                  style="width: 10px; height: 12px; margin-top: -2px"
                  src="../../assets/images/projectadd/pickUp.png"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="btnn">
        <button class="btn1">取消</button>
        <button class="btn2">确定</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 } from "vue";
import elementResizeDetectorMaker from "element-resize-detector";
import { message } from "ant-design-vue";
import { toDate } from "../../api/method";
export default {
  name: "ManageRight",
  props: {
    Managevisible: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, ctx) {
    const state = reactive({
      screenHeight: document.body.clientHeight, // 屏幕高度
      pageSize: 10,
      currentPage: 1,
      tableDataTotal: 50,
      pageSize1: 10,
      currentPage1: 1,
      tableDataTotal1: 50,
      pageSize2: 10,
      currentPage2: 1,
      tableDataTotal2: 50,

      selectedRowKeys1: [],

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

      valueSelectboe2: null, //boe树形选择
      name: "",
      nameadd: "",
      nameaddd: "",
      com: null,
      //组织树
      treeData: [
        {
          title: "京东方",
          value: "京东方",
          children: [
            {
              title: "产研部",
              value: "产研部",
              children: [
                {
                  title: "产品部",
                  value: "产品部",
                },
                {
                  title: "研究部",
                  value: "研究部",
                },
                {
                  title: "研究部2",
                  value: "研究部2",
                },
                {
                  title: "研究3",
                  value: "研究3",
                },
                {
                  title: "研究4",
                  value: "研究4",
                },
                {
                  title: "研究部5",
                  value: "研究部5",
                },
                {
                  title: "研究部6",
                  value: "研究部6",
                },
                {
                  title: "研究部7",
                  value: "研究部7",
                },
                {
                  title: "研究部8",
                  value: "研究部8",
                },
                {
                  title: "研究部9",
                  value: "研究部9",
                },
              ],
            },
            {
              title: "二级标题",
              value: "二级标题",
              children: [
                {
                  title: "三级标题",
                  value: "三级标题",
                  children: [
                    {
                      title: "四级标题",
                      value: "四级标题",
                      children: [
                        {
                          title: "五级标题",
                          value: "五级标题",
                          children: [
                            {
                              title: "六级标题",
                              value: "六级标题",
                              children: [
                                {
                                  title: "七级标题",
                                  value: "七级标题",
                                  children: [
                                    {
                                      title: "八级标题",
                                      value: "八级标题",
                                      children: [
                                        {
                                          title: "九级标题",
                                          value: "九级标题",
                                          children: [
                                            {
                                              title: "十级标题",
                                              value: "十级标题",
                                              children: [
                                                {
                                                  title: "十一级标题",
                                                  value: "十一级标题",
                                                  children: [
                                                    {
                                                      title: "十二级标题",
                                                      value: "十二级标题",
                                                      children: [
                                                        {
                                                          title:
                                                            "十三级标题十三级标题十三级标题十三级标题",
                                                          value: "十三级标题",
                                                          children: [
                                                            {
                                                              title:
                                                                "十四级标题",
                                                              value:
                                                                "十四级标题",
                                                              children: [
                                                                {
                                                                  title:
                                                                    "十五级标题",
                                                                  value:
                                                                    "十五级标题",
                                                                  children: [
                                                                    {
                                                                      title:
                                                                        "十六级标题",
                                                                      value:
                                                                        "十六级标题",
                                                                      children:
                                                                        [
                                                                          {
                                                                            title:
                                                                              "十七级标题",
                                                                            value:
                                                                              "十七级标题",
                                                                            children:
                                                                              [
                                                                                {
                                                                                  title:
                                                                                    "十八级标题",
                                                                                  value:
                                                                                    "十八级标题",
                                                                                  children:
                                                                                    [
                                                                                      {
                                                                                        title:
                                                                                          "十九级标题",
                                                                                        value:
                                                                                          "十九级标题",
                                                                                        children:
                                                                                          [
                                                                                            {
                                                                                              title:
                                                                                                "二十级标题二十级标题",
                                                                                              value:
                                                                                                "二十级标题二十级标题",
                                                                                            },
                                                                                          ],
                                                                                      },
                                                                                    ],
                                                                                },
                                                                              ],
                                                                          },
                                                                        ],
                                                                    },
                                                                  ],
                                                                },
                                                              ],
                                                            },
                                                          ],
                                                        },
                                                      ],
                                                    },
                                                  ],
                                                },
                                              ],
                                            },
                                          ],
                                        },
                                      ],
                                    },
                                  ],
                                },
                              ],
                            },
                          ],
                        },
                      ],
                    },
                  ],
                },
              ],
            },
            {
              title: "人力资源部",
              value: "人力资源部",
              children: [
                {
                  title: "人事部",
                  value: "人事部",
                },
                {
                  title: "行政部",
                  value: "行政部",
                },
              ],
            },
          ],
        },
      ],
      //快速选人的table
      tabledata: [
        {
          key: 1,
          name: "小李小李小李",
          bum: "产研部",
          numb: "000000",
          guishu: "产品部",
        },
        {
          key: 2,
          name: "小刘小刘小刘",
          bum: "产研部",
          numb: "000000",
          guishu: "产品部",
        },
        {
          key: 3,
          name: "小李小李",
          bum: "产研部",
          numb: "000000",
          guishu: "产品部",
        },
        {
          key: 4,
          name: "小李",
          bum: "产研部",
          numb: "000000",
          guishu: "产品部",
        },
        {
          key: 5,
          name: "小李",
          bum: "产研部",
          numb: "000000",
          guishu: "产品部",
        },
        {
          key: 6,
          name: "小李",
          bum: "产研部",
          numb: "000000",
          guishu: "产品部",
        },
        {
          key: 7,
          name: "小李",
          bum: "产研部",
          numb: "000000",
          guishu: "产品部",
        },
        {
          key: 8,
          name: "小李",
          bum: "产研部",
          numb: "000000",
          guishu: "产品部",
        },
        {
          key: 9,
          name: "小小李",
          bum: "产研部",
          numb: "000000",
          guishu: "产品部",
        },
        {
          key: 10,
          name: "小小李",
          bum: "产研部",
          numb: "000000",
          guishu: "产品部",
        },
        {
          key: 11,
          name: "小小李",
          bum: "产研部",
          numb: "000000",
          guishu: "产品部",
        },
        {
          key: 12,
          name: "小小李",
          bum: "产研部",
          numb: "000000",
          guishu: "产品部",
        },
      ],
      tablecolumns: [
        {
          title: "姓名",
          dataIndex: "name",
          key: "name",
          // width: 30,
          align: "left",
          className: "h",
        },
        {
          title: "工号",
          dataIndex: "numb",
          key: "numb",
          // width: 30,
          align: "center",
          className: "h",
        },
        {
          title: "归属组织",
          dataIndex: "guishu",
          key: "guishu",
          // width: 30,
          align: "center",
          className: "h",
        },
        {
          title: "部门",
          dataIndex: "bum",
          key: "bum",
          // width: 30,
          align: "center",
          className: "h",
        },
      ],

      //受众关联table数据
      tabledata2: [
        {
          key: 1,
          name: "学习受众",
          time: "1668410969",
          number: "20",
          type: "普通受众",
        },
        {
          key: 2,
          name: "案例受众",
          time: "1668324569",
          number: "10",
          type: "普通受众",
        },
        {
          key: 3,
          name: "学习受众",
          time: "1668238169",
          number: "20",
          type: "普通受众",
        },
        {
          key: 4,
          name: "显示受众",
          time: "1668133769",
          number: "30",
          type: "普通受众2",
        },
        {
          key: 5,
          name: "惯例受众",
          time: "1668047369",
          number: "50",
          type: "普通受众",
        },
        {
          key: 6,
          name: "管理受众",
          time: "1667960969",
          number: "20",
          type: "普通受众",
        },
        {
          key: 7,
          name: "学习小组受众",
          time: "1667874569",
          number: "20",
          type: "普通受众",
        },
        {
          key: 8,
          name: "学习受众",
          time: "1667701769",
          number: "10",
          type: "普通受众",
        },
        {
          key: 9,
          name: "案例受众",
          time: "1667442569",
          number: "5",
          type: "普通受众",
        },
        {
          key: 10,
          name: "项目受众",
          time: "1667262569",
          number: "25",
          type: "普通受众",
        },
      ],
      tablecolumns2: [
        {
          title: "受众名称",
          dataIndex: "name",
          key: "name",
          width: 30,
          align: "left",
          className: "h",
        },
        {
          title: "创建时间",
          dataIndex: "time",
          key: "time",
          width: 35,
          align: "center",
          className: "h",
          sorter: {
            compare: (a, b) => a.time - b.time,
            multiple: 3,
          },
          scopedSlots: { customRender: "action" }, //引入的插槽
          customRender: (text) => {
            // console.log(text.record.checked1);
            return (
              <div class="racona">
                <span> {toDate(Number(text.record.time), "Y-M-D h:m")}</span>
              </div>
            );
          },
        },
        {
          title: "人数",
          dataIndex: "number",
          key: "number",
          width: 30,
          align: "center",
          className: "h",
        },
        {
          title: "类型",
          dataIndex: "type",
          key: "type",
          width: 40,
          align: "center",
          className: "h",
        },
      ],
      organizeList1: [
        {
          value: "产品受众群体",
          label: "产品受众群体",
        },
        {
          value: "人力资源hrbp",
          label: "人力资源hrbp",
        },
      ],
      //快速选人-------------------------------------
      valueSelectboe: null, //快速选人的选择组织
      choosepeople: [], //总的数组
      selectedKeys: [], //选中部门
      showMore: false, //是否显示快速选人的查看更多
      showHidden: false, //是否显示收回
      selectedRowKeys: [], //表格选中的key
      //快速选人-------------------------------------
      //添加组织-------------------------------------

      selectedKeys1: [], //选中部门的key
      chooseorganization: [], //添加组织的选择组织
      chooseorganization1: [], //显示到右侧的数组
      showMore1: false, //是否显示添加组织的查看更多
      showHidden1: false, //是否显示添加组织的收回

      showOrgModal: false, //确认弹窗
      //添加组织-------------------------------------

      //受众关联-------------------------------------
      relationpeople: [], //总的数组
      showMore2: false, //是否显示快速选人的查看更多
      showHidden2: false, //是否显示收回
      selectedRowKeys2: [], //表格选中的key
      //受众关联-------------------------------------
    });
    const closeDrawer = () => {
      state.activeKey = "1";
      ctx.emit("update:Managevisible", false);
    };

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

    const getClientHeight = () => {
      state.screenHeight = document.body.clientHeight;
    };
    //     //监测快速选人的高度
    // const getClientHeightSelecteds = () => {
    //       state.selectedsHeight = document.getElementById('selecteds').offsetHeight
    //       console.log('selectedsHeight',state.selectedsHeight)

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

    // 开始 快速选人------------------------------------------------------------------
    //选中部门
    const departmentSelect = (e, k) => {
      console.log("选中的部门", e, k);
      state.selectedKeys = [k.node.key];
    };
    //快速选人 选中的数组
    const onSelectChange = (selectedRowKeys, item) => {
      // console.log("selectedRowKeys changed: ", selectedRowKeys,item);
      state.selectedRowKeys = selectedRowKeys;
      state.choosepeople = item.reverse();
      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("ManageRight").querySelector("#selecteds"),
        function (ele) {
          console.log("ele", ele.offsetHeight);
          if (ele.offsetHeight > 160 && !state.showHidden) {
            state.showMore = true;
            document
              .getElementById("ManageRight")
              .querySelector("#selectedsBox").style.overflow = "hidden";
            document
              .getElementById("ManageRight")
              .querySelector("#selectedsBox").style.height = "160px";
          } else if (ele.offsetHeight < 160) {
            state.showMore = false;
            state.showHidden = false;
            document
              .getElementById("ManageRight")
              .querySelector("#selectedsBox").style.overflow = "hidden";
            document
              .getElementById("ManageRight")
              .querySelector("#selectedsBox").style.height = "160px";
          }
        }
      );
    };
    const morePeopleShow = () => {
      state.showMore = false;
      state.showHidden = true;
      document
        .getElementById("ManageRight")
        .querySelector("#selectedsBox").style.overflow = "";
      document
        .getElementById("ManageRight")
        .querySelector("#selectedsBox").style.height = "";
    };
    const morePeopleHidden = () => {
      state.showMore = true;
      state.showHidden = false;
      document
        .getElementById("ManageRight")
        .querySelector("#selectedsBox").style.overflow = "hidden";
      document
        .getElementById("ManageRight")
        .querySelector("#selectedsBox").style.height = "160px";
    };

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

    // 开始 添加组织------------------------------------------------------------------
    //选中部门
    const departmentSelect1 = (e, k) => {
      console.log("选中的部门", e, k);
      if (!k.node.children) {
        state.selectedKeys1 = e.reverse();
        if (k.selected) {
          state.chooseorganization.unshift(k.node);
        } else {
          for (let i = 0; i < state.chooseorganization.length; i++) {
            if (state.chooseorganization[i].key === k.node.key) {
              state.chooseorganization.splice(i, 1);
            }
          }
        }
      }

      // console.log("选中的部门2", state.selectedKeys1, state.chooseorganization);
    };
    //点击确认添加-判断是否显示确定弹窗
    const addOrgModal = () => {
      if (state.chooseorganization.length === 0) {
        message.destroy();
        message.warning("请选择部门");
      } else {
        state.showOrgModal = true;
      }
    };
    //确定添加
    const addOrg = () => {
      console.log("chooseorganization", state.chooseorganization);
      state.chooseorganization1 = state.chooseorganization;
      selectedsHeight1();
      state.showOrgModal = false;
    };
    //取消添加
    const closeOrgModal = () => {
      state.showOrgModal = false;
    };

    //单个删除选中的人
    const deleteChoosePeople1 = (item) => {
      console.log("item", item);
      let arr = state.chooseorganization;
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].key === item.key) {
          arr.splice(i, 1);
        }
      }
      state.chooseorganization = arr;
      let array = state.selectedKeys1;
      for (let i = 0; i < array.length; i++) {
        if (array[i] === item.key) {
          array.splice(i, 1);
        }
      }
      state.selectedKeys1 = array;
      console.log("state.selectedKeys1", state.selectedKeys1);
    };

    //根据右侧快速选人高度，判断是否显示更多
    const selectedsHeight1 = () => {
      let resize = elementResizeDetectorMaker();
      resize.listenTo(
        document.getElementById("ManageRight").querySelector("#selecteds1"),
        function (ele) {
          console.log("ele", ele.offsetHeight);
          if (ele.offsetHeight > 160 && !state.showHidden1) {
            state.showMore1 = true;
            document
              .getElementById("ManageRight")
              .querySelector("#selectedsBox1").style.overflow = "hidden";
            document
              .getElementById("ManageRight")
              .querySelector("#selectedsBox1").style.height = "160px";
          } else if (ele.offsetHeight < 160) {
            state.showMore1 = false;
            state.showHidden1 = false;
            document
              .getElementById("ManageRight")
              .querySelector("#selectedsBox1").style.overflow = "hidden";
            document
              .getElementById("ManageRight")
              .querySelector("#selectedsBox1").style.height = "160px";
          }
        }
      );
    };
    const morePeopleShow1 = () => {
      state.showMore1 = false;
      state.showHidden1 = true;
      document
        .getElementById("ManageRight")
        .querySelector("#selectedsBox1").style.overflow = "";
      document
        .getElementById("ManageRight")
        .querySelector("#selectedsBox1").style.height = "";
    };
    const morePeopleHidden1 = () => {
      state.showMore1 = true;
      state.showHidden1 = false;
      document
        .getElementById("ManageRight")
        .querySelector("#selectedsBox1").style.overflow = "hidden";
      document
        .getElementById("ManageRight")
        .querySelector("#selectedsBox1").style.height = "160px";
    };

    //搜索组织
    const searchOrg = () => {
      let treeTitle = document
        .getElementById("ManageRight")
        .querySelector(".treeMain2")
        .querySelectorAll(".ant-tree-title");
      if (state.com) {
        for (let i = 0; i < treeTitle.length; i++) {
          if (state.com === treeTitle[i].innerHTML) {
            document
              .getElementById("ManageRight")
              .querySelector(".treeMain2")
              .scrollTo(0, treeTitle[i].offsetTop + 28 * i);
            return;
          } else if (i == treeTitle.length - 1) {
            message.destroy();
            message.warning("未找到该部门");
          }
        }
      } else {
        message.destroy();
        message.warning("请输入组织名称");
      }
    };

    // 结束 添加组织------------------------------------------------------------------

    // 开始 受众关联------------------------------------------------------------------

    //受众关联 选中的数组
    const onSelectChange2 = (selectedRowKeys, item) => {
      // console.log("selectedRowKeys changed: ", selectedRowKeys,item);
      state.selectedRowKeys2 = selectedRowKeys;
      state.relationpeople = item.reverse();
      selectedsHeight2();
    };
    //单个删除选中的人
    const deleteChoosePeople2 = (item) => {
      let arr = state.relationpeople;
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].key === item.key) {
          arr.splice(i, 1);
        }
      }
      state.relationpeople = arr;
      let array = state.selectedRowKeys2;
      for (let i = 0; i < array.length; i++) {
        if (array[i] === item.key) {
          array.splice(i, 1);
        }
      }
      state.selectedRowKeys2 = array;
      console.log("");
    };
    //根据右侧快速选人高度，判断是否显示更多
    const selectedsHeight2 = () => {
      let resize = elementResizeDetectorMaker();
      resize.listenTo(
        document.getElementById("ManageRight").querySelector("#selecteds2"),
        function (ele) {
          console.log("ele", ele.offsetHeight);
          if (ele.offsetHeight > 160 && !state.showHidden2) {
            state.showMore2 = true;
            document
              .getElementById("ManageRight")
              .querySelector("#selectedsBox2").style.overflow = "hidden";
            document
              .getElementById("ManageRight")
              .querySelector("#selectedsBox2").style.height = "160px";
          } else if (ele.offsetHeight < 160) {
            state.showMore2 = false;
            state.showHidden2 = false;
            document
              .getElementById("ManageRight")
              .querySelector("#selectedsBox2").style.overflow = "hidden";
            document
              .getElementById("ManageRight")
              .querySelector("#selectedsBox2").style.height = "160px";
          }
        }
      );
    };
    const morePeopleShow2 = () => {
      state.showMore2 = false;
      state.showHidden2 = true;
      document
        .getElementById("ManageRight")
        .querySelector("#selectedsBox2").style.overflow = "";
      document
        .getElementById("ManageRight")
        .querySelector("#selectedsBox2").style.height = "";
    };
    const morePeopleHidden2 = () => {
      state.showMore2 = true;
      state.showHidden2 = false;
      document
        .getElementById("ManageRight")
        .querySelector("#selectedsBox2").style.overflow = "hidden";
      document
        .getElementById("ManageRight")
        .querySelector("#selectedsBox2").style.height = "160px";
    };

    // 结束 受众关联------------------------------------------------------------------

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

      state.selectedKeys1 = []; //选中部门的key
      state.chooseorganization = []; //添加组织的选择组织
      state.chooseorganization1 = []; //显示到右侧的数组
      state.showMore1 = false; //是否显示添加组织的查看更多
      state.showHidden1 = false; //是否显示添加组织的收回

      state.showOrgModal = false; //确认弹窗
      //添加组织-------------------------------------

      //受众关联-------------------------------------
      state.relationpeople = []; //总的数组
      state.showMore2 = false; //是否显示快速选人的查看更多
      state.showHidden2 = false; //是否显示收回
      state.selectedRowKeys2 = []; //表格选中的key
      //受众关联-------------------------------------
    };

    return {
      ...toRefs(state),
      afterVisibleChange,
      closeDrawer,
      onSelectChange,
      onSelectChange2,
      // change,
      departmentSelect,
      deleteChoosePeople,
      selectedsHeight,
      morePeopleShow,
      morePeopleHidden,

      departmentSelect1,
      addOrgModal,
      addOrg,
      closeOrgModal,
      selectedsHeight1,
      morePeopleShow1,
      morePeopleHidden1,
      deleteChoosePeople1,

      selectedsHeight2,
      morePeopleShow2,
      morePeopleHidden2,
      deleteChoosePeople2,

      deleteAll,
      searchOrg,
    };
  },
};
</script>

<style lang="scss">
.ManageRight {
  .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 {
              .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: 320px;
        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;
            .already {
              color: rgba(51, 51, 51, 1);
              font-size: 16px;
              font-weight: 500;
              margin-left: 32px;
              white-space: nowrap;
              // margin-bottom: 20px;
            }
            .count {
              color: #4ea6ff;
              font-size: 16px;
              margin: 0 6px;
            }
            .peo {
              color: rgba(51, 51, 51, 1);
              font-size: 16px;
              font-weight: 500;
            }
          }
          .clbox {
            margin-left: 30px;
            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;
          .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;
            .ch {
              position: absolute;
              width: 18px;
              height: 18px;
              background-image: url(../../assets/images/basicinfo/ch.png);
              right: -8px;
              top: -8px;
            }
          }
        }
      }
    }
    .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>
