<template>
  <div class="fp-setting-container">
    <fp-setting-canvas v-show="!ai"/>
    <fp-setting-component v-if="ai"/>
  </div>
</template>

<script>

import {mapGetters} from 'vuex'
import FpSettingCanvas from "./FpSettingCanvas";
import FpSettingComponent from "./FpSettingComponent";

export default {
  name: "FpSettingContainer",
  components: {FpSettingComponent, FpSettingCanvas},
  computed: {
    ...mapGetters({
      'ai': 'poster/ai'
    })
  }
}
</script>

<style scoped>

.fp-setting-container {
  background-color: #fff;
  position: absolute;
  bottom: 0;
  overflow: visible;
  box-sizing: initial;
  top: 55px;
  right: 0;
  width: 276px;
}

</style>

<style>

.fp-setting-container .el-input-number--small .el-input-number__decrease, .fp-setting-container .el-input-number--small .el-input-number__increase {
    width: 18px;
}

.fp-setting-container .el-input-number.is-controls-right .el-input__inner {
  padding-left: 2px;
  padding-right: 10px;
}

</style>