<template>
  <div class="layout" @click.prevent="isShowMenu = false, activeIndex = -1"
       @contextmenu.prevent="isShowMenu = false, activeIndex = -1">
    <div class="layout-header">
      <div class="layout-header__left"></div>
      <div class="layout-header__middle">
        <h2>{{ dashboard.title }}</h2>
      </div>
      <div class="layout-header__right">
        <span type="text" @click="isShowImg = true">素材</span>
        <span type="text" @click="back()">退出</span>
        <span type="text" @click="save">保存</span>
      </div>
    </div>
    <div class="layout-wrapper">
      <div class="layout-left">
        <h2>全部资产</h2>
        <div class="layout-left__wrapper">
          <div class="layout-left__left">
            <div @click="subIndex = 0, parentIndex = index" :class="{active: parentIndex === index}"
                 v-for="(item, index) in components" :key="index">
              <i class="iconfont iconqiyeguanli"></i>
              <span>{{ item.label }}</span>
            </div>
          </div>
          <div class="layout-left__middle">
            <div>全部</div>
            <div
                class="layout-left__middle--item"
                :class="subIndex === index ? 'active' : ''"
                @click="subIndex = index"
                v-for="(item, index) in components[parentIndex].list"
                :key="index">
              {{ item.label }}
            </div>
          </div>
          <div class="layout-left__right">
            <div class="layout-left__right--item" v-for="(item, index) in widget" @click="clone(item)" :key="index">
              <span class="tools-item-text">{{ item.label }}</span>
              <img :src="item.thumb"/>
            </div>
          </div>
        </div>
      </div>
      <div class="layout-middle">
        <div class="canvas-wrapper">
          <vue-ruler-tool
              v-model="dashboard.presetLine"
              class="vueRuler"
              :step-length="50"
              parent
              is-scale-revise
              position="relative"
              :visible.sync="dashboard.presetLineVisible">
            <div id="workbench"
                 class="workbench"
                 :style="{
                transform: workbenchTransform,
                width: bigscreenWidth + 'px',
                height: bigscreenHeight + 'px'
              }">
              <ai-dv-wrapper
                  style="height: 100%"
                  :title="$route.query.name"
                  :theme="dashboard.theme"
                  :background="dashboard.theme == 1 ? 'https://cdn.cunwuyun.cn/dvcp/dv/img/dj_bg.png' : (dashboard.backgroundImage.length ? dashboard.backgroundImage[0].url : '')">
                <div style="width: 100%; height: 100%">
                  <vue-draggable-resizable
                      :w="item.width"
                      :h="item.height"
                      :x="item.left"
                      :y="item.top"
                      :scale="heightScale"
                      :z="item.zIndex || 0"
                      :parent="true"
                      :resizable="item.type !== 'display' || item.display === 'summary2' || item.display === 'summary3'"
                      class-name-active="drag-active"
                      :class="[activeIndex === index ? 'drag-active' : '']"
                      class="draggable"
                      @contextmenu.native.stop="e => onContextmenu(e, index)"
                      @dragstop="(x, y) => onDrag(x, y,item)"
                      @resizestop="(x, y, w, h) => onResizing(x, y, w, h, item)"
                      @activated="onActivated(index)"
                      @click.native.stop="activeIndex = index"
                      v-for="(item, index) in componentList"
                      :key="index">
                    <div class="coordinate" v-show="activeIndex === index">
                      <div class="coordinate-left"></div>
                      <div class="coordinate-top"></div>
                      <div class="coordinate-label">{{ item.left }}, {{ item.top }}</div>
                    </div>
                    <ai-dv-render :data="item" :theme="dashboard.theme" :index="index" :instance="instance"/>
                  </vue-draggable-resizable>
                </div>
              </ai-dv-wrapper>
            </div>
          </vue-ruler-tool>
        </div>
      </div>
      <div class="layout-right" @click.stop>
        <!-- 选中组件面板-->
        <template v-if="activeIndex > -1">
          <div class="layout-tab">
            <span @click="configIndex = 0" :class="[configIndex === 0 ? 'layout-tab__active' : '']">参数</span>
            <span @click="configIndex = 1" :class="[configIndex === 1 ? 'layout-tab__active' : '']">数据</span>
          </div>
          <div class="layout-right__content">
            <component-config v-show="configIndex === 0" :config="currLayout" v-bind="$props"/>
            <div class="layout-right__content--wrapper" v-show="configIndex === 1"
                 v-if="currLayout.type !== 'title' && currLayout.type !== 'video'">
              <data-config
                  ref="dataConfig"
                  :instance="instance"
                  :dict="dict"
                  :options="currLayout"
                  @change="onChange('barChart')">
              </data-config>
            </div>
          </div>
        </template>
        <!--未选中组件,页面设置-->
        <div class="layout-page__setting layout-right__content" v-else>
          <h2>页面设置</h2>
          <div class="layout-config__group">
            <div class="layout-config__item">
              <label>屏幕大小</label>
              <div class="layout-config__item--right">
                <el-input-number size="mini" :min="0" v-model="bigscreenWidth" disabled
                                 controls-position="right"></el-input-number>
                <el-input-number size="mini" :min="0" v-model="bigscreenHeight" disabled
                                 controls-position="right"></el-input-number>
              </div>
            </div>
            <div class="layout-config__item layout-config__item--input">
              <label>屏幕标题</label>
              <div class="layout-config__item--right">
                <el-input v-model="dashboard.title" size="mini"></el-input>
              </div>
            </div>
            <div class="layout-config__item">
              <label>主题设置</label>
              <div class="layout-config__item--right">
                <el-select size="mini" v-model="dashboard.theme" placeholder="请选择">
                  <el-option label="默认" value="0"></el-option>
                  <el-option label="党建" value="1"></el-option>
                </el-select>
              </div>
            </div>
            <div class="layout-config__item">
              <label>背景图</label>
              <div class="layout-config__item--right layout-config__item--bg">
                <ai-uploader v-model="dashboard.backgroundImage" :maxSize="2" :limit="1" :isShowTip="false"
                             :instance="instance">
                  <div slot="trigger" class="config-item__banner" v-if="!dashboard.backgroundImage.length">
                    <img src="https://cdn.cunwuyun.cn/dvcp/dv/tpl/upload.png">
                    <span>点击上传/修改</span>
                  </div>
                </ai-uploader>
              </div>
            </div>
            <div class="layout-config__item">
              <label>重置</label>
              <div class="layout-config__item--right layout-config__item--btn">
                <div @click="dashboard.backgroundImage = []">恢复默认背景</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
        class="layout-menu"
        v-if="activeIndex > -1 && isShowMenu"
        :style="{top: menuY + 'px', left: menuX + 'px'}">
      <div class="layout-menu__item" @click="removeLayer">
        <span>删除图层</span>
      </div>
      <div class="layout-menu__item" @click="copyLayer">
        <span>复制图层</span>
      </div>
      <div class="layout-menu__item" @click="setTop">
        <span>置顶图层</span>
      </div>
      <div class="layout-menu__item" @click="setBottom">
        <span>置底图层</span>
      </div>
    </div>
    <ai-dialog :visible.sync="isShowImg" append-to-body title="素材" @onConfirm="isShowImg = false">
      <el-button type="primary" style="margin-bottom: 20px" @click="isShowAddImg = true">添加素材</el-button>
      <ai-table
          :tableData="images"
          :total="images.length"
          :colConfigs="colConfigs"
          @getList="() => {}">
        <el-table-column slot="img" prop="素材地址" label="素材" align="center">
        </el-table-column>
        <el-table-column slot="options" width="140px" fixed="right" label="操作" align="center">
          <template slot-scope="{ row, $index }">
            <div class="table-options">
              <el-button type="text" @click="removeImg($index)">删除</el-button>
              <el-button type="text" @click="copy(row.url)">复制链接</el-button>
            </div>
          </template>
        </el-table-column>
      </ai-table>
    </ai-dialog>
    <ai-dialog :visible.sync="isShowAddImg" width="580px" append-to-body title="添加素材" @closed="form.images = []" @onConfirm="onImageConfirm">
      <ai-uploader
          :instance="instance"
          v-model="form.images"
          fileType="file"
          :maxSize="100"
          url="/admin/file/add-unlimited"
          :limit="9">
      </ai-uploader>
    </ai-dialog>
  </div>
