<template>
  <div class="fp-setting-panel-row">
    <div class="fp-settting-component-bar">

      <el-tooltip v-if="!ai.lock" content="锁定" placement="top">
        <button @click="ai.lock=true"><i class="iconfont icon-lock"></i></button>
      </el-tooltip>
      <el-tooltip v-if="ai.lock" content="解锁" placement="top">
        <button @click="ai.lock=false" class="locked"><i class="iconfont icon-unlock"></i></button>
      </el-tooltip>

      <!--      <el-tooltip content="图层" placement="top">-->
      <!--        <button disabled><i class="iconfont icon-tuceng"></i></button>-->
      <!--      </el-tooltip>-->


      <!--      <el-tooltip content="图层" placement="top">-->
      <!--        <el-popover placement="top" trigger="click" width="150">-->
      <!--          <el-slider v-model="value1"></el-slider>-->
      <!--          <button disabled slot="reference"><i class="iconfont icon-tuceng"></i></button>-->
      <!--        </el-popover>-->
      <!--      </el-tooltip>-->

      <el-tooltip content="复制" placement="top">
        <button :disabled="disabled" @click="copyItem"><i class="iconfont icon-copy"></i></button>
      </el-tooltip>

      <!--      <el-tooltip v-if="ai.t === 'avatar' || ai.t === 'image'" content="原始尺寸" placement="top">-->
      <!--        <button :disabled="disabled" @click="changeImgSize"><i class="iconfont icon-dengbi"></i></button>-->
      <!--      </el-tooltip>-->

      <el-tooltip content="删除" placement="top">
        <button :disabled="disabled" @click="removeItem"><i class="iconfont icon-shanchu"></i></button>
      </el-tooltip>

    </div>

    <div class="fp-settting-component-bar" style="margin-top: 2px">

      <el-tooltip content="置顶" placement="top">
        <button :disabled="disabled || ai.z >= maxZ" @click="toTop"><i class="iconfont icon-top"></i></button>
      </el-tooltip>
      <el-tooltip content="向上" placement="top">
        <button :disabled="disabled || ai.z >= maxZ" @click="toUp"><i class="iconfont icon-up"></i></button>
      </el-tooltip>
      <el-tooltip content="向下" placement="top">
        <button :disabled="disabled || ai.z <= 1" @click="toDown"><i class="iconfont icon-down"></i></button>
      </el-tooltip>
      <el-tooltip content="置底" placement="top">
        <button :disabled="disabled || ai.z <= 1" @click="toBottom"><i class="iconfont icon-bottom"></i></button>
      </el-tooltip>
    </div>

    <div v-if="ai.t === 'text'" class="fp-settting-component-bar text" style="margin-top: 2px">
      <el-tooltip content="加粗" placement="top">
        <button :disabled="disabled" @click="biusHandle('b')" :class="{'active': /b/.test(ai.bius) }"><i
            class="iconfont icon-font-bold"></i></button>
      </el-tooltip>
      <el-tooltip content="斜体" placement="top">
        <button :disabled="disabled" @click="biusHandle('i')" :class="{'active': /i/.test(ai.bius) }"><i
            class="iconfont icon-font-italic"></i></button>
      </el-tooltip>
      <el-tooltip content="下划线" placement="top">
        <button :disabled="disabled" @click="biusHandle('u')" :class="{'active': /u/.test(ai.bius) }"><i
            class="iconfont icon-font-underline"></i></button>
      </el-tooltip>
      <el-tooltip content="删除线" placement="top">
        <button :disabled="disabled" @click="biusHandle('s')" :class="{'active': /s/.test(ai.bius) }"><i
            class="iconfont icon-font-strickout"></i></button>
      </el-tooltip>
    </div>


    <div v-if="ai.t === 'text'" class="fp-settting-component-bar text" style="margin-top: 2px">
      <el-tooltip content="左对齐" placement="top">
        <button :disabled="disabled" @click="ai.a = 'left'" :class="{'active': ai.a === 'left'}"><i
            class="iconfont icon-align-left"></i></button>
      </el-tooltip>
      <el-tooltip content="居中对齐" placement="top">
        <button :disabled="disabled" @click="ai.a = 'center'" :class="{'active': ai.a === 'center'}"><i
            class="iconfont icon-align-center"></i></button>
      </el-tooltip>
      <el-tooltip content="右对齐" placement="top">
        <button :disabled="disabled" @click="ai.a = 'right'" :class="{'active': ai.a === 'right'}"><i
            class="iconfont icon-align-right"></i></button>
      </el-tooltip>
      <div style="width:32px"></div>
      <!-- <el-tooltip content="自动换行" placement="top">
        <button :disabled="disabled" @click="ai.wrap = !ai.wrap " :class="{'active': ai.wrap}"><i
            class="iconfont icon-text-wrap"></i></button>
      </el-tooltip> -->
    </div>

  </div>
