<template>
  <a-drawer
    :visible="AddSvisible"
    class="drawerStyle AddLevelAddStu"
    placement="right"
    width="70%"
    @after-visible-change="afterVisibleChange"
  >
    <div class="drawerMain">
      <div class="header">
        <div class="headerTitle">添加学员</div>
        <img
          style="width: 29px; height: 29px; cursor: pointer"
          src="../../assets/images/basicinfo/close.png"
          @click="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="请输入姓名"
                        maxlength="20"
                      />
                    </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="tabb" style="margin-top: 16px">
                    <a-table
                      style="border: 1px solid #f2f6fe"
                      :columns="tablecolumns"
                      :data-source="tabledata"
                      :loading="tableDataTotal === -1 ? true : false"
                      expandRowByClick="true"
                      :scroll="{ x: 500 }"
                      @expand="expandTable"
                      :pagination="false"
                      :row-selection="{
                        columnWidth: 30,
                        selectedRowKeys: selectedRowKeys,
                        onChange: onSelectChange,
                      }"
                    />
                    <div class="tableBox">
                    <div class="pa">
                      <a-pagination
                        :showSizeChanger="false"
                        showQuickJumper="true"
                        hideOnSinglePage="true"
                        :pageSize="pageSize"
                        :current="currentPage"
                        :total="tableDataTotal"
                        class="pagination"
                      />
                    </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="t1">
                      <div class="organize">选择组织：</div>
                      <div class="select">
                        <a-tree-select
                          v-model:value="valueSelect"
                          style="width: 200px"
                          dropdownClassName="changetreedropdown"
                          :dropdown-style="{
                            maxHeight: '400px',
                            overflow: 'auto',
                          }"
                          placeholder="请输入组织名称"
                          allow-clear
                          tree-default-expand-all
                          :tree-data="treeData"
                        >
                        </a-tree-select>
                      </div>
                    </div>
                    <div class="t1">
                      <div class="organize">姓名：</div>
                      <a-input
                        v-model:value="nameadd"
                        style="width: 200px; height: 40px; border-radius: 8px"
                        placeholder="请输入姓名"
                        maxlength="20"
                      />
                    </div>
                  </div>-->
          
                  <!-- 选完后出现下面 -->
                  <!--
                  <div class="searchdown">
                    <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 class="tableBox" style="margin-top: 16px">
                      <a-table
                        style="border: 1px solid #f2f6fe"
                        :columns="tablecolumns1"
                        :data-source="tabledata1"
                        :loading="tableDataTotal === -1 ? true : false"
                        expandRowByClick="true"
                        :scroll="{ x: 500 }"
                        @expand="expandTable"
                        :pagination="false"
                        :row-selection="{
                          columnWidth: 30,
                          selectedRowKeys: selectedRowKeys1,
                          onChange: onSelectChange1,
                        }"
                      />
              
                      <div class="pa">
                        <a-pagination
                          :showSizeChanger="false"
                          showQuickJumper="true"
                          hideOnSinglePage="true"
                          :pageSize="pageSize1"
                          :current="currentPage1"
                          :total="tableDataTotal1"
                          class="pagination"
                        />
                      </div>
                    </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: 200px; height: 40px; border-radius: 8px"
                        placeholder="请输入姓名"
                        maxlength="20"
                      />
                    </div>
                  </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 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="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="tableBox">  
                    <div class="pa">
                      <a-pagination
                        :showSizeChanger="false"
                        showQuickJumper="true"
                        hideOnSinglePage="true"
                        :pageSize="pageSize2"
                        :current="currentPage2"
                        :total="tableDataTotal2"
                        class="pagination"
                      />
                    </div></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">
              <div class="colose"></div>
              <span class="allclear">全部清除</span>
            </div>
          </div>
          <div
            class="selecteds"
            :style="{ 'max-height': screenHeight - 235 + 'px' }"
            style="overflow-y: auto"
          >
            <div class="chose">
              李明
              <div class="ch"></div>
            </div>
            <div class="chose">
              李大明
              <div class="ch"></div>
            </div>
            <div class="chose">
              李二明
              <div class="ch"></div>
            </div>
            <div class="chose">
              李明
              <div class="ch"></div>
            </div>
            <div class="chose">
              李大明
              <div class="ch"></div>
            </div>
            <div class="chose">
              李二明
              <div class="ch"></div>
            </div>
            <div class="chose">
              李明
              <div class="ch"></div>
            </div>
            <div class="chose">
              李大明
              <div class="ch"></div>
            </div>
            <div class="chose">
              李二明
              <div class="ch"></div>
            </div>
            <div class="chose">
              李明
              <div class="ch"></div>
            </div>
            <div class="chose">
              李大明
              <div class="ch"></div>
            </div>
            <div class="chose">
              李二明
              <div class="ch"></div>
            </div>
            <div class="chose">
              李明
              <div class="ch"></div>
            </div>
            <div class="chose">
              李大明
              <div class="ch"></div>
            </div>
            <div class="chose">
              李二明
              <div class="ch"></div>
            </div>
            <div class="chose">
              李明
              <div class="ch"></div>
            </div>
            <div class="chose">
              李大明
              <div class="ch"></div>
            </div>
            <div class="chose">
              李二明
              <div class="ch"></div>
            </div>
            <div class="chose">
              李明
              <div class="ch"></div>
            </div>
            <div class="chose">
              李大明
              <div class="ch"></div>
            </div>
            <div class="chose">
              李二明
              <div class="ch"></div>
            </div>
            <div class="chose">
              李明
              <div class="ch"></div>
            </div>
            <div class="chose">
              李大明
              <div class="ch"></div>
            </div>
            <div class="chose">
              李二明
              <div class="ch"></div>
            </div>
            <div class="chose">
              李明
              <div class="ch"></div>
            </div>
            <div class="chose">
              李大明
              <div class="ch"></div>
            </div>
            <div class="chose">
              李二明
              <div class="ch"></div>
            </div>
            <div class="chose">
              李明
              <div class="ch"></div>
            </div>
            <div class="chose">
              李大明
              <div class="ch"></div>
            </div>
            <div class="chose">
              李二明
              <div class="ch"></div>
            </div>
            <div class="chose">
              李明
              <div class="ch"></div>
            </div>
            <div class="chose">
              李大明
              <div class="ch"></div>
            </div>
            <div class="chose">
              李二明
              <div class="ch"></div>
            </div>
            <div class="chose">
              李明
              <div class="ch"></div>
            </div>
            <div class="chose">
              李大明
              <div class="ch"></div>
            </div>
            <div class="chose">
              李二明
              <div class="ch"></div>
            </div>
            <div class="chose">
              李明
              <div class="ch"></div>
            </div>
            <div class="chose">
              李大明
              <div class="ch"></div>
            </div>
            <div class="chose">
              李二明
              <div class="ch"></div>
            </div>
            <div class="chose">
              李明
              <div class="ch"></div>
            </div>
            <div class="chose">
              李大明
              <div class="ch"></div>
            </div>
            <div class="chose">
              李二明
              <div class="ch"></div>
            </div>
            <div class="chose">
              李明
              <div class="ch"></div>
            </div>
            <div class="chose">
              李大明
              <div class="ch"></div>
            </div>
            <div class="chose">
              李二明
              <div class="ch"></div>
            </div>
            <div class="chose">
              李明
              <div class="ch"></div>
            </div>
            <div class="chose">
              李大明
              <div class="ch"></div>
            </div>
            <div class="chose">
              李二明
              <div class="ch"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="btnn">
        <button class="btn1">取消</button>
        <button class="btn2">确定</button>
      </div>
    </div>
  </a-drawer>
