<script lang="ts" setup>
import { computed, nextTick, PropType, ref, toRefs } from 'vue'
import { ElIcon, ElMessage } from 'element-plus-secondary'
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
import { storeToRefs } from 'pinia'
import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
import Icon from '../icon-custom/src/Icon.vue'
const dvMainStore = dvMainStoreWithOut()
const { canvasCollapse } = storeToRefs(dvMainStore)
let componentNameEdit = ref(false)
let inputComponentName = ref({ id: null, name: null })
let componentNameInputAttr = ref(null)
import dvInfoSvg from '@/assets/svg/dv-info.svg'
import { useI18n } from '@/hooks/web/useI18n'
const snapshotStore = snapshotStoreWithOut()
const { t } = useI18n()
const props = defineProps({
  element: {
    required: false,
    default: {}
  },
  scrollWidth: {
    required: false,
    type: Number,
    default: 6
  },
  width: {
    required: false,
    type: Number,
    default: 200
  },
  themeInfo: {
    required: false,
    type: String,
    default: 'dark'
  },
  asidePosition: {
    required: false,
    type: String,
    default: 'left'
  },
  sideName: {
    required: false,
    type: String,
    default: 'defaultSide'
  },

  view: {
    type: Object as PropType<ChartObj>,
    required: false
  },
  slideIndex: {
    type: Number,
    required: false,
    default: 0
  },
  themes: {
    type: String as PropType<EditorTheme>,
    default: 'light'
  },
  title: String
})

const { width, asidePosition, sideName, themeInfo, view, themes, element } = toRefs(props)
const collapseChange = () => {
  canvasCollapse.value[sideName.value] = !canvasCollapse.value[sideName.value]
}
const widthShow = computed(() => `${canvasCollapse.value[sideName.value] ? 36 : width.value}px`)

const isViewTitle = computed(() => view.value && ['picture-group'].includes(view.value.type))

const slideStyle = computed(() => {
  return { '--de-scroll-width': props.scrollWidth + 'px', width: widthShow.value }
})

const closeEditComponentName = () => {
  componentNameEdit.value = false
  if (props.element.id !== inputComponentName.value.id) {
    return
  }
  if (!inputComponentName.value.name || !inputComponentName.value.name.trim()) {
    return
  }
  if (
    inputComponentName.value.name.trim() === view.value?.title ||
    inputComponentName.value.name.trim() === element.value.name
  ) {
    return
  }
  if (
    inputComponentName.value.name.trim().length > 64 ||
    inputComponentName.value.name.trim().length < 2
  ) {
    ElMessage.warning('名称字段长度2-64个字符')
    editComponentName()
    return
  }
  element.value.label = inputComponentName.value.name
  element.value.name = inputComponentName.value.name
  if (isViewTitle.value) {
    view.value.title = inputComponentName.value.name
  }
  inputComponentName.value.name = ''
}

const editComponentName = () => {
  if (element.value?.id || view.value?.id) {
    componentNameEdit.value = true
    if (isViewTitle.value) {
      inputComponentName.value.name = view.value.title
      inputComponentName.value.id = view.value.id
    } else {
      inputComponentName.value.name = element.value.name
      inputComponentName.value.id = element.value.id
    }
    nextTick(() => {
      componentNameInputAttr.value.focus()
    })
  }
}

const onComponentNameChange = () => {
  snapshotStore.recordSnapshotCache('onComponentNameChange')
}
</script>

