<template>
    <a-drawer
      :visible="corpowerlistVisible"
      class="drawerStyle corpowerlistDrawer"
      width="80%"
      title="添加案例"
      placement="right"
      @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="contentMain">
          <div class="main_items">
            <div class="mi_ipts">
              <div class="mii_ipt">
                <div class="ipt_name">姓名：</div>
                <div class="fi_input">
                  <a-input
                    v-model:value="inputV1"
                    style="width: 264px; height: 40px; border-radius: 8px"
                    placeholder="请输入姓名"
                  />
                </div>
              </div>
            </div>
            <div class="mi_btns">
              <div class="btn btn1">
                <div class="search"></div>
                <div class="btnText">搜索</div>
              </div>
              <div class="btn btn2">
                <div class="search"></div>
                <div class="btnText">重置</div>
              </div>
            </div>
          </div>
  
          <div class="main_table">
            <a-table
                :row-selection="{
                  selectedRowKeys: selectedRowKeys,
                  onChange: onSelectChange,
                }"
                :columns="columns1"
                :data-source="tableData1"
                :loading="tableDataTotal === -1 ? true : false"
                :pagination="false"
              >
                <template #bodyCell="{ column }">
                  <template v-if="column.key === 'opacation'">
                    <a>取消授权</a>
                  </template>
                </template>
              </a-table>
              <div class="tableBox">
                <div class="pa">
                <a-pagination
                  showSizeChanger="true"
                  showQuickJumper="true"
                  hideOnSinglePage="true"
                  :pageSize="pageSize"
                  :current="currentPage"
                  :total="tableDataTotal"
                  class="pagination"
                />
              </div>
              </div>
          </div>
        </div>
        <div class="main_btns">
          <button class="btn1">取消</button>
          <button class="btn2">确定</button>
        </div>
      </div>
    </a-drawer>
  </template>
  <script>
  import { reactive, toRefs, ref } from "vue";
  const columns1 = [
  {
    title: "姓名",
    dataIndex: "name",
    key: "name",
    width: "10%",
    align: "left",
  },
  {
    title: "归属组织",
    dataIndex: "organization",
    key: "organization",
    width: "19%",
    align: "center",
  },
  {
    title: "岗位",
    dataIndex: "position",
    key: "position",
    width: "19%",
    align: "center",
  },
  {
    title: "拥有权限",
    dataIndex: "authority",
    key: "authority",
    width: "19%",
    align: "center",
  },
  {
    title: "操作",
    dataIndex: "opacation",
    key: "opacation",
    width: "34%",
    align: "center",
  },
];
  const rowSelection = ref({
    checkStrictly: false,
    onChange: (selectedRowKeys, selectedRows) => {
      console.log(
        `selectedRowKeys: ${selectedRowKeys}`,
        "selectedRows: ",
        selectedRows
      );
    },
    onSelect: (record, selected, selectedRows) => {
      console.log(record, selected, selectedRows);
    },
    onSelectAll: (selected, selectedRows, changeRows) => {
      console.log(selected, selectedRows, changeRows);
    },
  });
  export default {
    name: "CorPoerlist",
    props: {
        corpowerlistVisible: {
        type: Boolean,
        default: false,
      },
    },
    setup(props, ctx) {
      const state = reactive({
        tableData1: [
        {
          key: 1,
          name: "李明",
          organization: "-",
          position: "产品经理",
          authority: "归属权",
        },
        {
          key: 2,
          name: "李洋",
          organization: "-",
          position: "产品经理",
          authority: "查看权",
        },
        {
          key: 3,
          name: "小李",
          organization: "-",
          position: "产品经理",
          authority: "管理权",
        },
        {
          key: 4,
          name: "雄安名",
          organization: "-",
          position: "产品经理",
          authority: "管理权",
        },
        {
          key: 5,
          name: "王哥",
          organization: "-",
          position: "产品经理",
          authority: "管理权",
        },
      ],
        currentPage: 1,
        tableDataTotal: 100,
        pageSize: 10,
        inputV1:'',
      });
      const closeDrawer = () => {
        ctx.emit("update:corpowerlistVisible", false);
      };
      const afterVisibleChange = (bool) => {
        console.log("state", bool);
      };
      return {
        ...toRefs(state),
        afterVisibleChange,
        closeDrawer,
        columns1,
        rowSelection,
      };
    },
  };
  </script>
  <style lang="scss">
  .ant-table-striped :deep(.table-striped) td {
    background-color: #fafafa !important;
  }
  
  .corpowerlistDrawer {
    .drawerMain {
      .header {
        height: 73px;
        border-bottom: 1px solid #e8e8e8;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .headerTitle {
          font-size: 18px;
          font-weight: 600;
          color: #333333;
          line-height: 25px;
          margin-left: 24px;
          background-color: #ffffff;
        }
      }
      .contentMain {
        margin-top: 32px;
        padding-right: 20px;
        .main_items {
          display: flex;
          justify-content: space-between;
          margin-bottom: 12px;
          flex-wrap: wrap;
          .mi_ipts {
            display: flex;
            margin-bottom: 20px;
            .mii_ipt {
              display: flex;
              align-items: center;
              margin-right: 24px;
              .ipt_name {
                white-space: nowrap;
              }
            }
          }
          .mi_btns {
            display: flex;
            margin-left: 38px;
            margin-bottom: 20px;
            cursor: pointer;
            .btn {
              padding: 0px 26px 0px 26px;
              height: 38px;
              border-radius: 8px;
              border: 1px solid rgba(64, 158, 255, 1);
              display: flex;
              align-items: center;
              justify-content: center;
              margin-left: 14px;
              flex-shrink: 0;
              .search {
                background-size: 100%;
              }
              .btnText {
                font-size: 14px;
                font-weight: 400;
                line-height: 36px;
                margin-left: 5px;
              }
            }
            .btn1 {
              background: rgb(64, 158, 255);
              .search {
                width: 15px;
                height: 17px;
                background-image: url("@/assets/images/coursewareManage/search0.png");
              }
              .btnText {
                color: rgb(255, 255, 255);
              }
            }
            .btn2 {
              background: rgb(255, 255, 255);
              .search {
                width: 15px;
                height: 17px;
                background-image: url("@/assets/images/coursewareManage/reset1.png");
              }
              .btnText {
                color: rgb(64, 158, 255);
              }
            }
            .btn1:hover {
              background: rgb(255, 255, 255);
              .search {
                background-image: url("@/assets/images/courseManage/search1.png");
              }
              .btnText {
                color: #388be1;
              }
            }
            .btn2:hover {
              background: rgba(64, 158, 255, 1);
              .search {
                background-image: url("@/assets/images/courseManage/reset0.png");
              }
              .btnText {
                color: #ffffff;
              }
            }
          }
        }
        .main_table {
          position: relative;
            padding-bottom: 80px;
            .classify {
              margin-left: 10px !important;
              padding-left: 9px !important;
            }
            .ant-checkbox-wrapper {
              align-items: center;
              margin-top: -2px;
            }
            .ant-table-selection-column {
              padding: 0px !important;
              padding-left: 60px !important;
            }
            .ant-table-thead > tr > th {
              background-color: rgba(239, 244, 252, 1);
            }
            th.h {
              background-color: #eff4fc !important;
            }

            .ant-table-tbody
              > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
              > td {
              background: #f6f9fd;
            }
            .tableBox{
              .pa {
              left: 0;
              width: 100%;
              // height: 20px;
              // background-color: red;
              display: flex;
              justify-content: center;
              position: absolute;
              bottom: 20px;
            }
            }
          }
      }
  
      .main_btns {
        height: 72px;
        width: 100%;
        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>