<template>
  <div id="poppleSet">
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="60%"
      @open="openExpand"
    >
      <el-tree
        ref="trees"
        :props="layoutTreeProps"
        :load="loadNode"
        lazy
        :default-checked-keys="audition"
        :show-checkbox="true"
        :check-strictly="true"
        @check-change="getCheckedKeys"
        node-key="TypeId"
      >
        <span class="custom-tree-node" slot-scope="{ node }">
          <span>{{ node.label }}</span>
          <span v-if="node.checked"
            >试听前
            <el-input-number
              v-model="node.data.auditionMinute"
              controls-position="right"
              :min="0"
              :controls="false"
              size="mini"
              style="width: 80px"
              :max="node.data.durationTime"
            ></el-input-number
            >分钟</span
          >
        </span>
      </el-tree>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitTable">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ["tableData", "auditionList"],
  data() {
    return {
      audition: [],
      auditionListCope: [],
      dialogVisible: false,
      layoutTreeProps: {
        label(data, node) {
          return data.prefixName || data.menuName;
        },
        isLeaf(data, node) {
          return !data.hasChildren;
        },
      },
    };
  },
  methods: {
    openExpand() {
      if (this.auditionList) {
        this.auditionListCope = JSON.parse(JSON.stringify(this.auditionList));
        var arrays = [];
        this.auditionList.map((item) => {
          arrays.push(item.TypeId);
        });
        this.$nextTick(() => {
          this.audition = arrays;
        });
      }
    },
    getCheckedKeys(item, node) {
      if (item.TypeId.split("-")[0] != "3") {
        return;
      }
      if (node && this.audition.indexOf(item.TypeId) == -1) {
        this.audition.push(item.TypeId);
      }
      if (!node && this.audition.indexOf(item.TypeId) !== -1) {
        this.audition.splice(this.audition.indexOf(item.TypeId), 1);
      }
      console.log(item, 555);
      if (node) {
        var sta = this.auditionListCope.some((items) => {
          return items.TypeId == item.TypeId;
        });
        if (!sta) {
          this.auditionListCope.push({
            TypeId: item.TypeId,
            auditionMinute: item.auditionMinute,
            courseId: item.courseId,
            menuId: item.menuId,
          });
        }
      } else {
        this.auditionListCope.map((items, indexs) => {
          if (items.TypeId == item.TypeId) {
            this.auditionListCope.splice(indexs, 1);
          }
        });
      }
    },
    submitTable() {
      var list = this.$refs.trees.getCheckedNodes();
      this.auditionListCope.map((item) => {
        if (!item.auditionMinute) {
          list.map((items) => {
            if (items.TypeId == item.TypeId) {
              item.auditionMinute = items.auditionMinute;
            }
          });
        }
      });
      this.$emit("uploadArrays", this.auditionListCope);
      this.dialogVisible = false;
    },
    loadNode(node, resolve) {
      var self = this;
      if (node.level === 0) {
        this.tableData.map((item) => {
          item.TypeId = "0" + "-" + item.courseId;
          item.disabled = true;
          item.hasChildren = true;
        });
        return resolve(this.tableData);
      } else {
        if (node.data.type === 1) {
          this.$api
            .inquireCourseListmodulechapter(node.data.menuId)
            .then((res) => {
              res.data.map((item) => {
                item.TypeId = "2" + "-" + item.chapterId;
                item.hasChildren = true;
                item.disabled = true;
              });
              return resolve(res.data);
            });
        } else if (node.data.type === 2) {
          this.$api
            .inquireCoursechaptersectionlist(node.data.menuId)
            .then((res) => {
              res.data.map((item) => {
                item.TypeId = "3" + "-" + item.sectionId;
                item.menuId = item.sectionId;
                item.auditionMinute = "";
                item.courseId = node.data.courseId;
                if (self.auditionList) {
                  self.auditionList.map((items) => {
                    if (items.TypeId === item.TypeId) {
                      item.auditionMinute = items.auditionMinute;
                    }
                  });
                }
                item.hasChildren = false;
              });
              return resolve(res.data);
            });
        } else if (node.data.type === 3) {
          return resolve([]);
        } else {
          this.$api
            .inquireCoursemenuListS({ courseId: node.data.courseId })
            .then((res) => {
              res.rows.map((item) => {
                if (item.type === 1) {
                  item.TypeId = item.type + "-" + item.menuId;
                }
                if (item.type === 2) {
                  item.TypeId = item.type + "-" + item.menuId;
                }
                if (item.type === 3) {
                  item.TypeId = item.type + "-" + item.menuId;
                  item.auditionMinute = "";
                  if (self.auditionList) {
                    self.auditionList.map((items) => {
                      if (items.TypeId === item.TypeId) {
                        item.auditionMinute = items.auditionMinute;
                      }
                    });
                  }
                  item.disabled = false;
                  item.hasChildren = false;
                } else {
                  item.disabled = true;
                  item.hasChildren = true;
                }
              });
              return resolve(res.rows);
            });
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.el-tree-node__content {
  height: 35px;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
