<template>
  <collapse-item name="属性" :expanded="true">
    <setting-item-box name="路径" :alone="true">
      <setting-item name="请选择要加载的组态">
        <n-select label-in-value @change="handleUpdateValue" filterable size="small" v-model:value="optionData.dataset"
          :options="configurationOptions" />
      </setting-item>
    </setting-item-box>
    <setting-item-box name="是否公开">
      <setting-item>
        <div style="display:flex">
          <n-switch @change="handleChange" v-model:value="optionData.isShare" size="small" />
        </div>
      </setting-item>
    </setting-item-box>
    <setting-item-box name="样式">
      <setting-item name="圆角">
        <n-input-number v-model:value="optionData.borderRadius" size="small" :min="0" placeholder="圆角"></n-input-number>
      </setting-item>
    </setting-item-box>
    <setting-item-box name="分页">
      <setting-item name="页码">
        <n-input-number v-model:value="optionData.pages.page" size="small" :min="1" placeholder="页码"></n-input-number>
      </setting-item>
      <setting-item name="页数">
        <n-input-number disabled v-model:value="optionData.pages.pageSize" size="small" :min="10"
          placeholder="页数"></n-input-number>
      </setting-item>
    </setting-item-box>
    <setting-item-box name="颜色" :alone="true">
      <SettingItem name="颜色">
        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.color"></n-color-picker>
      </SettingItem>
      <SettingItem>
        <n-button size="small" @click="optionData.color = 'black'"> 恢复默认</n-button>
      </SettingItem>
    </setting-item-box>
  </collapse-item>
</template>

<script setup lang="ts">
import { PropType, onMounted, ref, watch, unref } from 'vue'
import { option, shareEnum } from './config'
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
import { getConfigurationList, setConfigurationIsShare } from '@/api/external/common/index'
import { ConfigurationItemType } from '@/api/external/common/model'

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

const configurationOptions = ref<ConfigurationItemType[]>([])

const configurationId = ref('')

const getConfigurationOptions = async (params: object) => {
  const { items } = await getConfigurationList(params)
  if (items) {
    configurationOptions.value = items.map((item) => ({
      label: item.name,
      value: item.id,
      ...item
    }))
    if (props.optionData.dataset) {
      const selected = items.find(item => item.id === props.optionData.dataset)
      selected && (props.optionData.isShare = selected.viewType === shareEnum.PUBLIC_VIEW)
    }
  }

}

watch(
  () => props.optionData.pages,
  (newData: any) => {
    getConfigurationOptions({ page: newData.page, pageSize: newData.pageSize })
  },
  {
    deep: true,
    immediate: true
  }
)

onMounted(() => {
  getConfigurationOptions({ page: props.optionData.pages.page, pageSize: props.optionData.pages.pageSize })
})

const handleUpdateValue = (value: string, options: ConfigurationItemType) => {
  const { viewType, organizationId, publicId, platform } = options
  configurationId.value = value
  Object.assign(props.optionData, { isShare: viewType === shareEnum.PUBLIC_VIEW, organizationId, platform, publicId } as typeof option)
}

const handleChange = async (value: boolean) => {
  const currentConfigurationId = !configurationId.value ? props.optionData.dataset : configurationId.value
  const res = await setConfigurationIsShare(currentConfigurationId, value, {
    isShare: value
  })
  if (res) {
    window.$message.success('操作成功！')
    await getConfigurationOptions({ page: props.optionData.pages.page, pageSize: props.optionData.pages.pageSize })
    const currentItem = unref(configurationOptions).find(item => item.id === currentConfigurationId)
    const { viewType, organizationId, platform, publicId } = currentItem || {}
    Object.assign(props.optionData, { isShare: viewType === shareEnum.PUBLIC_VIEW, organizationId, platform, publicId } as typeof option)
  }
}
</script>