<template>
  <div class="app-container">
    <form-search :searchformShow="searchformShow" :coursewareUpload="coursewareUpload" @handleQuery="handleQuery" @change="formChange" @resetQuery="resetQuery"></form-search>
    <el-card class="box-card" style="margin-bottom: 30px">
      <el-row :gutter="24">
        <el-col :span="4" v-if="viewName != 'Custom'">
          <h3
            style="
              padding-left: 11px;
              border-left: 2px solid #e6a700;
              color: #e6a700;
            "
          >{{ queryParams.wayType == 1 ? "章节目录" : "知识点目录" }}</h3>
          <div class="head-container">
            <el-input
              v-model="name"
              :placeholder="
                queryParams.wayType == 1 ? '请输入章节名称' : '请输入知识点名称'
              "
              clearable
              size="small"
              prefix-icon="el-icon-search"
              style="margin-bottom: 20px"
            />
          </div>
          <div class="head-container" style="overflow: hidden;">
            <el-tree
              v-loading="treeLoading"
              v-show="queryParams.wayType == 1"
              :data="deptOptions"
              :props="treeProps"
              :expand-on-click-node="false"
              :filter-node-method="filterNode"
              ref="treeDefault"
              @node-click="handleNodeClick"
            >
              <div slot-scope="{node, data}">
                <div :title="data.name">{{data.name}}</div>
              </div>
            </el-tree>
            <el-tree
              v-loading="treeLoading"
              v-show="queryParams.wayType == 2"
              :data="KnowledgeOptions"
              :props="treeProps"
              :expand-on-click-node="false"
              :filter-node-method="filterNode"
              ref="treeKnowledge"
              @node-click="handleNodeClick"
            >
              <div slot-scope="{node, data}">
                <div :title="data.name">{{data.name}}</div>
              </div>
            </el-tree>
          </div>
        </el-col>
        <el-col :span="viewName == 'Custom' ? 24 : 20">
          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5" v-hasPermi="['front:personResource:uploadToCloudResourse']">
              <el-button plain icon="el-icon-upload2" size="small" @click="upToCloudResourse" :disabled="multiple">上传至云库</el-button>
            </el-col>
            <el-col :span="1.5" v-hasPermi="['front:personResource:uploadToSchoolResourse']">
              <el-button plain icon="el-icon-upload2" size="small" @click="upToSchoolResourse" :disabled="multiple">上传至校本资源库</el-button>
            </el-col>
            <el-col :span="1.5" v-hasPermi="['front:personResource:uploadToBoard']">
              <el-button plain icon="el-icon-upload2" size="small" @click="upToSchoolClass" :disabled="multiple">上传至班牌</el-button>
            </el-col>
            <el-col :span="1.5" v-hasPermi="['front:personResource:uploadToStudent']">
              <el-button plain icon="el-icon-upload2" size="small" @click="upToSchoolStudent" :disabled="multiple">上传至学生端</el-button>
            </el-col>
            <el-col :span="1.5" v-hasPermi="['front:personResource:uploadToParent']">
              <el-button plain icon="el-icon-upload2" size="small" @click="upToSchoolParent" :disabled="multiple">上传至家长端</el-button>
            </el-col>
            <el-col :span="1.5" v-hasPermi="['front:personResource:uploadToQuestion']">
              <el-button plain icon="el-icon-upload2" size="small" @click="upToQuestion()" :disabled="multiple">上传至试题</el-button>
            </el-col>
            <el-table v-loading="loading" :data="resourcesList" @selection-change="handleSelectionChange">
              <el-table-column type="selection" width="55" align="center" />
              <el-table-column label="文件" align="center" prop="resourcesName" v-if="viewName == 'Index'">
                <template slot-scope="scope">
                  <img style="width: 130px; height: 80px; cursor: pointer" @click="playVideo(scope.row)" :src="img.ship" alt />
                </template>
              </el-table-column>
              <el-table-column label="文件名" align="center" prop="resourcesName" />
              <el-table-column label="发布人" align="center" prop="createBy" />
              <el-table-column label="时间" align="center" prop="createTime" />
              <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                  <el-button v-if="viewName != 'Index'" size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row)">预览</el-button>
                  <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
                  <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>

            <pagination v-show="total > 0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" @pagination="getList" />
          </el-row>
        </el-col>
      </el-row>
    </el-card>

    <!-- 添加或修改云库对话框 -->
    <el-dialog :title="title" v-loading="quesLoading" :visible.sync="quesDialog" width="800px" append-to-body>
      <el-form ref="formQuestion" :model="form" :rules="rules2" label-width="80px" v-if="quesDialog">
        <el-form-item label="题目编号" prop="questionId">
          <el-input v-model="form.questionId" placeholder="题目编号" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitQuestion">确 定</el-button>
        <el-button @click="cancelQuestion">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 添加或修改云库对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px" v-if="open">
        <el-form-item label="资源名称" prop="resourcesName">
          <el-input v-model="form.resourcesName" placeholder="请输入资源名称" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <upload-dialog
      v-if="dialogVisible"
      :title="title"
      :pageName="pageName"
      :isZdy="isZdy"
      :selectType="selectType"
      :dialogVisible="dialogVisible"
      @handleClose="handleClose"
      @dialogVisibleClose="dialogVisibleClose"
    ></upload-dialog>
    <el-dialog title="查看视频" :visible.sync="dialogVideo" width="60%">
      <mx-video v-if="dialogVideo" :aliIdType="aliIdType" :src="src" controls controlslist="nodownload" disablepictureinpicture></mx-video>
    </el-dialog>
  </div>
