<template>
  <div
    class="right-panel"
    :class="{ closed: !isOpen, mobile: isMobileDevice }"
    :style="{ height: isMobileDevice ? '70%' : isHeaderDisabled ? '100%' : 'calc(100% - 88px)'}"
    >
    <div class="sidebar-title">
      {{ title }}
      <Close v-if="isMobileDevice" class="close-button" @click="closePanel" />
    </div>
    <div class="sidebar-tabs-header">
      <RightPanelTabs :activePanelTab="activePanelTab" />
    </div>

    <div class="sidebar-content">
      <!-- 单选框错误提示 -->
      <div v-show="isOneRadioBtn && selectedElement === 'radiobutton'" class="radio-top-tip">{{ $t('rightPanel.radioBtnTip1') }}</div>

      <!-- general -->
      <div class="general-container" :class="{ hidden: activePanelTab !== 'GENERAL' }">
        <!-- 名称 -->
        <div class="content-block">
          <h2>{{ $t('rightPanel.name') }}</h2>
          <input type="text" v-model="property.fieldName" @blur="handleProperty('fieldName')" name="form">
          <p class="error-text" v-if="!isOneCheckbox">{{ $t('rightPanel.differentNameError') }}</p>
        </div>
        <!-- 按钮文字 -->
        <div v-if="selectedElement === 'pushbutton' && toolMode === 'form'" class="content-block">
          <h2>{{ $t('rightPanel.buttonText') }}</h2>
          <input type="text" v-model="property.title" @blur="handleProperty('title')" name="form">
        </div>
        <!-- 是否可见 -->
        <div class="content-block">
          <h2>{{ $t('rightPanel.formField') }}</h2>
          <select name="field" id="field" v-model="property.isHidden">
            <option value="0">{{ $t('rightPanel.visible') }}</option>
            <option value="1">{{ $t('rightPanel.hidden') }}</option>
          </select>
        </div>
      </div>

      <!-- appearance -->
      <div class="appearance-container" :class="{ hidden: activePanelTab !== 'APPEARANCE' }">
        <!-- 背景色 -->
        <div class="content-block">
          <h2 class="wider">{{ $t('rightPanel.backgroundColor') }}</h2>
          <div class="colors-container">
            <span class="cell-container">
              <span class="cell-outer" :class="{ active: areColorsSimilar(property.backgroundColor, 'rgb(251, 189, 191)') }" @click="setActiveToolColor('backgroundColor', 'rgb(251, 189, 191)')">
                <span class="cell light-red"></span></span>
            </span>
            <span class="cell-container">
              <span class="cell-outer" :class="{ active: areColorsSimilar(property.backgroundColor, 'rgb(255, 255, 255)') }" @click="setActiveToolColor('backgroundColor', 'rgb(255, 255, 255)')">
                <span class="cell white"></span></span>
            </span>
            <span class="cell-container">
              <span class="cell-outer" :class="{ active: areColorsSimilar(property.backgroundColor, 'rgb(253, 244, 178)') || areColorsSimilar(property.backgroundColor, 'rgb(253, 244, 177)') }" @click="setActiveToolColor('backgroundColor', 'rgb(253, 244, 178)')">
                <span class="cell light-yellow"></span></span>
            </span>
            <span class="cell-container">
              <span class="cell-outer" :class="{ active: areColorsSimilar(property.backgroundColor, 'rgb(221, 233, 255)') }" @click="setActiveToolColor('backgroundColor', 'rgb(221, 233, 255)')">
                <span class="cell light-blue"></span></span>
            </span>
            <div class="color-picker">
              <div class="preview" :style="{ backgroundColor: backgroundColorPicker }"></div>
              <n-color-picker
                to=".right-panel"
                @complete="(newColor) => onColorPickerComplete(newColor, 'backgroundColor')"
                @update:value="(newColor) => onColorPickerUpdate(newColor, 'backgroundColor')"
                :value="backgroundColorPicker"
                :show-alpha="false"
              >
                <template #label><Colorful /></template>
              </n-color-picker>
            </div>
          </div>
        </div>
        <!-- 字体 -->
        <template v-if="(selectedElement === 'textfield' || selectedElement === 'pushbutton' || selectedElement === 'combobox' || selectedElement === 'listbox') && toolMode === 'form'">
          <div class="content-block">
            <h2 class="wider">{{ $t('font') }}</h2>
            <div class="colors-container">
              <span class="cell-container">
                <span class="cell-outer" :class="{ active: areColorsSimilar(property.color, 'rgb(255, 0, 0)') }" @click="setActiveToolColor('color', 'rgb(255, 0, 0)')">
                  <span class="cell red"></span></span>
              </span>
              <span class="cell-container">
                <span class="cell-outer" :class="{ active: areColorsSimilar(property.color, 'rgb(0, 0, 0)') }" @click="setActiveToolColor('color', 'rgb(0, 0, 0)')">
                  <span class="cell black"></span></span>
              </span>
              <span class="cell-container">
                <span class="cell-outer" :class="{ active: areColorsSimilar(property.color, 'rgb(45, 119, 250)') || areColorsSimilar(property.color, 'rgb(45, 119, 249)') }" @click="setActiveToolColor('color', 'rgb(45, 119, 250)')">
                  <span class="cell blue"></span></span>
              </span>
              <div class="color-picker">
                <div class="preview" :style="{ backgroundColor: fontColorPicker }"></div>
                <n-color-picker
                  to=".right-panel"
                  @complete="(newColor) => onColorPickerComplete(newColor, 'color')"
                  @update:value="(newColor) => onColorPickerUpdate(newColor, 'color')"
                  :value="fontColorPicker"
                  :show-alpha="false"
                >
                  <template #label><Colorful /></template>
                </n-color-picker>
              </div>
            </div>
          </div>
          <div class="content-block">
            <select v-model="property.fontName">
              <option value="Helvetica">Helvetica</option>
              <option value="Courier">Courier</option>
              <option value="Times">Times-Roman</option>
            </select>
          </div>
          <div class="content-block">
            <div class="text-style">
              <select v-model="property.fontStyle" class="font-family-select">
                <option value="normal">{{ $t('regular') }}</option>
                <option value="bold">{{ $t('bold') }}</option>
                <option value="italic">{{ $t('oblique') }}</option>
                <option value="boldItalic">{{ $t('boldOblique') }}</option>
              </select>
              <select v-model="property.fontSize" class="font-size-select">
                <option value="12">12</option>
                <option value="14">14</option>
                <option value="16">16</option>
                <option value="20">20</option>
                <option value="24">24</option>
                <option value="28">28</option>
              </select>
            </div>
          </div>
        </template>
      </div>

      <!-- preferences -->
      <div class="preferences-container" :class="{ hidden: activePanelTab !== 'PREFERENCE' }">
        <!-- 对齐方式 -->
        <template v-if="selectedElement === 'textfield' && toolMode === 'form'">
          <div class="content-block">
            <h2>{{ $t('rightPanel.alignment') }}</h2>
            <select name="alignment" id="alignment" v-model="property.textAlignment">
              <option value="left">{{ $t('rightPanel.left') }}</option>
              <option value="center">{{ $t('rightPanel.center') }}</option>
              <option value="right">{{ $t('rightPanel.right') }}</option>
            </select>
          </div>
          <div class="content-block">
            <h2>{{ $t('rightPanel.defaultValue') }}</h2>
            <textarea name="default-value" id="default-value" rows="3" v-model="property.contents" @change="onChangeContent"></textarea>
          </div>
          <div class="content-block">
            <div class="check-box" @click="property.isMultiLine = !property.isMultiLine">
              <div class="check" :class="{'active': property.isMultiLine}"><Checkbox v-show="property.isMultiLine" /></div>
              <span>{{ $t('rightPanel.multiLine') }}</span>
            </div>
          </div>
        </template>
        <!-- 单/复选框内样式 -->
        <template v-if="(selectedElement === 'checkbox' || selectedElement === 'radiobutton') && toolMode === 'form'">
          <div class="content-block">
            <h2>{{ $t('rightPanel.buttonStyle') }}</h2>
            <select v-model="property.checkStyle">
              <option value="0">{{ $t('rightPanel.check') }}</option>
              <option value="1">{{ $t('rightPanel.circle') }}</option>
              <option value="2">{{ $t('rightPanel.cross') }}</option>
              <option value="3">{{ $t('rightPanel.diamond') }}</option>
              <option value="4">{{ $t('rightPanel.square') }}</option>
              <option value="5">{{ $t('rightPanel.star') }}</option>
            </select>
          </div>
          <div class="content-block">
            <div class="check-box" @click="selectValue">
              <div class="check" :class="{'active': property.isChecked}"><Checkbox v-show="property.isChecked" /></div>
              <span>{{ $t('rightPanel.defaultChecked') }}</span>
            </div>
          </div>
        </template>
        <!-- 按钮跳转 -->
        <template v-if="selectedElement === 'pushbutton' && toolMode === 'form'">
          <div class="content-block">
            <h2>{{ $t('rightPanel.selectAction') }}</h2>
            <select v-model="property.actionType">
              <option v-show="property.actionType == 0" value="0">{{ $t('rightPanel.none') }}</option>
              <option value="1">{{ $t('rightPanel.goPage') }}</option>
              <option value="6">{{ $t('rightPanel.openLink') }}</option>
            </select>
          </div>
          <div v-show="property.actionType == 1" class="content-block">
            <h2>{{ $t('rightPanel.goPage') }}</h2>
            <input type="text" pattern="\d*" :placeholder="$t('rightPanel.addPage')" v-model="property.destPage"
              onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" @blur="handleProperty('destPage')" name="form">
          </div>
          <div v-show="property.actionType == 6" class="content-block">
            <h2>{{ $t('rightPanel.openLink') }}</h2>
            <input type="text" placeholder="https://" v-model="property.url" @blur="handleProperty('url')" name="form">
          </div>
        </template>
        <!-- 下拉框选项 -->
        <template v-if="(selectedElement === 'combobox' || selectedElement === 'listbox') && toolMode === 'form'">
          <div class="content-block">
            <h2>{{ $t('rightPanel.item') }}</h2>
            <div class="button-content">
              <input type="text" class="item" v-model.trim="editItem" name="form" />
              <div class="operate-button" :class="{ disabled: !editItem }" @click="addItem"><Plus /></div>
            </div>
          </div>
          <div class="content-block">
            <h2>{{ $t('rightPanel.itemList') }}</h2>
            <div class="button-content item-list">
              <ul>
                <li v-for="(item, index) in items" :key="index" :class="{'active': index === selectedItemIndex}" @click="selectItem(index, item.Value)">{{ item.Value }}</li>
              </ul>
              <div class="buttons">
                <div class="operate-button" :class="{ disabled: (!selectedItemIndex && selectedItemIndex !== 0) }" @click="removeItem">
                  <Minus />
                </div>
                <div class="operate-button" :class="{ disabled: selectedItemIndex === 0 || !selectedItemIndex }" @click="moveUp">
                  <UpArrow />
                </div>
                <div class="operate-button" :class="{ disabled: selectedItemIndex === items.length - 1 || (!selectedItemIndex && selectedItemIndex !== 0) }" @click="moveDown">
                  <DownArrow />
                </div>
              </div>
            </div>
          </div>
        </template>
      </div>

      <!-- 单选框错误提示 -->
      <div v-show="selectedElement === 'radiobutton'" class="radio-bottom-tip">{{ $t('rightPanel.radioBtnTip2') }}</div>
      <!-- 下拉框错误提示 -->
      <div v-show="selectedElement === 'combobox'" class="radio-bottom-tip">{{ $t('rightPanel.listBoxTip') }}</div>
    </div>
  </div>
