<template>
  <el-row class="custom-row">
    <el-row class="custom-row-inner">
      <el-space wrap>
        <template v-for="styleOptionKey in styleOptionKeyArrayPre">
          <el-tooltip
            :key="styleOptionKey.value"
            v-if="styleForm[styleOptionKey.value] !== undefined"
            effect="dark"
            placement="bottom"
          >
            <template #content> {{ styleOptionKey.label }} </template>
            <el-form-item class="form-item no-margin-bottom" :class="'form-item-' + themes">
              <el-select
                :style="{ width: styleOptionKey.width }"
                :effect="themes"
                v-model="styleForm[styleOptionKey.value]"
                size="small"
                @change="
                  changeStyle({ key: styleOptionKey.value, value: styleForm[styleOptionKey.value] })
                "
              >
                <template #prefix>
                  <el-icon :class="{ 'dark-icon': themes === 'dark' }">
                    <Icon><component :is="styleOptionKey.icon"></component></Icon>
                  </el-icon>
                </template>
                <el-option
                  class="custom-style-option"
                  v-for="option in styleOptionKey.customOption"
                  :key="option.value"
                  :label="option.name"
                  :value="option.value"
                />
              </el-select>
            </el-form-item>
          </el-tooltip>
        </template>

        <template v-for="styleColorKey in styleColorKeyArray">
          <el-tooltip
            :key="styleColorKey.value"
            v-if="styleForm[styleColorKey.value] !== undefined"
            effect="dark"
            placement="bottom"
          >
            <template #content> {{ styleColorKey.label }} </template>
            <el-form-item
              :effect="themes"
              class="form-item no-margin-bottom"
              :class="'form-item-' + themes"
            >
              <el-color-picker
                :title="t('chart.text_color')"
                v-model="styleForm[styleColorKey.value]"
                class="color-picker-style"
                :prefix-icon="styleColorKey.icon"
                :triggerWidth="styleColorKey.width"
                is-custom
                show-alpha
                :predefine="state.predefineColors"
                @change="
                  changeStyle({ key: styleColorKey.value, value: styleForm[styleColorKey.value] })
                "
              >
              </el-color-picker>
            </el-form-item>
          </el-tooltip>
        </template>

        <template v-for="styleOptionMountedKey in styleOptionMountedKeyArray">
          <el-tooltip
            :key="styleOptionMountedKey.value"
            v-if="styleForm[styleOptionMountedKey.value] !== undefined"
            effect="dark"
            placement="bottom"
          >
            <template #content> {{ styleOptionMountedKey.label }} </template>
            <el-form-item
              :effect="themes"
              class="form-item no-margin-bottom"
              :class="'form-item-' + themes"
            >
              <el-select
                :style="{ width: styleOptionMountedKey.width }"
                :effect="themes"
                v-model="styleMounted[styleOptionMountedKey.value]"
                size="small"
                @change="sizeChange(styleOptionMountedKey.value)"
              >
                <template #prefix>
                  <el-icon :class="{ 'dark-icon': themes === 'dark' }">
                    <Icon><component :is="styleOptionMountedKey.icon"></component></Icon>
                  </el-icon>
                </template>
                <el-option
                  class="custom-style-option"
                  v-for="option in styleOptionMountedKey.customOption"
                  :key="option.value"
                  :label="option.name"
                  :value="option.value"
                />
              </el-select>
            </el-form-item>
          </el-tooltip>
        </template>

        <template v-for="styleOptionKey in styleOptionKeyArray">
          <el-tooltip
            :key="styleOptionKey.value"
            v-if="styleForm[styleOptionKey.value] !== undefined"
            effect="dark"
            placement="bottom"
          >
            <template #content> {{ styleOptionKey.label }} </template>
            <el-form-item class="form-item no-margin-bottom" :class="'form-item-' + themes">
              <el-select
                :style="{ width: styleOptionKey.width }"
                :effect="themes"
                v-model="styleForm[styleOptionKey.value]"
                size="small"
                @change="changeStylePre(styleOptionKey.value)"
              >
                <template #prefix>
                  <el-icon :class="{ 'dark-icon': themes === 'dark' }">
                    <Icon><component :is="styleOptionKey.icon"></component></Icon>
                  </el-icon>
                </template>
                <el-option
                  class="custom-style-option"
                  v-for="option in styleOptionKey.customOption"
                  :key="option.value"
                  :label="option.name"
                  :value="option.value"
                />
              </el-select>
            </el-form-item>
          </el-tooltip>
        </template>
        <el-tooltip v-if="styleForm.fontWeight !== undefined" effect="dark" placement="bottom">
          <template #content>
            {{ t('chart.bolder') }}
          </template>
          <div
            class="icon-btn"
            :class="{ dark: themes === 'dark', active: styleForm.fontWeight === 'bold' }"
            @click="checkBold"
          >
            <el-icon>
              <Icon name="icon_bold_outlined"><icon_bold_outlined class="svg-icon" /></Icon>
            </el-icon>
          </div>
        </el-tooltip>

        <el-tooltip v-if="styleForm.fontStyle !== undefined" effect="dark" placement="bottom">
          <template #content>
            {{ t('chart.italic') }}
          </template>
          <div
            class="icon-btn"
            :class="{ dark: themes === 'dark', active: styleForm.fontStyle === 'italic' }"
            @click="checkItalic"
          >
            <el-icon>
              <Icon name="icon_italic_outlined"><icon_italic_outlined class="svg-icon" /></Icon>
            </el-icon>
          </div>
        </el-tooltip>
        <el-tooltip v-if="styleForm.textDecoration !== undefined" effect="dark" placement="bottom">
          <template #content>
            {{ t('visualization.text_decoration') }}
          </template>
          <div
            class="icon-btn"
            :class="{ dark: themes === 'dark', active: styleForm.textDecoration === 'underline' }"
            @click="checkTextDecoration"
          >
            <el-icon>
              <Icon name="style-underline"><styleUnderline class="svg-icon" /></Icon>
            </el-icon>
          </div>
        </el-tooltip>
        <template v-if="styleForm.textAlign">
          <div class="m-divider" :class="'custom-divider-' + themes"></div>
          <div style="display: flex">
            <el-tooltip effect="dark" placement="bottom">
              <template #content>
                {{ t('chart.text_pos_left') }}
              </template>
              <div
                class="icon-btn"
                :class="{ dark: themes === 'dark', active: styleForm.textAlign === 'left' }"
                @click="setPosition('textAlign', 'left')"
              >
                <el-icon>
                  <Icon name="icon_left-alignment_outlined"
                    ><icon_leftAlignment_outlined class="svg-icon"
                  /></Icon>
                </el-icon>
              </div>
            </el-tooltip>
            <el-tooltip effect="dark" placement="bottom">
              <template #content>
                {{ t('chart.text_pos_center') }}
              </template>
              <div
                class="icon-btn"
                :class="{ dark: themes === 'dark', active: styleForm.textAlign === 'center' }"
                @click="setPosition('textAlign', 'center')"
              >
                <el-icon>
                  <Icon name="icon_center-alignment_outlined"
                    ><icon_centerAlignment_outlined class="svg-icon"
                  /></Icon>
                </el-icon>
              </div>
            </el-tooltip>
            <el-tooltip effect="dark" placement="bottom">
              <template #content>
                {{ t('chart.text_pos_right') }}
              </template>
              <div
                class="icon-btn"
                :class="{ dark: themes === 'dark', active: styleForm.textAlign === 'right' }"
                @click="setPosition('textAlign', 'right')"
              >
                <el-icon>
                  <Icon name="icon_right-alignment_outlined"
                    ><icon_rightAlignment_outlined class="svg-icon"
                  /></Icon>
                </el-icon>
              </div>
            </el-tooltip>
          </div>
        </template>
        <template v-if="styleForm.headHorizontalPosition">
          <div class="m-divider"></div>
          <el-tooltip effect="dark" placement="bottom">
            <template #content>
              {{ t('chart.text_pos_left') }}
            </template>
            <div
              class="icon-btn"
              :class="{
                dark: themes === 'dark',
                active: styleForm.headHorizontalPosition === 'left'
              }"
              @click="setPosition('headHorizontalPosition', 'left')"
            >
              <el-icon>
                <Icon name="icon_left-alignment_outlined"
                  ><icon_leftAlignment_outlined class="svg-icon"
                /></Icon>
              </el-icon>
            </div>
          </el-tooltip>
          <el-tooltip effect="dark" placement="bottom">
            <template #content>
              {{ t('chart.text_pos_center') }}
            </template>
            <div
              class="icon-btn"
              :class="{
                dark: themes === 'dark',
                active: styleForm.headHorizontalPosition === 'center'
              }"
              @click="setPosition('headHorizontalPosition', 'center')"
            >
              <el-icon>
                <Icon name="icon_center-alignment_outlined"
                  ><icon_centerAlignment_outlined class="svg-icon"
                /></Icon>
              </el-icon>
            </div>
          </el-tooltip>
          <el-tooltip effect="dark" placement="bottom">
            <template #content>
              {{ t('chart.text_pos_right') }}
            </template>
            <div
              class="icon-btn"
              :class="{
                dark: themes === 'dark',
                active: styleForm.headHorizontalPosition === 'right'
              }"
              @click="setPosition('headHorizontalPosition', 'right')"
            >
              <el-icon>
                <Icon name="icon_right-alignment_outlined"
                  ><icon_rightAlignment_outlined class="svg-icon"
                /></Icon>
              </el-icon>
            </div>
          </el-tooltip>
        </template>
      </el-space>
    </el-row>
  </el-row>
