<template>
    <a-drawer
      :visible="STvisible"
      class="drawerStyle TimeManage"
      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="search">
            <div class="sealeft">
              <div class="namecon" style="margin-right: 30px">
                <div class="name">试卷名称：</div>
                <a-input
                  v-model:value="inputPname"
                  style="width: 270px; height: 40px; border-radius: 8px"
                  placeholder="请输入试卷名称或序号"
                />
              </div>
              <div class="namecon" style="margin-right: 30px">
                <div class="name">创建人：</div>
                <a-input
                  v-model:value="inputCname"
                  style="width: 240px; height: 40px; border-radius: 8px"
                  placeholder="请输入创建人"
                />
              </div>
            </div>
            <div class="btns">
              <div
                class="btn btn1"
                style="margin-right: 20px"
                @click="searchTaskList"
              >
                <div class="img1"></div>
                <div class="wz">搜索</div>
              </div>
              <div class="btn btn2" @click="resetTaskList">
                <div class="img2"></div>
                <div class="wz">重置</div>
              </div>
            </div>
          </div>
          <div class="btnss" style="margin-top: 20px">
            <div class="btn btn1" @click="newTest()" style="margin-right: 20px">
              <div class="wz">新建考试</div>
            </div>
          </div>
          <div class="tab" style="margin-top: 20px; margin-bottom: 100px">
            <a-table
              style="border: 1px solid #f2f6fe"
              :columns="tableDataFunc()"
              :data-source="tableData"
              :loading="tableDataTotal === -1 ? true : false"
              :row-selection="{selectedRowKeys:selectedRowKeys,onSelect:onSelect,onChange:onSelectChange}"
              :scroll="{ x: 900 }"
              :pagination="false"
            />
            <div class="tableBox">
              <div class="pa">
                <a-pagination
                  showSizeChanger="true"
                  showQuickJumper="true"
                  hideOnSinglePage="true"
                  :pageSize="pageSize"
                  :current="currentPage"
                  :total="tableDataTotal"
                  class="pagination"
                  @change="onChange"
                />
              </div>
            </div>
          </div>
        </div>
        <div class="btnn">
          <button class="btn1">取消</button>
          <button class="btn2" @click="CreatSTText()">确定</button>
        </div>
      </div>
    </a-drawer>
  </template>
  
  <script>
  import { toRefs, reactive } from "vue";
  import * as api from "../../api/indexTest";
  import { message } from 'ant-design-vue';
  export default {
    name: "STest",
    props: {
      STvisible: {
        type: Boolean,
        default: false,
      },
    },
  
    setup(props, ctx) {
      const state = reactive({
        inputPname: "",
        inputCname: "",
        pageNo: 1,
        pageSize: 10,
        currentPage: 1,
        tableDataTotal: 0,
        projectName: "",
        tableData: [],
        selectedRowKeys:[],
        //需要传给父亲的参数
        SelectTestData:{},

      });
      //点击确认后执行此方法将参数传给父亲
      const CreatSTText = ()=> {
       ctx.emit('getSTData',state.SelectTestData)
        closeDrawer()
      }
      const closeDrawer = () => {
        ctx.emit("update:STvisible", false);
      };

      const afterVisibleChange = () => {
          getManageList()
      };

      const tableDataFunc = ()=> {
        {
            const columns =  [
                {
                  title: "序号",
                  dataIndex: "paperId",
                  key: "paperId",
                  width: 90,
                  align: "center",
                  className: "h head",
                },
                {
                  title: "试卷名称",
                  dataIndex: "testName",
                  key: "testName",
                  width: 110,
                  align: "center",
                  className: "h head",
                },
                {
                  title: "随机模式",
                  dataIndex: "paperMode",
                  key: "paperMode",
                  width: 110,
                  align: "center",
                  className: "h",
                },
                {
                  title: "创建人",
                  dataIndex: "sysCreateBy",
                  key: "sysCreateBy",
                  width: 90,
                  align: "center",
                  className: "h",
                },
                {
                  title: "最近更新时间",
                  dataIndex: "sysUpdateTime",
                  key: "sysUpdateTime",
                  width: 150,
                  align: "center",
                  className: "h",
                },
            ]
            return columns;
        } 
      };

      const onChange = (pageNumber) => {
        console.log("Page: ", pageNumber);
      };

      const onSelect = (record) => {
        state.SelectTestData = record
      };
      const onSelectChange = (selectedRowKeys) => {
        state.selectedRowKeys = selectedRowKeys;
      }

      const newTest = ()=> {
        console.log('创建考试没设计图');
      }
      const getTableDate = (tableData) => {
      let data = tableData;
      let array = [];
      data.map((value, index) => {
        let obj = {
          key: index+1,
          sysCreateBy: value.sysCreateBy,
          paperId: value.paperId,
          testName:value.testName,
          paperMode:value.paperMode,
          sysUpdateTime: value.sysUpdateTime,
        };
        array.push(obj);
      });
      state.tableData = array;
    };
      //获取任务管理列表
      const getManageList = () => {
        let obj = {
          // "keyWord": "",
          // "pageIndex": 0,
          // "pageSize": 0,
          // "published": true,
          "keyWord": "",
          "orderAsc": true,
          "orderFiled": "",
          "pageIndex": 0,
          "pageSize": 0
        };
        api
          .queryExaminationPaper(obj)
          .then((res) => {
            getTableDate(res.data.data)
          })
          .catch(() => {
            message.destroy()
            message.error("获取选择考试列表失败")
          });
      };
  
      //搜索任务列表
      const searchTaskList = () => {
        let objser = {
          name: "",
          pageNo: state.pageNo,
          pageSize: state.pageSize,
          projectId: 27,
        //   projectTaskId: props.projectTaskId,
          projectTaskId: 370,
          status: -1,
        };
        if (state.name !== "" || state.projectName !== "") {
          api
            .taskStudentList(objser)
            .then((res) => {
              state.pageNo = res.data.data.pageNo;
              state.pageSize = res.data.data.pageSize;
              state.pageSize = res.data.data.pageSize;
              let newArr = [];
              for (let i = 0; i < res.data.data.rows.length; i++) {
                if (res.data.data.rows[i].userInfoBo.userName == state.name)
                  newArr.push(res.data.data.rows[i].userInfoBo);
              }
              state.tabledata = newArr;
            })
            .catch(() => {
            });
        }
      };
  
      //重置任务列表
      const resetTaskList = () => {
        state.name = "";
        state.projectName = "";
        state.tabledata = [];
        getManageList();
      };
      return {
        ...toRefs(state),
        closeDrawer,
        afterVisibleChange,
        getTableDate,
        onSelect,
        onSelectChange,
        CreatSTText,
        newTest,
        tableDataFunc,
        onChange,
        getManageList,
        searchTaskList,
        resetTaskList,
      };
    },
  };
  </script>
  
  <style lang="scss">
  .TimeManage {
    // overflow-x: auto;
    .drawerMain {
      min-width: 550px;
      margin: 0px 32px 0px 32px;
      overflow-x: 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;
        margin-bottom: 20px;
        .headerTitle {
          font-size: 18px;
          font-weight: 600;
          color: #333333;
          line-height: 25px;
        }
      }
      .main {
        width: 100%;
        height: 100%;
        overflow-y: auto;
        padding-right: 10px;
        .search {
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          margin-top: 20px;
          justify-content: space-between;
  
          .sealeft {
            display: flex;
            flex-wrap: wrap;
            .namecon {
              display: flex;
              flex-wrap: nowrap;
              margin-bottom: 10px;
              .name {
                margin-top: 8px;
                white-space: nowrap;
              }
            }
          }
          .btns {
            display: flex;
            flex-wrap: nowrap;
  
            .btn {
              cursor: pointer;
              width: 100px;
              height: 40px;
              border-radius: 8px;
              display: flex;
              justify-content: center;
              align-items: center;
              .img1 {
                width: 15px;
                height: 17px;
                background-image: url(../../assets/images/courseManage/search0.png);
                background-size: 100% 100%;
                margin-right: 7px;
              }
              .img2 {
                width: 16px;
                height: 18px;
                background-image: url(../../assets/images/courseManage/reset1.png);
                background-size: 100% 100%;
                margin-right: 7px;
              }
            }
  
            .btn1 {
              background: #409eff;
  
              color: #ffffff;
            }
            .btn2 {
              background: #ffffff;
  
              color: #388be1;
              border: 1px solid #388be1;
            }
          }
        }
        .btnss {
          display: flex;
          flex-wrap: nowrap;
  
          .btn {
            cursor: pointer;
            width: 130px;
            height: 40px;
            border-radius: 8px;
            display: flex;
            justify-content: center;
            align-items: center;
          }
  
          .btn1 {
            background: #409eff;
            color: #ffffff;
          }
        }
        .tab {
          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;
              margin-top: 15px;
              width: 100%;
              // height: 20px;
              // background-color: red;
              display: flex;
              justify-content: center;
              // position: absolute;
              // bottom: 20px;
              .ant-pagination-prev,
              .ant-pagination-next,
              .ant-pagination-item,
              .ant-pagination-options {
                margin-bottom: 10px;
              }
            }
          }
        }
      }
  
      .btnn {
        height: 72px;
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        background-color: #fff;
        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: #409eff;
          border-radius: 8px;
          border: 0;
          margin-left: 15px;
          color: #fff;
        }
      }
    }
  }
  </style>
  