<template>
  <a-drawer
    :visible="addonlineVisible"
    class="drawerStyle addonlineDrawer"
    width="80%"
    title="添加在线"
    placement="right"
    @after-visible-change="afterVisibleChange"
  >
    <div class="drawerMain">
      <div class="header">
        <div v-if="edit" class="headerTitle">编辑在线</div>
        <div v-else 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: 280px;
                    height: 40px;
                    border-radius: 8px;
                    padding-right: 49px;
                  "
                  placeholder="请输入课程名称"
                  maxlength="20"
                />
                <div class="inp_num" style="position: absolute; right: 7px">
                  <span style="color: #c7cbd2"> </span>
                </div>
              </div>
            </div>
            <!-- 2022-12-10注释 后面放开 李晓鸽 -->
            <!-- <div class="mii_ipt">
              <div class="ipt_name">课程分类：</div>
              <div class="select">
                <a-select
                  v-model:value="selectV"
                  dropdownClassName="dropdown-style"
                  style="width: 240px"
                  placeholder="请选择课程分类"
                  :options="options1"
                  allowClear
                  showSearch
                />
              </div>
            </div> -->
          </div>
          <div class="mi_btns">
            <div class="btn btn1" @click="searchList()">
              <div class="search"></div>
              <div class="btnText">搜索</div>
            </div>
            <div class="btn btn2" @click="resetOnline()">
              <div class="search"></div>
              <div class="btnText">重置</div>
            </div>
          </div>
        </div>
        <!--
        <div class="main_notice">
          <div class="mntc_left">
            <div class="notice_icon"></div>
            <span style="color: rgba(0, 0, 0, 0.65); margin-right: 17px"
              >已选择
              <span v-if="edit" style="color: #4ea6ff">{{ 1 }}</span>
              <span v-else style="color: #4ea6ff">{{
                selectedRowKeys.length
              }}</span>
              项</span
            >
            <span style="color: rgba(0, 0, 0, 0.65)"
              >列表选项总计：<span>{{ tableDataTotal }}</span> 条</span
            >
          </div>
          <div class="mntc_right" @click="clearLine" v-if="!edit">
            <span style="color: #387df7; margin-right: 24px"></span>
          </div>
        </div>
-->
        <div class="main_table">
          <!-- 编辑的表格 -->
          <div>
            <div>
              <a-table
                class="ant-table-striped"
                :row-class-name="
                  (_record, index) => (index % 2 === 1 ? 'table-striped' : null)
                "
                :row-selection="{
                  type: 'radio',
                  selectedRowKeys: selectedRowKeys,
                  onChange: onSelectChange,
                }"
                :columns="tableDataFunc()"
                :data-source="tableData"
                :loading="tableDataTotal === -1 ? true : false"
                :pagination="false"
              />
              <div class="tableBox" style="margin-top: 85px">
                <div class="pa">
                  <a-pagination
                    v-if="tableDataTotal > 10"
                    :showSizeChanger="false"
                    showQuickJumper="true"
                    hideOnSinglePage="true"
                    :pageSize="pageSize"
                    :current="currentPage"
                    :total="tableDataTotal"
                    class="pagination"
                    @change="handelChangePage"
                  />
                </div>
              </div>
            </div>
          </div>
          <!--  <div v-else>
            <a-table
              class="ant-table-striped"
              :row-class-name="
                (_record, index) => (index % 2 === 1 ? 'table-striped' : null)
              "
              :row-selection="{
                selectedRowKeys: selectedRowKeys,
                onChange: onSelectChange,
                type: 'radio',
              }"
              :columns="tableDataFunc()"
              :data-source="tableData"
              :loading="tableDataTotal === -1 ? true : false"
              :pagination="false"
            />
            <div class="pa">
              <a-pagination
                v-if="tableDataTotal > 10"
                showSizeChanger="false"
                showQuickJumper="true"
                hideOnSinglePage="true"
                :pageSize="pageSize"
                :current="currentPage"
                :total="tableDataTotal"
                class="pagination"
                @change="handelChangePage"
              />
            </div>
      
      
          </div>


          -->
        </div>
      </div>
      <div class="main_btns">
        <button class="btn1" @click="closeDrawer">取消</button>
        <button class="btn2" @click="updateTask">确定</button>
      </div>
    </div>
    <div class="aeLoading" :style="{ display: addLoading ? 'flex' : 'none' }">
      <a-spin :spinning="addLoading" tip="" />
    </div>
  </a-drawer>