</template>

<script>

import {components} from '../config'
import VueRulerTool from 'vue-ruler-tool'
import VueDraggableResizable from 'vue-draggable-resizable'
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
import DataConfig from './form/DataConfig.vue'
import ComponentConfig from "./form/componentConfig";
import {mapActions} from "vuex"

export default {
  name: "designDashboard",
  props: {
    instance: Function,
    dict: Object,
  },
  data() {
    return {
      colConfigs: [
        {prop: 'url', label: '图片链接', showOverflowTooltip: false},
        // {slot: 'img', label: '图片'}
      ],
      form: {
        images: []
      },
      isShowAddImg: false,
      isShowImg: false,
      parentIndex: 0,
      subIndex: 0,
      sonIndex: 0,
      leftIndex: 0,
      rightIndex: 1,
      configIndex: 0,
      components,
      bigscreenWidth: 1920,
      bigscreenHeight: 1080,
      widthPaddingTools: 18,
      componentList: [],
      dashboard: {
        title: '大屏',
        width: 1920,
        height: 1080,
        theme: '0',
        backgroundColor: '',
        backgroundImage: []
      },
      menuX: 0,
      menuY: 0,
      isShowMenu: false,
      activeIndex: -1,
      middleWidth: 0,
      middleHeight: 0,
      widthScale: 0,
      heightScale: 0,
      images: [],
    }
  },

  components: {
    ComponentConfig,
    DataConfig,
    VueRulerTool,
    VueDraggableResizable,
  },

  computed: {
    workbenchTransform() {
      return `scale(${this.heightScale})`
    },

    currLayout() {
      if (this.activeIndex === -1) return {}
      return this.componentList[this.activeIndex]
    },

    widget() {
      if (this.components.length && this.components[this.parentIndex].list.length) {
        return this.components[this.parentIndex].list[this.subIndex].list
      }

      return []
    }
  },

  mounted() {
    this.getInfo(this.$route.query.did)
    this.$nextTick(() => {
      this.middleWidth = document.querySelector('.layout-wrapper').offsetWidth - 670
      this.middleHeight = document.querySelector('.layout-wrapper').offsetHeight
      this.initCanvas()
    })
  },

  methods: {
    ...mapActions(['closePage']),
    copy(link) {
      let oInput = document.createElement('input')
      oInput.value = link
      document.body.appendChild(oInput)
      oInput.select()
      document.execCommand('Copy')
      this.$message({
        message: '已复制',
        type: 'success'
      })
      oInput.remove()
    },

    removeImg(index) {
      this.images.splice(index, 1)
    },

    onImageConfirm() {
      if (!this.form.images.length) {
        return this.$message.error('请上传图片')
      }

      this.images = [
        ...this.images,
        ...this.form.images
      ]

      this.form.images = []
      this.isShowAddImg = false
    },

    setTop() {
      const maxZindex = Math.max.apply(Math, this.componentList.map(item => {
        return item.zIndex
      }))

      this.$set(this.componentList[this.activeIndex], 'zIndex', maxZindex + 1)
    },

    setBottom() {
      const item = this.componentList[this.activeIndex]
      this.componentList.splice(this.activeIndex, 1)
      this.componentList.unshift(item)
    },

    getInfo(id) {
      id && this.instance.post(`/app/appdiylargescreen/queryLargeScreenDetailById?id=${id}`).then(res => {
        if (res.code === 0) {
          const data = JSON.parse(res.data.config)
          this.componentList = data.config
          this.dashboard = data.dashboard
          this.images = data.images || []
        }
      })
    },

    back(params) {
      if (!!params) {
        const {id} = this.$route.query
        this.$router.push({hash: "#add", params, query: {id}})
      } else {
        this.$router.back()
      }
      this.closePage()
    },
    save() {
      const {did: id} = this.$route.query, {dashboard} = this
      this.instance.post(`/app/appdiylargescreen/addOrUpdateLargeScreen`, {
        id,
        config: JSON.stringify({
          config: this.componentList,
          dashboard,
          images: this.images
        }),
        status: 1,
        title: dashboard.title,
      }).then(res => {
        if (res?.code == 0) {
          this.$message.success('保存成功')
          this.back(res.data)
        }
      })
    },
    clone(e) {
      console.log(this.deepClone(e))
      this.componentList.push(this.deepClone(e))
    },

    onChange(e) {
      if (e.indexOf('Chart') > -1) {
        this.$refs[`chart${this.activeIndex}`]?.[0]?.refresh()
      }
    },

    deepClone(obj) {
      if (obj instanceof Object) {
        let newObj = {}

        if (Array.isArray(obj)) {
          let arr = []
          obj.forEach(item => {
            arr.push(this.deepClone(item))
          })
          return arr
        } else if (typeof obj == 'function') {
          newObj = obj.bind(newObj)
        } else {
          for (let key in obj) {
            let value = obj[key]
            if (typeof value == 'function') {
              newObj[key] = value.bind(newObj)
            } else if (typeof value == 'object') {
              if (Array.isArray(value)) {
                newObj[key] = []
                value.forEach(item => {
                  newObj[key].push(this.deepClone(item))
                })
              } else {
                newObj[key] = this.deepClone(value)
              }
            } else {
              newObj[key] = value
            }
          }
        }

        return newObj
      } else {
        return obj
      }
    },

    onContextmenu(e, index) {
      this.menuX = e.clientX + 10
      this.menuY = e.clientY + 10
      this.activeIndex = index
      this.isShowMenu = true

      e.preventDefault()
    },

    copyLayer() {
      const layer = this.deepClone(this.componentList[this.activeIndex])
      this.componentList.push(layer)
    },

    removeLayer() {
      this.componentList.splice(this.activeIndex, 1)
      this.activeIndex = -1
    },

    onActivated(index) {
      this.activeIndex = index
    },
    onDrag(x, y, item) {
      item.left = x
      item.top = y
    },
    onResizing(x, y, w, h, item) {
      item.left = x
      item.top = y
      item.width = w
      item.height = h
    },

    initCanvas() {
      let widthScale = (this.middleWidth - this.widthPaddingTools) / this.bigscreenWidth
      let heightScale = (this.middleHeight - this.widthPaddingTools) / this.bigscreenHeight
      this.heightScale = Math.min(widthScale, heightScale)
    }
  }
}
</script>