</template>

<script>
import { reactive, toRefs, onMounted, onUnmounted } from "vue";

export default {
  name: "AddStu",
  props: {
    AddSvisible: {
      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,
      selectedRowKeys: [],
      selectedRowKeys1: [],
      selectedRowKeys2: [],
      activeKey: "1",
      value: [], //级联选择框
      choosevalue: null, //受众选择
      valueSelect: null, //树形选择
      name: "",
      nameadd: "",
      nameaddd: "",
      treeData: [
        {
          title: "京东方",
          value: "京东方",
          children: [
            {
              title: "产研部",
              value: "产研部",
              children: [
                {
                  title: "产品部",
                  value: "产品部",
                },
                {
                  title: "研究部",
                  value: "研究部",
                },
              ],
            },
            {
              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: "行政部",
                },
              ],
            },
          ],
        },
      ],
      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: "",
        },
      ],
      tablecolumns: [
        {
          title: "姓名",
          dataIndex: "name",
          key: "name",
          width: 30,
          align: "left",
          className: "h",
        },
        {
          title: "工号",
          dataIndex: "numb",
          key: "numb",
          width: 35,
          align: "center",
          className: "h",
        },
        {
          title: "归属组织",
          dataIndex: "guishu",
          key: "guishu",
          width: 30,
          align: "center",
          className: "h",
        },
        {
          title: "部门",
          dataIndex: "bum",
          key: "bum",
          width: 40,
          align: "center",
          className: "h",
        },
      ],
      tabledata1: [
        {
          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: "",
        },
      ],
      tablecolumns1: [
        {
          title: "姓名",
          dataIndex: "name",
          key: "name",
          width: 30,
          align: "left",
          className: "h",
        },
        {
          title: "工号",
          dataIndex: "numb",
          key: "numb",
          width: 35,
          align: "center",
          className: "h",
        },
        {
          title: "归属组织",
          dataIndex: "guishu",
          key: "guishu",
          width: 30,
          align: "center",
          className: "h",
        },
        {
          title: "部门",
          dataIndex: "bum",
          key: "bum",
          width: 40,
          align: "center",
          className: "h",
        },
      ],
      tabledata2: [
        {
          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: "",
        },
      ],
      tablecolumns2: [
        {
          title: "姓名",
          dataIndex: "name",
          key: "name",
          width: 30,
          align: "left",
          className: "h",
        },
        {
          title: "工号",
          dataIndex: "numb",
          key: "numb",
          width: 35,
          align: "center",
          className: "h",
        },
        {
          title: "归属组织",
          dataIndex: "guishu",
          key: "guishu",
          width: 30,
          align: "center",
          className: "h",
        },
        {
          title: "部门",
          dataIndex: "bum",
          key: "bum",
          width: 40,
          align: "center",
          className: "h",
        },
      ],
      organizeList1: [
        {
          value: "产品受众群体",
          label: "产品受众群体",
        },
        {
          value: "人力资源hrbp",
          label: "人力资源hrbp",
        },
      ],
    });
    const closeDrawer = () => {
      state.activeKey = "1";
      ctx.emit("update:AddSvisible", false);
    };

    const afterVisibleChange = (bool) => {
      console.log("state", bool);
    };
    const onSelectChange = (selectedRowKeys) => {
      console.log("selectedRowKeys changed: ", selectedRowKeys);
      state.selectedRowKeys = selectedRowKeys;
    };
    const onSelectChange1 = (selectedRowKeys) => {
      console.log("selectedRowKeys changed: ", selectedRowKeys);
      state.selectedRowKeys1 = selectedRowKeys;
    };
    const onSelectChange2 = (selectedRowKeys) => {
      console.log("selectedRowKeys changed: ", selectedRowKeys);
      state.selectedRowKeys2 = selectedRowKeys;
    };

    const getClientHeight = () => {
      state.screenHeight = document.body.clientHeight;
    };

    onMounted(() => {
      // console.log("11111", 1);
      window.addEventListener("resize", getClientHeight, false);
      // judgeUrl();
    });
    onUnmounted(() => {
      window.removeEventListener("resize", getClientHeight, false);
    });
    return {
      ...toRefs(state),
      afterVisibleChange,
      closeDrawer,
      onSelectChange,
      onSelectChange1,
      onSelectChange2,
      // change,
    };
  },
};
</script>

