<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="是否公开" :alone="true">
      <setting-item name="">
        <n-switch @change="handleChange" v-model:value="optionData.isShare" size="small"/>
      </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} from 'vue'
import {option, shareEnum} from './config'
import {CollapseItem, SettingItemBox, SettingItem} from '@/components/Pages/ChartItemSetting'
import {getConfigurationList, setConfigurationIsShare} from '@/api/external/common/index'
import {SelectOption} from 'naive-ui'

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

const configurationOptions = ref([])

const configurationId = ref('')

const getConfigurationOptions = async (params: object) => {
  const {items} = await getConfigurationList(params)
  if (items) {
    configurationOptions.value = items.map((item: SelectOption) => ({
      label: item.name,
      value: item.id,
      viewType: item.viewType
    }))
  }
}

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: SelectOption) => {
  const {viewType} = options
  configurationId.value = value
  if (viewType === shareEnum.PRIVATE_VIEW) {
    props.optionData.isShare = false
  } else {
    props.optionData.isShare = true
  }
}

const handleChange = async (value: boolean) => {
  const res = await setConfigurationIsShare(!configurationId.value ? props.optionData.dataset : configurationId.value, value, {
    isShare: value
  })
  if (res) {
    window.$message.success('操作成功！')
    await getConfigurationOptions({page: props.optionData.pages.page, pageSize: props.optionData.pages.pageSize})
  }
}
</script>