<style lang="scss" scoped>
.layout {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 111;
  width: 100%;
  height: 100%;
  color: #fff;
  background: #1d1e1f;

  :deep( .dv-scroll-board ) {
    height: calc(100%) !important;

    .header-item {
      color: rgba(255, 255, 255, 0.8);
      font-size: 16px;
    }

    .index {
      display: inline-block;
      width: 26px;
      height: 26px;
      line-height: 26px;
      font-size: 16px;
      background-color: #4F57FF !important;
    }
  }

  .layout-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    background: #1D1E1F;

    h2 {
      font-size: 16px;
      color: #fff;
      font-weight: 500;
    }

    .layout-header__right {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      height: 40px;
      padding: 0 20px;

      span {
        width: 60px;
        height: 50px;
        line-height: 50px;
        font-size: 14px;
        text-align: center;
        color: #fff;
        transition: all 0.3s ease;
        cursor: pointer;
        user-select: none;
        background: #191d22;

        &:hover {
          opacity: 0.8;
          background: #191d22;
        }
      }
    }
  }

  .layout-wrapper {
    display: flex;
    height: calc(100% - 50px);
  }

  .layout-page__setting {
    & > h2 {
      height: 40px;
      line-height: 40px;
      padding: 0 10px;
      font-size: 14px;
      background: #232B35;
    }

    .layout-config__item--bg {
      width: 232px;
      height: 120px;
      background: #262C33;
      border: 1px solid #030411;
      overflow: hidden;
      user-select: none;

      &:hover {
        opacity: 0.8;
      }

      :deep( .el-upload-list--picture-card), :deep(.el-upload-list__item-thumbnail), :deep( .uploader ) {
        width: 232px;
        height: 120px;
      }

      :deep( .el-upload-list--picture-card .el-upload-list__item ) {
        width: 232px;
        height: 120px;
      }

      :deep( .el-upload--picture-card ) {
        background-color: transparent;
      }

      .config-item__banner {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 232px;
        height: 120px;
        line-height: 1;

        span {
          margin-top: 4px;
          color: #CBDBE7;
          font-size: 12px;
        }

        img {
          width: 32px;
          height: 32px;
        }
      }
    }
  }

  :deep( #dv-full-screen-container ) {
    width: 100% !important;
    height: 100% !important;
  }

  ::-webkit-scrollbar {
    width: 5px;
    height: 14px;
  }

  ::-webkit-scrollbar-corner {
    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    min-height: 20px;
    background-clip: content-box;
    box-shadow: 0 0 0 5px rgba(116, 148, 170, 0.5) inset;
  }

  ::-webkit-scrollbar-track {
    box-shadow: 1px 1px 5px rgba(116, 148, 170, 0.5) inset;
  }

  .coordinate {
    div {
      position: absolute;

      &.coordinate-label {
        left: -10px;
        top: -10px;
        font-size: 20px;
        color: #09f;
        transform: translate(-100%, -100%);
      }

      &.coordinate-left {
        left: 0;
        width: 100000px;
        height: 0;
        border: 1px dashed #09f;
        transform: translateX(-100%);
      }

      &.coordinate-top {
        left: 0;
        height: 100000px;
        width: 0;
        border: 1px dashed #09f;
        transform: translateY(-100%);
      }
    }
  }

  * {
    box-sizing: border-box;
  }

  .layout-tab {
    display: flex;
    align-items: center;
    height: 50px;

    span {
      flex: 1;
      height: 100%;
      line-height: 50px;
      text-align: center;
      color: #fff;
      font-size: 15px;
      cursor: pointer;
      user-select: none;
      background: #14161A;
      border-top: 2px solid transparent;
      transition: all 0.3s ease;

      &.layout-tab__active {
        background: #1D2127;
        color: #2266FF;
        border-top: 2px solid #3383FF;
      }
    }
  }

  .layout-menu {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1100;
    width: 150px;
    user-select: none;

    .layout-menu__item {
      display: flex;
      align-items: center;
      height: 32px;
      line-height: 32px;
      padding: 0 20px;
      color: #bcc9d4;
      font-size: 14px;
      background: #2b323b;
      cursor: pointer;
      transition: all 0.3s ease;
      border-left: 2px solid transparent;

      &:hover {
        background: #1d262e;
        color: #2681ff;
        border-left: 2px solid #2681ff;
      }
    }
  }

  * {
    box-sizing: border-box;
  }

  .layout-left {
    width: 330px;
    height: 100%;
    flex-shrink: 0;
    background: #1D2127;

    & > h2 {
      height: 40px;
      line-height: 40px;
      padding: 0 10px;
      background: #232B35;
      font-size: 14px;
      color: #fff;
      box-shadow: -1px 0px 0px 0px #000000;
    }

    .layout-left__middle {
      width: 80px;
      height: 100%;
      background: #11151A;
      overflow-y: auto;

      & > div {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 50px;
        user-select: none;
        transition: all 0.3s ease;

        &.layout-left__middle--item {
          cursor: pointer;
        }

        &.active, &.layout-left__middle--item:hover {
          color: #3383FF;
          background: #0A0B0D;
        }
      }
    }

    .layout-left__right {
      flex: 1;
      padding: 0 10px;
      background: #0A0B0D;
      overflow-y: auto;

      .layout-left__right--item {
        margin-top: 10px;
        background: #212326;

        &:hover {
          opacity: 0.8;
          cursor: pointer;
        }

        img {
          width: 180px;
          height: 80px;
        }

        span {
          display: block;
          height: 24px;
          line-height: 24px;
          padding: 0 10px;
          font-size: 12px;
          background: #212326;
        }
      }
    }

    .layout-left__wrapper {
      display: flex;
      height: calc(100% - 40px);
      overflow: hidden;
    }

    .layout-left__left {
      width: 50px;
      background: #1D2126;

      div {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        height: 64px;
        font-size: 12px;
        color: #fff;
        cursor: pointer;
        transition: all 0.3s ease;
        user-select: none;
        border-left: 2px solid transparent;

        &.active, &:hover {
          color: #3383FF;
          border-left: 2px solid #3383FF;
          background: #11151A;
        }

        span {
          margin-top: 6px;
          font-size: 12px;
        }
      }
    }

    .components-item {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 48px;
      color: #bfcbd9;
      font-size: 14px;
      cursor: pointer;
      user-select: none;

      .tools-item-icon {
        color: #409eff;
        margin-right: 10px;
        width: 53px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        display: block;
        border: 1px solid #3a4659;
        background: #282a30;
      }
    }
  }

  .layout-middle {
    flex: 1;
    min-width: 0;
    background: #000;

    .canvas-wrapper {
      position: relative;
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      height: 100%;
      margin: 0;
      padding: 0;

      .vueRuler {
        width: 100%;
        padding: 18px 0 0 18px;

        :deep( .vue-ruler-ref-line-v), :deep( .vue-ruler-ref-line-h ) {
          display: none;
        }

        :deep( .vue-ruler-v ) {
          .n {
            transform: rotate(180deg);
          }
        }
      }

      .workbench {
        background-color: #1e1e1e;
        position: relative;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        margin: 0;
      }
    }

    :deep( .handle ) {
      border-radius: 100%;
      border: none;
      background-color: #09f;
      width: 14px;
      height: 14px;

      &.handle-tl, &.handle-tm {
        transform: translate(2px, 2px);
      }
    }

    .draggable {
      position: absolute;
      border: none;
      transition: none;

      &::after {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
        cursor: move;
        content: ' ';
      }

      &:hover {
        cursor: move;
        border: 1px dashed #09f;
        background-color: rgba(115, 170, 229, 0.3);
      }
    }

    .drag-active {
      cursor: move;
      border: 1px dashed #09f;
      background-color: rgba(115, 170, 229, .3);
    }
  }

  .layout-right {
    width: 340px;
    height: 100%;
    flex-shrink: 0;
    border-left: 1px solid #000000;
    background: #1D2127;

    :deep(.el-input-number ) {
      width: 106px;
      margin-right: 20px;

      &:last-child {
        margin-right: 0;
      }

      .el-input-number__decrease, .el-input-number__increase {
        background: #262C33;
        color: #fff;
        border-color: #030411;
      }

      input {
        background: #262C33;
        font-size: 12px;
        color: #fff;
        border: 1px solid #030411;
      }
    }

    :deep(.layout-right__content ) {
      height: calc(100% - 40px);
      overflow-y: overlay;
      overflow-x: hidden;

      .layout-config__group {
        padding: 10px 10px 20px;
        border-bottom: 1px solid #000000;

        & > h2 {
          margin-bottom: 20px;
          color: #FFFFFF;
          font-size: 15px;
          font-weight: 700;
        }
      }

      .layout-config__item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;

        &:last-child {
          margin-bottom: 0;
        }

        .el-select, .el-cascader {
          width: 232px;
          color: #fff;
          background: transparent;

          input {
            width: 100%;
            background: #262C33;
            font-size: 12px;
            color: #fff;
            border: 1px solid #030411;
          }
        }

        label {
          flex-shrink: 0;
          width: 60px;
          color: #FFFFFF;
          font-size: 12px;
          text-align: right;
        }

        .layout-config__item--btn {
          flex: 1;
          margin-left: 28px;

          div {
            width: 106px;
            height: 24px;
            line-height: 24px;
            text-align: center;
            font-size: 12px;
            color: #3383FF;
            background: #1D2127;
            border: 1px solid #3383FF;
            cursor: pointer;
            user-select: none;

            &:hover {
              opacity: 0.8;
            }
          }
        }

        &.layout-config__item--input input {
          width: 232px;
          background: #262C33;
          font-size: 12px;
          color: #fff;
          border: 1px solid #030411;
        }

        .layout-config__item--right {
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
      }
    }
  }
}
</style>
