<template>
  <div class="container">
    <section class="section">
      <div class="title">快速访问</div>
      <el-row :gutter="20">
        <el-col :xl="8" :lg="8" :md="8" :sm="8" :xs="24">
          <el-card
            shadow="never"
            class="cursor-pointer"
            @click.native="handleCreateFile"
          >
            <div class="content">
              <svg-icon icon-class="add-border"></svg-icon>
              <div class="right">
                <div class="text">新建文档</div>
                <div class="subtitle">从空文本或模板起草</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xl="8" :lg="8" :md="8" :sm="8" :xs="24">
          <el-card
            shadow="never"
            class="cursor-pointer"
            @click.native="handleUploadFile"
          >
            <div class="content">
              <svg-icon icon-class="word-border"></svg-icon>
              <div class="right">
                <div class="text">上传word</div>
                <div class="subtitle">从本地上传文档</div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </section>

    <section class="section">
      <el-row :gutter="20">
        <el-col :xl="12" :lg="12" :md="12" :sm="12" :xs="24">
          <div class="title">最近编辑</div>
          <el-card shadow="never">
            <template #header>
              <span class="card-more" @click="handleToCreate"> 更多 </span>
            </template>
            <el-table :data="createList.records">
              <el-table-column width="280px" label="名称" show-overflow-tooltip>
                <template slot-scope="{ row }">
                  <el-link @click="handleClickName(row)">
                    <svg-icon :icon-class="getIcon(row)"></svg-icon>
                    {{ row.name }}
                  </el-link>
                </template>
              </el-table-column>
              <el-table-column label="作者" prop="creatorName" />
              <el-table-column label="修改时间" prop="modifyTime" />
            </el-table>
          </el-card>
        </el-col>
        <el-col :xl="12" :lg="12" :md="12" :sm="12" :xs="24">
          <div class="title">最近浏览</div>
          <el-card shadow="never">
            <template #header>
              <span class="card-more" @click="handleToRead"> 更多 </span>
            </template>
            <el-table :data="readList.records">
              <el-table-column width="280px" label="名称" show-overflow-tooltip>
                <template slot-scope="{ row }">
                  <el-link class="name" @click="handleClickName(row)">
                    <svg-icon
                      style="margin-right: 4px"
                      :icon-class="getIcon(row)"
                    ></svg-icon>

                    {{ row.name }}</el-link
                  >
                </template>
              </el-table-column>
              <el-table-column label="作者" prop="author" />
              <el-table-column label="创建时间" prop="createTime" />
            </el-table>
          </el-card>
        </el-col>
      </el-row>
    </section>
  </div>
</template>
<script>
import { getNearRead, getNearCreation } from "@/api/home";
import { newfile, newfileTemplate } from "@/api/wps";
import { openFile } from "@/utils/file";

export default {
  data() {
    return {
      createList: {
        records: [],
        pageNo: 1,
        pageSize: 10,
      },
      readList: {
        records: [],
        pageNo: 1,
        pageSize: 10,
      },
      loading: false,
    };
  },
  mounted() {
    this.loadNearRead();
    this.loadNearCreation();
  },
  methods: {
    getIcon(row) {
      const { suffix } = row;
      const extendName = suffix;
      if (["doc", "docx", "word"].includes(extendName)) {
        return "word";
      } else if (["pdf"].includes(extendName)) {
        return "pdf-color";
      }
    },
    // 最近阅读
    async loadNearRead() {
      const { pageNo, pageSize } = this.readList;
      const params = {
        pageNo,
        pageSize,
      };
      let res = await getNearRead(params);
      this.readList = res.data;
    },

    // 最近创作
    async loadNearCreation() {
      const { pageNo, pageSize } = this.createList;
      const params = {
        pageNo,
        pageSize,
      };
      let res = await getNearCreation(params);
      this.createList = res.data;
    },
    //  上传文件
    handleUploadFile() {
      const uploadFileParams = { filePath: "/我的创作", isDir: 0 }; // 上传文件组件参数
      this.$openBox.uploadFile({
        params: uploadFileParams,
        uploadWay: 0, //0-文件上传 1-文件夹上传 2-粘贴图片或拖拽上传
        serviceEl: this,
        callType: 2, //  callType 调用此服务的方式：1 - 顶部栏，2 - 右键菜单
      });
    },
    // 创建文件
    handleCreateFile() {
      this.$openDialog
        .addFileByTemplate({
          extendName: "docx",
          isShowTemplateRatio: true, //是否要显示选择模板
          filePath: "/我的创作",
        })
        .then((res) => {
          this.$router.push("/mine/myCreate");
        });
    },
    // 点击表格某一行
    handleClickName(row) {
      console.log("row", row);
      this.$file.handleFileNameClickNew(row, this.$fileKeys.zysHome);
    },
    handleToCreate() {
      this.$router.push("/mine/myCreate");
    },
    handleToRead() {
      this.$router.push("/resource/internal");
    },
  },
};
</script>
<style lang="scss" scoped>
.cursor-pointer {
  cursor: pointer;
}
::v-deep .el-card__body {
  .el-upload {
    width: 100%;
    justify-content: flex-start;
  }
}
::v-deep .el-card__header {
  padding: 10px 20px;
}

.container {
  padding: 20px;
}
.section {
  margin-bottom: 32px;
  .title {
    font-weight: bold;
    margin-bottom: 16px;
  }
  .card-more {
    font-size: 14px;
    color: $theme-blue;
    display: flex;
    justify-content: flex-end;
    cursor: pointer;
  }
  .name {
    cursor: pointer;
    &:hover {
      color: $theme-blue;
    }
  }
  .content {
    display: flex;
    .svg-icon {
      font-size: 54px;
      color: $theme-blue;
    }
    .right {
      margin-left: 4px;
      .text {
        font-weight: bold;
        margin-bottom: 8px;
        font-size: 16px;
      }
      .subtitle {
        color: #999;
        font-size: 14px;
      }
    }
  }
}
</style>
