<template>
  <div id="courseContent">
    <div style="margin-bottom: 20px">
      <el-button
        @click="addCourse"
        size="small"
        :disabled="tableData.length > 0 && tableData[0].type > 0"
        >添加课程</el-button
      >
      <el-button
        @click="addMoreList"
        size="small"
        :disabled="
          tableData.length > 0 && tableData[0].courseName ? true : false
        "
        >添加模块/章/节</el-button
      >
      <el-button
        @click="openAudition"
        type="success"
        size="small"
        v-if="tableData.length > 0"
        >试听设置</el-button
      >
      <el-button type="primary" @click="openPlayPhotoSet" size="small"
        >播放和拍照设置</el-button
      >
      <el-button type="primary" @click="openStyleNumSet" size="small"
        >每天学习限制</el-button
      >
      <el-button type="primary" @click="openHandoutSet" size="small"
        >关联讲义</el-button
      >
    </div>
    <el-table
      :data="tableData"
      border
      :header-cell-style="{
        'background-color': '#eee',
        padding: '8px',
        color: '#333',
      }"
      :default-sort="{ prop: 'sort', order: 'ascending' }"
      lazy
      :load="load"
      row-key="keyId"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column
        v-for="(item, index) in compayTypes(tableSetVideo)"
        :width="item.width"
        :key="index"
        :label="item.label"
        :align="item.scope === 'typeNames' ? 'left' : 'center'"
        :show-overflow-tooltip="true"
        header-align="center"
        :sortable="item.prop === 'sort'"
        sort-by="sort"
        :prop="item.prop"
      >
        <template slot-scope="scope">
          <span v-if="item.scope === 'types'">{{
            scope.row[item.prop] === 1
              ? "录播"
              : scope.row[item.prop] === 2
              ? "直播"
              : scope.row[item.prop] === 3
              ? "回放"
              : "未知"
          }}</span>
          <span v-else-if="item.scope === 'type'">{{
            scope.row[item.prop] === 1
              ? "模块"
              : scope.row[item.prop] === 2
              ? "章"
              : scope.row[item.prop] === 3
              ? "节"
              : scope.row[item.prop] === 0
              ? "课程"
              : "未知"
          }}</span>
          <span v-else-if="item.scope === 'busin'">
            {{ scope.row[item.prop1] + " - " + scope.row[item.prop2] }}
          </span>
          <span v-else-if="item.scope === 'Status'">
            {{
              scope.row[item.prop] === 1
                ? "发布"
                : scope.row[item.prop] === 0
                ? "未发布"
                : "未知"
            }}
          </span>
          <span v-else-if="item.scope === 'typeNames'">
            <span
              v-if="scope.row['sectionType']"
              style="color: green; margin-right: 10px"
              >{{
                scope.row["sectionType"] === 1
                  ? "[录播]"
                  : scope.row["sectionType"] === 2
                  ? "[直播]"
                  : scope.row["sectionType"] === 3
                  ? "[回放]"
                  : ""
              }}</span
            >

            {{ scope.row[item.prop] }}
          </span>
          <span v-else-if="item.scope === 'inputs'">
            <span v-if="item.scope === 'inputs' && scope.row['index']">
              <el-input-number
                style="width: 50px"
                size="small"
                :controls="false"
                v-model="scope.row[item.prop]"
                controls-position="right"
                :min="0"
              ></el-input-number>
            </span>
          </span>
          <span v-else>{{ scope.row[item.prop] }}</span></template
        >
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        fixed="right"
        width="100px"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="delCourse(scope.row)"
            v-if="scope.row.index && scope.row.newActive"
            >删除</el-button
          >
          <el-button
            type="text"
            v-if="scope.row.type === 3 && scope.row.sectionType !== 1"
            @click="openShare(scope.row)"
            >分享</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <popple-set
      :key="Math.random()"
      ref="poppleSet"
      @uploadArrays="uploadArrays"
    />
    <course-check ref="courseCheck" @backData="backVideoData" />
    <more-list-check
      ref="moreListCheck"
      @backData="backMoreListData"
      :bfCourseId="bfCourseId"
    />
    <play-photo ref="playPhoto" @backData="backPlayPhotoData" />
    <share ref="share" />
    <every-day-study-num ref="everyDayStudyNum" @backData="backEveryDaySet" />
    <handout-view ref="handoutView" @backData="backHandoutView" />
  </div>
