<template>
  <!-- 课程! -->
  <div class="curriculum">
    <!-- 以下为顶部搜索框 -->
    <div class="filter">
      <div class="select">
        <a-input
          style="width: 100%; height: 40px; border-radius: 8px"
          placeholder="请输入课程名称"
          allowClear
          showSearch
          v-model:value="name"
        >
        </a-input>
      </div>
      <div class="select">
        <a-cascader
          change-on-select
          :options="option"
          v-model:value="orgId"
          style="width: 100%"
          placeholder="请选择归属组织"
          :allowClear="allowClear"
          :fieldNames="{
            label: 'orgName',
            value: 'organizationId',
            children: 'childList',
          }"
        >
        </a-cascader>
      </div>
      <div class="select">
        <a-cascader
          style="width: 100%"
          placeholder="请选择分类"
          allowClear
          v-model:value="type"
          :options="typeOption"
          change-on-select
          expandTrigger="hover"
          :fieldNames="{
            label: 'name',
            value: 'name',
            children: 'children',
          }"
        ></a-cascader>
      </div>
      <div class="select">
        <a-input
          style="width: 100%; height: 40px; border-radius: 8px"
          placeholder="请输入创建者"
          allowClear
          showSearch
          v-model:value="createName"
        >
        </a-input>
      </div>
      <div class="select">
        <a-range-picker
          v-model:value="publishTime"
          type="date"
          valueFormat="YYYY-MM-DD"
          :placeholder="['发布开始时间','结束时间']"
          style="width: 100%; margin-right: 0px"
        />
      </div>
      <div style="display: flex; margin-bottom: 20px">
        <div class="btnzx btnzx1" @click="searchData">
          <div class="search"></div>
          <div class="btnzText">搜索</div>
        </div>
        <div class="btnz btnzx2" @click="resetClick">
          <div class="search"></div>
          <div class="btnzText">重置</div>
        </div>
      </div>
    </div>
    <!-- 以下为导出按钮 -->
    <div class="btnzs">
      <div class="btnz btnz3" @click="exportList">
        <div><img src="../../assets/images/coursewareManage/export1.png" alt="" /></div>
        <div class="btnzText">导出列表信息</div>
      </div>
      <div class="btnz btnz3" style="margin-left: 20px" @click="exportDetail">
        <div><img src="../../assets/images/coursewareManage/export1.png" alt="" /></div>
        <div class="btnzText">导出详细信息</div>
      </div>
      <div class="btnz btnz3" style="margin-left: 20px" @click="exportPlanList">
        <div><img src="../../assets/images/coursewareManage/export1.png" alt="" /></div>
        <div class="btnzText">开课数据导出</div>
      </div>
    </div>
    <!-- 以下为table表格 -->
    <div class="tableBox">
      <a-table
        rowKey="boeCourseId"
        :columns="columns"
        :data-source="tableData"
        :loading="tableLoading"
        :scroll="{ x: 700 }"
        :pagination="false"
        :row-selection="{
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange,
        }"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'courseType'">
            <span>{{
              record.courseType == "0"
                ? "在线"
                : record.courseType == "1"
                ? "面授"
                : record.courseType
            }}</span>
          </template>
          <template v-if="column.key === 'publishStatus'">
            <span>{{
              record.publishStatus == "0"
                ? "未发布"
                : record.publishStatus == "1"
                ? "已发布"
                : ""
            }}</span>
          </template>
        </template>
      </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, onMounted } from "vue";