<template>
  <div
    @keyup.stop
    @keydown.stop
    class="dv-aside"
    :class="['aside-' + asidePosition + '-' + themeInfo, 'aside-area-' + themeInfo]"
    :style="slideStyle"
  >
    <el-row align="middle" :class="'title-' + themeInfo" justify="space-between">
      <div
        :id="'attr-slide-component-name' + slideIndex"
        v-if="!canvasCollapse[sideName]"
        class="name-area-attr"
        style="max-width: 180px; text-overflow: ellipsis; white-space: nowrap"
        :style="{ width: componentNameEdit ? '300px' : 'auto' }"
        :class="{ 'component-name-dark': themeInfo === 'dark' }"
        @dblclick="editComponentName"
      >
        {{ isViewTitle ? view.title : title }}
        <el-popover
          show-arrow
          :offset="8"
          :effect="themes"
          placement="bottom"
          width="200"
          trigger="click"
        >
          <template #reference>
            <span>
              <el-icon
                v-show="element && element['id']"
                style="margin: 2px 0 0 4px; cursor: pointer"
                ><Icon><dvInfoSvg class="svg-icon" /></Icon
              ></el-icon>
            </span>
          </template>
          <div style="margin-bottom: 4px; font-size: 14px">
            {{ t('visualization.component_id') }}
          </div>
          <div style="font-size: 14px">
            {{ element['id'] }}
          </div>
        </el-popover>
      </div>
      <el-icon
        :title="title"
        :class="['custom-icon-' + themeInfo, 'collapse-icon-' + themeInfo]"
        size="20px"
        @click="collapseChange"
      >
        <Expand
          v-if="
            (canvasCollapse[sideName] && asidePosition === 'left') ||
            (!canvasCollapse[sideName] && asidePosition === 'right')
          "
        />
        <Fold v-else />
      </el-icon>
    </el-row>
    <div class="main-content" v-if="!canvasCollapse[sideName]">
      <el-scrollbar>
        <slot />
      </el-scrollbar>
    </div>
    <div class="collapse-title" v-if="canvasCollapse[sideName]">
      <span>{{ title }}</span>
    </div>
    <Teleport v-if="componentNameEdit" :to="'#attr-slide-component-name' + slideIndex">
      <input
        ref="componentNameInputAttr"
        v-model="inputComponentName.name"
        width="100%"
        :effect="themeInfo"
        @change="onComponentNameChange"
        @blur="closeEditComponentName"
      />
    </Teleport>
  </div>
</template>

<style lang="less" scoped>
.aside-area-dark {
  color: @dv-canvas-main-font-color;
  background-color: @side-area-background;
}

.aside-area-light {
  color: #ebebeb;
  background-color: #1a1a1a;
  :deep(.title) {
    border-bottom: rgba(255, 255, 255, 0.15) 1px solid !important;
  }
}
.dv-aside {
  position: relative;
  transition: 0.5s;
  .title-dark {
    font-size: 14px;
    font-weight: 500;
    border-bottom: rgba(255, 255, 255, 0.15) 1px solid;
    height: 45px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 8px 10px 8px 8px;
  }
  .title-light {
    font-size: 14px;
    font-weight: 500;
    border-bottom: rgba(255, 255, 255, 0.15) 1px solid;
    height: 45px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 8px 10px 8px 8px;
  }
  .collapse-title {
    width: 35px;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    padding: 5px;
    margin-top: 5px;
    span {
      writing-mode: vertical-rl;
      text-orientation: mixed;
    }
  }
  .main-content {
    height: calc(100% - 45px);
    overflow-y: auto;
  }
  .custom-icon {
    position: absolute;
    right: 5px;
    top: 12px;
    cursor: pointer;
  }

  :deep(.ed-scrollbar__bar) {
    width: var(--de-scroll-width);
  }

  :deep(.ed-scrollbar__thumb) {
    width: var(--de-scroll-width);
  }
}
.aside-left-dark {
  border-right: @side-outline-border-color 1px solid;
}
.aside-right-dark {
  border-left: @side-outline-border-color 1px solid;
}

.aside-left-light {
  border-right: @side-outline-border-color-light 1px solid;
}
.aside-right-light {
  border-left: @side-outline-border-color-light 1px solid;
}
.ed-collapse {
  border-top: 0;
}
:deep(.ed-collapse) {
  border-top: unset;
}
:deep(.ed-collapse-item__header.is-active) {
  border-bottom-color: rgba(31, 35, 41, 0.15);
}
:deep(.ed-collapse-item.ed-collapse--dark .ed-collapse-item__header) {
  border-color: rgba(255, 255, 255, 0.15);
  border-top: unset;
}

.collapse-icon-light {
  color: #646a73;
  cursor: pointer;
}

.collapse-icon-dark {
  color: @canvas-main-font-color-dark;
  cursor: pointer;
}

.ed-scrollbar__bar.is-vertical {
  width: var(--de-scroll-width);
}

.name-area-attr {
  position: relative;
  line-height: 24px;
  height: 24px;
  font-size: 14px !important;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  align-items: center;
  input {
    position: absolute;
    left: 0;
    width: 100%;
    outline: none;
    border: 1px solid #295acc;
    border-radius: 4px;
    padding: 0 4px;
    height: 100%;
  }
}