</template>
<script>
import { onMounted, reactive, toRefs } from "vue";
import * as api from "../../api/indexOnline.js";
import * as apiTask from "../../api/indexTaskadd";
// import { setCookie } from "../../api/method"
import { message } from "ant-design-vue";
import {
  RouterEditTask,
  IsExistence,
  IsExistenceProject,
  IsExistenceProjectTemplate,
} from "@/api/indexTask";
import { addTempTask } from "../../api/indexTaskadd";
export default {
  name: "AddOnline",
  props: {
    addonlineVisible: {
      type: Boolean,
      default: false,
    },
    EditOnlineId: {
      type: Number,
      default: null,
    },
    edit: {
      //  是否为编辑
      type: Boolean,
      default: null,
    },
    projectId: {
      type: Number,
      default: null,
    },
    chooseStageId: {
      type: Number,
      default: null,
    },
    routerTaskId: {
      type: Number,
      default: 0,
    },
    isLevel: {
      // 是否是关卡页面触发
      type: Number,
      default: null,
    },
    projectTaskId: {
      // 要编辑的projectId
      type: Number,
      default: null,
    },
    routerId: {
      type: Number,
      default: null,
    },
    isactive: {
      type: Number,
      default: null,
    },
    projectTemplateId: {
      type: Number,
      default: null,
    },
  },
  setup(props, ctx) {
    const state = reactive({
      inputV1: null,
      options1: [
        {
          value: "微课",
          label: "微课",
        },
        {
          value: "录播课",
          label: "录播课",
        },
      ],
      time: undefined,
      onlineClassesId: null,
      onlineName: "",
      selectV: null,
      selectedRowKeys: [],
      tableData: [],
      addOnlineList: [],
      currentPage: 1,
      tableDataTotal: 0,
      pageSize: 10,
      choicecourse: true,
      ddLoading: false,
      isClick: false,
    });
    const ChoiceCourse = () => {
      state.choicecourse = false;
    };
    const closeDrawer = () => {
      state.choicecourse = true;
      ctx.emit("update:addonlineVisible", false);
      ctx.emit("update:edit", false);
      state.inputV1 = null;
      state.selectV = null;
      state.selectedRowKeys = [];
      state.addOnlineList = [];
      state.currentPage = 1;
      localStorage.setItem("stageId", props.chooseStageId);
      localStorage.setItem("chapterId", props.isactive);
    };
    const afterVisibleChange = (bol) => {
      if (bol == true) {
        getAllOnlineText();
        getOnlineById();
      }
    };
    //TODO 根据id 获取在线课信息
    const getOnlineById = () => {};
    const tableDataFunc = () => {
      const columns = [
        // {
        //   title: "课程编号",
        //  dataIndex: "num",
        //   key: "num",
        //  width: "80px",
        //  align: "center",
        //  },
        {
          title: "名称",
          dataIndex: "name",
          key: "name",
          width: "30%",
          ellipsis: true,
        },
        {
          title: "课程分类",
          dataIndex: "contenttype",
          key: "contenttype",
          width: "15%",
          align: "center",
          ellipsis: true,
        },
        //   {
        //    title: "授课教师",
        //    dataIndex: "teacher",
        //    key: "teacher",
        //   width: "15%",
        //   align: "center",
        //  },
        {
          title: "创建人",
          dataIndex: "sysCreateBy",
          key: "sysCreateBy",
          width: "15%x",
          align: "center",
          ellipsis: true,
        },
        {
          title: "时长",
          dataIndex:"studyTime",
          key: "studyTime",
          width: "15%x",
          align: "center",
          ellipsis: true,
        },
        //   {
        //    title: "创建时间",
        //   dataIndex: "createTime",
        //    key: "createTime",
        //   width: "15%",
        //   align: "center",
        // },
        {
          title: "发布时间",
          dataIndex: "publishTime",
          key: "publishTime",
          width: "25%",
          align: "center",
          ellipsis: true,
        },
      ];
      return columns;
    };
    const onSelectChange = (selectedRowKeys, selectedRows) => {
      console.log("selectedRows", selectedRows);
      state.selectedRowKeys = selectedRowKeys;
      state.addOnlineList = selectedRows;
      console.log(selectedRowKeys, selectedRows);
      if (props.edit && selectedRows.length > 0) {
        selectedRows.map((value) => {
          console.log(props, value);
          if (value.courseId == props.EditOnlineId) {
            message.destroy();
            message.error("选项相同，请重新选择");
            state.selectedRowKeys = [];
            state.addOnlineList = [];
          }
        });
      }
    };
    //清空所选
    const clearLine = () => {
      state.selectedRowKeys = [];
      state.addOnlineList = [];
    };
    const handelChangePage = (page) => {
      state.currentPage = page;
      state.selectedRowKeys = [];
      getAllOnlineText();
    };
    const getTableDate = (tableData) => {
      let data = tableData;
      let array = [];
      data.map((value, index) => {
        {
          let obj = {
            key: index + 1,
            num: value.onlineClassesId,
            name: value.name,
            contenttype: value.contentType == 10 ? "微课" : "录播课",
            teacher: value.teacher,
            sysCreateBy: value.sysCreateBy,
            createTime: value.sysCreateTime,
            publishTime: value.publishTime,
            courseId: Number(value.onlineClassesId),
            studyTime: value.studyTime,
          };
          // console.log("objobjobjobj", obj, value);
          array.push(obj);
        }
      });
      state.tableData = array;
    };
    //获取全部在线信息接口
    const getAllOnlineText = () => {
      api
        .queryOnlinelList({
          createUser: "",
          keyword: state.inputV1,
          orderAsc: true,
          orderField: "",
          pageIndex: state.currentPage,
          pageSize: state.pageSize,
          publish: true,
          status: 0,
          sysType1: "",
          sysType2: "",
          sysType3: "",
        })
        .then((res) => {
          let arr = res.data.data.list;
          state.tableDataTotal = res.data.data.count;
          if (res.status === 200) {
            console.log("获取在线课列表数据", res);
            for (let i = 0; i < res.data.data.list.length; i++) {
              if (
                Number(res.data.data.list[i].onlineClassesId) ==
                props.EditOnlineId
              ) {
                state.selectedRowKeys = [i + 1];
              }
            }
            getTableDate(arr);
          }
        })
        .catch((err) => {
          console.log(err, "请求失败在线");
        });
    };
    // 校验当前在线课是否已经添加进来了
    const isExistence = (id) => {
      console.log({
        chapterId: Number(props.isactive),
        courseTaskId: Number(id),
        routerId: props.routerId,
        type: 1,
      });
      IsExistence({
        chapterId: Number(props.isactive),
        courseTaskId: Number(id),
        routerId: props.routerId,
        type: 1,
      })
        .then((res) => {
          console.log("我是不是已经添加了", res);
        })
        .catch((err) => {
          console.log(err);
        });
    };
    // 判断项目中是否添加当前在线课
    const IsExistenceProjects = (id) => {
      console.log("参数传递", {
        courseTaskId: id,
        projectId: props.projectId,
        stageId: props.chooseStageId || 0,
        type: 1,
      });
      IsExistenceProject({
        courseTaskId: id,
        projectId: Number(props.projectId),
        stageId: props.chooseStageId || 0,
        type: 1,
      })
        .then((res) => {
          console.log("项目中是否包含此在线课了", res);
        })
        .catch((err) => {
          console.log(err);
        });
    };
    const updateTask = () => {
      state.addLoading = true;
      if (props.isLevel == 1) {
        if (!props.isactive) {
          state.addLoading = false;
          message.destroy();
          return message.warning("请先选中关卡");
        }
        console.log("我是要便利的数据2", state.addOnlineList);
        let l_data = state.addOnlineList;
        let l_data_id = [];
        l_data.map((item) => {
          l_data_id.push(item["courseId"]);
        });
        console.log("需要查询的在线课ID", l_data_id);
        if (state.isClick) {
          message.destroy();
          message.error("请勿频繁点击");
          return;
        }
        state.isClick = true;
        IsExistence({
          chapterId: Number(props.isactive),
          courseTaskId: l_data_id,
          routerId: props.routerId,
          type: 1,
        })
          .then((res) => {
            console.log("路径图中是否包含此在线课了", res);
            if (res.data.data.length) {
              let strdata = res.data.data;
              let tipStr = "";
              for (let i = 0; i < strdata.length; i++) {
                if (i == strdata.length - 1) {
                  tipStr += strdata[i].courseName;
                } else {
                  tipStr += strdata[i].courseName + "/";
                }
              }
              message.destroy();
              message.warning("在线课（" + tipStr + "）重复添加");
              state.isClick = false;
              state.addLoading = false;
              return;
            } else {
              state.addOnlineList.map((value) => {
                console.log("要添加的在线课任务", value);
                RouterEditTask({
                  chapterId: Number(props.isactive),
                  courseId: value.num,
                  name: value.name,
                  routerId: props.routerId,
                  routerTaskId: props.routerTaskId || 0,
                  type: 1,
                  duration: value.studyTime,
                })
                  .then((res) => {
                    if (res.data.code == 200) {
                      message.destroy();
                      message.success(
                        `${props.edit ? "编辑" : "新增"}关卡任务成功`
                      );
                    }
                    ctx.emit("changeData", false);
                    closeDrawer();
                    state.addLoading = false;
                    state.isClick = false;
                  })
                  .catch(() => {
                    state.addLoading = false;
                    message.destroy();
                    message.error(
                      `${props.edit ? "编辑" : "新增"}关卡任务失败`
                    );
                    state.isClick = false;
                  });
              });
            }
          })
          .catch((err) => {
            console.log(err);
            state.isClick = false;
          });
      } else if (props.isLevel == 2) {
        console.log("我是要便利的数据2", state.addOnlineList);
        let p_data = state.addOnlineList;
        let p_data_id = [];
        p_data.map((item) => {
          p_data_id.push(item["courseId"]);
        });
        console.log("需要查询的在线课ID", p_data_id);
        if (state.isClick) {
          message.destroy();
          message.error("请勿频繁点击");
          return;
        }
        state.isClick = true;
        IsExistenceProject({
          courseTaskId: p_data_id,
          projectId: Number(props.projectId),
          stageId: props.chooseStageId || 0,
          type: 1,
        })
          .then((res) => {
            console.log("项目中是否包含此在线课了", res);
            if (res.data.data.length) {
              let strdata = res.data.data;
              let tipStr = "";
              for (let i = 0; i < strdata.length; i++) {
                if (i == strdata.length - 1) {
                  tipStr += strdata[i].courseName;
                } else {
                  tipStr += strdata[i].courseName + "/";
                }
              }
              message.destroy();
              message.warning("在线课（" + tipStr + "）重复添加");
              state.isClick = false;
              return;
            } else {
              state.addOnlineList.map((value) => {
                apiTask
                  .addTask({
                    courseId: value.num,
                    name: value.name,
                    projectId: props.projectId,
                    projectTaskId: props.projectTaskId || 0,
                    stageId: props.chooseStageId || 0,
                    type: 1,
                    duration: value.studyTime,
                  })
                  .then(() => {
                    message.destroy();
                    message.success(`${props.edit ? "编辑" : "新增"}任务成功`);
                    ctx.emit("changeData", false);
                    closeDrawer();
                    state.isClick = false;
                  })
                  .catch(() => {
                    message.destroy();
                    message.error(`${props.edit ? "编辑" : "新增"}任务失败`);
                    state.isClick = false;
                  });
              });
            }
          })
          .catch((err) => {
            console.log(err);
          });
      } else if (props.isLevel == 3) {
        let p_data = state.addOnlineList;
        let p_data_id = [];
        p_data.map((item) => {
          p_data_id.push(item["courseId"]);
        });
        console.log("需要查询的在线课ID", p_data_id);
        if (state.isClick) {
          message.destroy();
          message.error("请勿频繁点击");
          return;
        }
        state.isClick = true;
        IsExistenceProjectTemplate({
          courseTaskId: p_data_id,
          projectTemplateId: props.projectTemplateId,
          templateStageId: props.chooseStageId || 0,
          type: 1,
        }).then((res) => {
          console.log("项目中是否包含此在线课了", res);
          if (res.data.data.length) {
            let strdata = res.data.data;
            let tipStr = "";
            for (let i = 0; i < strdata.length; i++) {
              if (i == strdata.length - 1) {
                tipStr += strdata[i].courseName;
              } else {
                tipStr += strdata[i].courseName + "/";
              }
            }
            message.destroy();
            message.warning("在线课（" + tipStr + "）重复添加");
            state.isClick = false;
            return;
          } else {
            state.addOnlineList.map((value) => {
              console.log(props, props.projectTemplateId, props.projectTaskId);
              addTempTask({
                courseId: value.num,
                name: value.name,
                projectTemplateId: localStorage.getItem("projectTemplateId"),
                projectTaskId: props.projectTaskId || 0,
                stageId: props.chooseStageId || 0,
                type: 1,
                duration: value.studyTime,
              })
                .then((res) => {
                  console.log("新增或者编辑在线课", res);
                  message.destroy();
                  message.success(
                    `${props.edit ? "编辑" : "新增"}模板库任务成功`
                  );
                  ctx.emit("changeData", false);
                  closeDrawer();
                  state.isClick = false;
                })
                .catch(() => {
                  message.destroy();
                  message.error(
                    `${props.edit ? "编辑" : "新增"}模板库任务失败`
                  );
                  state.isClick = false;
                });
            });
          }
        });
      }
      //if(state.addOnlineList.Target==undefined){
      // closeDrawer();
      //}
    };
    //搜索在线列表
    const searchList = () => {
      if (state.inputV1 || state.selectV) {
        state.selectedRowKeys = [];
        state.addOnlineList = [];
        getAllOnlineText();
      } else {
        resetOnline();
      }
    };
    //重置在线信息
    const resetOnline = () => {
      state.inputV1 = null;
      state.selectV = null;
      state.selectedRowKeys = [];
      state.addOnlineList = [];
      state.currentPage = 1;
      getAllOnlineText();
    };
    onMounted(() => {});
    return {
      ...toRefs(state),
      afterVisibleChange,
      closeDrawer,
      tableDataFunc,
      onSelectChange,
      clearLine,
      handelChangePage,
      getAllOnlineText,
      getTableDate,
      updateTask,
      searchList,
      resetOnline,
      isExistence,
      IsExistenceProjects,
      ChoiceCourse,
    };
  },
};
</script>
<style lang="scss">
.ant-table-striped :deep(.table-striped) td {
  background-color: #fafafa !important;
}

