<template>

  <fp-setting-wrapper>
    <template slot="header">
      <button class="active">海报设置</button>
    </template>

    <div class="fp-setting-panel-row">
      <div class="fp-setting-panel-row-cell">
        <div class="fp-setting-panel-row-cell-label">
          UUID
        </div>
      </div>
      <div>
        <el-input v-model="p.id" readonly style="display: none;"></el-input>
        <el-input v-model="p.uuid" readonly style="width: 100%"></el-input>
      </div>
    </div>

    <div class="fp-setting-panel-row">
      <div class="fp-setting-panel-row-cell">
        <div class="fp-setting-panel-row-cell-label">
          名称
        </div>
      </div>
      <div>
        <el-input v-model="p.name" style="width: 100%"></el-input>
      </div>
    </div>

    <div class="fp-setting-panel-row">
      <div class="fp-setting-panel-row-cell">
        <div class="fp-setting-panel-row-cell-label">
          格式
        </div>
      </div>
      <div>
        <el-radio v-model="p.type" label="jpeg">jpg</el-radio>
        <el-radio v-model="p.type" label="png">png</el-radio>
        <el-radio v-model="p.type" label="webp">webp</el-radio>
      </div>
      <div>
        <el-slider :disabled="p.type == 'png'" v-model="p.quality" :min="20" :max="100"></el-slider>
      </div>
    </div>


    <div class="fp-setting-panel-row">
      <div class="fp-setting-panel-row-cell">
        <div class="fp-setting-panel-row-cell-label">
          尺寸(px)
        </div>
      </div>

      <div class="fp-canvas-view">
        <div class="fp-canvas-view-item">
          <span class="fp-canvas-view-item-label">宽</span>
          <el-input-number style="width: 80px;"
                           size="small"
                           v-model="p.w"
                           controls-position="right"
                           :min="1"
                           :max="5999"/>
        </div>
        <i></i>
        <div class="fp-canvas-view-item">
          <span class="fp-canvas-view-item-label">高</span>
          <el-input-number style="width: 80px;"
                           size="small"
                           v-model="p.h"
                           controls-position="right"
                           :min="1"
                           :max="9999"/>
        </div>
      </div>
    </div>

    <div class="fp-setting-panel-row">
      <div class="fp-setting-panel-row-cell">
        <div class="fp-setting-panel-row-cell-label">
          常用尺寸
        </div>
      </div>
      <div class="">
        <el-select style="width: 100%;" size="small" v-model="canvasSize" placeholder="请选择" @change="changeCanvasSize">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </div>
    </div>

    <div class="fp-setting-panel-row">
      <el-tabs v-model="p.use" stretch>
        <el-tab-pane label="颜色" name="bgc">
          <el-tooltip content="设置背景颜色" placement="left">
            <fp-setting-color-picker :value.sync="p.bgc" show-alpha />
          </el-tooltip>
        </el-tab-pane>
        <el-tab-pane label="图片" name="bgUrl">
          <div style="text-align: center;">
            <el-input style="margin-bottom: 16px;" v-model="p.bgUrl" size="small" type="textarea" rows="4"/>
          </div>
          <div style="display: flex; justify-content: space-around;">
            <fp-file-upload @success="changeImg"/>
            <fp-button @click="resize">原始尺寸</fp-button>
            <fp-button @click="changeImg('')">清除</fp-button>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>

  </fp-setting-wrapper>

</template>

<script>
import {mapMutations, mapState} from "vuex";
import FpSettingWrapper from "./unit/FpSettingWrapper";
import FpSettingColorPicker from "../common/FpColorPicker";
import FpFileUpload from "../common/FpFileUpload";
import FpButton from "../common/FpButton";
import http from '../../../api/fastposter'

export default {
  name: "FpSettingCanvas",
  components: {FpButton, FpFileUpload, FpSettingWrapper, FpSettingColorPicker},
  data() {
    return {
      options: [
        {value: '750,1333', label: '海报 750 x 1333'},
        {value: '900,500', label: '课程封面 900 x 500'},
        {value: '900,383', label: '公众号首图 900 x 383'},
        {value: '640,1008', label: '海报 640 x 1008'},
        {value: '720,1280', label: '海报 720 x 1280'},
        {value: '1078,2280', label: '海报 1078 x 2280'},
        {value: '1242,2208', label: '海报 1242 x 2208'},
        {value: '800,800', label: '朋友圈背景 800 x 800'},
        {value: '800,2000', label: '长图海报 800 x 2000'},
        {value: '1200,1200', label: '方形海报 1200 x 1200'},
        {value: '1080,1080', label: '方形 1080 x 1080'},
      ],
      canvasSize: '',
    }
  },
  computed: {
    ...mapState({
      'p': state => state.poster.p
    })
  },
  methods: {
    ...mapMutations({
      'changePosterSize': 'poster/changePosterSize',
      'record': 'snapshots/record'
    }),
    changeCanvasSize(v) {
      let vv = v.split(',');
      let w = ~~vv[0];
      let h = ~~vv[1];
      this.changePosterSize({w, h});
    },

    resize() {
      let img = new Image()
      img.src = http.imgUrl(this.p.bgUrl)
      img.onload = () => {
        this.changePosterSize({w: img.width, h: img.height});
        this.record(`更改海报原始尺寸`)
      }
    },

    changeImg(v) {
      if(!v){
        this.p.bgUrl = v;
        this.record('清除背景图片, url=', v);
      }else{
        // 获取图片的实际大小
        let img = new Image();
        img.src = http.imgUrl(v);
        img.onload = (r) => {
          this.p.bgUrl = v;
          this.changePosterSize({w: img.width, h: img.height});
          this.record('更改背景图片, url=', v);
        }
      }
    }
  }
}
</script>

<style scoped>


</style>
