<template>
  <div>
    <div class="fp-header-container">
      <div class="fp-logo">
        <a :href="baseURL">fastposter 专业版</a>
      </div>
      <div class="fp-header-button-container">
        <el-tooltip content="新建" placement="bottom">
          <fp-button @click="create">新建</fp-button>
        </el-tooltip>
        <el-tooltip content="生成代码" placement="bottom">
          <fp-button @click="editor.showCode = true">代码</fp-button>
        </el-tooltip>
        <el-divider direction="vertical"></el-divider>
        <el-tooltip content="撤销" placement="bottom">
          <fp-button :disabled="!canUndo" @click="undo"><i class="iconfont icon-chexiao"></i></fp-button>
        </el-tooltip>
        <el-tooltip content="重做" placement="bottom">
          <fp-button :disabled="!canRedo" @click="redo"><i class="iconfont icon-zhongzuo"></i></fp-button>
        </el-tooltip>
        <el-tooltip content="保存" placement="bottom">
          <fp-button @click="save"><i class="iconfont icon-baocun"></i></fp-button>
        </el-tooltip>
        <el-tooltip content="预览" placement="bottom">
          <fp-button @click="preview"><i class="iconfont icon-yulan"></i></fp-button>
        </el-tooltip>
        <el-tooltip content="下载" placement="bottom">
          <fp-button @click="download"><i class="iconfont icon-xiazai1"></i></fp-button>
        </el-tooltip>
      </div>
      <div class="fp-header-button-container-right">
        <fp-header-user-info />
      </div>
      <div class="fp-header-button-container-right github">
        <a href="https://github.com/psoho/fast-poster" target="_blank" title="https://github.com/">
          <i class="iconfont icon-github"></i>
        </a>
        <a href="https://gitee.com/psoho/fast-poster" target="_blank" title="https://gitee.com/">
          <i class="iconfont icon-gitee" style="color: #C71D23"></i>
        </a>
      </div>
    </div>
    <div id="imgViewer">
      <img ref="previewImg" >
    </div>
  </div>
</template>

<script>
import download from 'downloadjs'
import Viewer from 'viewerjs'
import 'viewerjs/dist/viewer.css'
import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'
import FpButton from "../common/FpButton"
import FpHeaderUserInfo from "./FpHeaderUserInfo"
export default {
  name: "FpDesignHeader",
  components: { FpHeaderUserInfo, FpButton },
  comments: {
    FpButton
  },
  data() {
    return {
      baseURL: window.API_URL,
      viewer: null,
      imgUrl: ''
    }
  },
  computed: {
    ...mapState({
      p: state => state.poster.p,
      editor: state => state.editor
    }),
    ...mapGetters({
      'canUndo': 'snapshots/canUndo',
      'canRedo': 'snapshots/canRedo',
    })
  },
  mounted() {

  },
  methods: {
    ...mapActions({
      'savePoster': 'poster/savePoster',
      'createPoster': 'poster/createPoster',
      'previewPoster': 'poster/previewPoster',
      'loadPosters': 'panelposter/getItems'
    }),
    ...mapMutations({
      'undo': 'snapshots/undo',
      'redo': 'snapshots/redo',
      'clear': 'snapshots/clear',
    }),
    create() {
      this.$confirm('确定要新建海报么?', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.clear()
        this.createPoster()
      })
    },
    save() {
      this.savePoster().then(r => {
        this.$message({
          message: '保存成功',
          type: 'success',
          duration: 1000
        })
        this.loadPosters()
      })
    },
    preview() {
      const img=this.$refs.previewImg
      this.previewPoster().then(r => {
        img.src = window.URL.createObjectURL(r)
        const viewer = new Viewer(document.getElementById('imgViewer'), {
         hide(){
          viewer.destroy()
         }
        })
        viewer.show()
      })
    },
    download() {
      this.previewPoster().then(blob => {
        download(blob, this.p.name + "." + this.p.type, "", "image/png")
      })
    }
  }
}
</script>

<style scoped>
.fp-header-container {
  height: 55px;
  background-color: #fff;
  border-bottom: 1px solid #eef0f0;
  display: flex;
  align-items: center;
  padding: 0 10px;
  font-size: 14px;
  font-weight: 500;
}

.fp-logo a {
  text-decoration: none;
  font-size: 22px;
  font-weight: 400;
}

.fp-header-button-container {
  margin-left: 10px;
}

.fp-btn,
.fp-btn.is-plain {
  background-color: #fff;
}

.fp-header-button-container-right {
  position: absolute;
  right: 0;
  display: flex;
  width: 100px;
  align-items: center;
  justify-content: space-evenly;
}

.fp-header-button-container-right.github {
  position: absolute;
  right: 100px;
}

.fp-header-button-container-right .iconfont {
  font-size: 26px;
}

.fp-header-button-container-right a {
  text-decoration: none;
}
</style>