<template>
  <!-- 学习路径图! -->
  <div class="learningpathmap">
    <!-- 以下为顶部搜索框 -->
    <div class="filter">
      <div class="select addTimeBox">
        <div class="addTime">创建时间：</div>
        <a-range-picker
          style="width: 100%"
          format="YYYY-MM-DD"
          separator="至"
          :placeholder="['      开始时间', '        结束时间']"
        />
      </div>
      <div class="select">
        <a-select
          style="width: 100%"
          placeholder="请选择归属组织"
          allowClear
        ></a-select>
      </div>
      <div class="select">
        <a-input
          style="width: 100%; height: 40px; border-radius: 8px"
          placeholder="请输入路径名称"
          allowClear
          showSearch
        >
        </a-input>
      </div>
      <div class="select">
        <a-input
          style="width: 100%; height: 40px; border-radius: 8px"
          placeholder="请输入创建者"
          allowClear
          showSearch
        >
        </a-input>
      </div>
      <div style="display: flex; margin-bottom: 20px">
        <div class="btnn 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="btns">
      <div class="btn btn3">
        <div><img src="../../assets/svg/export.png" alt="" /></div>
        <div class="btnText">导出列表信息</div>
      </div>
      <div class="btn btn3" style="margin-left: 20px">
        <div><img src="../../assets/svg/export.png" alt="" /></div>
        <div class="btnText">导出详细信息</div>
      </div>
    </div>
    <!-- 以下为table表格 -->
    <div class="tableBox">
      <a-table
        :columns="columns"
        :data-source="tableData"
        :loading="tableLoading"
        :scroll="{ x: 700 }"
        :pagination="false"
      >
      </a-table>
      <div class="tableBox">
        <div class="pa">
          <a-pagination
            v-if="tableDataTotal > 10"
            :showSizeChanger="false"
            showQuickJumper="true"
            hideOnSinglePage="true"
            :pageSize="pageSize"
            v-model:current="pageNo"
            :total="tableDataTotal"
            class="pagination"
            @change="changePagination"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { ref, toRefs, reactive } from "vue";