</template>

<script setup>
  import { computed, reactive, watch, ref, getCurrentInstance } from 'vue'
  import { useViewerStore } from '@/stores/modules/viewer'
  import { useDocumentStore } from '@/stores/modules/document'
  import { NColorPicker } from 'naive-ui'
  import core from '@/core'
  import { areColorsSimilar } from '@/helpers/utils'
  import { isMobileDevice } from '@/helpers/device'

  const { isHeaderDisabled } = defineProps(['isHeaderDisabled'])
  const useViewer = useViewerStore()
  const useDocument = useDocumentStore()

  const instance = getCurrentInstance().appContext.app.config.globalProperties

  const title = computed(() => {
    if (toolMode.value === 'form') {
      if (selectedElement.value === 'textfield') {
        return instance.$t('header.textField')
      } else if (selectedElement.value === 'checkbox') {
        return instance.$t('header.checkbox')
      } else if (selectedElement.value === 'radiobutton') {
        return instance.$t('header.radioButton')
      } else if (selectedElement.value === 'pushbutton') {
        return instance.$t('header.button')
      } else if (selectedElement.value === 'listbox') {
        return instance.$t('header.listBox')
      } else if (selectedElement.value === 'combobox') {
        return instance.$t('header.comboButton')
      }
    }
  })

  const activePanelTab = computed(() => useViewer.getActiveElementTab('rightPanel'))
  const isOpen = computed(() => useViewer.isElementOpen('rightPanel'))
  const activeTool = computed(() => useDocument.getActiveTool)
  const totalPages = computed(() => useDocument.getTotalPages)
  const toolMode = computed(() => useViewer.getToolMode)
  const rightPanelButtonDisabled = computed(() => useViewer.getRightPanelButtonDisabled)

  let property = reactive(useDocument.propertyPanel)
  let oldDestPage = property.destPage
  let oldUrl = property.url
  const fontFamily = ref('Helvetica')
  const isOneRadioBtn = ref(false)
  const selectedElement = ref(null)
  const editItem = ref(null)
  const selectedItemIndex = ref(null)
  const items = ref([])
  const isOneCheckbox = ref(true)
  const backgroundColorPicker = ref('rgb(0, 0, 0)')
  const fontColorPicker = ref('rgb(0, 0, 0)')

  const handleProperty = (key) => {
    if (key === 'fieldName') {
      useDocument.setPropertyPanel({ 'fieldName': property.fieldName })
    }
    if (key === 'title') {
      useDocument.setPropertyPanel({ 'title': property.title })
    }
    if (key === 'destPage') {
      const destPageValue = property.destPage
      if (destPageValue !== '' && destPageValue != oldDestPage) {
        useDocument.setPropertyPanel({
          actionType: 1,
          destPage: destPageValue.toString()
        })
        oldDestPage = destPageValue
      }
    } else if (key === 'url') {
      let urlValue = property.url
      if (urlValue !== '') {
        if (!urlValue.startsWith('http://') && !urlValue.startsWith('https://')) {
          urlValue = 'https://' + urlValue
        }
        useDocument.setPropertyPanel({
          url: urlValue,
          actionType: 6
        })
        oldUrl = urlValue
      } else {
        property.url = oldUrl
      }
    }
  }

  // 打开右侧属性面板时，关闭视图面板
  watch(() => isOpen.value, (newValue, oldValue) => {
    if (newValue) {
      useViewer.closeElement('pageModePanel')
    }
  })

  watch(() => property.isHidden, (newValue, oldValue) => {
    useDocument.setPropertyPanel({'isHidden': newValue})
  })
  
  watch(() => property.backgroundColor, (newValue, oldValue) => {
    useDocument.setPropertyPanel({'backgroundColor': newValue})
  })
  
  watch(() => property.color, (newValue, oldValue) => {
    useDocument.setPropertyPanel({'color': newValue})
  })

  watch(() => property.fontName, (newValue, oldValue) => {
    useDocument.setPropertyPanel({'fontName': newValue})
  })

  watch(() => property.fontStyle, (newValue, oldValue) => {
    useDocument.setPropertyPanel({'fontStyle': newValue})
  })
  
  watch(() => property.fontSize, (newValue, oldValue) => {
    useDocument.setPropertyPanel({'fontSize': newValue})
  })
  
  watch(() => property.textAlignment, (newValue, oldValue) => {
    useDocument.setPropertyPanel({'textAlignment': newValue})
  })
  
  watch(() => property.isMultiLine, (newValue, oldValue) => {
    useDocument.setPropertyPanel({'isMultiLine': newValue})
  })
  
  watch(() => property.projectList, (newValue, oldValue) => {
    useDocument.setPropertyPanel({'projectList': newValue})
  })
  
  watch(() => property.checkStyle, (newValue, oldValue) => {
    useDocument.setPropertyPanel({'checkStyle': parseInt(newValue)})
  })
  
  watch(() => property.isChecked, (newValue, oldValue) => {
    useDocument.setPropertyPanel({'isChecked': +newValue})
  })
  
  watch(() => property.actionType, (newValue, oldValue) => {
    if ((newValue === '1' && property.destPage !== '') || (newValue === '2' && property.url !== '')) {
      useDocument.setPropertyPanel({'actionType': newValue})
    }
  })

  watch(() => property.destPage, (newValue, oldValue) => {
    const regex = /^\d+$/
    if ((newValue !== '' && (newValue > totalPages.value || newValue <= 0 || !regex.test(newValue)))) {
      property.destPage = oldValue
    }
  })

  const updateProperty = (props) => {
    editItem.value = ''
    selectedItemIndex.value = null

    if (!props) {
      selectedElement.value = null
      return
    } else {
      selectedElement.value = props.type.replace('-', '')
      if (selectedElement.value === 'listbox' || selectedElement.value === 'combobox' || selectedElement.value === 'pushbutton') {
        useViewer.setActiveElementTab('rightPanel', 'PREFERENCE')
      }
      selectedElement.value !== 'checkbox' && (isOneCheckbox.value = true)
    }

    for (const item in props) {
      for (const key in property) {
        if (item === key) {
          if (key === 'items') {
            items.value = Array.from(props[item])
          } else {
            property[key] = props[item]
          }
        }
      }
    }
  }
  core.addEvent('propertyChange', updateProperty)

  const setActiveToolColor = (key, color) => {
    property[key] = color
  }
  const selectValue = () => {
    property.isChecked = !property.isChecked
  }

  const onChangeContent = () => {
    const value = property.contents === '' ? ' ' : property.contents
    useDocument.setPropertyPanel({'contents': value})
  }

  const toggleSeparate = (boolean) => {
    isOneRadioBtn.value = boolean
  }
  core.addEvent('judgeRadioBtnIsOne', toggleSeparate)

  const judgeCheckboxIsOne = (boolean) => {
    isOneCheckbox.value = boolean
  }
  core.addEvent('judgeCheckboxIsOne', judgeCheckboxIsOne)

  const selectItem = (index, item) => {
    selectedItemIndex.value = index
    editItem.value = item
  }

  const addItem = () => {
    for (var i = 0; i < items.value.length; i++) {
      if (items.value[i] === editItem.value) {
        return
      }
    }
    if (editItem.value) {
      items.value.push({
        Value: editItem.value,
        String: editItem.value
      })
    } else return
    selectedItemIndex.value = null
    useDocument.setPropertyPanel({'item': editItem.value})
    editItem.value = ''
  }

  const removeItem = () => {
    for (var i = 0; i < items.value.length; i++) {
      if (items.value[i] === items.value[selectedItemIndex.value]) {
        items.value.splice(i, 1)
        // select属性要放前面，确保更新option时select的值是最新的
        useDocument.setPropertyPanel({
          deleteItemIndex: i,
          selected: 0
        })
        editItem.value = ''
        selectedItemIndex.value = null
      }
    }
  }

  const moveUp = () => {
    if (!selectedItemIndex.value) return
    for (var i = 0; i < items.value.length; i++) {
      if (items.value[i] === items.value[selectedItemIndex.value]) {
        items.value.splice(i - 1, 2, items.value[i], items.value[i - 1])
        useDocument.setPropertyPanel({
          moveOption: {
            fromIndex: i,
            toIndex: i - 1
          }
        })
        selectedItemIndex.value -= 1
        break
      }
    }
  }

  const moveDown = () => {
    if (selectedItemIndex.value === items.value.length - 1) return
    for (var i = 0; i < items.value.length; i++) {
      if (items.value[i] === items.value[selectedItemIndex.value] && i < items.value.length - 1) {
        items.value.splice(i, 2, items.value[i + 1], items.value[i])
        useDocument.setPropertyPanel({
          moveOption: {
            fromIndex: i,
            toIndex: i + 1
          }
        })
        selectedItemIndex.value += 1
        break
      }
    }
  }

  // 颜色选择器颜色改变事件
  const onColorPickerUpdate = (newColor, key) => {
    key === 'backgroundColor' && (backgroundColorPicker.value = newColor)
    key === 'color' && (fontColorPicker.value = newColor)
  }

  // 颜色选择器选中颜色事件
  const onColorPickerComplete = (newColor, key) => {
    if (areColorsSimilar(newColor, property[key])) return
    setActiveToolColor(key, newColor)
  }

  const closePanel = () => {
    useViewer.closeElement('rightPanel')
  }