</template>

<script>
import { add, exportList } from "@/api/webApi/school";
import {
  upToCloudResourse,
  list,
  upToSchoolResourse,
  upToSchoolClass,
  upToSchoolStudent,
  upToSchoolParent,
  getInfo,
  remove,
  modifyPersonResourceInfo,
  updataQuestion,
} from "@/api/webApi/person";
import { treeList, knowledgeTree } from "@/api/webApi/webQue.js";
import { mapGetters } from "vuex";

export default {
  components: {},
  data() {
    const blurText = async (rule, value, callback) => {
      const boolean = new RegExp("^[1-9][0-9]*$").test(value); // console.log(boolean)
      if (!boolean) {
        callback(new Error("请输入正整数"));
      }
    };
    return {
      aliIdType: "",
      src: "",
      dialogVideo: false,
      quesDialog: false,
      quesLoading: false,
      questionId: "",
      coursewareUpload: false,
      treeLoading: false,
      searchformShow: {},
      dialogVisible: false,
      img: {
        ship: require("@/assets/images/ship.png"),
      },
      treeProps: {
        children: "children",
        label: "name",
        code: "id",
      },
      deptOptions: undefined,
      KnowledgeOptions: [],
      deptName: "",
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      idsSel: [],
      resourcesNames: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      pageNum: 1,
      pageSize: 10,
      // 云库表格数据
      resourcesList: [],
      // 弹出层标题
      title: "",
      pageName: "",
      // 是否显示弹出层
      open: false,
      // 资源类型字典
      typeOptions: [],
      // 资源分类字典
      categoryOptions: [],
      // 是否删除字典
      delFlagOptions: [],
      // 查询参数
      queryParams: {
        wayType: "1",
        pageNum: 1,
        pageSize: 10,
        resourcesName: "",
        type: null,
        category: null,
        province: null,
        city: null,
        county: null,
        chapterId: null,
        resourcesUrl: "",
        bookId: null,
        subjectId: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        resourcesName: [
          {
            required: true,
            message: "资源名称不能为空",
            trigger: "blur",
          },
        ],
      },
      rules2: {
        questionId: [
          {
            required: true,
            message: "题目编号不能为空",
            trigger: "blur",
          },
          {
            validator: blurText,
            trigger: "blur",
          },
        ],
      },

      viewName: "",
      name: "",
      isZdy: true,
      selectType: "",
    };
  },
  computed: {
    ...mapGetters(["currentUser"]),
    userInfo() {
      // TODO: hht 22.1.5 兼容历史写法，待清理
      return this.currentUser;
    },
  },
  created() {
    this.viewName = this.$route.name;
    if (this.viewName == "Index") {
      this.coursewareUpload = false;
      this.searchformShow = {
        wayType: "1",
        subjectid: "",
        edition: "",
        slipid: "",
      };
    } else if (this.viewName == "Personal") {
      this.coursewareUpload = true;
      this.searchformShow = {
        subjectid: "",
        edition: "",
        slipid: "",
        coursewareType: "",
      };
    } else {
      this.coursewareUpload = true;
      this.searchformShow = {
        subjectid: "",
        resourceType: "",
      };
    }
    this.handleQuery(this.searchformShow);
    // this.getTreeselect();
    this.getDicts("resource_type").then((response) => {
      this.typeOptions = response.data;
    });
    this.getDicts("category").then((response) => {
      this.categoryOptions = response.data;
    });
    this.getDicts("bool_flag").then((response) => {
      this.delFlagOptions = response.data;
    });
  },
  watch: {
    // 根据名称筛选部门树
    name(val) {
      this.$refs.tree.filter(val);
    },
  },
  methods: {
    handleView(row) {
      if (row.resourcesUrl.indexOf(".pdf") != -1) {
        window.open("/pdfView/index.html?src=" + row.resourcesUrl);
      } else if (
        row.resourcesUrl.indexOf(".doc") != -1 ||
        row.resourcesUrl.indexOf(".ppt") != -1 ||
        row.resourcesUrl.indexOf(".xls") != -1 ||
        row.resourcesUrl.indexOf(".xlsx") != -1
      ) {
        window.open(
          "https://view.officeapps.live.com/op/view.aspx?src=" +
            row.resourcesUrl
        );
      } else if (row.resourcesUrl.indexOf(".mp4") != -1) {
        this.aliIdType = row.aliIdType;
        this.src = row.resourcesUrl;
        this.dialogVideo = true;
      } else {
        this.$message.error("格式错误，无法预览该格式文件！");
      }
    },
    playVideo(row) {
      this.aliIdType = row.aliIdType;
      this.src = row.resourcesUrl;
      this.dialogVideo = true;
    },
    /** 查询个人资源库列表 */
    getList() {
      this.loading = true;
      if (this.viewName == "Index") {
        this.queryParams.category = "微课视频";
        this.pageName = "微课视频";
      } else if (this.viewName == "Personal") {
        this.queryParams.category = "课件资源";
        this.pageName = "课件资源";
      } else {
        this.queryParams.category = "自定义";
        this.pageName = "自定义";
      }
      let Ajax = {
        subjectId: this.queryParams.subjectid, //科目
        bookId: this.queryParams.slipid, //学册
        chapterId: this.queryParams.chapterId, //章节
        coursewareType: this.queryParams.coursewareType,
        edition: this.queryParams.edition,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        category: this.queryParams.category,
        type: this.queryParams.resourceType,
        linkWay: this.queryParams.wayType,
      };

      list(Ajax)
        .then((response) => {
          this.resourcesList = response.rows;
          this.total = response.total;
          this.loading = false;
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    // 资源类型字典翻译
    typeFormat(row, column) {
      return this.selectDictLabel(this.typeOptions, row.type);
    },
    // 资源分类字典翻译
    categoryFormat(row, column) {
      return this.selectDictLabel(this.categoryOptions, row.category);
    },
    // 是否删除字典翻译
    delFlagFormat(row, column) {
      return this.selectDictLabel(this.delFlagOptions, row.delFlag);
    },
    handleClose(type, name, selectData) {
      console.log("------------");
      console.log(type);
      console.log(name);
      console.log(selectData);
      let _this = this;
      if (this.title == "上传至云库") {
        _this.ids.forEach((item, index) => {
          let Ajax = {
            resourseId: item,
          };
          if (name) {
            Ajax.resourcesName = name;
          }
          upToCloudResourse(Ajax).then(() => {
            if (index == _this.ids.length - 1) {
              _this.msgSuccess("操作成功");
              _this.dialogVisible = false;
            }
          });
        });
      } else if (this.title == "上传至校本资源库") {
        _this.ids.forEach((item, index) => {
          let Ajax = {
            resourseId: item,
          };
          if (name) {
            Ajax.resourcesName = name;
          }
          upToSchoolResourse(Ajax).then(() => {
            if (index == _this.ids.length - 1) {
              _this.msgSuccess("操作成功");
              _this.dialogVisible = false;
            }
          });
        });
      } else if (this.title == "上传至班牌") {
        console.log("上传至班牌");
        console.log(selectData);
        _this.ids.forEach((item, index) => {
          let Ajax = {
            resourseId: item,
            classId: selectData.checkedClass,
            studentCodes: selectData.checkedStudent
              ? selectData.checkedStudent.join(",")
              : "",
          };
          if (name) {
            Ajax.resourcesName = name;
          }
          console.log("上传至班牌", Ajax);
          upToSchoolClass(Ajax).then(() => {
            if (index == _this.ids.length - 1) {
              _this.msgSuccess("操作成功");
              _this.dialogVisible = false;
            }
          });
        });
      } else if (this.title == "上传至学生端") {
        console.log("上传至学生端");
        console.log(selectData);
        _this.ids.forEach((item, index) => {
          let Ajax = {
            resourseId: item,
            classId: selectData.checkedClass,
            remark: selectData.remark,
            studentCodes: selectData.checkedStudent.join(","),
          };
          if (name) {
            Ajax.resourcesName = name;
          }
          upToSchoolStudent(Ajax).then(() => {
            if (index == _this.ids.length - 1) {
              _this.msgSuccess("操作成功");
              _this.dialogVisible = false;
            }
          });
        });
      } else if (this.title == "上传至家长端") {
        console.log("上传至家长端");
        console.log(selectData);
        _this.ids.forEach((item, index) => {
          let Ajax = {
            resourseId: item,
            classId: selectData.checkedClass,
            remark: selectData.remark,
            studentCodes: selectData.checkedStudent.join(","),
          };
          if (name) {
            Ajax.resourcesName = name;
          }
          upToSchoolParent(Ajax).then(() => {
            if (index == _this.ids.length - 1) {
              _this.msgSuccess("操作成功");
              _this.dialogVisible = false;
            }
          });
        });
      }
    },
    upToCloudResourse() {
      this.isZdy = false;
      let _this = this;
      const resourcesIds = this.ids.join(",");
      this.title = "上传至云库";
      this.selectType = "";
      this.dialogVisible = true;
    },
    upToSchoolResourse() {
      this.isZdy = true;
      let _this = this;
      const resourcesIds = this.ids.join(",");
      this.title = "上传至校本资源库";
      this.selectType = "";
      this.dialogVisible = true;
    },
    upToSchoolClass() {
      this.isZdy = false;
      let _this = this;
      const resourcesIds = this.ids.join(",");
      this.title = "上传至班牌";
      this.selectType = "class";
      this.dialogVisible = true;
    },
    upToSchoolStudent() {
      this.isZdy = false;
      let _this = this;
      const resourcesIds = this.ids.join(",");
      this.title = "上传至学生端";
      this.selectType = "student";
      this.dialogVisible = true;
    },
    upToSchoolParent() {
      this.isZdy = false;
      let _this = this;
      const resourcesIds = this.ids.join(",");
      this.title = "上传至家长端";
      this.selectType = "parent";
      this.dialogVisible = true;
    },

    upToQuestion() {
      // 只能上传视频文件
      for (var idx = 0; idx < this.idsSel.length; idx++) {
        if (this.idsSel[idx].type != 1) {
          this.$message.warning("只能上传视频文件！");
          return;
        }
      }
      this.quesDialog = true;
    },
    submitQuestion() {
      this.$refs["formQuestion"].validate((valid) => {
        if (valid) {
          this.quesLoading = true;
          this.ids.forEach((item, index) => {
            let paramObj = {
              questionId: this.form.questionId,
              resourseId: item,
            };
            updataQuestion(paramObj)
              .then((response) => {
                this.msgSuccess("上传成功");
                this.quesLoading = false;
                this.cancelQuestion();
              })
              .catch((err) => {
                console.log(err);
                this.quesLoading = false;
              });
          });
        }
      });
    },
    cancelQuestion() {
      this.questionId = "";
      this.quesDialog = false;
    },
    dialogVisibleClose() {
      this.dialogVisible = false;
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        resourcesId: null,
        resourcesName: null,
        sourceId: null,
        category: null,
        chapterId: null,
        knowledgeBasicId: null,
        resourcesUrl: null,
        type: null,
        linkWay: null,
        bookId: null,
        customerId: null,
        subjectId: null,
        delFlag: null,
        createBy: null,
        createTime: null,
        remark: null,
      };
    },
    /** 搜索按钮操作 */
    handleQuery(data, type) {
      this.pageNum = 1;
      this.queryParams = Object.assign(this.queryParams, data);
      this.queryParams.wayType = data.wayType || "1";
      this.getList();
      // this.getTreeselect()
    },
    /** 重置按钮操作 */
    resetQuery(data) {
      this.queryParams = data;
      this.queryParams.chapterId = "";
      this.pageNum = 1;
      this.getList();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.idsSel = selection.map((item) => item);
      this.ids = selection.map((item) => item.resourcesId);
      this.resourcesNames = selection.map((item) => item.resourcesName);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    formChange(data, type) {
      this.queryParams = data;
      this.queryParams.wayType = data.wayType || "1";
      if (this.viewName == "Index" && this.queryParams.wayType == 2) {
        this.searchformShow = {
          wayType: "1",
          subjectid: "",
        };
      } else {
        this.searchformShow = {
          wayType: "1",
          subjectid: "",
          edition: "",
          slipid: "",
          coursewareType: "",
          resourceType: "",
        };
      }
      if (type != "coursewareType") this.getTreeselect(type);
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加个人资源库";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const resourcesId = row.resourcesId || this.ids;
      getInfo(resourcesId).then((response) => {
        this.form = response.data;
        this.open = true;
        this.title = "修改个人资源库";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.resourcesId != null) {
            modifyPersonResourceInfo(this.form).then((response) => {
              this.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            add(this.form).then((response) => {
              this.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const resourcesIds = row.resourcesId || this.ids;
      this.$confirm(
        '是否确认删除个人资源库名称为"' + row.resourcesName + '"的数据项?',
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(function () {
          return remove(row.resourcesId);
        })
        .then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        });
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm("是否确认导出所有个人资源库数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.exportLoading = true;
          return exportList(queryParams);
        })
        .then((response) => {
          this.download(response.msg);
          this.exportLoading = false;
        });
    },

    /** 查询章节下拉树结构 */
    getTreeselect(type) {
      if (this.queryParams.wayType == 1) {
        if (
          (type != "slipid" && type != "wayType") ||
          this.viewName == "Custom"
        ) {
          this.deptOptions = [];
          this.KnowledgeOptions = [];
          this.queryParams.chapterId = "";
          return;
        }
        let Ajax = {
          editionId: this.queryParams.edition, //版本
          subjectId: this.queryParams.subjectid, //科目
          pharseId: this.queryParams.pharseId, //pharseId
          gradeId: this.queryParams.slipid, //学册
          // gradeid:301
        };
        this.deptOptions = [];
        this.treeLoading = true;
        treeList(Ajax)
          .then((response) => {
            this.deptOptions = response.data;
            this.treeLoading = false;
          })
          .catch((response) => {
            this.treeLoading = false;
          });
      } else {
        if (
          (type != "subjectid" && type != "wayType") ||
          this.viewName == "Custom"
        ) {
          this.deptOptions = [];
          this.KnowledgeOptions = [];
          this.queryParams.chapterId = "";
          return;
        }
        let Ajax = {
          subjectId: this.queryParams.subjectid,
          pharseId: this.queryParams.pharseId,
        };
        this.KnowledgeOptions = [];
        this.treeLoading = true;
        knowledgeTree(Ajax)
          .then((response) => {
            let list = this.filterData(response.data, 0);
            this.KnowledgeOptions = list;
            this.treeLoading = false;
          })
          .catch((response) => {
            this.treeLoading = false;
          });
      }
    },
    filterData(data, index) {
      let children = [];
      data.forEach((item) => {
        item.tier = index;
        if (item.children && index < 2) {
          item.children = this.filterData(item.children, index + 1);
        } else {
          item.children = null;
        }
        children.push(item);
      });
      return children;
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    // 节点单击事件
    handleNodeClick(data) {
      if (!data.children?.length) {
        this.pageNum = 1;
        this.queryParams.chapterId = data.id;
        this.getList();
      } else {
        this.queryParams.chapterId = "";
      }
    },
  },
};
</script>
