<template>
  <a-drawer
    :visible="Ownervisible"
    class="drawerStyle Ownership"
    placement="right"
    width="60%"
    @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 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="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: 100, y: 560 }"
                    @expand="expandTable"
                    :pagination="false"
                    :row-selection="{
                      columnWidth: 30,
                      selectedRowKeys: selectedRowKeys,
                      onChange: onSelectChange,
                    }"
                  />
                  <div class="pa">
                    <a-pagination
                      showSizeChanger="true"
                      showQuickJumper="true"
                      hideOnSinglePage="true"
                      :pageSize="pageSize"
                      :current="currentPage"
                      :total="tableDataTotal"
                      class="pagination"
                    />
                  </div>
                </div>
              </a-tab-pane>
              <a-tab-pane key="2" tab="添加组织" force-render>
                <div class="tab2">
                  <div class="organize">组织：</div>
                  <div class="select">
                    <a-cascader
                      v-model:value="value"
                      placeholder="请输入组织名称"
                      :options="organizeList"
                    />
                  </div>
                </div>
              </a-tab-pane>
              <a-tab-pane key="3" tab="受众关联">
                <div class="tab1">
                  <div class="nameinp">
                    <div class="namee">受众名称：</div>
                    <div class="select">
                      <a-select
                        v-model:value="choosevalue"
                        style="width: 264px; border-radius: 8px"
                        placeholder="请输入组织名称"
                        :options="organizeList1"
                      />
                    </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>
                <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="tablecolumns1"
                    :data-source="tabledata1"
                    :loading="tableDataTotal === -1 ? true : false"
                    expandRowByClick="true"
                    :scroll="{ x: 700, y: 400 }"
                    @expand="expandTable"
                    :pagination="false"
                    :row-selection="{
                      columnWidth: 30,
                      selectedRowKeys: selectedRowKeys,
                      onChange: onSelectChange,
                    }"
                  />
                  <div class="pa">
                    <a-pagination
                      showSizeChanger="true"
                      showQuickJumper="true"
                      hideOnSinglePage="true"
                      :pageSize="pageSize"
                      :current="currentPage"
                      :total="tableDataTotal"
                      class="pagination"
                    />
                  </div>
                </div>
              </a-tab-pane>
            </a-tabs>
          </div>
        </div>
        <div class="right">
          <div class="onerow">
            <div class="already">已选</div>
            <div class="clbox">
              <div class="colose"></div>
              <span class="allclear">全部清除</span>
            </div>
          </div>
          <div class="selecteds">
            <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 } from "vue";
