<template>
  <!-- Echarts 全局设置 -->
  <global-setting :optionData="optionData"></global-setting>
  <CollapseItem :name="t('charts.chart.map')" :expanded="true">
    <SettingItemBox :name="t('charts.chart.openDown')">
      <SettingItem name="">
        <n-switch @change="handleChangeDrillingIn" v-model:value="optionData.drillingIn" size="small"></n-switch>
      </SettingItem>
    </SettingItemBox>
    
    <SettingItemBox :name="t('charts.chart.returnIcon')">
      <SettingItem name="">
        <n-switch v-model:value="optionData.drillingIn" size="small"></n-switch>
      </SettingItem>
    </SettingItemBox>
    <SettingItemBox :name="t('charts.chart.iconColor')">
      <SettingItem name="">
        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.iconColor"></n-color-picker>
      </SettingItem>
    </SettingItemBox>
    <SettingItemBox :name="t('charts.chart.iconDistance')">
      <SettingItem :name="t('charts.chart.fromRight')">
        <n-input-number
          v-model:value="optionData.iconDistanceRight"
          :min="1"
          size="small"
          :placeholder="t('common.inputText')"
        ></n-input-number>
      </SettingItem>
      <SettingItem :name="t('charts.chart.fromAbove')">
        <n-input-number
          v-model:value="optionData.iconDistanceTop"
          :min="1"
          size="small"
          :placeholder="t('common.inputText')"
        ></n-input-number>
      </SettingItem>
    </SettingItemBox>
    <SelectCity
      ref="SelectCityRef"
      :optionData="optionData"
      :drillingIn="optionData.drillingIn"
      @submit="onHandleSelectValues"
    />
    <SettingItemBox :name="t('charts.chart.regionColor')">
      <SettingItem :name="t('charts.chart.colorat0')">
        <n-color-picker
          size="small"
          :modes="['hex']"
          v-model:value="seriesList[1].itemStyle.areaColor.colorStops[0].color"
        ></n-color-picker>
      </SettingItem>
      <SettingItem :name="t('charts.chart.colorat100')">
        <n-color-picker
          size="small"
          :modes="['hex']"
          v-model:value="seriesList[1].itemStyle.areaColor.colorStops[1].color"
        ></n-color-picker>
      </SettingItem>
    </SettingItemBox>
    <SettingItemBox :name="t('charts.chart.shadow')">
      <SettingItem :name="t('common.colorText')">
        <n-color-picker
          size="small"
          :modes="['hex']"
          v-model:value="seriesList[1].itemStyle.shadowColor"
        ></n-color-picker>
      </SettingItem>
      <SettingItem :name="t('charts.chart.blurriness')">
        <n-input-number
          v-model:value="seriesList[1].itemStyle.shadowBlur"
          :min="0"
          size="small"
          :placeholder="t('common.inputText')+t('charts.chart.blurriness')"
        ></n-input-number>
      </SettingItem>
      <SettingItem :name="t('charts.chart.horizontalOffset')">
        <n-input-number
          v-model:value="seriesList[1].itemStyle.shadowOffsetX"
          size="small"
          :placeholder="t('common.inputText')+t('charts.chart.horizontalOffset')"
        ></n-input-number>
      </SettingItem>
      <SettingItem :name="t('charts.chart.verticalOffset')">
        <n-input-number
          v-model:value="seriesList[1].itemStyle.shadowOffsetY"
          size="small"
          :placeholder="t('charts.chart.placeVertical')"
        ></n-input-number>
      </SettingItem>
    </SettingItemBox>

    <SettingItemBox :name="t('charts.chart.geoInformation')">
      <SettingItem :name="t('common.displayText')">
        <n-space>
          <n-switch v-model:value="seriesList[1].label.show" size="small"></n-switch>
        </n-space>
      </SettingItem>
      <SettingItem :name="t('common.fontColorText')">
        <n-color-picker size="small" :modes="['hex']" v-model:value="seriesList[1].label.color"></n-color-picker>
      </SettingItem>
      <SettingItem :name="t('common.fontSizeText')">
        <n-input-number
          v-model:value="seriesList[1].label.fontSize"
          :min="1"
          size="small"
          :placeholder="t('common.inputText') + t('common.fontSizeText')"
        ></n-input-number>
      </SettingItem>
    </SettingItemBox>

    <SettingItemBox :name="t('charts.chart.suspended')">
      <SettingItem :name="t('common.disableText')">
        <n-space>
          <n-switch v-model:value="seriesList[1].emphasis.disabled" size="small"></n-switch>
        </n-space>
      </SettingItem>
      <SettingItem :name="t('common.colorText')">
        <n-color-picker
          size="small"
          :modes="['hex']"
          v-model:value="seriesList[1].emphasis.itemStyle.areaColor"
        ></n-color-picker>
      </SettingItem>
      <SettingItem :name="t('common.fontSizeText')">
        <n-input-number
          v-model:value="seriesList[1].emphasis.label.fontSize"
          :min="1"
          size="small"
          :placeholder="t('common.inputText') + t('common.fontSizeText')"
        ></n-input-number>
      </SettingItem>
      <SettingItem :name="t('charts.chart.shadow')">
        <n-color-picker
          size="small"
          :modes="['hex']"
          v-model:value="seriesList[1].emphasis.itemStyle.shadowColor"
        ></n-color-picker>
      </SettingItem>
      <SettingItem :name="t('charts.chart.borderSize')">
        <n-input-number
          v-model:value="seriesList[1].emphasis.itemStyle.borderWidth"
          :min="1"
          size="small"
          :placeholder="t('charts.chart.placeBorder')"
        ></n-input-number>
      </SettingItem>
      <SettingItem :name="t('common.fontColorText')">
        <n-color-picker
          size="small"
          :modes="['hex']"
          v-model:value="seriesList[1].emphasis.label.color"
        ></n-color-picker>
      </SettingItem>
    </SettingItemBox>

    <SettingItemBox :name="t('charts.chart.floatingPop')">
      <SettingItem :name="t('common.displayText')">
        <n-space>
          <n-switch v-model:value="seriesList[1].tooltip.show" size="small"></n-switch>
        </n-space>
      </SettingItem>
      <SettingItem :name="t('common.fontSizeText')">
        <n-input-number
          v-model:value="seriesList[1].tooltip.textStyle.fontSize"
          :min="1"
          size="small"
          :placeholder="t('common.inputText') + t('common.fontSizeText')"
        ></n-input-number>
      </SettingItem>
      <SettingItem :name="t('common.fontColorText')">
        <n-color-picker
          size="small"
          :modes="['hex']"
          v-model:value="seriesList[1].tooltip.textStyle.color"
        ></n-color-picker>
      </SettingItem>
      <SettingItem :name="t('charts.chart.bgColor')">
        <n-color-picker
          size="small"
          :modes="['hex']"
          v-model:value="seriesList[1].tooltip.backgroundColor"
        ></n-color-picker>
      </SettingItem>
    </SettingItemBox>
    <SettingItemBox :name="t('charts.chart.regionBorder')">
      <SettingItem :name="t('common.colorText')">
        <n-color-picker
          size="small"
          :modes="['hex']"
          v-model:value="seriesList[1].itemStyle.borderColor"
        ></n-color-picker>
      </SettingItem>
      <SettingItem :name="t('charts.chart.widthSize')">
        <n-input-number
          v-model:value="seriesList[1].itemStyle.borderWidth"
          :min="1"
          size="small"
          :placeholder="t('charts.chart.placeBorder')"
        ></n-input-number>
      </SettingItem>
    </SettingItemBox>
    <SettingItemBox :name="t('common.otherText')" v-if="mapRegion.adcode === 'china'">
      <SettingItem>
        <n-checkbox v-model:checked="mapRegion.showHainanIsLands" size="small">{{t('common.displayTheSouthChinaSeaIslands')}}</n-checkbox>
      </SettingItem>
    </SettingItemBox>
  </CollapseItem>
  <CollapseItem :name="t('charts.chart.mark')" :expanded="true">
    <SettingItemBox :name="t('common.styleText')">
      <SettingItem :name="t('charts.chart.sizeText')">
        <n-input-number v-model:value="seriesList[0].symbolSize" size="small" :min="0"></n-input-number>
      </SettingItem>
      <SettingItem :name="t('common.colorText')">
        <n-color-picker size="small" :modes="['hex']" v-model:value="seriesList[0].itemStyle.color"></n-color-picker>
      </SettingItem>
    </SettingItemBox>

    <SettingItemBox :name="t('common.textText')">
      <SettingItem :name="t('common.displayText')">
        <n-space>
          <n-switch v-model:value="seriesList[0].label.show" size="small"></n-switch>
        </n-space>
      </SettingItem>
      <SettingItem :name="t('common.fontSizeText')">
        <n-input-number v-model:value="seriesList[0].label.fontSize" size="small" :min="0"></n-input-number>
      </SettingItem>
      <SettingItem :name="t('common.fontColorText')">
        <n-color-picker size="small" :modes="['hex']" v-model:value="seriesList[0].label.color"></n-color-picker>
      </SettingItem>
    </SettingItemBox>

    <SettingItemBox :name="t('charts.chart.rippling')">
      <SettingItem :name="t('charts.chart.ripplingSize')">
        <n-input-number
          v-model:value="seriesList[0].rippleEffect.scale"
          :min="1"
          size="small"
          :placeholder="t('common.inputText')+t('charts.chart.ripplingSize')"
        ></n-input-number>
      </SettingItem>
      <SettingItem :name="t('charts.chart.ripplingColor')">
        <n-color-picker size="small" :modes="['hex']" v-model:value="seriesList[0].rippleEffect.color"></n-color-picker>
      </SettingItem>
      <SettingItem :name="t('charts.chart.ripplingDraw')">
        <n-select size="small" v-model:value="seriesList[0].rippleEffect.brushType" :options="rippleEffectOptions" />
      </SettingItem>
    </SettingItemBox>
  </CollapseItem>
  <CollapseItem v-if="seriesList[2]" :name="t('charts.chart.flywire')" :expanded="true">
    <SettingItemBox :name="t('charts.chart.arrowText')">
      <SettingItem :name="t('charts.chart.speed')">
        <n-tooltip trigger="hover">
          <template #trigger>
            <n-input-number v-model:value="seriesList[2].effect.period" size="small" :min="0"></n-input-number>
          </template>
        {{ t('charts.chart.smallerValue') }}
        </n-tooltip>
      </SettingItem>
      <SettingItem :name="t('charts.chart.wake')">
        <n-tooltip trigger="hover">
          <template #trigger>
            <n-input-number
              v-model:value="seriesList[2].effect.trailLength"
              size="small"
              :min="0"
              :max="1"
            ></n-input-number>
          </template>
          {{t('charts.chart.wakeValue')}}
        </n-tooltip>
      </SettingItem>
      <SettingItem :name="t('charts.chart.sizeText')">
        <n-input-number v-model:value="seriesList[2].effect.symbolSize" size="small" :min="0"></n-input-number>
      </SettingItem>
    </SettingItemBox>
    <SettingItemBox :name="t('common.configText')">
      <SettingItem :name="t('common.colorText')">
        <n-color-picker
          size="small"
          :modes="['hex']"
          v-model:value="seriesList[2].lineStyle.normal.color"
        ></n-color-picker>
      </SettingItem>
      <SettingItem :name="t('common.widthText')">
        <n-input-number v-model:value="seriesList[2].lineStyle.normal.width" size="small" :min="1"></n-input-number>
      </SettingItem>
    </SettingItemBox>
  </CollapseItem>