<style lang="scss">
.AddLevelAddStu {
  .drawerMain {
    min-width: 600px;
    margin: 0px 32px 0px 32px;
    // overflow-y: auto;
    display: flex;
    flex-direction: column;

    .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;
      // height: 80%;
      margin-bottom: 72px;
      .left {
        // overflow-y: auto;
        width: 65%;
        // 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;
              .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;
              }
            }
          }
          .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;

            .t1 {
              display: flex;
              align-items: center;
              margin-bottom: 5px;
            }
            .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;
              }
            }
          }

          .searchdown {
            .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;
                }
              }
            }
          }
        }
      }
      .right {
        width: 35%;
        .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;
            }
          }
        }
        .selecteds {
          display: flex;
          flex-wrap: wrap;
          margin-left: 32px;
          .chose {
            width: 64px;
            height: 24px;
            margin-top: 25px;
            margin-right: 25px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 2px;
            border: 1px solid rgba(56, 139, 225, 1);
            color: rgba(56, 139, 225, 1);
            font-size: 12px;
            position: relative;
            .ch {
              position: absolute;
              width: 18px;
              height: 18px;
              background-image: url(../../assets/images/basicinfo/ch.png);
              right: -8px;
              top: -8px;
            }
          }
        }
      }
    }
    .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;
  }
}
</style>
