<template>
  <!-- Echarts 全局设置 -->
  <global-setting :optionData="optionData"></global-setting>
  <CollapseItem name="地图" :expanded="true">
    <SettingItemBox name="开启下钻">
      <SettingItem name="">
        <n-switch @change="handleChangeDrillingIn" v-model:value="optionData.drillingIn" size="small"></n-switch>
      </SettingItem>
    </SettingItemBox>
    <SettingItemBox name="返回图标">
      <SettingItem name="">
        <n-switch v-model:value="optionData.drillingIn" size="small"></n-switch>
      </SettingItem>
    </SettingItemBox>
    <SettingItemBox name="图标颜色">
      <SettingItem name="">
        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.iconColor"></n-color-picker>
      </SettingItem>
    </SettingItemBox>
    <SettingItemBox name="图标距离">
      <SettingItem name="距右">
        <n-input-number
          v-model:value="optionData.iconDistanceRight"
          :min="1"
          size="small"
          placeholder="请输入"
        ></n-input-number>
      </SettingItem>
      <SettingItem name="距上">
        <n-input-number
          v-model:value="optionData.iconDistanceTop"
          :min="1"
          size="small"
          placeholder="请输入"
        ></n-input-number>
      </SettingItem>
    </SettingItemBox>
    <SelectCity
      ref="SelectCityRef"
      :optionData="optionData"
      :drillingIn="optionData.drillingIn"
      @submit="onHandleSelectValues"
    />
    <SettingItemBox name="颜色">
      <SettingItem name="区域颜色">
        <n-color-picker size="small" :modes="['hex']" v-model:value="seriesList[0].itemStyle.color"></n-color-picker>
      </SettingItem>
      <SettingItem name="边框颜色">
        <n-color-picker
          size="small"
          :modes="['hex']"
          v-model:value="seriesList[0].itemStyle.borderColor"
        ></n-color-picker>
      </SettingItem>
      <SettingItem name="边框大小">
        <n-input-number
          v-model:value="seriesList[0].itemStyle.borderWidth"
          :min="0"
          size="small"
          placeholder="请输入"
        ></n-input-number>
      </SettingItem>
      <SettingItem name="厚度">
        <n-input-number
          v-model:value="seriesList[0].regionHeight"
          :min="0"
          size="small"
          placeholder="请输入"
        ></n-input-number>
      </SettingItem>
    </SettingItemBox>
    <SettingItemBox name="标题">
      <SettingItem name="是否显示">
        <n-switch v-model:value="seriesList[0].label.show" size="small"></n-switch>
      </SettingItem>
      <SettingItem name="颜色">
        <n-color-picker
          size="small"
          :modes="['hex']"
          v-model:value="seriesList[0].label.textStyle.color"
        ></n-color-picker>
      </SettingItem>
      <SettingItem name="大小">
        <n-input-number
          v-model:value="seriesList[0].label.textStyle.fontSize"
          :min="0"
          size="small"
          placeholder="请输入"
        ></n-input-number>
      </SettingItem>
    </SettingItemBox>
    <SettingItemBox name="高亮">
      <SettingItem name="标题显示">
        <n-switch v-model:value="optionData.geo3D.emphasis.label.show" size="small"></n-switch>
      </SettingItem>
      <SettingItem name="颜色">
        <n-color-picker
          size="small"
          :modes="['hex']"
          v-model:value="optionData.geo3D.emphasis.label.textStyle.color"
        ></n-color-picker>
      </SettingItem>
      <SettingItem name="大小">
        <n-input-number
          v-model:value="optionData.geo3D.emphasis.label.textStyle.fontSize"
          :min="0"
          size="small"
          placeholder="请输入"
        ></n-input-number>
      </SettingItem>
      <SettingItem name="区块颜色">
        <n-color-picker
          size="small"
          :modes="['hex']"
          v-model:value="optionData.geo3D.emphasis.itemStyle.color"
        ></n-color-picker>
      </SettingItem>
    </SettingItemBox>
    <SettingItemBox name="标记">
      <SettingItem name="大小">
        <n-input-number
          v-model:value="seriesList[1].symbolSize"
          :min="0"
          :step="10"
          size="small"
          placeholder="请输入"
        ></n-input-number>
      </SettingItem>
      <SettingItem name="形状">
        <n-select :options="symbolOption" v-model:value="seriesList[1].symbol"></n-select>
      </SettingItem>
    </SettingItemBox>
  </CollapseItem>
</template>

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

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

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

const symbolOption = ref([
  {
    label: 'circle',
    value: 'circle'
  },
  {
    label: 'rect',
    value: 'rect'
  },
  {
    label: 'roundRect',
    value: 'roundRect'
  },
  {
    label: 'triangle',
    value: 'triangle'
  },
  {
    label: 'diamond',
    value: 'diamond'
  },
  {
    label: 'pin',
    value: 'pin'
  },
  {
    label: 'arrow',
    value: 'arrow'
  },
  {
    label: 'none',
    value: 'none'
  }
])

const SelectCityRef = ref<typeof SelectCity>()

const onHandleSelectValues = (values: any) => {
  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>