<template>
  <div class="wpsTemp">
    <div class="createEmptyBox" @click="open(undefined)">
      <i class="createEmpty el-icon-plus"></i>
      <div class="title" style="margin-top: 4px">新建空白模板</div>
    </div>

    <el-collapse accordion value="1" class="my-collapse">
      <el-collapse-item name="1" v-if="tempList.w_list.length !== 0">
        <template slot="title">
          <svg class="icon" aria-hidden="true">
            <use :xlink:href="`#icon-word`"></use>
          </svg>
          Word模板
        </template>
        <ul class="tempList">
          <li
            @click="open(item.id)"
            v-for="(item, i) in tempList.w_list"
            :key="i"
          >
            <el-image
              v-loading="item.loading"
              @load="loaded($event, i, 'w_list')"
              style="width: 100%; height: 100%"
              :src="getCover(item.name)"
              fit="fill"
            ></el-image>
            <div class="title">{{ item.name.split(".")[0] }}</div>
          </li>
        </ul>
      </el-collapse-item>

      <el-collapse-item name="2" v-if="tempList.s_list.length !== 0">
        <template slot="title">
          <svg class="icon" aria-hidden="true">
            <use :xlink:href="`#icon-excel`"></use>
          </svg>
          Excel模板
        </template>
        <ul class="tempList">
          <li
            @click="open(item.id)"
            v-for="(item, i) in tempList.s_list"
            :key="i"
          >
            <el-image
              v-loading="item.loading"
              @load="loaded($event, i, 's_list')"
              style="width: 100%; height: 100%"
              :src="getCover(item.name)"
              fit="fill"
            ></el-image>
            <div class="title">{{ item.name.split(".")[0] }}</div>
          </li>
        </ul>
      </el-collapse-item>

      <el-collapse-item name="3" v-if="tempList.p_list.length !== 0">
        <template slot="title">
          <svg class="icon" aria-hidden="true">
            <use :xlink:href="`#icon-ppt`"></use>
          </svg>
          PPT模板
        </template>
        <ul class="tempList">
          <li
            @click="open(item.id)"
            v-for="(item, i) in tempList.p_list"
            :key="i"
          >
            <el-image
              v-loading="item.loading"
              @load="loaded($event, i, 'p_list')"
              style="width: 100%; height: 100%"
              :src="getCover(item.name)"
              fit="fill"
            ></el-image>
            <div class="title">{{ item.name.split(".")[0] }}</div>
          </li>
        </ul>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import { getTemplateList, newfile, newfileTemplate } from "@/api/wps";

export default {
  name: "templete",
  props: ["type"],
  data() {
    return {
      tempList: {
        w_list: [],
        p_list: [],
        s_list: [],
      },
    };
  },
  methods: {
    open(e) {
      let _this = this;
      const h = this.$createElement;
      this.$msgbox({
        title: "消息",
        message: h("p", null, [
          h("span", null, "是否通过该模板 "),
          h("i", { style: "color: teal" }, "创建文件"),
        ]),
        showCancelButton: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        beforeClose: (action, instance, done) => {
          if (action === "confirm") {
            instance.confirmButtonLoading = true;
            instance.confirmButtonText = "执行中...";
            _this.createFile(e, instance, done);
          } else {
            done();
          }
        },
      }).then((action) => {
        this.$message({
          type: "success",
          message: "文件创建成功！",
        });
      });
    },
    createFile(e, instance, done) {
      let _this = this;
      let formData = new FormData();
      if (e === undefined) {
        formData.append("filetype", this.type);
        newfile(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);
        });
      } 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);
        });
      }
    },
    loaded(e, p, key) {
      this.tempList[key][p].loading = false;
    },
    getCover(e) {
      switch (this.$commonJs.getFileType(e)) {
        case "word":
          return "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.sunny2008.cn%2Fimg.php%3Fm.wendangwang.com%2Fpic%2F015b37fc1fa3882325070dab%2F1-989-jpg_6_0_______-717-0-0-717.jpg&refer=http%3A%2F%2Fwww.sunny2008.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1623287339&t=a744eaab33cf2be78711f169d449ca61";
        case "excel":
          return "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.wendangwang.com%2Fpic%2F5c17a4134492947793ee729bbb843ffd33702555%2F1-621-jpg_6_0_______-1167-0-0-1167.jpg&refer=http%3A%2F%2Fwww.wendangwang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1623288231&t=d5cc9bd4a76b4d61ff61ab5b6ee9d4ee";
        case "ppt":
          return "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1261770729,1884409066&fm=26&gp=0.jpg";
        case "pdf":
          return "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fzip-up201.book118.com%2Fwebuploader%2F20200203%2F4874235%2F260961580%2F4874235-5e38409ae21d9.png&refer=http%3A%2F%2Fzip-up201.book118.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1623398529&t=76969397d39226455341590059f56efa";
      }
    },
    getTemplateList() {
      let _this = this;
      templateList().then((res) => {
        if (res.code === 200) {
          res.data.w_list.map((item) => {
            item.loading = true;
          });
          res.data.p_list.map((item) => {
            item.loading = true;
          });
          res.data.s_list.map((item) => {
            item.loading = true;
          });
          _this.tempList = res.data;
        }
      });
    },
  },
  mounted() {
    this.getTemplateList();
  },
};
</script>
<style>
.my-collapse .el-collapse-item__header {
  font-size: 14px !important;
  font-weight: bold !important;
  background-color: transparent !important;
}
</style>
<style lang="scss" scoped>
.wpsTemp {
  width: 100%;
  overflow: hidden;

  & > .createEmptyBox {
    margin: 4px 0 60px 38px;
    cursor: pointer;
    width: 168px;
    height: 236px;
    background-color: #f5f7fa;

    & > .createEmpty {
      line-height: 236px;
      color: #3a8ee6;
      text-align: center;
      font-size: 46px;
      width: 168px;
      height: 236px;
    }

    & > .title {
      text-align: center;
    }
  }

  & > .createEmptyBox:hover {
    box-shadow: 0 0 0 2px #3a8ee6;
    transition: all 0.5s ease;
  }

  & > .my-collapse {
    margin-left: 38px;

    .icon {
      margin-right: 6px;
      width: 16px;
      vertical-align: middle;
      fill: currentColor;
      overflow: hidden;
    }
  }

  .tempList {
    & > li {
      margin: 4px 0 60px 38px;
      cursor: pointer;
      width: 160px;
      height: 236px;
      background-color: #f5f7fa;
      float: left;
      display: inline;

      & > .createEmpty {
        line-height: 236px;
        color: #3a8ee6;
        text-align: center;
        font-size: 46px;
        width: 168px;
        height: 236px;
      }

      & > .title {
        text-align: center;
      }
    }

    & > li:hover {
      box-shadow: 0 0 0 2px #3a8ee6;
      transition: all 0.5s ease;
    }
  }
}
</style>