</script>

<style lang="scss">
  .right-panel {
    position: fixed;
    right: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    height: calc(100% - 88px);
    transition: transform .3s ease-in-out;
    background-color: var(--c-side-bg);
    border-left: 1px solid var(--c-side-header-border);
    &.closed {
      transform: translateX(100%);
    }
    a {
      text-decoration: none;
    }
    .sidebar-tabs-header {
      display: flex;
      align-items: center;
      background-color: var(--c-right-side-header-bg);
      .button {
        flex: 1;
        margin: 0;
        padding: 12px 0;
        border-radius: initial;
        color: var(--c-right-side-header-text);
        &:not(.disabled):hover {
          background-color: var(--c-right-side-header-bg);
        }
        &:not(.disabled).active {
          background-color: var(--c-right-side-header-active);
          color: var(--c-white);
        }
        span {
          font-size: 12px;
          line-height: 16px;
        }
      }
      .divider {
        margin-right: 0;
      }
    }
    .sidebar-title {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 36px;
      font-size: 14px;
      line-height: 17px;
      font-weight: 700;
      color: var(--c-right-side-header-text);
    }
    .appearance-container {
      .colors-container {
        padding: 0;
        border: none;
        .cell-container {
          .cell-outer {
            border-width: 1px;
            width: 30px;
            height: 30px;
            &.active {
              .cell {
                width: 22px;
                height: 22px;
              }
            }
            .cell {
              width: 24px;
              height: 24px;
              border: 1px solid #DADBDE;
            }
            .light-red {
              background-color: #FBBDBF;
            }
            .light-yellow {
              background-color: #FDF4B2;
            }
            .light-blue {
              background-color: #DDE9FF;
            }
            .red {
              background-color: #FF0000;
            }
            .black {
              background-color: #000000;
            }
            .yellow {
              background-color: #FFEC66;
            }
            .blue {
              background-color: #2D77FA;
            }
            .white {
              background-color: #ffffff;
            }
          }
          & + .cell-container {
            margin-left: 8px;
          }
        }
      }
      .text-style {
        display: flex;
        .font-family-select {
          margin-right: 8px;
          flex: 2;
        }
        .font-size-select {
          flex: 1;
        }
      }
    }
    .sidebar-content {
      width: 100%;
      flex: 1;
      overflow: hidden;
      .hidden {
        display: none;
      }
      h2 {
        margin: 0;
        padding-top: 4px;
        padding-bottom: 8px;
        line-height: 16px;
        font-size: 14px;
        color: var(--c-side-title);
        &.wider {
          padding-top: 10px;
          padding-bottom: 14px;
        }
      }
      .content-block {
        padding-left: 16px;
        padding-right: 16px;
        margin-bottom: 12px;
        &:first-child {
          padding-top: 16px;
        }
        input,
        select,
        textarea {
          padding: 0 8px;
          width: 100%;
          background: var(--c-right-side-content-fillbox-bg);
          border: 1px solid var(--c-right-side-content-fillbox-border);
          border-radius: 1px;
          font-size: 16px;
          line-height: 20px;
          color: var(--c-text);
          font-family: 'Helvetica';
          &::placeholder {
            font-size: 14px;
            color: var(--c-text);
            opacity: 0.6;
          }
        }
        input {
          height: 24px;
        }
        select {
          height: 28px;
        }
        textarea {
          padding: 8px;
          resize: vertical;
        }
        .button-content {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .buttons {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 96px;
          }
          .item {
            height: 28px;
          }
          &.item-list {
            height: 96px;
            ul {
              padding: 0;
              width: 100%;
              height: 100%;
              list-style: none;
              background: var(--c-right-side-content-fillbox-bg);
              border: 1px solid var(--c-right-side-content-fillbox-border);
              border-radius: 1px;
              overflow: auto;
              box-sizing: content-box !important;
              li {
                padding: 4px 8px;
                font-size: 13px;
                line-height: 16px;
                color: var(--c-text);
                cursor: pointer;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                &.active {
                  background: var(--c-right-side-list-item-bg)
                }
              }
            }
          }
        }
        .operate-button {
          display: flex;
          align-items: center;
          justify-content: center;
          margin-left: 8px;
          min-width: 20px;
          height: 20px;
          border: 1px solid #757780;
          border-radius: 1px;
          cursor: pointer;
          &.disabled {
            background-color: var(--c-right-side-header-bg);
            opacity: 0.5;
          }
        }
        .error-text {
          color: #FF0000;
        }
      }
      .check-box {
        display: inline-flex;
        align-items: center;
        cursor: pointer;
        .check {
          margin-right: 4px;
          width: 14px;
          height: 14px;
          background: var(--c-right-side-content-fillbox-bg);
          border: 1px solid var(--c-right-side-content-fillbox-border);
          border-radius: 1px;
          overflow: hidden;
          &.active {
            border: none;
          }
          svg {
            vertical-align: top;
          }
        }
        span {
          font-size: 12px;
          line-height: 16px;
          color: var(--c-text);
        }
      }
    }
    .radio-top-tip {
      padding: 8px;
      background-color: var(--c-right-side-error-tip-bg);
      color: var(--c-text);
      font-size: 11px;
      line-height: 14px;
    }
    .radio-bottom-tip {
      position: absolute;
      bottom: 20px;
      margin: 0 16px;
      padding: 8px;
      background-color: var(--c-right-side-info-tip-bg);
      color: var(--c-text);
      font-size: 11px;
      line-height: 14px;
    }
    input[type="number"] {
      &::-webkit-inner-spin-button {
        -webkit-appearance: none;
      }
    }
  }

  .right-panel.mobile {
    background-color: var(--c-side-header-bg);
    border-left: none;
    bottom: 0;
    border-radius: 10px 10px 0 0;
    box-shadow: 0px 4px 32px 0px var(--c-doc-editor-popup-shadow);

    &.closed {
      transform: translateY(100%);
      box-shadow: none;
    }

    .close-button {
      position: absolute;
      right: 14px;
    }

    .standard-container {
      padding-bottom: 80px;
    }

    .radio-bottom-tip {
      bottom: 20px;
    }
  }

  @media screen and (max-width: 640px) {
    .right-panel {
      width: 100vw;
    }
  }
  @media screen and (min-width: 641px) {
    .right-panel {
      width: 260px;
      .thumbnail-view {
        padding: 0 16px;
      }
    }
  }
</style>
