<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(0)"
          >
            <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" size="small">
              <el-table-column width="280px" label="名称" show-overflow-tooltip>
                <template slot-scope="{ row }">
                  <span>
                    <svg-icon icon-class="word"></svg-icon>
                    {{ row.name }}
                  </span>
                </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" size="small">
              <el-table-column width="280px" label="名称" show-overflow-tooltip>
                <template slot-scope="{ row }">
                  <span class="name" @click="handleClickName(row)"
                    ><svg-icon
                      style="margin-right: 4px"
                      :icon-class="getIcon(row)"
                    ></svg-icon>
                    {{ row.name }}</span
                  >
                </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 { fileTypes } from "./constants";
import { openFile } from "@/utils/file";
export default {
  data() {
    return {
      createList: {
        records: [],
        pageNo: 1,
        pageSize: 10,
      },
      readList: {
        records: [],
        pageNo: 1,
        pageSize: 10,
      },
      loading: false,
    };
  },
  computed: {
    getIcon(row) {
      return (row) => {
        const { showType } = row;
        if (["doc", "docx", "word"].includes(row.showType)) {
          return "word";
        } else if (["pdf"].includes(row.showType)) {
          return "pdf-color";
        }
      };
    },
  },
  mounted() {
    this.loadNearRead();
    this.loadNearCreation();
  },
  methods: {
    // 最近阅读
    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;
    },
    /**
     * 上传文件按钮点击事件
     * @description 通过Bus通信，开启全局上传文件流程
     * @param {boolean} uploadWay 上传方式 0-文件上传 1-文件夹上传 2-粘贴图片或拖拽上传
     */
    handleUploadFile(uploadWay) {
      this.$openDialog.authWeChat({}).then((res) => {
        switch (res) {
          case "confirm": {
            this.$common.goAccount("/settings/account");
            break;
          }
          case "go": {
            this.$openBox.uploadFile({
              params: this.uploadFileParams,
              uploadWay,
              serviceEl: this,
              callType: 1, //  callType 调用此服务的方式：1 - 顶部栏，2 - 右键菜单
            });
            break;
          }
        }
      });
    },
    // 创建文件
    handleCreateFile() {
      // const _this = this;
      const formData = new FormData();
      // 目前仅支持创建文档
      formData.append("filetype", fileTypes.WORD);
      newfile(formData).then((res) => {
        // instance.confirmButtonLoading = false;
        // done();
        // _this.$parent.$parent.showDialog = false;
        const resolve = this.$router.resolve({
          path: "/write",
          query: {
            wpsUrl: res.redirect_url,
          },
        });
        window.open(resolve.href);
      });
      // if (e === undefined) {
      //   // 目前仅支持创建文档
      //   formData.append("filetype", fileTypes.WORD);
      //   newfile(formData).then((res) => {
      //     // instance.confirmButtonLoading = false;
      //     // done();
      //     // _this.$parent.$parent.showDialog = false;
      //     const resolve = this.$router.resolve({
      //       path: "/write",
      //       query: {
      //         wpsUrl: res.redirect_url,
      //       },
      //     });
      //     window.open(resolve.href);
      //   });
      // } else {
      //   formData.append("templateId", e);
      //   newfileTemplate(formData).then((res) => {
      //     instance.confirmButtonLoading = false;
      //     done();
      //     _this.$parent.$parent.showDialog = false;
      //     let resolve = _this.$router.resolve({
      //       path: "/write",
      //       query: {
      //         wpsUrl: res.redirect_url,
      //       },
      //     });
      //     window.open(resolve.href);
      //   });
      // }
    },
    // 点击表格某一行
    handleClickName(row) {
      console.log("row", row);
      openFile(row, this, localStorage);
    },
    handleToCreate() {
      this.$router.push("/mine/myCreate");
    },
    handleToRead() {
      this.$router.push("/resource/internal");
    },
  },
};
</script>
<style lang="scss" scoped>
::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>
