<template>
  <!-- 概览! -->
  <div class="overvoew">
    <!-- 以下为顶部搜索框 -->
    <div class="filterShow">
      <div class="select">
        <!-- <a-select
          style="width: 100%"
          placeholder="请选择组织"
          v-model:value="orgId"
          :options="option"
          allowClear
        ></a-select> -->
        <a-cascader
          :options="option"
          placeholder="请选择组织"
          v-model:value="orgId"
          :allowClear="allowClear"
          style="width: 100%"
          :fieldNames="{
            label: 'name',
            value: 'id',
            children: 'treeChildList',
          }"
        />
      </div>
      <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-input
          style="width: 100%; height: 40px; border-radius: 8px"
          placeholder="请输入创建者"
          v-model:value="creator"
          allowClear
          showSearch
        >
        </a-input>
      </div>
      <div style="display: flex; margin-bottom: 20px">
        <div class="btnzx btnzx1" @click="searchClick">
          <div class="search"></div>
          <div class="btnzText">搜索</div>
        </div>
        <div class="btnz btnzx2" @click="reset">
          <div class="search"></div>
          <div class="btnzText">重置</div>
        </div>
      </div>
    </div>
    <!-- 以下为导出按钮 -->
    <div class="tabbtnz">
      <div class="tab">
        <div
          v-for="(item, index) in tabData"
          :key="index"
          :class="currentTab === index ? 'tabActive' : 'tabItem'"
          @click="tabClick(index)"
        >
          {{ item.text }} ({{ item.num }})
        </div>
      </div>
      <div class="btnzs">
        <div
          class="btnz btnz3"
          @click="exportClickAll"
          style="margin-right: 15px"
        >
          <div>
            <img
              src="../../assets/images/coursewareManage/export1.png"
              alt=""
            />
          </div>
          <div class="btnzText">全部导出</div>
        </div>
        <div class="btnz btnz3" @click="exportClick">
          <div>
            <img
              src="../../assets/images/coursewareManage/export1.png"
              alt=""
            />
          </div>
          <div class="btnzText">导出</div>
        </div>
      </div>
    </div>
    <!-- 以下为table表格 -->
    <div class="tableBox">
      <a-table
        :columns="columns"
        :data-source="tableData"
        :loading="tableLoading"
        :scroll="{ x: 700 }"
        :pagination="false"
        @expand="expandTable"
        childrenColumnName="children"
        :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 === 'projectStatus'">
            <span>{{
              record.reportProjectOverview.length > 0
                ? "-"
                : record.status == "0"
                ? "-"
                : record.status == "1"
                ? "提交待审核"
                : record.status == "2"
                ? "审核通过"
                : record.status == "3"
                ? "已经发布"
                : record.status == "4"
                ? "发布"
                : record.status == "-1"
                ? "已结束"
                : record.status == "-2"
                ? "删除"
                : record.status == "-3"
                ? "撤回审核"
                : record.status == "-4"
                ? "撤回发布"
                : record.status == "-5"
                ? "拒绝"
                : record.status == "-6"
                ? "撤回已结束"
                : ""
            }}</span>
          </template>
          <!-- 学习路径图状态 -->
          <template v-if="column.key === 'boeRouterStatus'">
            <span>{{
              record.status == "0"
                ? "草稿"
                : record.status == "1"
                ? "已发布"
                : record.status == "-1"
                ? "已停用"
                : record.status == "2"
                ? "已撤回"
                : ""
            }}</span>
          </template>
          <!-- 授课状态 -->
          <template v-if="column.key === 'teachingStatus'">
            <span>{{
              record.status == "0"
                ? "未开始"
                : record.status == "1"
                ? "进行中"
                : record.status == "2"
                ? "已完成"
                : ""
            }}</span>
          </template>
          <!-- 课程状态 -->
          <template v-if="column.key === 'classStatus'">
            <span>{{
              record.publishStatus == "0"
                ? "未发布"
                : record.publishStatus == "1"
                ? "已发布"
                : ""
            }}</span>
          </template>
          <!-- 考试状态 -->
          <template v-if="column.key === 'examStatus'">
            <span>{{
              record.published == "0"
                ? "未发布"
                : record.published == "1"
                ? "已发布"
                : ""
            }}</span>
          </template>

          <template v-if="column.key === 'publishTime'">
            <a-tooltip placement="topRight">
              <template #title>
                <span>{{
                  record.publishTime &&
                  dayjs(record.publishTime).format("YYYY-MM-DD HH:mm:ss")
                }}</span>
              </template>
              <span>{{
                record.publishTime &&
                dayjs(record.publishTime).format("YYYY-MM-DD HH:mm:ss")
              }}</span>
            </a-tooltip>
          </template>
          <template v-if="column.key === 'proTime'">
            <a-tooltip placement="topRight">
              <template #title>
                <span
                  >{{
                    record.beginTime &&
                    dayjs(record.beginTime).format("YYYY-MM-DD HH:mm:ss")
                  }}~{{
                    record.endTime &&
                    dayjs(record.endTime).format("YYYY-MM-DD HH:mm:ss")
                  }}</span
                >
              </template>
              <span
                >{{
                  record.beginTime &&
                  dayjs(record.beginTime).format("YYYY-MM-DD HH:mm:ss")
                }}~{{
                  record.endTime &&
                  dayjs(record.endTime).format("YYYY-MM-DD HH:mm:ss")
                }}</span
              >
            </a-tooltip>
          </template>
          <template v-if="column.key === 'createTime'">
            <a-tooltip placement="topRight">
              <template #title>
                <span>{{
                  record.createTime &&
                  dayjs(record.createTime).format("YYYY-MM-DD HH:mm:ss")
                }}</span>
              </template>
              <span>{{
                record.createTime &&
                dayjs(record.createTime).format("YYYY-MM-DD HH:mm:ss")
              }}</span>
            </a-tooltip>
          </template>
          <template v-if="column.key === 'sysCreateTime'">
            <a-tooltip placement="topRight">
              <template #title>
                <span>{{
                  record.sysCreateTime &&
                  dayjs(record.sysCreateTime).format("YYYY-MM-DD HH:mm:ss")
                }}</span>
              </template>
              <span>{{
                record.sysCreateTime &&
                dayjs(record.sysCreateTime).format("YYYY-MM-DD HH:mm:ss")
              }}</span>
            </a-tooltip>
          </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"
            rowKey="id"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { ref, toRefs, reactive, onMounted } from "vue";
