<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"
    />
    <div style="height:30px"></div>
    <n-tag type="primary">若配置无响应，请在预览页面查看效果</n-tag>
    <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].itemStyle.opacity"
          :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="seriesList[0].emphasis.label.show" size="small"></n-switch>
      </SettingItem>
      <SettingItem name="颜色">
        <n-color-picker
          size="small"
          :modes="['hex']"
          v-model:value="seriesList[0].emphasis.label.textStyle.color"
        ></n-color-picker>
      </SettingItem>
      <SettingItem name="大小">
        <n-input-number
          v-model:value="seriesList[0].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="seriesList[0].emphasis.itemStyle.color"
        ></n-color-picker>
      </SettingItem>
    </SettingItemBox>
    <SettingItemBox name="散点配置">
      <SettingItem name="大小">
        <n-input-number
          v-model:value="seriesList[1].symbolSize"
          :min="0"
          :step="1"
          size="small"
          placeholder="请输入"
        ></n-input-number>
      </SettingItem>
      <SettingItem name="形状">
        <n-select :options="symbolOption" v-model:value="seriesList[1].symbol"></n-select>
      </SettingItem>
    </SettingItemBox>
    <SettingItemBox name="柱状配置">
      <SettingItem name="最小高度">
        <n-input-number
          v-model:value="seriesList[2].minHeight"
          :min="0"
          :step="1"
          size="small"
          placeholder="请输入"
        ></n-input-number>
      </SettingItem>
      <SettingItem name="大小">
        <n-input-number
          v-model:value="seriesList[2].barSize"
          :min="0"
          :step="1"
          size="small"
          placeholder="请输入"
        ></n-input-number>
      </SettingItem>
      <SettingItem name="倒角尺寸">
        <n-input-number
          v-model:value="seriesList[2].bevelSize"
          :min="0"
          :max="1"
          :step="0.1"
          size="small"
          placeholder="请输入"
        ></n-input-number>
      </SettingItem>
    </SettingItemBox>
    <!-- <SettingItemBox name="区块配置">
      <template v-for="(item, map3DIndex) in optionData.dataset.map3D" :key="map3DIndex">
        <setting-item name="地区名称">
          <n-input v-model:value="item.name"> </n-input>
        </setting-item>
        <setting-item name="离地高度">
          <n-input-number v-model:value="item.height"> </n-input-number>
        </setting-item>
        <setting-item name="区块颜色">
          <n-color-picker size="small" :modes="['hex']" v-model:value="item.itemStyle.color"></n-color-picker>
        </setting-item>
        <setting-item name="区块透明度">
          <n-input-number v-model:value="item.itemStyle.opacity"> </n-input-number>
        </setting-item>
        <setting-item>
          <n-button size="small" @click="optionData.dataset.map3D.splice(map3DIndex, 1)"> - </n-button>
        </setting-item>
      </template>
      <n-button
        style="float: right"
        size="small"
        @click="optionData.dataset.map3D.push(cloneDeep(STATIC_SCATTER_CONFIG))"
      >
        +
      </n-button>
    </SettingItemBox> -->
    <SettingItemBox name="散点配置">
      <template v-for="(item, scatterIndex) in optionData.dataset.scatter3D" :key="scatterIndex">
        <setting-item name="地区名称">
          <n-input v-model:value="item.name"> </n-input>
        </setting-item>
        <setting-item name="地区代码">
          <n-input-number v-model:value="item.adcode"> </n-input-number>
        </setting-item>
        <setting-item name="离地高度">
          <n-input-number v-model:value="item.height"> </n-input-number>
        </setting-item>
        <setting-item name="经度">
          <n-input-number v-model:value="item.value[0]"> </n-input-number>
        </setting-item>
        <setting-item name="纬度">
          <n-input-number v-model:value="item.value[1]"> </n-input-number>
        </setting-item>
        <setting-item name="散点颜色">
          <n-color-picker size="small" :modes="['hex']" v-model:value="item.itemStyle.color"></n-color-picker>
        </setting-item>
        <setting-item name="散点透明度">
          <n-input-number v-model:value="item.itemStyle.opacity"> </n-input-number>
        </setting-item>
        <setting-item> </setting-item>
        <setting-item>
          <n-button size="small" @click="optionData.dataset.scatter3D.splice(scatterIndex, 1)"> - </n-button>
        </setting-item>
      </template>
      <n-button
        style="float: right"
        size="small"
        @click="optionData.dataset.scatter3D.push(cloneDeep(STATIC_SCATTER_CONFIG))"
      >
        +
      </n-button>
    </SettingItemBox>
    <SettingItemBox name="柱状配置">
      <template v-for="(item, barIndex) in optionData.dataset.bar3D" :key="barIndex">
        <setting-item name="地区名称">
          <n-input v-model:value="item.name"> </n-input>
        </setting-item>
        <setting-item name="地区代码">
          <n-input-number v-model:value="item.adcode"> </n-input-number>
        </setting-item>
        <setting-item name="离地高度">
          <n-input-number v-model:value="item.height"> </n-input-number>
        </setting-item>
        <setting-item name="经度">
          <n-input-number v-model:value="item.value[0]"> </n-input-number>
        </setting-item>
        <setting-item name="纬度">
          <n-input-number v-model:value="item.value[1]"> </n-input-number>
        </setting-item>
        <setting-item name="柱状颜色">
          <n-color-picker size="small" :modes="['hex']" v-model:value="item.itemStyle.color"></n-color-picker>
        </setting-item>
        <setting-item name="柱状透明度">
          <n-input-number v-model:value="item.itemStyle.opacity"> </n-input-number>
        </setting-item>
        <setting-item>
          <n-button size="small" @click="optionData.dataset.bar3D.splice(barIndex, 1)"> - </n-button>
        </setting-item>
      </template>
      <n-button
        style="float: right"
        size="small"
        @click="optionData.dataset.bar3D.push(cloneDeep(STATIC_SCATTER_CONFIG))"
      >
        +
      </n-button>
    </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'
import { regionInfo } from './config'
import { cloneDeep } from 'lodash'

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

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

const STATIC_SCATTER_CONFIG = {
  name: '',
  value: [0, 0, 0],
  adcode: 0,
  height: 0,
  itemStyle: {
    color: '',
    opacity: 1
  }
}

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<InstanceType<typeof SelectCity>>()

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>