</template>

<script setup lang="ts">
import { PropType, computed } from 'vue'
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
import { GlobalSetting } from '@/components/Pages/ChartItemSetting'
import { ref } from 'vue'
import mapChinaJson from './mapGeojson/china.json'
import SelectCity from './components/SelectCity.vue'
import { regionInfo } from './config'

const props = defineProps({
  optionData: {
    type: Object as PropType<GlobalThemeJsonType>,
    required: true
  }
})


const  t = window['$t']

const mapRegionOptions = ref([
  {
    adcode: 'china',
    name: t('charts.chart.china')
  }
])

const rippleEffectOptions = ref([
  {
    value: 'fill',
    label: t('charts.chart.solid')
  },
  {
    value: 'stroke',
    label: t('charts.chart.hollow')
  }
])

const selectCityRef = ref<InstanceType<typeof SelectCity>>()

const initMapRegionOptions = () => {
  mapChinaJson.features.forEach((element: Recordable) => {
    if (element.properties.name) {
      mapRegionOptions.value.push({ ...element.properties })
    }
  })
}
initMapRegionOptions()

const seriesList = computed(() => {
  return props.optionData.series
})

const mapRegion = computed(() => {
  return props.optionData.mapRegion
})

const onHandleSelectValues = (values: regionInfo) => {
  const { cityValue, countyValue, provinceValue } = values
  props.optionData.mapRegion.saveSelect = values
  props.optionData.mapRegion.adcode = countyValue
    ? countyValue
    : cityValue
    ? cityValue
    : provinceValue === 'china'
    ? 'china'
    : provinceValue
}

const handleChangeDrillingIn = () => {
  selectCityRef.value?.resetValue()
}
</script>