<template>
  <fp-setting-wrapper>
    <template slot="header">
      <button class="active">{{ title }}</button>
    </template>

    <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;" :disabled="ai.lock" size="small" v-model="ai.w" @change="changeW()"
            controls-position="right" :min="1" />
        </div>
        <i></i>
        <div class="fp-canvas-view-item1">
          <span title="锁定比例" class="iconfont icon-lock" style="cursor: pointer;"
            :style="{ 'color': !ai.aspectRatio ? 'unset' : '#f00' }" @click="changeAspectRatio"></span>
        </div>
        <div class="fp-canvas-view-item">
          <span class="fp-canvas-view-item-label">高</span>
          <el-input-number style="width: 80px;" :disabled="ai.lock" size="small" v-model="ai.h" @change="changeH()"
            controls-position="right" :min="1" />
        </div>
      </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">x</span>
          <el-input-number style="width: 80px;" :disabled="ai.lock" size="small" v-model="ai.x"
            @change="changeHandler('move')" controls-position="right" />
        </div>
        <i></i>
        <div class="fp-canvas-view-item1">
          <span class="iconfont icon-lock" style="cursor: pointer; display: none;"
            :style="{ 'color': !ai.aspectRatio ? 'unset' : '#f00' }" @click="changeAspectRatio"></span>
        </div>
        <div class="fp-canvas-view-item">
          <span class="fp-canvas-view-item-label">y</span>
          <el-input-number style="width: 80px;" :disabled="ai.lock" size="small" v-model="ai.y"
            @change="changeHandler('move')" controls-position="right" />
        </div>
      </div>
    </div>


    <div class="fp-setting-panel-row" style="margin-bottom: 8px;">
      <div class="fp-setting-panel-row-cell">
        <div class="fp-setting-panel-row-cell-label">
          旋转(角度)
        </div>
      </div>

      <div>
        <el-slider style="width: 76%; display: inline-block; position: relative; vertical-align: middle;" size="small"
          :disabled="ai.lock" v-model="ai.angle" :min="0" :max="360" @change="changeHandler('rotate')"></el-slider>
        <el-input-number style="width: 23%; padding-left: 4px; display: inline-block;" :disabled="ai.lock" size="small"
          v-model="ai.angle" controls-position="right" :min="0" @change="changeHandler('rotate')" :max="360" />
      </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>
      <el-form ref="form" :model="ai" label-width="40px" size="small">
        <el-form-item label="名称">
          <el-input v-model="ai.vd"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="ai.name"></el-input>
        </el-form-item>
        <el-form-item label="内容">
          <el-input v-model="ai.v" type="textarea" rows="2" @input="changeDragHeight"></el-input>
        </el-form-item>
      </el-form>
    </div>

    <div v-if="ai.t === 'text'" class="fp-setting-panel-row">
      <div class="fp-setting-panel-row-cell">
        <div class="fp-setting-panel-row-cell-label">
          字体
        </div>
      </div>
      <div>
        <el-select class="fp-select-font" v-model="ai.fn" placeholder="请选择" style="width: 76%;"
          :style="{ 'font-family': `'${ai.fn}'` }">
          <el-option v-for="item in fonts" :key="item.id" :label="item.name" :value="item.code">
            <span style="float: left" :style="{ 'font-family': `'${item.code}'` }">{{ item.name }}</span>
          </el-option>
        </el-select>
        <el-input-number style="width: 23%; padding-left: 4px;" :precision="0" :disabled="ai.lock" size="small"
          v-model="ai.s" controls-position="right" :min="4" :max="800" @change="changeDragHeight" />
      </div>
    </div>

    <div v-if="ai.t === 'text'" class="fp-setting-panel-row flex">
      <div>
        <div class="fp-setting-panel-row-cell">
          <div class="fp-setting-panel-row-cell-label">
            字间距
          </div>
        </div>
        <div>
          <el-input-number style="width: 80px;" :precision="0" :disabled="ai.lock" size="small" v-model="ai.ls"
            controls-position="right" :min="-100" :max="100" />
        </div>
      </div>
      <div class="ml10">
        <div class="fp-setting-panel-row-cell">
          <div class="fp-setting-panel-row-cell-label">
            行间距
          </div>
        </div>
        <div>
          <el-input-number style="width: 80px;" :disabled="ai.lock" size="small" :precision="0" v-model="ai.vs"
            controls-position="right" :min="-100" :max="100" @change="changeDragHeight" />
        </div>
      </div>
    </div>

    <div v-if="ai.t !== 'image'" class="fp-setting-panel-row">
      <div class="fp-setting-panel-row-cell">
        <div class="fp-setting-panel-row-cell-label">
          {{ ai.t === 'avatar' ? '边框' : '' }}颜色  {{ ai.c }}
        </div>
      </div>
      <div style="display: flex; justify-content: space-around;">
        <el-tooltip content="设置颜色" placement="top">
        
          <fp-setting-color-picker style="width: 48%" :value.sync="ai.c" @change="changeC" />
        </el-tooltip>
        <el-tooltip v-if="ai.t === 'qrcode' || ai.t === 'sqrcode' || ai.t === 'text'" content="设置背景颜色" placement="top">
          <fp-setting-color-picker style="width: 48%" :value.sync="ai.bgc" />
        </el-tooltip>
      </div>
    </div>

    <div v-if="ai.t === 'avatar' || ai.t === 'image'" class="fp-setting-panel-row">
      <div class="fp-setting-panel-row-cell">
        <div class="fp-setting-panel-row-cell-label">
          图片
        </div>
      </div>
      <div style="display: flex; justify-content: space-around;">
        <fp-file-upload @success="changeImg" @before-upload="onBeforeUpload" />
        <fp-button :disabled="ai.aspectRatio" @click="changeImgSize">原始尺寸</fp-button>
        <fp-button @click="changeImg('')">清除</fp-button>
      </div>
    </div>

    <fp-setting-component-bottom-bar />

    <!--    <pre>-->
    <!--      {{ ai }}-->
    <!--    </pre>-->

  </fp-setting-wrapper>