</template>

<script lang="tsx" setup>
import dvStyleBackgroundColor from '@/assets/svg/dv-style-backgroundColor.svg'
import dvStyleColor from '@/assets/svg/dv-style-color.svg'
import dvStyleHeadFontActiveColor from '@/assets/svg/dv-style-headFontActiveColor.svg'
import dvStyleHeadFontColor from '@/assets/svg/dv-style-headFontColor.svg'
import dvStyleScrollSpeed from '@/assets/svg/dv-style-scroll-speed.svg'
import dvStyleOpacity from '@/assets/svg/dv-style-opacity.svg'
import dvStyleBlur from '@/assets/svg/dv-style-blur.svg'
import dvStyleFontSize from '@/assets/svg/dv-style-fontSize.svg'
import dvStyleLetterSpacing from '@/assets/svg/dv-style-letterSpacing.svg'
import dvStyleActiveFont from '@/assets/svg/dv-style-activeFont.svg'
import dvStyleFontFamily from '@/assets/svg/dv-style-fontFamily.svg'
import icon_bold_outlined from '@/assets/svg/icon_bold_outlined.svg'
import icon_italic_outlined from '@/assets/svg/icon_italic_outlined.svg'
import styleUnderline from '@/assets/svg/style-underline.svg'
import icon_leftAlignment_outlined from '@/assets/svg/icon_left-alignment_outlined.svg'
import icon_centerAlignment_outlined from '@/assets/svg/icon_center-alignment_outlined.svg'
import icon_rightAlignment_outlined from '@/assets/svg/icon_right-alignment_outlined.svg'
import { computed, reactive, ref, toRefs, watch } from 'vue'
import { COLOR_PANEL } from '@/views/chart/components/editor/util/chart'
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
import { useI18n } from '@/hooks/web/useI18n'
import Icon from '@/components/icon-custom/src/Icon.vue'
import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
import { storeToRefs } from 'pinia'
import { ElIcon } from 'element-plus-secondary'
const { t } = useI18n()
const dvMainStore = dvMainStoreWithOut()
const snapshotStore = snapshotStoreWithOut()