.addonlineDrawer {
  .drawerMain {
    .header {
      height: 73px;
      border-bottom: 1px solid #e8e8e8;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-shrink: 0;

      .headerTitle {
        font-size: 18px;
        font-weight: 600;
        color: #333333;
        line-height: 25px;
        margin-left: 24px;
      }
    }

    .contentMain {
      padding-right: 12px;

      .main_items {
        display: flex;

        margin-top: 32px;
        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: #4ea6ff;
            }
          }

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

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

            .btnText {
              color: #ffffff;
            }
          }
        }
      }

      .main_notice {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 3px;
        height: 40px;
        background-color: #e9f6fe;

        .mntc_left {
          display: flex;
          align-items: center;

          .notice_icon {
            width: 14px;
            height: 14px;
            margin-right: 9px;
            margin-left: 9px;
            background-image: url(@/assets/images/coursewareManage/gan.png);
            background-size: 100% 100%;
          }
        }

        .mntc_right {
          cursor: pointer;
        }
      }

      .main_table {
        position: relative;
        padding-bottom: 80px;

        .ant-checkbox-wrapper {
          align-items: center;
          margin-top: -2px;
        }

        .ant-table-selection-column {
          padding: 0px !important;
          padding-left: 5px !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;
        }

        .pa {
          left: 0;
          width: 100%;
          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>