<template>
  <div class="panorama con">
    <div class="top">
      <crumbs :list="tablist" />
    </div>
    <div class="second-line">
      <div class="btn">
        <button
          @mouseover.stop="showList = true"
          @click="$refs.uploadFile.click()"
          class="ui-button submit"
        >
          <span>上传素材</span>
          <i class="iconfont icon-material_prompt hover-tips hover-tips-upload-icon">
            <div>
              <div class="remark">请上传2:1、120MB以内、jpg格式的图片</div>
            </div>
          </i>
          <upload
            ref="uploadFile"
            :failString="'格式错误，请上传2:1、120MB以内、jpg格式的全景图片'"
            :limitFailStr="'过大，请上传2:1、120MB以内、jpg格式的全景图片'"
            accept-type="image/jpeg"
            media-type="image"
            :limit="120"
            @file-change="onFileChange"
          ></upload>
        </button>
      </div>
      <div class="filter">
        <div :class="{active: isFilterFocus}" @focusin="onFilterFocus" @focusout="onFilterBlur">
          <i class="iconfont icon-works_search search"></i>
          <input
            type="text"
            v-model="searchKey"
            placeholder="搜索素材"
          />
          <i v-if="searchKey" @click="searchKey=''" class="iconfont icontoast_red del"></i>
        </div>
      </div>
    </div>
    <div class="list">
      <tableList
        @selection-change="
          (data) => {
            selectedArr = data;
          }
        "
        @request-more-data="getMoreMaterialItem"
        :canRequestMoreData="hasMoreData && !isRequestingMoreData"
        :header="tabHeader"
        :showLine="true"
        :selection="false"
        :data="list"
        class="table-list"
        ref="table-list"
      >
        <!-- 表头 -->
        <div slot-scope="{ data }" slot="header">
          {{ data.name }}
        </div>
        <!-- 内容各单元格 -->
        <!-- item：传给组件的data里各元素，对应单元格所在行（hasAuth都写成false）；data：item里各元素，对应每个单元格；sub：表头数据各元素，即单元各所属列的表头数据 -->
        <div slot-scope="{ data, item, sub }" slot="item" style="width: 100%">
          <!-- 操作型单元格 -->
          <div class="handle" v-if="sub.canclick">
            <!-- <i
              class="iconfont icon-material_operation_image hover-tips"
              @click="(showCover = true), (popupItem = item)"
            >
              <div>
                <div class="remark">编辑封面</div>
              </div>
            </i> -->

            <i
              class="iconfont icon-material_operation_editor hover-tips"
              @click="(showRename = true), (popupItem = item)"
            >
              <div>
                <div class="remark">重命名</div>
              </div>
            </i>
            <i class="iconfont icon-material_operation_delete hover-tips-warn" @click="del(item)">
              <div>
                <div class="remark">删除</div>
              </div>
            </i>
          </div>
          <!-- 图片型单元格 -->
          <div
            class="img"
            v-else-if="sub.type == 'image'"
            @click="previewImage(item)"
          >
            <img :src=" $cdn + '/' + item.sceneCode + item.icon  + `?${Math.random()}`" alt="" />
          </div>
          <!-- 文字型单元格 -->
          <span v-else>{{ data || "-" }}
          </span>
        </div>
      </tableList>
      <UploadTaskList class="upload-task-list" fileType="IMAGE" :taskList="uploadListForUI" @cancel-task="onCancelTask"></UploadTaskList>
      <div class="total-number" v-if="list.length !== 0 || hasMoreData">已加载{{list.length}}条</div>
      <div class="nodata" v-if="list.length == 0 && !hasMoreData && lastestUsedSearchKey">
        <img :src="$noresult" alt="" />
        <span>未搜索到结果~</span>
      </div>
      <div class="nodata" v-if="list.length == 0 && !hasMoreData && !lastestUsedSearchKey">
        <img :src="config.empty" alt="" />
        <span>暂无素材~</span>
        <button @click="$refs.uploadFile.click()" class="upload-btn-in-table">上传素材</button>
      </div>
    </div>

    <rename
      v-if="showRename"
      :item="popupItem"
      @rename="handleRename"
      @close="showRename = false"
    />

    <preview
      ref="image-previewer"
      :sceneCodeList="list.map(item => item.sceneCode)"
      :imageTitleList="list.map(item => item.name)"
      @click-delete="onClickDeleteInPreview"
    />
    <cover
      @panocover="handlePanoCover"
      :item="popupItem"
      v-if="showCover"
      @close="showCover = false"
    />
  </div>
