<!--
 * @Author: ysh
 * @Date: 2025-03-05 15:36:17
 * @LastEditors: wrh
 * @LastEditTime: 2025-10-16 12:35:17
-->
<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-row>
          <div class="title">
            集中学习
            <div class="line"></div>
          </div>
          <resource-tree :fields="fields1" :isModify="false" @clickNode="queryField"></resource-tree>
        </el-row>
        <el-divider />
        <el-row>
          <div class="title">
            专业领域
            <div class="line"></div>
          </div>
          <resource-tree :fields="fields" :isModify="false" @clickNode="queryField"></resource-tree>
        </el-row>
      </el-col>
      <el-col :span="16">
        <el-form :model="queryParams" size="small" :inline="true" label-width="68px" @submit.native.prevent>
          <el-form-item label="资料名称" prop="title">
            <el-input v-model="queryParams.title" placeholder="请输入资料名称" clearable
              @keyup.enter.native="handleVideoQuery" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleVideoQuery">搜索</el-button>
          </el-form-item>
        </el-form>
        <el-table :data="resourceList" style="width: 100%">
          <el-table-column align="center" label="序号" type="index" />
          <el-table-column align="center" label="名称" prop="title" />
          <el-table-column align="center" label="类型" prop="type" />
          <el-table-column align="center" label="学时" prop="hours" />
          <el-table-column align="center" label="操作">
            <template slot-scope="{row}">
              <el-button type="text" @click="addToStudy(row)">
                添加课程
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
          :autoScroll="false" @pagination="getList" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { listField } from "@/api/oa/study/resourceField";
import { listResource, getResource, delResource, addResource, updateResource, getListBelow } from "@/api/oa/study/resource";
import { listStudy, getStudy, delStudy, addStudy, updateStudy } from "@/api/oa/study/myStudy";
import resourceTree from './resourceTree.vue';

export default {
  components: { resourceTree },
  data() {
    return {
      resourceList: [],
      pdfList: [],
      fields: [],
      fields1: [],
      videoTab: 'video',
      pdfTab: 'pdf',
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      pdfParams: {},
      total: 0,
      pdfTotal: 0,
    }
  },
  created() {
    this.getResourceList();
    this.getFieldList();
  },
  methods: {
    getList() {
      if (this.queryParams.fieldId != undefined && this.queryParams.fieldId != null)
        this.getAllListByFiedldId();
      else
        this.getResourceList();
    },
    getResourceList() {
      this.loading = true;
      listResource(this.queryParams).then(response => {
        this.resourceList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    getFieldList() {
      this.loading = true;
      listField({pageSize: 999}).then(response => {
        this.fields = [];
        this.fields1 = [];
        response.rows.forEach(element => {
          if (element.fieldId < 100)
            this.fields.push(element);
          else
            this.fields1.push(element);
        });
      });
    },
    getAllListByFiedldId() {
      this.loading = true;
      getListBelow(this.queryParams).then(response => {
        this.resourceList = response.rows;
        this.total = response.total;
      })
    },
    handleVideoQuery() {
      this.queryParams.pageNum = 1;
      this.getResourceList();
    },
    addToStudy(row) {
      this.$modal.confirm('是否添加资料名称为"' + row.title + '"到我的学习记录？').then(async res => {
        let isRead = await listStudy({ userId: this.$store.getters.userId, resourceId: row.resourceId });
        console.log(isRead);
        if (isRead.total >= 1) {
          this.$message.error('该课程已添加到我的学习记录里，不可再添加，可前往学习记录进行复习。')
          return
        }
        let obj = {
          resourceId: row.resourceId,
          userId: this.$store.getters.userId,
          lastPoint: 0,
          getHours: 0
        }
        addStudy(obj).then(res => {
          this.$message.success(res.msg);
          this.$emit('refreshList');
        });
      })
    },
    queryField(data) {
      if (data) {
        this.queryParams.fieldId = data.fieldId
        this.getAllListByFiedldId();
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.title {
  position: relative;
  font-weight: bold;
  font-size: 13px;
  padding-left: 40px;
  padding-bottom: 20px;

  .line {
    position: absolute;
    left: 22px;
    top: 3px;
    width: 5px;
    height: 20px;
    border-radius: 10px;
    background-color: #2893e5;
  }
}
.material-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 15px;
}

.material-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.material-info {
  flex: 1;
  margin-right: 15px;
}


.right-box {
  display: flex;

  .video {
    flex: 1;
    border-right: 1px solid #ececec;
    padding: 5px;
  }

  .pdf {
    flex: 1;
    padding: 5px;
  }
}
</style>