</template>

<script>
import DivMixin from '@/mixins/DivMixin.js'
import { mapGetters, mapMutations } from "vuex"
import http from '../../../api/fastposter'
import FpButton from "../common/FpButton"
import FpSettingColorPicker from "../common/FpColorPicker"
import FpFileUpload from "../common/FpFileUpload"
import { EVENT_KEYS } from './../drag/eventBus'
import FpSettingComponentBottomBar from "./unit/FpSettingComponentBottomBar"
import FpSettingWrapper from "./unit/FpSettingWrapper"
let typeMaps = {
  'text': '文字',
  'image': '图片',
  'avatar': '头像',
  'qrcode': '二维码',
}

export default {
  name: "FpSettingComponent",
  components: { FpButton, FpFileUpload, FpSettingColorPicker, FpSettingComponentBottomBar, FpSettingWrapper },
  mixins:[DivMixin],
  data() {
    return {
      scaleWH: 1,
    }
  },
  computed: {
    ...mapGetters({
      'w': 'poster/w',
      'h': 'poster/h',
      'ai': 'poster/ai',
      'fonts': 'editor/fonts',
      'scale': 'poster/scale'
    }),
    title() {
      let t = typeMaps[this.ai.t]
      return typeof t !== 'undefined' ? t : this.ai.name
    }
  },
  mounted() {
    if (this.h) {
      this.scaleWH = this.ai.w / this.ai.h
    }
    
  },
  methods: {
    ...mapMutations({
      'record': 'snapshots/record',
    }),
    changeImg(url) {
      let t = this.ai
      this.ai.v = url
      this.record(`更改图片: ${t.name}, url=${url}`)
    },
    onBeforeUpload(file) {
      let that = this
      var reader = new FileReader()
      reader.onload = function(e) {
        //加载图片获取图片真实宽度和高度
        var image = new Image()
        image.onload = function() {
          that.ai.w = Math.round(image.width * that.scale)
          that.ai.h = Math.round(image.height * that.scale)
          that.ai.aspectRatio = true
        }
        image.src = e.target.result
      }
      reader.readAsDataURL(file)
    },
    /**
     * 
     * @param {*} type  wh:宽高 move:XY rotate:°
     */
    changeHandler(type) {
      type && this.$EventBus.$emit(EVENT_KEYS.UPDATE_DRAG, type)
      type && this.$EventBus.$emit(EVENT_KEYS.UPDATE_RECORD, type)
    },
    changeC(val) {
      if (!val) {
        this.ai.c = '#000000'
        // 颜色不可为 空
      }
    },
    changeW() {
      if (this.ai.aspectRatio) {
        this.ai.h = Math.round(this.ai.w / this.scaleWH)
      }
      this.changeHandler('wh')
    },
    changeH() {
      if (this.ai.aspectRatio) {
        this.ai.w = Math.round(this.ai.h * this.scaleWH)
      }
      this.changeHandler('wh')
    },
    changeAspectRatio() {
      this.ai.aspectRatio = !this.ai.aspectRatio
      if (this.h) {
        this.scaleWH = this.ai.w / this.ai.h
      }
    },
    changeDragHeight() {
      if (this.ai.t === 'text') {
        this.ai.h = this.getDivHeight(this.ai.s,this.ai.vs ,this.ai.w, this.ai.v)
      }
    },
    changeImgSize() {
      let t = this.ai
      let img = new Image()
      let that = this
      img.src = http.imgUrl(t.v)
      img.onload = () => {
        t.w = img.width
        setTimeout(() => {
          t.h = img.height
          that.record(`更改图片原始尺寸: ${t.name}`)
        }, 10)
      }
    }
  }
}
</script>

<style scoped></style>

<style>
.fp-setting-container .el-textarea__inner {
  display: block;
  resize: vertical;
  padding: 5px 6px;
}

.fp-setting-container .el-input__inner {
  padding: 5px 6px;
}

.fp-setting-container .el-form-item__label {
  font-size: 13px;
}

.fp-setting-container .el-form-item--small.el-form-item {
  margin-bottom: 10px;
}

.fp-select-font .el-input__inner {
  font-family: unset;
}

.flex {
  display: flex;
}

.ml10 {
  margin-left: 10px;
}
</style>