export default {
  name: "LearningPathMap",
  setup() {
    const state = reactive({
      tableLoading: false, // table加载图标
      tableDataTotal: 12, // 数据总条数
      pageSize: 10, // 每页条数
      pageNo: 1, //当前页码
    });
    // 表格数据
    let tableData = ref([
      { name: "0000255", manager: "565656" },
      { name: "0000255", manager: "565656" },
      { name: "0000255", manager: "565656" },
      { name: "0000255", manager: "565656" },
      { name: "0000255", manager: "565656" },
      { name: "0000255", manager: "565656" },
      { name: "0000255", manager: "565656" },
      { name: "0000255", manager: "565656" },
      { name: "0000255", manager: "565656" },
      { name: "0000255", manager: "565656" },
      { name: "0000255", manager: "565656" },
      { name: "0000255", manager: "565656" },
    ]);
    // cloumns 表头
    const columns = ref([
      {
        title: "编号",
        dataIndex: "name",
        key: "name",
        ellipsis: true,
        align: "center",
      },
      {
        title: "路径名称",
        dataIndex: "manager",
        ellipsis: true,
        key: "manager",
        align: "center",
      },
      {
        title: "归属组织",
        dataIndex: "manager",
        ellipsis: true,
        key: "manager",
        align: "center",
      },
      {
        title: "关卡数",
        dataIndex: "manager",
        ellipsis: true,
        key: "manager",
        align: "center",
      },
      {
        title: "任务数",
        dataIndex: "manager",
        ellipsis: true,
        key: "manager",
        align: "center",
      },
      {
        title: "学习人数",
        dataIndex: "manager",
        ellipsis: true,
        key: "manager",
        align: "center",
      },
      {
        title: "完成人数",
        dataIndex: "manager",
        ellipsis: true,
        key: "manager",
        align: "center",
      },
      {
        title: "发布时间",
        dataIndex: "manager",
        ellipsis: true,
        key: "manager",
        align: "center",
      },
      {
        title: "路径状态",
        dataIndex: "manager",
        ellipsis: true,
        key: "manager",
        align: "center",
      },
      {
        title: "操作",
        dataIndex: "operation",
        key: "operation",
        width: 150,
        align: "center",
        fixed: "right",
        customRender: () => {
          return <a>导出历史记录</a>;
        },
      },
    ]);
    //table 分页事件
    const changePagination = (page) => {
      state.pageNo = page;
    };

    return {
      ...toRefs(state),
      tableData,
      columns,
      changePagination,
    };
  },
};
</script>
<style lang="scss">
.learningpathmap {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .filter {
    margin-left: 38px;
    margin-right: 20px;
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    .select {
      margin-right: 20px;
      margin-bottom: 20px;
      width: calc((100% - 76px - 360px) / 4);
    }

    .addTimeBox {
      width: calc((100% - 76px - 360px) / 4 + 120px) !important;
      position: relative;
      display: flex;
      align-items: center;

      .addTime {
        position: absolute;
        z-index: 10;
        margin-left: 10px;
        color: rgba(0, 0, 0, 0.4);
      }

      .ant-picker {
        padding-left: 85px;
      }

      .ant-picker-range .ant-picker-active-bar {
        margin-left: 85px;
      }
    }

    .btn {
      padding: 0px 26px 0px 26px;
      height: 38px;
      background: rgba(64, 158, 255, 0);
      border-radius: 8px;
      border: 1px solid rgba(64, 158, 255, 1);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 14px;
      flex-shrink: 0;
      cursor: pointer;

      .search {
        background-size: 100%;
      }

      .btnText {
        font-size: 14px;
        font-weight: 400;
        color: rgba(64, 158, 255, 1);
        line-height: 36px;
        margin-left: 5px;
      }
    }

    .btnn {
      padding: 0px 26px 0px 26px;
      height: 38px;
      background: #4ea6ff;
      border-radius: 8px;
      border: 1px solid rgba(64, 158, 255, 1);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 14px;
      flex-shrink: 0;
      cursor: pointer;

      .search {
        background-size: 100%;
      }

      .btnText {
        font-size: 14px;
        font-weight: 400;
        color: #ffffff;
        line-height: 36px;
        margin-left: 5px;
      }
    }

    .btn1 {
      .search {
        width: 15px;
        height: 17px;
        background-image: url("../../assets/images/courseManage/search0.png");
      }
    }

    .btn2 {
      margin-right: 0px !important;
      .search {
        width: 16px;
        height: 18px;
        background-image: url("../../assets/images/courseManage/reset1.png");
      }
    }

    .btn1:hover {
      background: rgba(64, 158, 255, 0.76);

      .search {
        background-image: url("../../assets/images/courseManage/search0.png");
      }

      .btnText {
        color: #ffffff;
      }
    }

    .btn1:active {
      background: #0982ff;
    }

    .btn2:hover {
      background: rgba(64, 158, 255, 0.1);
    }

    .btn2:active {
      background: rgba(64, 158, 255, 0.2);
    }
  }
  .btns {
    display: flex;
    margin-left: 38px;
    // flex-wrap: wrap;
    .btn {
      padding: 0px 26px 0px 26px;
      height: 38px;
      background: white;
      border-radius: 8px;
      border: 1px solid rgba(64, 158, 255, 1);
      display: flex;
      align-items: center;
      cursor: pointer;
      justify-content: center;
      margin-right: 14px;
      flex-shrink: 0;

      .search {
        background-size: 100%;
      }

      .btnText {
        font-size: 14px;
        font-weight: 400;
        color: #4ea6ff;
        line-height: 36px;
        margin-left: 5px;
      }
    }

    .btn3 {
      margin-right: 0px;

      .search {
        width: 17px;
        height: 18px;
        background-image: url("../../assets/images/courseManage/add0.png");
      }
    }

    .btn3:hover {
      // background: rgba(64, 158, 255, 0.76);
      background: rgba(64, 158, 255, 0.2);
    }

    // .btn3:active {
    //   background: #0982ff;
    // }
  }
  .tableBox {
    margin: 20px 38px 30px;

    .ant-table-thead > tr > th {
      background-color: #eff4fc;
    }
  }
  .tableBox {
    padding-bottom: 20px;

    .pa {
      width: 100%;
      display: flex;
      justify-content: center;
    }
  }
}
</style>