</template>

<script>
import poppleSet from "../../poppleSet.vue";
import courseCheck from "./courseCheck.vue";
import moreListCheck from "./moreListCheck.vue";
import playPhoto from "./playPhoto.vue";
import share from "./share.vue";
import everyDayStudyNum from "./everyDayStudyNum.vue";
import handoutView from "./handoutView.vue";

export default {
  components: {
    poppleSet,
    courseCheck,
    moreListCheck,
    playPhoto,
    share,
    everyDayStudyNum,
    handoutView,
  },
  props: ["listData", "submitStatusInfo"],
  data() {
    return {
      tableSetVideo: [
        { label: "排序", prop: "sort", scope: "inputs", width: "100" },
        { label: "编码", prop: "code", width: "140" },
        // { label: "课程名称", prop: "courseName", width: "300", type: 1 },
        {
          label: "名称",
          prop: "menuName",
          width: "300",
          scope: "typeNames",
        },
        { label: "类型", prop: "type", width: "190", scope: "type" },
        // { label: "名称", prop: "menuName", width: "300", type: 2 },
        { label: "科目", prop: "subjectName", width: "150", type: 1 },
        { label: "专业", prop: "categoryName", type: 1 },
        { label: "院校", prop: "schoolName", width: "150", type: 1 },
        // {
        //   label: "业务层次",
        //   prop1: "projectName",
        //   prop2: "businessName",
        //   scope: "busin",
        //   width: "350px",
        //   type: 1,
        // },
        // { label: "教育类型", prop: "educationName", width: "160", type: 1 },
        {
          label: "发布状态",
          prop: "publishStatus",
          scope: "Status",
        },
      ],
      tableData: [],
      auditionList: [], //试听数据
      bfCourseId: 0,
      dialogVisible: false, //分享窗口
    };
  },
  watch: {
    tableData(val) {
      if (val.length === 0) {
        this.auditionList = [];
      }
    },
  },
  computed: {
    compayTypes: function () {
      return function (array) {
        let ary = [];
        ary = array.filter((item) => {
          if (this.tableData.length > 0) {
            if (this.tableData[0].type) {
              return item.type !== 1;
            } else {
              return item.type !== 2;
            }
          } else {
            return item;
          }
        });
        return ary;
      };
    },
  },
  mounted() {
    this.$bus.$on("sendBybus", () => {
      this.tableData = [];
    });
  },
  methods: {
    /**
     * 打开分享窗口
     */
    openShare(rows) {
      let goodsId = this.$route.query.id;
      this.$refs.share.openBox(rows, goodsId);
      // this.$api.coursesectionwatchper().then((res) => {});
    },
    /**
     * 异步加载table数据
     */
    load(tree, treeNode, resolve) {
      console.log(tree, "tree");
      if (tree.type === 0) {
        this.$api
          .inquireCoursemenuListS({ courseId: tree.courseId })
          .then((res) => {
            res.rows.forEach((item) => {
              if (item.type === 1) {
                item.moduleId = item.menuId;
                item.keyId = `${tree.courseId}-${item.menuId}`;
              }
              if (item.type === 2) {
                item.chapterId = item.menuId;
                item.keyId = `${tree.courseId}-0-${item.menuId}`;
              }
              if (item.type === 3) {
                item.sectionId = item.menuId;
                item.keyId = `${tree.courseId}-0-0-${item.menuId}`;
              }
              item.children = [];
              item.courseId = tree.courseId;
              item.hasChildren = item.type === 3 ? false : true;
            });
            return resolve(res.rows);
          });
      } else if (tree.type === 1) {
        this.$api.inquireCourseListmodulechapter(tree.menuId).then((res) => {
          res.data.forEach((item) => {
            item.keyId = `${tree.courseId}-${tree.menuId}-${item.chapterId}`;
            item.children = [];
            item.type = 2;
            item.menuName = item.name;
            item.courseId = tree.courseId;
            item.hasChildren = item.type === 3 ? false : true;
          });
          return resolve(res.data);
        });
      } else if (tree.type === 2) {
        this.$api
          .inquireCoursechaptersectionlist(tree.chapterId)
          .then((res) => {
            res.data.forEach((item) => {
              item.keyId = `${tree.courseId}-${tree.moduleId}-${tree.chapterId}-${item.sectionId}`;
              item.children = [];
              item.type = 3;
              item.menuName = item.name;
              item.hasChildren = false;
            });
            return resolve(res.data);
          });
      } else {
        return resolve([]);
      }
    },
    /**
     * 获取初始课程列表
     */
    getBybusCoursetableData(id) {
      this.$api.obtainCourseSgoodsId(id).then((res) => {
        if (res.rows.length === 1 && res.rows[0].courseShow === 0) {
          this.bfCourseId = res.rows[0].courseId;
          this.getMoreList(res.rows[0].courseId);
          this.auditionList.forEach((item) => {
            item.courseId = res.rows[0].courseId;
          });
          return;
        }
        res.rows.forEach((item, index) => {
          item.keyId = item.courseId + "";
          item.children = [];
          item.hasChildren = true;
          item.type = 0;
          item.menuName = item.courseName;
          item.index = true;
        });
        this.tableData = res.rows;
      });
    },
    /**
     * 获取商品模块/章/节列表
     */
    getMoreList(id) {
      this.$api.inquireCoursemenuListS({ courseId: id }).then((res) => {
        res.rows.forEach((item) => {
          item.auditionMinute = this.$methodsTools.secondToDate(
            item.durationTime,
            false
          );
          item.children = [];
          item.hasChildren = item.type === 1 || item.type === 2 ? true : false;
          item.name = item.menuName;
          item.index = true;
          item.keyId = `${id}-${item.type === 1 ? item.menuId : 0}-${
            item.type === 2 ? item.menuId : 0
          }-${item.type === 3 ? item.menuId : 0}`;
          item.moduleId = item.type === 1 ? item.menuId : 0;
          item.chapterId = item.type === 2 ? item.menuId : 0;
          item.sectionId = item.type === 3 ? item.menuId : 0;
        });
        this.tableData = res.rows;
      });
    },
    /**
     * 获取初始课程试听列表
     */
    getBybusCourseAudition(audition) {
      this.auditionList = audition;
    },
    /**
     * 点击添加函数
     */
    addCourse() {
      //搜索条件
      var data = {
        businessId: this.listData.businessId,
        subjectIds: this.listData.subjectIds.toString(),
        status: 1,
        pageSize: 10,
        pageNum: 1,
        publishStatus: 1,
      };
      //已选课程
      var aList = this.tableData.map((item) => {
        return item.courseId;
      });
      //打开选择课程组件
      this.$refs.courseCheck.openBox(
        data,
        aList,
        this.listData.educationTypeId
      );
    },
    /**
     * 选择课程回调数据
     */
    backVideoData(array) {
      let copyData = JSON.parse(JSON.stringify(array));
      copyData.forEach((item) => {
        item.keyId = item.courseId + "";
        item.children = [];
        item.hasChildren = true;
        item.type = 0;
        item.menuName = item.courseName;
        item.index = true;
      });
      if (this.tableData.length) {
        let maxIndex = 0;
        this.tableData.forEach((item) => {
          if (item.sort > maxIndex) {
            maxIndex = item.sort;
          }
        });
        copyData.forEach((item, index) => {
          item.sort = maxIndex + index + 1;
        });
      } else {
        copyData.forEach((item, index) => {
          item.sort = index + 1;
        });
      }
      this.tableData = this.tableData.concat(copyData);
    },
    /**
     * 删除课程
     */
    delCourse(item) {
      if (this.tableData[0].type) {
        const FINDINDEX = this.tableData.findIndex((items) => {
          return items.type === item.type && items.menuId === item.menuId;
        });
        this.tableData.splice(FINDINDEX, 1);
        this.auditionList = this.auditionList.filter((items) => {
          return items.TypeId !== item.TypeId;
        });
        this.$message.success("删除成功");
      } else {
        const FINDINDEX = this.tableData.findIndex((items) => {
          return items.courseId === item.courseId;
        });
        this.tableData.splice(FINDINDEX, 1);
        this.auditionList = this.auditionList.filter((items) => {
          return items.courseId !== item.courseId;
        });
        this.$message.success("删除成功");
      }
    },
    /**
     * 点击添加函数
     */
    addMoreList() {
      //搜索条件
      var data = {
        businessId: this.listData.businessId,
        subjectIds: this.listData.subjectIds.toString(),
        status: 1,
        pageSize: 10,
        pageNum: 1,
        publishStatus: 1,
      };
      //已选模块/章/节
      var aList = this.tableData.map((item) => {
        return `${item.type}-${item.menuId}`;
      });
      //打开选择模块/章/节组件
      this.$refs.moreListCheck.openBox(
        data,
        aList,
        this.listData.educationTypeId
      );
    },
    /**
     * 选择模块/章/节回调数据
     */
    backMoreListData(array) {
      let copyData = JSON.parse(JSON.stringify(array));
      copyData.forEach((item) => {
        item.keyId = `${this.bfCourseId}-${item.type === 1 ? item.menuId : 0}-${
          item.type === 2 ? item.menuId : 0
        }-${item.type === 3 ? item.menuId : 0}`;
        (item.courseId = this.bfCourseId),
          (item.moduleId = item.type === 1 ? item.menuId : 0);
        item.chapterId = item.type === 2 ? item.menuId : 0;
        item.sectionId = item.type === 3 ? item.menuId : 0;
        item.children = [];
        item.hasChildren = item.type === 3 ? false : true;
        item.index = true;
      });
      if (this.tableData.length) {
        let maxIndex = 0;
        this.tableData.forEach((item) => {
          if (item.sort > maxIndex) {
            maxIndex = item.sort;
          }
        });
        copyData.forEach((item, index) => {
          item.sort = maxIndex + index + 1;
        });
      } else {
        copyData.forEach((item, index) => {
          item.sort = index + 1;
        });
      }
      this.tableData = this.tableData.concat(copyData);
    },
    /**
     * 点击试听函数
     */
    openAudition() {
      console.log(this.tableData, this.auditionList);
      this.$refs.poppleSet.openExpand(this.tableData, this.auditionList);
    },
    /**
     * 试听回调数据
     */
    uploadArrays(arrays) {
      this.auditionList = arrays;
    },
    /**
     * 点击播放和拍照设置函数
     */
    openPlayPhotoSet() {
      this.$refs.playPhoto.openBox(this.listData);
    },
    /**
     * 播放和拍照设置回调数据
     */
    backPlayPhotoData(obj) {
      this.$set(this.listData, "playConfig", obj.playConfig);
      this.$set(this.listData, "photographConfig", obj.photographConfig);
      this.$set(
        this.listData,
        "goodsPhotographExamConfig",
        obj.goodsPhotographExamConfig
      );
    },
    /**
     * 点击学习限制函数
     */
    openStyleNumSet() {
      this.$refs.everyDayStudyNum.openBox(this.listData.sectionMaxNum);
    },
    /**
     * 学习限制回调数据
     */
    backEveryDaySet(num) {
      this.$set(this.listData, "sectionMaxNum", num);
    },
    /**
     * 点击选择讲义函数
     */
    openHandoutSet() {
      if (!this.listData.businessId) {
        this.$message.warning("请选择业务层次");
        return;
      }
      console.log(this.listData);
      this.$refs.handoutView.openBox(this.listData.handoutsId);
    },
    /**
     * 讲义回调数据
     */
    backHandoutView(id) {
      this.$set(this.listData, "handoutsId", id);
    },
  },
};
</script>

<style lang="less" scoped>
</style>