</template>

<script>
import config from "@/config";
import tableList from "@/components/table/index.vue";
import crumbs from "@/components/crumbs/index.vue";
import { data } from "./pano";
import rename from "../popup/rename";
import preview from "../popup/panoImagePreviewer.vue";
import cover from "../popup/cover";
import Upload from "@/components/shared/uploads/UploadMultiple";
import { getImgWH, changeByteUnit } from "@/utils/file";
import UploadTaskList from "../components/uploadList1.1.0.vue";
import { debounce } from "@/utils/other.js"
import { mapState } from 'vuex';

import {
  getMaterialList,
  uploadMaterial,
  editMaterial,
  delMaterial,
  uploadCover,
  checkMStatus,
} from "@/api";

const TYPE = "pano";
const LONG_POLLING_INTERVAL = 5;

export default {
  name: 'Pano',
  components: {
    tableList,
    crumbs,
    rename,
    cover,
    preview,
    Upload,
    UploadTaskList,
  },
  data() {
    return {
      config,
      showRename: false,
      showCover: false,
      showList: false,
      popupItem: null,
      tabHeader: data,
      selectedArr: [],
      
      searchKey: "",
      // 因为searchKey的变化经过debounce、异步请求的延时，才会反映到数据列表的变化上，所以是否显示、显示哪种无数据提示，也要等到数据列表变化后，根据数据列表是否为空，以及引发本次变化的那个searchKey瞬时值来决定。本变量就是用来保存那个瞬时值。
      lastestUsedSearchKey: '',
      isFilterFocus: false,

      tablist: [
        {
          name: "全景图片",
          id: TYPE,
        },
      ],
      list: [],
      hasMoreData: true,
      isRequestingMoreData: false,
      uploadList: [],
    };
  },
  computed: {
    ...mapState({
      uploadListForUI: 'uploadStatusListPano',
    }),
    needLongPolling() {
      return this.uploadListForUI.some((item) => {
        return item.status === 'LOADING' && item.ifKnowProgress === false
      })
    }
  },
  mounted() {
  },
  watch: {
    needLongPolling: {
      handler: function (newVal) {
        if (!newVal) {
          this.clearinter();
        } else {
          this.clearinter();
          this.interval = setInterval(() => {
            this._checkMStatus();
          }, LONG_POLLING_INTERVAL * 1000);
        }
      },
    },
    searchKey: {
      handler: function () {
        this.refreshListDebounced()
      },
      immediate: false,
    },
  },
  methods: {
    onFilterFocus() {
      this.isFilterFocus = true
    },
    onFilterBlur() {
      this.isFilterFocus = false
    },
    refreshListDebounced: debounce(function() {
      this.list = []
      this.isRequestingMoreData = false
      this.hasMoreData = true
      this.$refs['table-list'].requestMoreData()
    }, 700, false),
    clearinter() {
      this.interval && clearInterval(this.interval);
      this.interval = null;
    },
    handleRename(newName) {
      editMaterial(
        {
          id: this.popupItem.id,
          name: newName,
        },
        () => {
          this.$msg.success("修改成功");
          const index = this.list.findIndex((eachItem) => {
            return eachItem.id === this.popupItem.id
          })
          if (index >= 0) {
            this.list[index].name = newName
          } else {
            console.error('在素材列表里没找到要重命名的那一项！');
          }
          this.showRename = false;
          this.popupItem = null;
        }
      );
    },
    handlePanoCover(data) {
      if (data.indexOf("http") > -1) {
        this.showCover = false;
        this.popupItem = "";
        return;
      }
      uploadCover({ file: data, filename: "cover.jpg" }, (res) => {
        if (res.code == 0) {
          editMaterial(
            {
              id: this.popupItem.id,
              icon: res.data,
            },
            () => {
              this.$msg.success("设置成功");

              const index = this.list.findIndex((eachItem) => {
                return eachItem.id === this.popupItem.id
              })
              if (index >= 0) {
                this.isRequestingMoreData = true
                const lastestUsedSearchKey = this.searchKey
                getMaterialList(
                  {
                    pageNum: index + 1,
                    pageSize: 1,
                    type: TYPE,
                  },
                  (data) => {
                    const newData = data.data.records.map((i) => {
                      i.fileSize = changeByteUnit(Number(i.fileSize));
                      i.createTime = i.createTime.substring(0, i.createTime.length - 3)
                      i.updateTime = i.updateTime.substring(0, i.updateTime.length - 3)
                      return i;
                    });
                    this.list.splice(index, 1, newData[0])
                    this.showCover = false;
                    this.popupItem = "";
                    this.isRequestingMoreData = false
                    this.lastestUsedSearchKey = lastestUsedSearchKey
                  },
                  () => {
                    this.isRequestingMoreData = false
                    this.lastestUsedSearchKey = lastestUsedSearchKey
                    this.showCover = false;
                    this.popupItem = "";
                  }
                )
              } else {
                console.error('在素材列表里没找到要编辑封面的那一项！');
                this.showCover = false;
                this.popupItem = "";
              }
            }
          );
        }
      });
    },
    _checkMStatus() {
      let needPollingTaskList = this.uploadListForUI.filter((item) => item.status === 'LOADING' && item.ifKnowProgress === false);
      if (needPollingTaskList.length > 0) {
        checkMStatus(
          {
            ids: needPollingTaskList.map((item) => item.backendId),
            islongpolling: true,
          },
          (res) => {
            // 1切图中，2失败，3成功
            res.data.forEach(eachRes => {
              if (eachRes.status === 2) {
                const index = this.uploadListForUI.findIndex(eachTask => eachTask.backendId === eachRes.id)
                index >= 0 && (this.uploadListForUI[index].status = 'FAIL')
                index >= 0 && (this.uploadListForUI[index].statusText = '素材切图失败')
              } else if (eachRes.status === 3) {
                const index = this.uploadListForUI.findIndex(eachTask => eachTask.backendId === eachRes.id)
                index >= 0 && (this.uploadListForUI.splice(index, 1))
                index >= 0 && this.refreshListDebounced()
              }
            });
          }
        );
      }
    },
    del(item) {
      this.$confirm({
        title: '删除素材',
        content: "确定要删除素材吗？",
        okText: '删除',
        ok: () => {
          delMaterial(item.id, () => {
            this.$msg.success("删除成功");
            this.isRequestingMoreData = true
            const lastestUsedSearchKey = this.searchKey
            getMaterialList(
              {
                pageNum: this.list.length + 1,
                pageSize: 1,
                searchKey: this.searchKey,
                type: TYPE,
              },
              (data) => {

                const index = this.list.findIndex((eachItem) => {
                  return eachItem.id === item.id
                })
                this.list.splice(index, 1)
                this.isRequestingMoreData = false
                this.lastestUsedSearchKey = lastestUsedSearchKey
              },
              () => {
                this.isRequestingMoreData = false
                this.lastestUsedSearchKey = lastestUsedSearchKey
              }
            )
          });
        },
      });
    },
    previewImage(targetItem) {
      const index = this.list.findIndex((eachItem) => {
        return eachItem.id === targetItem.id
      })
      this.$refs['image-previewer'].show(index)
    },
    onFileChange(e) {
      e.files.forEach(async (eachFile, i) => {
        if (
          eachFile.type.indexOf("jpeg") <= -1
        ) {
          setTimeout(() => {
            this.$msg({
              message: `“${eachFile.name}”格式错误，请上传2:1、120MB以内、jpg格式的全景图片`,
              type: "warning",
            });
          }, i * 100);
          return;
        }

        if (eachFile.name.substring(0, eachFile.name.lastIndexOf(".")).length > 50) {
          setTimeout(() => {
            this.$msg({
              message: `“${eachFile.name}”名称过长，请上传标题在50字以内的全景图片`,
              type: "warning",
            });
          }, i * 100);
          return;
        }

        let WHRate = null
        try {
          const {width, height} = await getImgWH(eachFile)
          WHRate = width / height
        } catch(e) {
          console.error('获取图像宽高失败：', e)
          setTimeout(() => {
            this.$msg({
              message: `“${eachFile.name}”格式错误，请上传2:1、120MB以内、jpg格式的全景图片`,
              type: "warning",
            });
          }, i * 100);
          return
        }
        if (WHRate !== 2) {
          setTimeout(() => {
            this.$msg({
              message: `“${eachFile.name}”格式错误，请上传2:1、120MB以内、jpg格式的全景图片`,
              type: "warning",
            });
          }, i * 100);
          return
        }

        let itemInUploadList = {
          title: eachFile.name,
          ifKnowProgress: true,
          progress: 0,
          status: 'LOADING',
          statusText: "正在上传素材",
          uid: `u_${this.$randomWord(true, 8, 8)}`,
          abortHandler: null,
          backendId: '',
        };

        itemInUploadList.abortHandler = uploadMaterial(
          {
            file: eachFile,
            uid: itemInUploadList.uid,
          },
          (response) => { // 上传成功
            itemInUploadList.statusText = '正在切图处理'
            itemInUploadList.ifKnowProgress = false
            itemInUploadList.backendId = response.data.id
          },
          (err) => {
            if (err.statusText === 'abort') { // 用户取消了上传任务。
              const index = this.uploadListForUI.findIndex((eachItem) => {
                return eachItem.uid === itemInUploadList.uid
              })
              this.uploadListForUI.splice(index, 1)
            } else {
              itemInUploadList.status = 'FAIL'
              itemInUploadList.statusText = '素材上传失败'
            }
          },
          (progress) => {
            itemInUploadList.progress = progress
          }
        )

        this.uploadListForUI.push(itemInUploadList);
      })
    },
    onCancelTask(uid) {
      const index = this.uploadListForUI.findIndex((eachItem) => {
        return eachItem.uid === uid
      })
      this.uploadListForUI[index].abortHandler.abort()
    },
    getMoreMaterialItem(islongpolling = null) {
      this.isRequestingMoreData = true
      const lastestUsedSearchKey = this.searchKey
      getMaterialList(
        {
          pageNum: Math.floor(this.list.length / config.PAGE_SIZE) + 1,
          pageSize: config.PAGE_SIZE,
          searchKey: this.searchKey,
          type: TYPE,
          islongpolling
        },
        (data) => {
          const newData = data.data.records.map((i) => {
            i.fileSize = changeByteUnit(Number(i.fileSize));
            i.createTime = i.createTime.substring(0, i.createTime.length - 3)
            i.updateTime = i.updateTime.substring(0, i.updateTime.length - 3)
            return i;
          });
          this.list = this.list.concat(newData)
          if (this.list.length === data.data.total) {
            this.hasMoreData = false
          }
          this.isRequestingMoreData = false
          this.lastestUsedSearchKey = lastestUsedSearchKey
        },
        () => {
          this.isRequestingMoreData = false
          this.lastestUsedSearchKey = lastestUsedSearchKey
        }
      );
    },
    onClickDeleteInPreview(index) {
      this.del(this.list[index])
    },
  },
};
</script>

<style lang="less" scoped>
</style>
<style lang="less" scoped>
@import "../style.less";
</style>