const { canvasStyleData } = storeToRefs(dvMainStore)

const props = withDefaults(
  defineProps<{
    themes?: EditorTheme
    element: any
  }>(),
  {
    themes: 'dark'
  }
)
const { themes, element } = toRefs(props)
const emits = defineEmits(['onStyleAttrChange'])
const styleMounted = ref({
  opacity: 1,
  fontSize: 22,
  activeFontSize: 22,
  letterSpacing: 0,
  scrollSpeed: 0,
  fontWeight: 'normal',
  fontStyle: 'normal',
  textAlign: 'center',
  color: '#000000'
})

const fontFamilyList = [
  { name: '微软雅黑', value: 'Microsoft YaHei' },
  { name: '宋体', value: 'SimSun, "Songti SC", STSong' },
  { name: '黑体', value: 'SimHei, Helvetica' },
  { name: '楷体', value: 'KaiTi, "Kaiti SC", STKaiti' }
]

const scrollSpeedList = [
  { name: '停止', value: 0 },
  { name: '10', value: 10 },
  { name: '20', value: 20 },
  { name: '30', value: 30 },
  { name: '40', value: 40 },
  { name: '50', value: 50 },
  { name: '60', value: 60 },
  { name: '70', value: 70 },
  { name: '80', value: 80 },
  { name: '90', value: 90 },
  { name: '100', value: 100 },
  { name: '150', value: 150 },
  { name: '200', value: 200 }
]

