<template>
  <div>
    <transition appear name="custom-classes-transition" enter-active-class="animated slideInRight speed" leave-active-class="animated slideOutRight speed">
      <div class="base-panel" v-show="show">
        <div class="ui-between header" app-border dir-bottom>
          <span>{{ show.name }}</span>
          <i class="iconfont iconedit_close" @click="cancel"></i>
        </div>
        <div class="content">
          <component @openMaterial="handleUpload" :is="component"></component>
        </div>
        <div class="ui-between footer" app-border dir-top>
          <button class="ui-button submit" @click="save">完成</button>
        </div>
      </div>
    </transition>
    <upload
      ref="uploadFile"
      :failString="'格式错误，请重新上传'"
      :limitFailStr="'过大，请重新上传'"
      :acceptType="typeObj.acceptType"
      :mediaType="typeObj.mediaType"
      :limit="typeObj.limit"
      @file-change="onFileChange"
    ></upload>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import Upload from "@/components/shared/uploads/Upload";

import { uploadFileByWork } from "@/api";

export default {
  props: ["show", "data", "editTitle"],
  components: {
    Upload,
  },
  data() {
    return {
      param: "pcIcon",
      changeArr: [],
      tempTaskList: {},
    };
  },
  computed: {
    ...mapGetters({
      info: "info",
      backupInfo: "backupInfo",
      uploadTaskList: "uploadTaskList",
    }),
    typeObj() {
      return this.g_typeObj[this.param];
    },
    component() {
      let page = this.show;
      return () => import(`./${page.id}.vue`);
    },
  },

  methods: {
    onFileChange(file) {
      let flag = this.typeObj.checkSuffix.some((iii) => {
        return file.type.indexOf(iii) > -1;
      });

      if (!flag) {
        this.$msg({
          message: `“${file.name}”格式错误，${this.typeObj.errMsg}`,
          type: "warning",
        });
        return;
      }

      this.info[this.param] = URL.createObjectURL(file);
      if (this.param == "bgm") {
        this.info[this.param] = {
          url: URL.createObjectURL(file),
          name: file.name,
        };
      }
      let p = new Promise((relove) => {
        let fn = () => {
          let pp = new Promise((rel) => {
            uploadFileByWork(
              {
                filename: `${this.param}.` + file.name.split(".")[1],
                file: file,
              },
              (data) => {
                if (this.param == "bgm") {
                  this.info[this.param].url = this.$cdn + data.data.filePath + `?_=${Math.random()}`;
                } else {
                  this.info[this.param] = this.$cdn + data.data.filePath + `?_=${Math.random()}`;
                }
                this.$store.commit("SetInfo", this.info);

                rel();
              }
            );
          });
          return pp;
        };
        relove(fn);
      });

      this.tempTaskList[this.param] = p;
    },
    handleUpload(name) {
      this.param = name;
      this.$nextTick(() => {
        this.$refs.uploadFile.click();
      });
    },
    cancel() {
      this.tempTaskList = {};
      this.$store.commit("SetInfo", this.backupInfo);
      this.$emit("close");
    },
    save() {
      if (this.param == "bgm") {
        this.uploadTaskList["bgm"] = this.tempTaskList["bgm"];
      } else {
        this.uploadTaskList["pcIcon"] = this.tempTaskList["pcIcon"];
        this.uploadTaskList["appIcon"] = this.tempTaskList["appIcon"];
      }
      this.$store.commit("SetInfo", this.info);
      this.$emit("close");
    },
  },
};
</script>
<style lang="less" scoped>
.base-panel {
  position: fixed;
  right: 0;
  top: 0;
  height: 100%;
  width: 236px;
  background: rgba(38, 39, 41, 1);
  box-shadow: 0px 0px 20px #090909;
  z-index: 10;
  display: flex;
  flex-direction: column;
  .header {
    height: 51px;
    padding: 0 10px;
    display: flex;
    .iconedit_close {
      cursor: pointer;
    }
  }
  .footer {
    padding: 15px;
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0;
    .ui-button {
      width: 100%;
    }
  }
}
</style>
