<script lang="tsx" setup>
import { PropType, reactive, watch } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'

const { t } = useI18n()

const props = defineProps({
  chart: {
    type: Object,
    required: true
  },
  themes: {
    type: String as PropType<EditorTheme>,
    default: 'dark'
  },
  propertyInner: {
    type: Array<string>
  }
})

const emit = defineEmits(['onScrollCfgChange'])

watch(
  () => props.chart.senior.scrollCfg,
  () => {
    init()
  },
  { deep: true }
)

const state = reactive({
  scrollForm: {} as ScrollCfg,
  isAutoBreakLine: false
})

const changeScrollCfg = () => {
  emit('onScrollCfgChange', state.scrollForm)
}

const init = () => {
  const chart = JSON.parse(JSON.stringify(props.chart))
  if (chart.senior) {
    let senior = null
    if (Object.prototype.toString.call(chart.senior) === '[object Object]') {
      senior = JSON.parse(JSON.stringify(chart.senior))
    } else {
      senior = JSON.parse(chart.senior)
    }
    if (senior.scrollCfg) {
      state.scrollForm = senior.scrollCfg
    }
  }
}

init()
</script>

<template>
  <div :style="{ width: '100%', display: 'block' }" @keydown.stop @keyup.stop>
    <el-form
      ref="scrollForm"
      :model="state.scrollForm"
      :disabled="!state.scrollForm.open"
      label-position="top"
    >
      <el-form-item
        v-show="!state.isAutoBreakLine"
        :label="t('chart.row')"
        class="form-item"
        :class="'form-item-' + themes"
      >
        <el-input-number
          :effect="props.themes"
          size="small"
          v-model.number="state.scrollForm.row"
          :min="1"
          :max="1000"
          :precision="0"
          controls-position="right"
          @change="changeScrollCfg"
        />
      </el-form-item>
      <el-form-item
        v-show="state.isAutoBreakLine"
        :label="t('chart.step')"
        class="form-item"
        :class="'form-item-' + themes"
      >
        <el-input-number
          :effect="props.themes"
          size="small"
          v-model="state.scrollForm.step"
          :min="1"
          :max="10000"
          :precision="0"
          controls-position="right"
          @change="changeScrollCfg"
        />
      </el-form-item>
      <el-form-item
        :label="t('chart.interval') + '(ms)'"
        class="form-item"
        :class="'form-item-' + themes"
      >
        <el-input-number
          :effect="props.themes"
          size="small"
          v-model="state.scrollForm.interval"
          :min="500"
          :step="1000"
          :precision="0"
          controls-position="right"
          @change="changeScrollCfg"
        />
      </el-form-item>
    </el-form>
  </div>
</template>

<style lang="less" scoped>
.shape-item {
  padding: 6px;
  border: none;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.form-item-slider :deep(.el-form-item__label) {
  font-size: 12px;
  line-height: 38px;
}
.form-item :deep(.el-form-item__label) {
  font-size: 12px;
}
.el-select-dropdown__item {
  padding: 0 20px;
}
span {
  font-size: 12px;
}
.el-form-item {
  margin-bottom: 6px;
}

.switch-style {
  position: absolute;
  right: 10px;
  margin-top: -4px;
}
.color-picker-style {
  cursor: pointer;
  z-index: 1003;
}
</style>