const opacitySizeList = [
  { name: '0', value: 0 },
  { name: '0.1', value: 0.1 },
  { name: '0.2', value: 0.2 },
  { name: '0.3', value: 0.3 },
  { name: '0.4', value: 0.4 },
  { name: '0.5', value: 0.5 },
  { name: '0.6', value: 0.6 },
  { name: '0.7', value: 0.7 },
  { name: '0.8', value: 0.8 },
  { name: '0.9', value: 0.9 },
  { name: '1', value: 1 }
]
const backdropBlurList = [
  { name: '0', value: 'blur(0px)' },
  { name: '1', value: 'blur(1px)' },
  { name: '2', value: 'blur(2px)' },
  { name: '3', value: 'blur(3px)' },
  { name: '4', value: 'blur(4px)' },
  { name: '5', value: 'blur(5px)' },
  { name: '6', value: 'blur(6px)' },
  { name: '7', value: 'blur(7px)' },
  { name: '8', value: 'blur(8px)' },
  { name: '9', value: 'blur(9px)' },
  { name: '10', value: 'blur(10px)' },
  { name: '11', value: 'blur(11px)' },
  { name: '12', value: 'blur(12px)' },
  { name: '13', value: 'blur(13px)' },
  { name: '14', value: 'blur(14px)' },
  { name: '15', value: 'blur(15px)' },
  { name: '16', value: 'blur(16px)' },
  { name: '17', value: 'blur(17px)' },
  { name: '18', value: 'blur(18px)' },
  { name: '19', value: 'blur(19px)' },
  { name: '20', value: 'blur(20px)' },
  { name: '21', value: 'blur(21px)' },
  { name: '22', value: 'blur(22px)' },
  { name: '23', value: 'blur(23px)' },
  { name: '24', value: 'blur(24px)' },
  { name: '25', value: 'blur(25px)' },
  { name: '26', value: 'blur(26px)' },
  { name: '27', value: 'blur(27px)' },
  { name: '28', value: 'blur(28px)' },
  { name: '29', value: 'blur(29px)' },
  { name: '30', value: 'blur(30px)' }
]

const styleForm = computed<any>(() => element.value.style)
const state = reactive({
  fontSize: [],
  isSetting: false,
  predefineColors: COLOR_PANEL
})