.component-name-dark {
  input {
    position: absolute;
    left: 0;
    width: 100%;
    color: @dv-canvas-main-font-color;
    background-color: #050e21;
    outline: none;
    border: 1px solid #295acc;
    border-radius: 4px;
    padding: 0 4px;
    height: 100%;
  }
  .ed-icon{

  }
}
</style>
<style>
.ed-popper.is-light {
    border: 1px solid #434343 !important;
    background: rgba(41, 41, 41, 1) !important;
    color: #ffffff ;
}
.ed-popper[data-popper-placement^=bottom] .ed-popper__arrow::before {
    background: rgba(41, 41, 41, 1) !important;
}
.ed-popover.ed-popper{
  background: rgba(41, 41, 41, 1) !important;
  border: 1px solid #434343 !important;
}
.ed-collapse-item.ed-collapse--light .ed-collapse-item__header{
  background-color: #1a1a1a;
  color: #fff;
}
.ed-collapse-item__header{
  border-bottom: 1px solid rgba(255,255,255,0.15) !important;
}
.ed-collapse-item__wrap{
  background-color: #292929;
}
.ed-collapse-item__wrap .ed-form--default.ed-form--label-top .ed-form-item .ed-form-item__label{
  color: #a6a6a6;
}
.ed-collapse-item__wrap .ed-radio .ed-radio__label{
  color: #fff;
}
.ed-collapse-item__wrap .ed-radio .ed-radio__input.is-checked + .ed-radio__label{
  color: #0089ff !important;
}
.ed-collapse-item__wrap .ed-input.is-disabled .ed-input__wrapper{
  background-color: #373737;
  box-shadow: none !important;
}
.ed-collapse-item__wrap .ed-input--light .ed-input-group__append .ed-select.ed-select--disabled .ed-input__wrapper {
  background: #373737 !important;
  box-shadow: none !important;
  border-color:#636363 !important;
  border-left: none !important;
}
.ed-collapse-item__wrap .ed-input--dark .ed-input-group__append .ed-select .ed-input__wrapper {
  background: #373737 !important;
  box-shadow: none !important;
  border-color:#636363 !important;
  border-left: none !important;
}
.ed-collapse-item__wrap .ed-input-group__append, .ed-input-group__prepend{
  background: #373737 !important;
}
.ed-collapse-item__wrap .ed-input-group--append .ed-input-group__append .ed-select:not(.ed-select--disabled) .ed-input .ed-input__wrapper{
  box-shadow: none  !important;
  border:1px solid #636363  !important;
  border-left: none  !important;
}
.ed-collapse-item__wrap .image-hint{
  color:#757575 !important;
}
.ed-collapse-item__wrap .avatar-uploader .ed-upload--picture-card {
  background: #373737 !important;
  border: 1px dashed #373737 !important;
}
.ed-collapse-item__wrap .indented-container .indented-item.disabled .img-area_light .ed-upload--picture-card .ed-icon {
  color: #5f5f5f !important;
}
.ed-collapse-item__wrap .avatar-uploader .ed-upload--picture-card .ed-icon{
  color: #ebebeb !important;
}
.ed-collapse-item__wrap .ed-input-number__decrease, .ed-input-number__increase{
  background-color: #434343 !important;
  color:#ffffff !important;
}
.ed-input-number__decrease, .ed-input-number__increase{
  color:#ffffff !important;
}
.ed-collapse-item__wrap .ed-input-number.is-controls-right .ed-input-number__increase{
  border-bottom: 1px solid #434343 !important;
  border-left: 1px solid #5f5f5f !important;
}
.ed-collapse-item__wrap .ed-input-number.is-controls-right .ed-input-number__decrease{
  border-left: 1px solid #5f5f5f !important;
}
.ed-collapse-item__wrap .ed-input.is-disabled .ed-select__prefix--light{
  border-color: #5f5f5f;
}
.ed-collapse-item__wrap .ed-color-picker.is-custom.is-disabled .ed-color-picker__trigger{
  border-color: #5f5f5f;
}
.ed-collapse-item__wrap .ed-select .ed-input.is-disabled:not(.ed-input--dark) .ed-input__wrapper:hover{
  box-shadow: none !important;
}
.ed-collapse-item__wrap .custom-color-setting-btn{
  border: 1px solid #5f5f5f !important;
  color: #fff !important;
}
.ed-collapse-item__wrap .ed-form-item__label{
  color: #A6A6A6 !important;
}
.ed-collapse-item__wrap .custom-color-extend-setting{
  color: #A6A6A6 !important;
}
.ed-collapse-item.ed-collapse--light .ed-collapse-item__content{
  color: #A6A6A6 ;
}
.ed-collapse-item__wrap .m-divider{
  border-color: rgba(233, 236, 241, 0.15) !important;
}
.ed-collapse-item__wrap .icon-btn{
color: #ffffff !important;
}
.ed-collapse-item__wrap .icon-btn.active{
  color: #0089ff !important;
}
.ed-collapse-item__wrap .color-button-outer{
  border-color: rgba(233, 236, 241, 0.15) !important;
}
.ed-collapse-item__wrap .text-area{
  color: #fff !important;
}
.ed-collapse-item__wrap .ed-radio__input.is-disabled.is-checked .ed-radio__inner {
  background-color: #5f5f5f;
  border: 1px solid #5f5f5f;
}
.ed-collapse-item__wrap .ed-radio__input.is-disabled.is-checked .ed-radio__inner::after {
  background-color: #212121;
}
.ed-collapse-item__wrap .ed-radio .ed-radio__input.is-disabled.is-checked + .ed-radio__label {
  color: #bbbfc4 !important;
}
.editor-light .editor-title{
  color: #ebebeb;
}
.editor-dark {
  border-left: solid 1px rgba(235, 235, 235, 0.15) !important;
}
.content-area {
  border-left: solid 1px rgba(235, 235, 235, 0.15) !important;
}
.editor-light .dataset-main {
  border-left: 1px solid rgba(235, 235, 235, 0.15) !important;
}
.collapse-title{
  color: #ebebeb !important;
}
.editor-light .ed-tabs__header {
  border-top: 1px solid  #363636 !important;
}
.de-chart-editor .tab-header .ed-tabs__nav-wrap::after{
  background-color: rgba(235, 235, 235, 0.15) !important;
}
.de-chart-editor .tab-header .ed-tabs__item{
  color: #A6A6A6 !important;
}
.de-chart-editor .drag-block-style{
  border: 1px dashed #5f5f5f !important;
  background-color: rgba(235, 235, 235, 0.05) !important;
}
.editor-light .item-span-style{
  color: #fff !important;
}
.ed-input--dark .ed-input__wrapper {
  background-color: #292929;
  box-shadow: none !important;
}
.el-loading-mask{
  background-color: rgba(33,33,33, 0.9) !important;
}
.ed-input--dark .ed-input__wrapper:hover{
  box-shadow: none !important;
}
.ed-input-number--dark:not(.is-disabled) .ed-input-number__decrease:not(.is-disabled):hover~.ed-input:not(.is-disabled) .ed-input__wrapper, .ed-input-number--dark:not(.is-disabled) .ed-input-number__increase:not(.is-disabled):hover~.ed-input:not(.is-disabled) .ed-input__wrapper{
  box-shadow: none !important;
  border: 1px solid #0089ff !important;
}
.ed-input__wrapper.is-focus {
  box-shadow: none !important;
}
.ed-input__wrapper:hover {
  box-shadow: none !important;
}
.ed-input__wrapper{
  box-shadow: none !important;
}
.ed-input-number--light:not(.is-disabled).is-controls-right .ed-input-number__decrease:not(.is-disabled):hover~.ed-input:not(.is-disabled) .ed-input__wrapper, .ed-input-number--light:not(.is-disabled).is-controls-right .ed-input-number__increase:not(.is-disabled):hover~.ed-input:not(.is-disabled) .ed-input__wrapper{
  box-shadow: none !important;
  border: 1px solid #0089ff !important;
}
.ed-input-number--light .ed-input-number__decrease.is-disabled .ed-icon, .ed-input-number--light .ed-input-number__increase.is-disabled .ed-icon {
  color: #ffffff;
}
.ed-input-number__decrease:hover, .ed-input-number__increase:hover {
  color: #0089ff !important;
}
.ed-select .ed-input.is-disabled:not(.ed-input--dark) .ed-input__wrapper:hover{
  box-shadow: none!important;;
}
.icon-checkbox:before{
  content:''
}
</style>