</template>

<script>
import _ from 'lodash'
import { mapGetters, mapMutations } from "vuex"

export default {
  name: "FpSettingComponentBottomBar",
  data() {
    return {
      value1: 0
    }
  },
  computed: {
    ...mapGetters({
      'ai': 'poster/ai',
      'maxZ': 'poster/maxZ',
    }),
    disabled() {
      return this.ai.lock;
    }
  },
  methods: {
    ...mapMutations({
      'removeActiveItem': 'poster/removeActiveItem',
      'copyActiveItem': 'poster/copyActiveItem',
      'record': 'snapshots/record',
      'top': 'poster/top',
      'bottom': 'poster/bottom',
      'up': 'poster/up',
      'down': 'poster/down',
    }),
    removeItem() {
      let t = this.ai   // 防止只一个组件时删除发生异常
      this.removeActiveItem();
      this.record(`删除组件: ${t.name} - ${t.uuid}`)
    },
    copyItem() {
      this.copyActiveItem(this.ai);
      this.record(`复制组件: ${this.ai.name} - ${this.ai.uuid}`)
    },
    toTop() {
      this.top(this.ai)
      this.record(`置顶组件: ${this.ai.name} - ${this.ai.uuid}`)
    },
    toBottom() {
      this.bottom(this.ai)
      this.record(`置底组件: ${this.ai.name} - ${this.ai.uuid}`)
    },
    toUp() {
      this.up(this.ai)
      this.record(`上移组件: ${this.ai.name} - ${this.ai.uuid}`)
    },
    toDown() {
      this.down(this.ai)
      this.record(`下移组件: ${this.ai.name} - ${this.ai.uuid}`)
    },
    biusHandle(itemName) {
      let t = this.ai.bius.split('')

      if(itemName === 'u') {
        _.remove(t, (n) => n === 's')
      }
      if(itemName === 's') {
        _.remove(t, (n) => n === 'u')
      }

      if (_.includes(t, itemName)) {
        _.remove(t, (n) => n === itemName)
      } else {
        t.push(itemName)
      }
      t = _.uniq(t).join('')
      this.ai.bius = t;
    }
  }
}
</script>

<style scoped>

.fp-settting-component-bar {
  position: relative;
  display: flex;
  padding: 4px 10px;
  background: #f6f7f9;
  border-radius: 4px;
  border: none;
  justify-content: space-between;
}

.fp-settting-component-bar button {
  display: block;
  padding: 0;
  outline: 0;
  height: 32px;
  width: 32px;
  border: none;
  cursor: pointer;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 400;
  background-color: unset;
}

.fp-settting-component-bar button:hover {
  background-color: #00000014;
}

.fp-settting-component-bar.text button {
  font-weight: 600;
}

.fp-settting-component-bar.text button.active {
  color: #1f48d8;
}

.fp-settting-component-bar button.locked {
  background-color: #00000016;
  color: #e46472;
}
</style>