const styleColorKeyArray = [
  { value: 'color', label: t('visualization.color'), width: 90, icon: dvStyleColor },
  {
    value: 'headFontColor',
    label: t('visualization.head_font_color'),
    width: 90,
    icon: dvStyleHeadFontColor
  },
  {
    value: 'headFontActiveColor',
    label: t('visualization.head_font_active_color'),
    width: 90,
    icon: dvStyleHeadFontActiveColor
  },
  {
    value: 'backgroundColor',
    label: t('visualization.background_color'),
    width: 90,
    icon: dvStyleBackgroundColor
  }
]

const letterSpacingList = computed(() => {
  const arr = []
  for (let i = 0; i <= 60; i = i + 1) {
    arr.push({
      name: i + '',
      value: i
    })
  }
  return arr
})

const fontSizeList = computed(() => {
  const arr = []
  for (let i = 10; i <= 60; i = i + 1) {
    arr.push({
      name: i + '',
      value: i
    })
  }
  for (let i = 70; i <= 300; i = i + 10) {
    arr.push({
      name: i + '',
      value: i
    })
  }
  return arr
})
const styleOptionKeyArrayPre = [
  {
    value: 'fontFamily',
    label: t('visualization.font_family'),
    customOption: fontFamilyList,
    width: '188px',
    icon: dvStyleFontFamily
  }
]

//大小随画布缩放动态变化
const styleOptionMountedKeyArray = [
  {
    value: 'letterSpacing',
    label: t('visualization.letter_spacing'),
    customOption: letterSpacingList.value,
    width: '90px',
    icon: dvStyleLetterSpacing
  },
  {
    value: 'fontSize',
    label: t('visualization.font_size'),
    customOption: fontSizeList.value,
    width: '90px',
    icon: dvStyleFontSize
  },
  {
    value: 'activeFontSize',
    label: t('visualization.active_font_size'),
    customOption: fontSizeList.value,
    width: '90px',
    icon: dvStyleActiveFont
  }
]

//大小不变
const styleOptionKeyArray = [
  {
    value: 'scrollSpeed',
    label: t('visualization.scroll_speed'),
    customOption: scrollSpeedList,
    width: '90px',
    icon: dvStyleScrollSpeed
  },
  {
    value: 'opacity',
    label: t('visualization.opacity'),
    customOption: opacitySizeList,
    width: '90px',
    icon: dvStyleOpacity
  },
  {
    value: 'backdropFilter',
    label: t('visualization.background_opacity'),
    customOption: backdropBlurList,
    width: '90px',
    icon: dvStyleBlur
  }
]

const styleInit = () => {
  if (element.value) {
    Object.keys(styleMounted.value).forEach(key => {
      styleMounted.value[key] = Math.round(
        (element.value.style[key] * 100) / canvasStyleData.value.scale
      )
    })
  }
}

const changeStylePre = key => {
  changeStyle({ key: key, value: element.value.style[key] })
}

const sizeChange = key => {
  element.value.style[key] = Math.round(
    (styleMounted.value[key] * canvasStyleData.value.scale) / 100
  )
  changeStyle({ key: key, value: element.value.style[key] })
}

const changeStyle = params => {
  snapshotStore.recordSnapshotCache('changeStyle')
  emits('onStyleAttrChange', params)
}

const checkBold = () => {
  if (styleForm.value.fontWeight === 'normal') {
    styleForm.value.fontWeight = 'bold'
  } else {
    styleForm.value.fontWeight = 'normal'
  }
  changeStyle({ key: 'fontWeight', value: styleForm.value.fontWeight })
}

const checkItalic = () => {
  if (styleForm.value.fontStyle === 'normal') {
    styleForm.value.fontStyle = 'italic'
  } else {
    styleForm.value.fontStyle = 'normal'
  }
  changeStyle({ key: 'fontStyle', value: styleForm.value.fontStyle })
}

const checkTextDecoration = () => {
  if (styleForm.value.textDecoration === 'none') {
    styleForm.value.textDecoration = 'underline'
  } else {
    styleForm.value.textDecoration = 'none'
  }
  changeStyle({ key: 'textDecoration', value: styleForm.value.textDecoration })
}