import * as api from "../../api/indexOvervoew";
import downLoad from "../../utils/downLoad";
import axios from "axios";
import dayjs from "dayjs";
import { message } from "ant-design-vue";
import Cookies from "vue-cookies";
export default {
  name: "OvervoeW",
  setup() {
    const state = reactive({
      tableLoading: false, // table加载图标
      tableDataTotal: 0, // 数据总条数
      pageSize: 10, // 每页条数
      pageNo: 1, //当前页码
      currentTab: 0,
      creator: "", //创建者
      orgId: null, // 组织Id
      name: "", //名称
      selectedRowKeys: [], // 选中的列
      option: [],
      resetOrgId: [],
      allowClear: true,
      type: null,
    });
    // 获取tab数据
    const getTabData = async () => {
      console.log(state.type);
      axios({
        method: "get",
        url: "/report/boeu/all/total",
        params: { type: state.type },
        headers: {
          token: Cookies.get("token"),
        },
      }).then((res) => {
        const list = [
          { text: "项目", num: res.data.data?.projectTotal },
          { text: "学习路径图", num: res.data.data?.routerTotal },
          { text: "授课", num: res.data.data?.teachingTotal },
          { text: "课程", num: res.data.data?.courseTotal },
          { text: "考试", num: res.data.data?.examTotal },
          { text: "案例", num: res.data.data?.caseTotal },
        ];
        tabData.value = list;
      });
    };
    // 重置按钮
    const reset = async () => {
      state.tableLoading = true;
      state.creator = "";
      state.name = "";
      state.orgId = state.resetOrgId;
      getTableData();
    };
    //请求组织接口
    const getOrgList = async () => {
      const res = await api.userGetUserOrg({});
      if (res) {
        state.option = res.data?.result?.list;
        state.orgId = res.data?.result?.treeNodeList;
        state.resetOrgId = res.data?.result?.treeNodeList;
        state.type = res.data?.result?.userType;
        res.data?.result?.userType === 1
          ? (state.allowClear = true)
          : (state.allowClear = false);
        getTableData();
        getTabData();
      }
    };
    // 导出按钮
    const exportClick = async () => {
      if (!state.selectedRowKeys?.length) {
        return message.warning("请至少选择一条数据进行导出");
      } else {
        if (state.currentTab === 5) {
          axios({
            method: "get",
            url: "/report/boeu/case/export",
            params: { ids: `${state.selectedRowKeys}` },
            responseType: "blob",
            headers: {
              token: Cookies.get("token"),
            },
          }).then((res) => {
            downLoad(res.data, "案例.xlsx");
          });
        } else if (state.currentTab === 4) {
          axios({
            method: "get",
            url: "/report/boeu/exam/export",
            params: { ids: `${state.selectedRowKeys}` },
            responseType: "blob",
            headers: {
              token: Cookies.get("token"),
            },
          }).then((res) => {
            downLoad(res.data, "考试.xlsx");
          });
        } else if (state.currentTab === 3) {
          axios({
            method: "get",
            url: "/report/boeu/course/export",
            params: { ids: `${state.selectedRowKeys}` },
            responseType: "blob",
            headers: {
              token: Cookies.get("token"),
            },
          }).then((res) => {
            downLoad(res.data, "课程.xlsx");
          });
        } else if (state.currentTab === 2) {
          axios({
            method: "get",
            url: "/report/boeu/teaching/export",
            params: { ids: `${state.selectedRowKeys}` },
            responseType: "blob",
            headers: {
              token: Cookies.get("token"),
            },
          }).then((res) => {
            downLoad(res.data, "授课.xlsx");
          });
        } else if (state.currentTab === 1) {
          axios({
            method: "get",
            url: "/report/boeu/router/export",
            params: { ids: `${state.selectedRowKeys}` },
            responseType: "blob",
            headers: {
              token: Cookies.get("token"),
            },
          }).then((res) => {
            downLoad(res.data, "学习路径图.xlsx");
          });
        } else if (state.currentTab === 0) {
          axios({
            method: "get",
            url: "/report/boeu/project/export",
            params: { ids: `${state.selectedRowKeys}` },
            responseType: "blob",
            headers: {
              token: Cookies.get("token"),
            },
          }).then((res) => {
            downLoad(res.data, "项目.xlsx");
          });
        }
      }
    };
    // 全部导出接口
    const exportClickAll = async () => {
      if (state.currentTab === 5) {
        axios({
          method: "post",
          url: "/report/boeu/case/exportAll",
          data: {
            name: state.name,
            organizationId: state.orgId
              ? state.orgId[state.orgId.length - 1]
              : null,
            createName: state.creator,
          },
          responseType: "blob",
          headers: {
            token: Cookies.get("token"),
          },
        }).then((res) => {
          downLoad(res.data, "案例.xlsx");
        });
      } else if (state.currentTab === 4) {
        axios({
          method: "post",
          url: "/report/boeu/exam/exportAll",
          data: {
            name: state.name,
            organizationId: state.orgId
              ? state.orgId[state.orgId.length - 1]
              : null,
            createName: state.creator,
          },
          responseType: "blob",
          headers: {
            token: Cookies.get("token"),
          },
        }).then((res) => {
          downLoad(res.data, "考试.xlsx");
        });
      } else if (state.currentTab === 3) {
        axios({
          method: "post",
          url: "/report/boeu/course/exportAll",
          data: {
            name: state.name,
            organizationId: state.orgId
              ? state.orgId[state.orgId.length - 1]
              : null,
            createName: state.creator,
          },
          responseType: "blob",
          headers: {
            token: Cookies.get("token"),
          },
        }).then((res) => {
          downLoad(res.data, "课程.xlsx");
        });
      } else if (state.currentTab === 2) {
        axios({
          method: "post",
          url: "/report/boeu/teaching/exportAll",
          data: {
            name: state.name,
            organizationId: state.orgId
              ? state.orgId[state.orgId.length - 1]
              : null,
            createName: state.creator,
          },
          responseType: "blob",
          headers: {
            token: Cookies.get("token"),
          },
        }).then((res) => {
          downLoad(res.data, "授课.xlsx");
        });
      } else if (state.currentTab === 1) {
        axios({
          method: "post",
          url: "/report/boeu/router/exportAll",
          data: {
            name: state.name,
            organizationId: state.orgId
              ? state.orgId[state.orgId.length - 1]
              : null,
            createName: state.creator,
          },
          responseType: "blob",
          headers: {
            token: Cookies.get("token"),
          },
        }).then((res) => {
          downLoad(res.data, "学习路径图.xlsx");
        });
      } else if (state.currentTab === 0) {
        axios({
          method: "post",
          url: "/report/boeu/project/exportAll",
          data: {
            name: state.name,
            orgId: state.orgId ? state.orgId[state.orgId.length - 1] : null,
            createName: state.creator,
          },
          responseType: "blob",
          headers: {
            token: Cookies.get("token"),
          },
        }).then((res) => {
          downLoad(res.data, "项目.xlsx");
        });
      }
    };
    // table选中
    const onSelectChange = (selectedRowKeys) => {
      state.selectedRowKeys = selectedRowKeys;
    };
    // 表格数据
    let tableData = ref([]);
    const getTableData = async () => {
      state.tableLoading = true;
      if (state.currentTab === 4) {
        //考试列表
        const res = await api.boeuExamPageList({
          creator: state.creator,
          orgId: state.orgId ? state.orgId[state.orgId.length - 1] : null,
          testName: state.name,
          page: state.pageNo,
          size: state.pageSize,
        });
        if (res) {
          state.tableDataTotal = res.data.total;
          const list = res.data.rows?.map((item) => {
            return {
              key: item.id,
              ...item,
            };
          });
          tableData.value = list;
          state.tableLoading = false;
        }
      } else if (state.currentTab === 5) {
        //案例列表
        const res = await api.boeuCasePageList({
          author: state.creator,
          orgId: state.orgId ? state.orgId[state.orgId.length - 1] : null,
          title: state.name,
          page: state.pageNo,
          size: state.pageSize,
        });
        if (res) {
          state.tableDataTotal = res.data.total;
          const list = res.data.rows?.map((item) => {
            return {
              key: item.id,
              ...item,
            };
          });
          tableData.value = list;
          state.tableLoading = false;
        }
      } else if (state.currentTab === 3) {
        const res = await api.boeuCoursePageList({
          page: state.pageNo,
          size: state.pageSize,
          name: state.name,
          organizationId: state.orgId
            ? state.orgId[state.orgId.length - 1]
            : null,
          createName: state.creator,
        });
        const list = res.data.rows.map((item) => {
          return {
            key: item.boeCourseId,
            ...item,
          };
        });
        tableData.value = list;
        state.tableDataTotal = res.data.total;
        state.tableLoading = false;
      } else if (state.currentTab === 2) {
        const res = await api.boeuTeachingPageList({
          page: state.pageNo,
          size: state.pageSize,
          teachingName: state.name,
          orgId: state.orgId ? state.orgId[state.orgId.length - 1] : null,
          createName: state.creator,
        });
        const list = res.data.rows?.map((item) => {
          return {
            key: item.boeOffcoursePlanId,
            ...item,
          };
        });
        tableData.value = list;
        state.tableDataTotal = res.data.total;
        state.tableLoading = false;
      } else if (state.currentTab === 1) {
        const res = await api.boeuRoterPageList({
          page: state.pageNo,
          size: state.pageSize,
          routerName: state.name,
          orgId: state.orgId ? state.orgId[state.orgId.length - 1] : null,
          createName: state.creator,
        });
        const list = res.data.rows?.map((item) => {
          return {
            key: item.boeRouterInfoId,
            ...item,
          };
        });
        tableData.value = list;
        state.tableLoading = false;
        state.tableDataTotal = res.data.total;
      } else if (state.currentTab === 0) {
        const res = await api.boeuProjectPageList({
          page: state.pageNo,
          size: state.pageSize,
          orgId: state.orgId ? state.orgId[state.orgId.length - 1] : null,
          createName: state.creator,
          projectName: state.name,
        });
        if (res) {
          const fun = (arr) => {
            const list = arr.map((item) => {
              let children;
              if (item?.reportProjectOverview?.length) {
                children = fun(item.reportProjectOverview);
              }
              return {
                key: item.boeProjectInfoId,
                children: children,
                ...item,
              };
            });
            return list;
          };
          tableData.value = fun(res.data.rows);
          state.tableDataTotal = res.data.total;
          state.tableLoading = false;
        }
      }
    };
    const searchClick = () => {
      state.pageNo = 1;
      state.pageSize = 10;
      state.tableDataTotal = 0;
      getTableData();
    };
    // cloumns 表头
    const columns = ref([
      {
        title: "名称",
        dataIndex: "projectName",
        key: "projectName",
        width: 120,
        ellipsis: true,
        align: "left",
        fixed: "left",
      },
      {
        title: "归属组织",
        dataIndex: "sourceBelongName",
        ellipsis: true,
        key: "sourceBelongName",
        width: 120,
        align: "center",
        fixed: "left",
      },
      {
        title: "分类",
        dataIndex: "trainingType",
        ellipsis: true,
        key: "trainingType",
        width: 120,
        align: "center",
        fixed: "left",
      },
      {
        title: "阶段总数",
        dataIndex: "stageTotal",
        ellipsis: true,
        key: "stageTotal",
        width: 120,
        align: "center",
      },
      {
        title: "任务总数",
        dataIndex: "taskTotal",
        ellipsis: true,
        key: "taskTotal",
        width: 120,
        align: "center",
      },
      {
        title: "学习人数",
        dataIndex: "startLearnerTotal",
        ellipsis: true,
        key: "startLearnerTotal",
        width: 120,
        align: "center",
      },
      {
        title: "参与人数",
        dataIndex: "participantsTotal",
        ellipsis: true,
        key: "participantsTotal",
        width: 120,
        align: "center",
      },
      {
        title: "完成人数",
        dataIndex: "peopleCompletedTotal",
        ellipsis: true,
        key: "peopleCompletedTotal",
        width: 120,
        align: "center",
      },
      {
        title: "项目时间",
        dataIndex: "proTime",
        ellipsis: true,
        key: "proTime",
        width: 120,
        align: "center",
      },
      {
        title: "发布时间",
        dataIndex: "publishTime",
        ellipsis: true,
        key: "publishTime",
        width: 120,
        align: "center",
      },
      {
        title: "状态",
        dataIndex: "status",
        ellipsis: true,
        key: "projectStatus",
        width: 120,
        align: "center",
      },
      {
        title: "创建人",
        dataIndex: "createName",
        ellipsis: true,
        key: "manager",
        width: 120,
        align: "center",
      },
    ]);
    const tabData = ref([
      { text: "项目", num: "2" },
      { text: "学习路径图", num: "6" },
      { text: "授课", num: "8" },
      { text: "课程", num: "11" },
      { text: "考试", num: "10" },
      { text: "案例", num: "10" },
    ]);
    const tabClick = (index) => {
      state.selectedRowKeys = [];
      state.currentTab = index;
      state.pageNo = 1;
      state.pageSize = 10;
      state.tableDataTotal = 0;
      tableData.value = [];
      if (index === 0) {
        columns.value = [
          {
            title: "名称",
            dataIndex: "projectName",
            key: "projectName",
            width: 120,
            ellipsis: true,
            align: "left",
            fixed: "left",
          },
          {
            title: "归属组织",
            dataIndex: "sourceBelongName",
            ellipsis: true,
            key: "sourceBelongName",
            width: 120,
            align: "center",
            fixed: "left",
          },
          {
            title: "分类",
            dataIndex: "trainingType",
            ellipsis: true,
            key: "trainingType",
            width: 120,
            align: "center",
            fixed: "left",
          },
          {
            title: "阶段总数",
            dataIndex: "stageTotal",
            ellipsis: true,
            key: "stageTotal",
            width: 120,
            align: "center",
          },
          {
            title: "任务总数",
            dataIndex: "taskTotal",
            ellipsis: true,
            key: "taskTotal",
            width: 120,
            align: "center",
          },
          {
            title: "参与人数",
            dataIndex: "participantsTotal",
            ellipsis: true,
            key: "participantsTotal",
            width: 120,
            align: "center",
          },
          {
            title: "学习人数",
            dataIndex: "startLearnerTotal",
            ellipsis: true,
            key: "startLearnerTotal",
            width: 120,
            align: "center",
          },
          {
            title: "完成人数",
            dataIndex: "peopleCompletedTotal",
            ellipsis: true,
            key: "peopleCompletedTotal",
            width: 120,
            align: "center",
          },
          {
            title: "项目时间",
            dataIndex: "proTime",
            ellipsis: true,
            key: "proTime",
            width: 120,
            align: "center",
          },
          {
            title: "发布时间",
            dataIndex: "publishTime",
            ellipsis: true,
            key: "publishTime",
            width: 120,
            align: "center",
          },
          {
            title: "状态",
            dataIndex: "status",
            ellipsis: true,
            key: "projectStatus",
            width: 120,
            align: "center",
          },
          {
            title: "创建人",
            dataIndex: "createName",
            ellipsis: true,
            key: "manager",
            width: 120,
            align: "center",
          },
        ];
      } else if (index === 4) {
        columns.value = [
          {
            title: "名称",
            dataIndex: "testName",
            key: "id",
            width: 120,
            ellipsis: true,
            align: "left",
            fixed: "left",
          },
          {
            title: "归属组织",
            dataIndex: "resOwner",
            ellipsis: true,

            width: 120,
            align: "center",
            fixed: "left",
          },
          {
            title: "参加人数",
            dataIndex: "totalNumber",
            ellipsis: true,

            width: 120,
            align: "center",
          },
          {
            title: "考试人数",
            dataIndex: "numOfAnswer",
            ellipsis: true,

            width: 120,
            align: "center",
          },
          {
            title: "题量",
            dataIndex: "numOfQuest",
            ellipsis: true,

            width: 120,
            align: "center",
          },
          {
            title: "通过人数",
            dataIndex: "numOfPass",
            ellipsis: true,

            width: 120,
            align: "center",
          },
          {
            title: "通过率",
            dataIndex: "passRate",
            ellipsis: true,

            width: 120,
            align: "center",
          },
          {
            title: "发布时间",
            dataIndex: "publishTime",
            ellipsis: true,
            key: "publishTime",
            width: 120,
            align: "center",
          },
          {
            title: "状态",
            dataIndex: "examStatus",
            ellipsis: true,
            key: "examStatus",
            width: 120,
            align: "center",
          },
          {
            title: "创建人",
            dataIndex: "creator",
            ellipsis: true,

            width: 120,
            align: "center",
          },
        ];
      } else if (index === 5) {
        columns.value = [
          {
            title: "名称",
            dataIndex: "title",
            ellipsis: true,
          },
          {
            title: "归属组织",
            dataIndex: "orgDomain",
            ellipsis: true,
            align: "center",
          },
          {
            title: "专业分类",
            dataIndex: "majorType",
            ellipsis: true,
            align: "center",
          },
          {
            title: "浏览量",
            dataIndex: "views",
            ellipsis: true,
            align: "center",
          },
          {
            title: "点赞量",
            dataIndex: "praises",
            ellipsis: true,
            align: "center",
          },
          {
            title: "收藏量",
            dataIndex: "favorites",
            ellipsis: true,
            align: "center",
          },
          {
            title: "评论量",
            dataIndex: "comments",
            ellipsis: true,
            align: "center",
          },
          {
            title: "发布时间",
            dataIndex: "sysCreateTime",
            key: "sysCreateTime",
            ellipsis: true,
            align: "center",
          },
          {
            title: "创建人/作者",
            dataIndex: "authorName",
            ellipsis: true,
            align: "center",
          },
        ];
      } else if (index === 3) {
        columns.value = [
          {
            title: "名称",
            dataIndex: "name",
            key: "name",
            width: 120,
            ellipsis: true,
            align: "left",
            fixed: "left",
          },
          {
            title: "归属组织",
            dataIndex: "organizationName",
            ellipsis: true,
            key: "organizationName",
            width: 120,
            align: "center",
            fixed: "left",
          },
          {
            title: "类型",
            dataIndex: "courseType",
            ellipsis: true,
            key: "courseType",
            width: 120,
            align: "center",
            fixed: "left",
          },
          {
            title: "分类",
            dataIndex: "type",
            ellipsis: true,
            key: "type",
            width: 120,
            align: "center",
            fixed: "left",
          },
          {
            title: "授课教师",
            dataIndex: "teacher",
            ellipsis: true,
            key: "teacher",
            width: 120,
            align: "center",
            fixed: "left",
          },
          {
            title: "课程评分",
            dataIndex: "score",
            ellipsis: true,
            key: "score",
            width: 120,
            align: "center",
            fixed: "left",
          },
          {
            title: "评论数",
            dataIndex: "commentTotal",
            ellipsis: true,
            key: "commentTotal",
            width: 120,
            align: "center",
          },
          {
            title: "浏览量",
            dataIndex: "viewTotal",
            ellipsis: true,
            key: "viewTotal",
            width: 120,
            align: "center",
          },
          {
            title: "开课次数",
            dataIndex: "classTotal",
            ellipsis: true,
            key: "classTotal",
            width: 120,
            align: "center",
          },
          {
            title: "学习人数",
            dataIndex: "learnerNumber",
            ellipsis: true,
            key: "learnerNumber",
            width: 120,
            align: "center",
          },
          {
            title: "学习时长(分钟)",
            dataIndex: "studyTime",
            ellipsis: true,
            key: "studyTime",
            width: 120,
            align: "center",
          },
          {
            title: "完成人数",
            dataIndex: "completionNumber",
            ellipsis: true,
            key: "completionNumber",
            width: 120,
            align: "center",
          },
          {
            title: "发布时间",
            dataIndex: "publishTime",
            ellipsis: true,
            key: "publishTime",
            width: 120,
            align: "center",
          },
          {
            title: "状态",
            dataIndex: "publishStatus",
            ellipsis: true,
            key: "classStatus",
            width: 120,
            align: "center",
          },
          {
            title: "创建人",
            dataIndex: "createName",
            ellipsis: true,
            key: "createName",
            width: 120,
            align: "center",
          },
        ];
      } else if (index === 2) {
        columns.value = [
          {
            title: "开课名称",
            dataIndex: "name",
            key: "name",
            width: 120,
            ellipsis: true,
            align: "left",
            fixed: "left",
          },
          {
            title: "归属组织",
            dataIndex: "organizationName",
            ellipsis: true,
            key: "age",
            width: 120,
            align: "center",
            fixed: "left",
          },
          {
            title: "分类",
            dataIndex: "typeName",
            ellipsis: true,
            key: "typeName",
            width: 120,
            align: "center",
            fixed: "left",
          },
          {
            title: "授课时长(分钟)",
            dataIndex: "teachingLength",
            ellipsis: true,
            key: "teachingLength",
            width: 120,
            align: "center",
          },
          {
            title: "授课教师",
            dataIndex: "teacher",
            ellipsis: true,
            key: "teacher",
            width: 120,
            align: "center",
          },
          {
            title: "授课人数",
            dataIndex: "number",
            ellipsis: true,
            key: "number",
            width: 120,
            align: "center",
          },
          {
            title: "评分",
            dataIndex: "score",
            ellipsis: true,
            key: "score",
            width: 120,
            align: "center",
          },
          {
            title: "授课时间",
            dataIndex: "teachingTime",
            ellipsis: true,
            key: "teachingTime",
            width: 120,
            align: "center",
          },
          {
            title: "创建时间",
            dataIndex: "createTime",
            ellipsis: true,
            key: "createTime",
            width: 120,
            align: "center",
          },
          {
            title: "状态",
            dataIndex: "status",
            ellipsis: true,
            key: "teachingStatus",
            width: 120,
            align: "center",
          },
          {
            title: "创建人",
            dataIndex: "createName",
            ellipsis: true,
            key: "createName",
            width: 120,
            align: "center",
          },
        ];
      } else if (index === 1) {
        columns.value = [
          {
            title: "名称",
            dataIndex: "boeRouterInfoName",
            key: "boeRouterInfoName",
            width: 120,
            ellipsis: true,
            align: "left",
            fixed: "left",
          },
          {
            title: "归属组织",
            dataIndex: "organizationName",
            ellipsis: true,
            key: "organizationName",
            width: 120,
            align: "center",
            fixed: "left",
          },
          {
            title: "关卡总数",
            dataIndex: "levelTotal",
            ellipsis: true,
            key: "levelTotal",
            width: 120,
            align: "center",
            fixed: "left",
          },
          {
            title: "任务总数",
            dataIndex: "taskTotal",
            ellipsis: true,
            key: "taskTotal",
            width: 120,
            align: "center",
            fixed: "left",
          },
          {
            title: "参与人数",
            dataIndex: "participantsTotal",
            ellipsis: true,
            key: "participantsTotal",
            width: 120,
            align: "center",
            fixed: "left",
          },
          {
            title: "学习人数",
            dataIndex: "learnerNumber",
            ellipsis: true,
            key: "learnerNumber",
            width: 120,
            align: "center",
          },
          {
            title: "完成人数",
            dataIndex: "completionNumber",
            ellipsis: true,
            key: "completionNumber",
            width: 120,
            align: "center",
          },
          {
            title: "发布时间",
            dataIndex: "createTime",
            ellipsis: true,
            key: "createTime",
            width: 120,
            align: "center",
          },
          {
            title: "状态",
            dataIndex: "status",
            ellipsis: true,
            key: "boeRouterStatus",
            width: 120,
            align: "center",
          },
          {
            title: "创建人",
            dataIndex: "createName",
            ellipsis: true,
            key: "createName",
            width: 120,
            align: "center",
          },
        ];
      }
      getTableData();
    };

    //table 分页事件
    const changePagination = (page) => {
      state.selectedRowKeys = [];
      state.pageNo = page;
      getTableData();
    };
    // columns展开事件
    const expandTable = (e, a) => {
      console.log("e", e, a);
    };
    onMounted(() => {
      state.tableLoading = true;
      getOrgList();
    });
    return {
      exportClickAll,
      getTabData,
      reset,
      getOrgList,
      onSelectChange,
      dayjs,
      searchClick,
      ...toRefs(state),
      tableData,
      columns,
      tabData,
      tabClick,
      changePagination,
      expandTable,
      exportClick,
    };
  },
};
</script>
<style lang="scss">
.overvoew {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .filterShow {
    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 {
      margin-right: 0px !important;
      background: #4ea6ff;
      .search {
        width: 16px;
        height: 18px;

        background-image: url("../../assets/images/courseManage/reset0.png");
      }
      .btnzText {
        color: white;
      }
    }

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

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

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

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

      .btnzText {
        color: #ffffff;
      }
    }
    .btnzx1:active,
    .btnzx2:active {
      background: #0982ff;
    }

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

    // .btnzx2:active {
    //   background: rgba(64, 158, 255, 0.2);
    // }
  }
  .tabbtnz {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: space-between;
    .tab {
      margin-left: 38px;
      display: flex;
      background: #ecf5ff;
      height: 40px;
      line-height: 40px;
      border-radius: 8px;
      .tabItem {
        box-sizing: border-box;
        padding: 0 18px;
        cursor: pointer;
      }
      .tabActive {
        box-sizing: border-box;
        padding: 0 18px;
        background: #387df7;
        color: white;
        border-radius: 8px;
        cursor: pointer;
      }
    }
    .btnzs {
      display: flex;
      margin-right: 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);
      }
    }
  }

  .tableBox {
    margin: 20px 38px 30px;

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

    .pa {
      // position: absolute;
      // bottom: 20px;
      // left: 0;
      width: 100%;
      // height: 20px;
      // background-color: red;
      display: flex;
      justify-content: center;
      // margin-bottom: 10px;
      // position: absolute;
      // bottom: -40px;
    }
  }
}
</style>