import * as api from "../../api/indexProject";
// import dayjs from "dayjs";
import axios from "axios";
import Cookies from "vue-cookies";
import downLoad from "../../utils/downLoad";
import { message } from "ant-design-vue";
import {useStore} from 'vuex'
export default {
  name: "CurriculuM",
  setup() {
    const store = useStore();
    const state = reactive({
      tableLoading: false, // table加载图标
      tableDataTotal: 0, // 数据总条数
      pageSize: 10, // 每页条数
      pageNo: 1, //当前页码
      orgId: null,
      resetOrgId: null,
      name: "",
      type: null,
      createName: "",
      publishTime: "", // 发布时间
      allowClear: true,
      option: [],
      selectedRowKeys: [],
      typeOption:[]
    });
    const searchData=async()=>{
      state.pageNo=1
      state.pageSize=10
      getTableData()
    }
    // 分类选项接口
    const getOption = async () => {};
    //请求组织接口
    const getOrgList = async () => {
      let params = {
        roleList: store.state.userInfo.roleList,
        userId: store.state.userInfo.userId
      }
      const res = await api.userGetUserOrg(params);
      if (res) {
        state.option = res.data?.result;
        state.orgId = [state.option[0]?.organizationId];
        state.resetOrgId = [state.option[0]?.organizationId];
        state.allowClear = true
        getTableData();
      }
    };
    const getTableData = async () => {
      state.tableLoading = true;
      const params = {
        name: state.name,
        organizationId: state.orgId
          ? state.orgId[state.orgId.length - 1]
          : null,
        pageNo: state.pageNo,
        pageSize: state.pageSize,
        type: state.type ? state.type[state.type.length - 1]:null,
        createName: state.createName,
        // publishTime: state.publishTime,
        startTime: state.publishTime[0],
        endTime: state.publishTime[1],
      };
      const res = await api.boeuCourseListPageV2(params);
      if (res) {
        tableData.value = res.data.result.rows;
        state.tableDataTotal = res.data.result.total;
        state.tableLoading = false;
      }
    };
    let tableData = ref([]);
    // table选中
    const onSelectChange = (selectedRowKeys) => {
      state.selectedRowKeys = selectedRowKeys;
    };
    // cloumns 表头
    const columns = ref([
      // {
      //   title: "编号",
      //   dataIndex: "num",
      //   ellipsis: true,
      //   key: "num",
      //   align: "center",
      //   width: 80,
      // },
      {
        title: "课程名称",
        dataIndex: "name",
        ellipsis: true,
        key: "name",
        align: "center",
        width: 120,
      },
      {
        title: "课程类型",
        dataIndex: "courseType",
        ellipsis: true,
        key: "courseType",
        align: "center",
        width: 80,
      },
      {
        title: "归属组织",
        dataIndex: "organizationName",
        ellipsis: true,
        key: "organizationName",
        align: "center",
        width: 120,
      },
      {
        title: "归属项目",
        dataIndex: "projectName",
        ellipsis: true,
        key: "projectName",
        align: "center",
        width: 120,
      },
      {
        title: "归属路径图",
        dataIndex: "routerName",
        ellipsis: true,
        key: "routerName",
        align: "center",
        width: 120,
      },
      {
        title: "一级分类",
        dataIndex: "oneType",
        ellipsis: true,
        key: "oneType",
        align: "center",
        width: 120,
      },
      {
        title: "二级分类",
        dataIndex: "twoType",
        ellipsis: true,
        key: "twoType",
        align: "center",
        width: 120,
      },
      {
        title: "三级分类",
        dataIndex: "threeType",
        ellipsis: true,
        key: "threeType",
        align: "center",
        width: 120,
      },
      {
        title: "授课教师",
        dataIndex: "teacher",
        ellipsis: true,
        key: "teacher",
        align: "center",
        width: 120,
      },
      {
        title: "开课次数",
        dataIndex: "classTotal",
        ellipsis: true,
        key: "classTotal",
        align: "center",
        width: 120,
      },
      {
        title: "学习人数",
        dataIndex: "learnerNumber",
        ellipsis: true,
        key: "learnerNumber",
        align: "center",
        width: 120,
      },
      {
        title: "评论数",
        dataIndex: "commentTotal",
        ellipsis: true,
        key: "commentTotal",
        align: "center",
        width: 120,
      },
      {
        title: "点赞数",
        dataIndex: "likesTotal",
        ellipsis: true,
        key: "likesTotal",
        align: "center",
        width: 120,
      },
      {
        title: "收藏数",
        dataIndex: "collectionsTotal",
        ellipsis: true,
        key: "collectionsTotal",
        align: "center",
        width: 120,
      },
      {
        title: "平均评分",
        dataIndex: "score",
        ellipsis: true,
        key: "score",
        align: "center",
        width: 120,
      },
      {
        title: "发布时间",
        dataIndex: "publishTime",
        ellipsis: true,
        key: "publishTime",
        align: "center",
        width: 140,
      },
      {
        title: "课程状态",
        dataIndex: "publishStatus",
        ellipsis: true,
        key: "publishStatus",
        align: "center",
        width: 120,
      },
      {
        title: "创建人",
        dataIndex: "createName",
        ellipsis: true,
        key: "createName",
        align: "center",
        width: 120,
      },
      {
        title: "操作",
        dataIndex: "operation",
        key: "operation",
        width: 150,
        align: "center",
        fixed: "right",
        customRender: (record) => {
          return (
            <a
              onClick={() => {
                exportDetailClick(record.record.boeCourseId);
              }}
            >
              导出详细信息
            </a>
          );
        },
      },
    ]);
    //table 分页事件
    const changePagination = (page) => {
      state.pageNo = page;
      getTableData();
    };
    onMounted(() => {
      getType()
      getOrgList();
      state.tableLoading = true;
    });
    const resetClick = () => {
      state.name = "";
      state.orgId = state.resetOrgId;
      state.selectedRowKeys = [];
      state.pageNo = 1;
      state.pageSize = 10;
      state.type = null;
      state.createName = "";
      state.publishTime = [];
      getTableData();
    };
    const exportList = () => {
      if (state.selectedRowKeys.length > 0) {
        axios({
          method: "post",
          url: "/report/boeu/course/list/export/v2",
          data: { ids: state.selectedRowKeys },
          responseType: "blob",
          headers: {
            token: Cookies.get("token"),
          },
        }).then(
          (res) => {
            downLoad(res.data, "课程列表.xlsx");
          },
          (err) => {
            message.error(err);
          }
        );
      } else {
        const params = {
          name: state.name,
          organizationId: state.orgId
            ? state.orgId[state.orgId.length - 1]
            : null,
          pageNo: state.pageNo,
          pageSize: state.pageSize,
          type: state.type ? state.type[state.type.length - 1]:null,
          createName: state.createName,
          // publishTime: state.publishTime,
          startTime: state.publishTime[0],
          endTime: state.publishTime[1],
        };
        axios({
          method: "post",
          url: "/report/boeu/course/list/export/v2",
          data: params,
          responseType: "blob",
          headers: {
            token: Cookies.get("token"),
          },
        }).then(
          (res) => {
            downLoad(res.data, "课程列表.xlsx");
          },
          (err) => {
            message.error(err);
          }
        );
      }
    };
    const exportDetail = async () => {
      if (state.selectedRowKeys.length > 0) {
        axios({
          method: "post",
          url: "/report/boeu/course/list/detail/export/v2",
          data: { ids: state.selectedRowKeys },
          responseType: "blob",
          headers: {
            token: Cookies.get("token"),
          },
        }).then(
          (res) => {
            downLoad(res.data, "课程详细信息.xlsx");
          },
          (err) => {
            message.error(err);
          }
        );
      } else {
        const params = {
          name: state.name,
          organizationId: state.orgId
            ? state.orgId[state.orgId.length - 1]
            : null,
          pageNo: state.pageNo,
          pageSize: state.pageSize,
          type: state.type ? state.type[state.type.length - 1]:null,
          createName: state.createName,
          // publishTime: state.publishTime,
          startTime: state.publishTime[0],
          endTime: state.publishTime[1],
        };
        axios({
          method: "post",
          url: "/report/boeu/course/list/detail/export/v2",
          data: params,
          responseType: "blob",
          headers: {
            token: Cookies.get("token"),
          },
        }).then(
          (res) => {
            downLoad(res.data, "课程详细信息.xlsx");
          },
          (err) => {
            message.error(err);
          }
        );
      }
    };
    const exportDetailClick = async (id) => {
      axios({
        method: "post",
        url: "/report/boeu/course/list/detail/export/v2",
        data: { ids: [id] },
        responseType: "blob",
        headers: {
          token: Cookies.get("token"),
        },
      }).then(
        (res) => {
          downLoad(res.data, "课程详细信息.xlsx");
        },
        (err) => {
          message.error(err);
        }
      );
    };
    const exportPlanList = async () => {
      if (state.selectedRowKeys.length > 0) {
        axios({
          method: "post",
          url: "/report/boeu/course/plan/list/export/v2",
          data: { ids: state.selectedRowKeys },
          responseType: "blob",
          headers: {
            token: Cookies.get("token"),
          },
        }).then(
          (res) => {
            downLoad(res.data, "开课数据.xlsx");
          },
          (err) => {
            message.error(err);
          }
        );
      } else {
        const params = {
          name: state.name,
          organizationId: state.orgId
            ? state.orgId[state.orgId.length - 1]
            : null,
          pageNo: state.pageNo,
          pageSize: state.pageSize,
          type: state.type ? state.type[state.type.length - 1]:null,
          createName: state.createName,
          // publishTime: state.publishTime,
          startTime: state.publishTime[0],
          endTime: state.publishTime[1],
        };
        axios({
          method: "post",
          url: "/report/boeu/course/plan/list/export/v2",
          data: params,
          responseType: "blob",
          headers: {
            token: Cookies.get("token"),
          },
        }).then(
          (res) => {
            downLoad(res.data, "开课数据.xlsx");
          },
          (err) => {
            message.error(err);
          }
        );
      }
    };
    const getType = () => {
      axios({
        method: "get",
        url: "/systemapi/xboe/type/tree-list",
        params: {
          sysResType: "1",
          status: "1",
        },
        headers: {
          "XBOR-Access-token": Cookies.get("token"),
        },
      }).then(
        (res) => {
          console.log(res.data.result)
          state.typeOption=res.data.result
        },
        (err) => {
          message.error(err);
        }
      );
    };

    return {
      ...toRefs(state),
      exportPlanList,
      exportDetail,
      exportList,
      getType,
      getTableData,
      tableData,
      columns,
      changePagination,
      getOrgList,
      resetClick,
      onSelectChange,
      exportDetailClick,
      getOption,
      searchData,
    };
  },
};
</script>
<style lang="scss">
.curriculum {
  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 - 220px) / 3);
    }

    .btnz {
      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%;
      }

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

    .btnzx {
      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%;
      }

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

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

    .btnzx2 {
      background: #4ea6ff;
      .search {
        width: 16px;
        height: 18px;
        background-image: url("../../assets/images/courseManage/reset0.png");
      }
      .btnzText {
        color: #ffffff;
      }
    }

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

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

      .btnzText {
        color: #ffffff;
      }
    }

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

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

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

    .ant-table-thead > tr > th {
      background-color: #eff4fc;
    }
  }
  .btnzs {
    display: flex;
    margin-left: 38px;
    // flex-wrap: wrap;
    .btnz {
      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%;
      }

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

    .btnz3 {
      margin-right: 0px;
      background: #4ea6ff;
      .search {
        width: 17px;
        height: 18px;
        background-image: url("../../assets/images/courseManage/add0.png");
      }
      .btnzText {
        color: #ffffff;
      }
    }

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

    .btnz3:active {
      background: #0982ff;
    }
  }
  .tableBox {
    padding-bottom: 20px;

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