function setPosition(key, p: 'left' | 'center' | 'right') {
  styleForm.value[key] = p
  changeStyle({ key: key, value: p })
}

watch(
  () => element.value,
  () => {
    styleInit()
  },
  {
    deep: true,
    immediate: true
  }
)
</script>

<style lang="less">
.custom-style-option::after {
  display: none;
}
</style>

<style scoped lang="less">
.custom-item-text {
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 20px;
  color: #646a73 !important;
}

:deep(.ed-radio) {
  margin-right: 0;
}
:deep(.ed-radio-group) {
  padding-top: 2px;
}

:deep(.ed-checkbox__input) {
  display: none;
}

:deep(.ed-checkbox.is-checked) {
  .ed-checkbox__label {
    .bash-icon {
      background: var(--ed-color-primary-1a, rgba(51, 112, 255, 0.1));
      border-radius: 4px;
      color: var(--ed-color-primary);
    }
  }
}

:deep(.ed-radio.is-checked) {
  .ed-radio__label {
    .bash-icon {
      background: var(--ed-color-primary-1a, rgba(51, 112, 255, 0.1));
      border-radius: 4px;
    }
  }
}

:deep(.ed-radio__input) {
  display: none;
}

:deep(.ed-radio__input.is-checked) {
  .ed-radio__inner {
    padding: 4px;
    background-color: green;
    background-clip: content-box;
  }
}

.bash-icon {
  width: 24px;
  height: 24px;
}

.custom-divider {
  margin: 5px 0 0 8px;
  height: 20px;
  width: 1px;
  background-color: rgba(31, 35, 41, 0.15);
}

.icon-btn {
  font-size: 16px;
  width: 24px;
  height: 24px;
  text-align: center;
  border-radius: 4px;
  padding-top: 1px;

  color: #1f2329;

  cursor: pointer;

  &.dark {
    color: #a6a6a6;
    &.active {
      color: var(--ed-color-primary);
      background-color: var(--ed-color-primary-1a, rgba(51, 112, 255, 0.1));
    }
    &:hover {
      background-color: rgba(255, 255, 255, 0.1);
    }
  }

  &.active {
    color: var(--ed-color-primary);
    background-color: var(--ed-color-primary-1a, rgba(51, 112, 255, 0.1));
  }

  &:hover {
    background-color: rgba(31, 35, 41, 0.1);
  }
}
.m-divider {
  width: 1px;
  height: 18px;
  background: rgba(31, 35, 41, 0.15);
}

.custom-divider-light {
  background-color: rgba(31, 35, 41, 0.15);
}

.custom-divider-dark {
  background-color: #757575;
}
.form-item {
  &.no-margin-bottom {
    margin-bottom: 0 !important;
  }
}
.custom-row-inner {
  margin: 0 0 16px;
}

.dark-icon {
  color: #ffffff;
}

.icon-checkbox {
  :deep(.ed-checkbox__input) {
    display: none;
  }
  :deep(.ed-checkbox__label) {
    padding: 0;
  }
}

.icon-btn {
  font-size: 16px;
  line-height: 16px;
  width: 24px;
  height: 24px;
  text-align: center;
  border-radius: 4px;
  padding-top: 4px;

  color: #a6a6a6;

  cursor: pointer;

  &.dark {
    color: #a6a6a6;
    &.active {
      color: var(--ed-color-primary);
      background-color: var(--ed-color-primary-1a, rgba(51, 112, 255, 0.1));
    }
    &:hover {
      background-color: rgba(255, 255, 255, 0.1);
    }
  }

  &.active {
    color: var(--ed-color-primary);
    background-color: var(--ed-color-primary-1a, rgba(51, 112, 255, 0.1));
  }

  &:hover {
    background-color: rgba(31, 35, 41, 0.1);
  }
}

.form-item-dark {
  :deep(.ed-color-picker__trigger) {
    border-color: #5f5f5f;
  }
  :deep(.ed-color-picker__custom-icon::after) {
    background-color: #5f5f5f;
  }
}
</style>