export default {
  name: "OwnerShip",
  props: {
    Ownervisible: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, ctx) {
    const state = reactive({
      pageSize: 10,
      currentPage: 1,
      tableDataTotal: 50,
      activeKey: "1",
      name: "", //输入名字搜索
      value: [], //级联选择框
      choosevalue: null, //受众选择
      organizeList: [
        {
          id: 1,
          value: "京东方",
          label: "京东方",
          children: [
            {
              id: 2,
              value: "产研部",
              label: "产研部",
              children: [
                {
                  id: 4,
                  value: "产品部门",
                  label: "产品部门",
                },
                {
                  id: 5,
                  value: "研发部门",
                  label: "研发部门",
                },
              ],
            },
            {
              id: 3,
              value: "人力资源部",
              label: "人力资源部",
              children: [
                {
                  id: 6,
                  value: "人事部",
                  label: "人事部",
                },
                {
                  id: 7,
                  value: "行政部",
                  label: "行政部",
                },
              ],
            },
          ],
        },
      ],
      tabledata: [
        {
          key: 1,
          name: "小李",
          bum: "产研部",
          gangw: "产品经理",
        },
        {
          key: 2,
          name: "小刘",
          bum: "产研部",
          gangw: "产品经理",
        },
        {
          key: 3,
          name: "小李",
          bum: "产研部",
          gangw: "产品经理",
        },
        {
          key: 4,
          name: "小李",
          bum: "产研部",
          gangw: "产品经理",
        },
        {
          key: 5,
          name: "小李",
          bum: "产研部",
          gangw: "产品经理",
        },
        {
          key: 6,
          name: "小李",
          bum: "产研部",
          gangw: "产品经理",
        },
        {
          key: 7,
          name: "小李",
          bum: "产研部",
          gangw: "产品经理",
        },
        {
          key: 8,
          name: "小李",
          bum: "产研部",
          gangw: "产品经理",
        },
        {
          key: 9,
          name: "小李",
          bum: "产研部",
          gangw: "产品经理",
        },
      ],
      tablecolumns: [
        {
          title: "姓名",
          dataIndex: "name",
          key: "name",
          width: 30,
          align: "left",
          className: "h",
        },
        {
          title: "部门",
          dataIndex: "bum",
          key: "bum",
          width: 45,
          align: "center",
          className: "h",
        },
        {
          title: "岗位",
          dataIndex: "gangw",
          key: "gangw",
          width: 45,
          align: "center",
          className: "h",
        },
      ],
      tabledata1: [
        {
          key: 1,
          name: "学习受众",
          time: "2022-10-31 23:12:00",
          total: "1",
          state: "已发布",
          type: "普通受众",
        },
        {
          key: 2,
          name: "2",
          time: "2022-10-31 23:12:00",
          total: "2",
          state: "已发布",
          type: "普通受众",
        },
        {
          key: 3,
          name: "mask",
          time: "2022-10-31 23:12:00",
          total: "1",
          state: "已发布",
          type: "普通受众",
        },
        {
          key: 4,
          name: "学习受众",
          time: "2022-10-31 23:12:00",
          total: "1",
          state: "已发布",
          type: "普通受众",
        },
        {
          key: 5,
          name: "学业受众",
          time: "2022-10-31 23:12:00",
          total: "2",
          state: "已发布",
          type: "普通受众",
        },
        {
          key: 6,
          name: "案例受众",
          time: "2022-10-31 23:12:00",
          total: "3",
          state: "已发布",
          type: "普通受众",
        },
      ],
      tablecolumns1: [
        {
          title: "受众名称",
          dataIndex: "name",
          key: "name",
          width: 30,
          align: "left",
          className: "h",
        },
        {
          title: "创建时间",
          dataIndex: "time",
          key: "time",
          width: 40,
          align: "center",
          className: "h",
        },
        {
          title: "人数",
          dataIndex: "total",
          key: "total",
          width: 20,
          align: "center",
          className: "h",
        },
        {
          title: "状态",
          dataIndex: "state",
          key: "state",
          width: 20,
          align: "center",
          className: "h",
        },
        {
          title: "类型",
          dataIndex: "type",
          key: "type",
          width: 30,
          align: "center",
          className: "h",
        },
      ],
      organizeList1: [
        {
          value: "项目一",
          label: "项目一",
        },
      ],
    });
    const closeDrawer = () => {
      ctx.emit("update:Ownervisible", false);
    };

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

    return {
      ...toRefs(state),
      afterVisibleChange,
      closeDrawer,
      // change,
    };
  },
};
</script>

<style lang="scss" >
.Ownership {
  // .ant-drawer-content-wrapper {
  //   // max-width: 1000px;
  //   .ant-drawer-header {
  //     display: none !important;
  //   }
  //   .ant-drawer-body {
  //     padding: 0;
  //   }
  // }
  .drawerMain {
    min-width: 600px;
    margin: 0px 32px 0px 32px;
    overflow-x: scroll;
    display: flex;
    flex-direction: column;
    .header {
      height: 73px;
      border-bottom: 1px solid #e8e8e8;
      display: flex;
      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%;
      .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;
            .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: #409eff;
                border-radius: 8px;
                border: 1px solid #409eff;
                cursor: pointer;
                .wz {
                  margin-left: 10px;
                }
              }
              .btn2 {
                width: 100px;
                height: 40px;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #409eff;
                font-size: 14px;
                background: #ffffff;
                border-radius: 8px;
                cursor: pointer;
                border: 1px solid #409eff;
                .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;
            }
          }
          .tab2 {
            display: flex;
            align-items: center;
            margin-top: 10px;
            .organize {
              color: rgba(0, 0, 0, 0.85);
              font-size: 14px;
            }
            .ant-select {
              border-radius: 8px !important;
            }
            .ant-cascader {
              width: 264px;
              height: 40px;
              border-radius: 8px !important;
              .ant-select-selector {
                height: 100%;
              }
              .ant-select-selection-search-input {
                height: 40px;
              }
            }
          }
        }
      }
      .right {
        width: 35%;
        .onerow {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-right: 40px;
          flex-wrap: wrap;
          .already {
            color: rgba(51, 51, 51, 1);
            font-size: 16px;
            font-weight: 500;
            margin-left: 32px;
            white-space: nowrap;
            // margin-bottom: 20px;
          }
          .clbox {
            margin-left: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            width: 104px;
            height: 32px;
            border-radius: 4px;
            background: #409eff;
            .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;
      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;
      }
    }
  }
}
</style>