<template>
  <Dropdown
    class="scene-select-value"
    trigger="click"
    v-model:visible="visible"
    :overlayStyle="{
      maxWidth: '300px'
    }"
    @visible-change="visibleChange"
  >
    <div @click.prevent="visible = true">
      <slot :label="label">
        <div class="dropdown-button value">
          <AIcon v-if="!!icon" :type="icon" />
          <Ellipsis style="max-width: 220px">
            {{ label }}
          </Ellipsis>
        </div>
      </slot>
    </div>
    <template #overlay>
      <div class="scene-select-content">
        <Tabs @change="tabsChange" v-model:activeKey="mySource">
          <TabPane v-for="item in tabsOptions" :tab="item.label" :key="item.key">
            <div class="select-box-content">
              <DropdownTimePicker
                v-if="['time', 'date'].includes(item.component)"
                type="time"
                v-model:value="myValue"
                @change="timeChange"
              />
              <template v-else-if="['select', 'enum', 'boolean'].includes(item.component)">
                <DropdownMenus
                  v-if="(['metric', 'upper'].includes(item.key) ? metricOptions : options).length"
                  :options="['metric', 'upper'].includes(item.key) ? metricOptions : options"
                  :value="myValue"
                  :valueName="props.source === 'metric' ? 'id' : valueName"
                  @click="onSelect"
                />
                <div class="scene-select-empty" v-else>
                  <JEmpty />
                </div>
              </template>
              <template v-else-if="item.component === 'tree'">
                <div style="min-width: 400px" v-if="(item.key === 'upper' ? metricOptions : options).length">
                  <JTree
                    v-model:expandedKeys="treeOpenKeys"
                    :selectedKeys="myValue ? [myValue] : []"
                    :treeData="item.key === 'upper' ? metricOptions : options"
                    :height="450"
                    :virtual="true"
                    @select="treeSelect"
                  >
                    <template #title="{ name, description }">
                      <Space>
                        {{ name }}
                        <span v-if="description" class="tree-title-description">{{ description }}</span>
                      </Space>
                    </template>
                  </JTree>
                </div>
                <div class="scene-select-empty" v-else>
                  <JEmpty />
                </div>
              </template>

              <ValueItem
                v-else
                v-model:modelValue="myValue"
                :itemType="item.component"
                :options="item.key === 'upper' ? metricOptions : options"
                @change="valueItemChange"
              />
            </div>
          </TabPane>
        </Tabs>
      </div>
    </template>
  </Dropdown>
</template>

<script lang="ts" setup name="ParamsDropdown">
  import type { ValueType } from './typings';
  import { defaultSetting } from './typings';
  import { DropdownMenus, DropdownTimePicker } from '../DropdownButton';
  import { getOption } from '../DropdownButton/util';
  import { openKeysByTree } from '@jdlinker/utils';
  import { ref, nextTick, watchEffect } from 'vue';
  import { Tabs, TabPane, Space, Tree as JTree, Empty as JEmpty, Ellipsis, Dropdown, AIcon } from 'linker-ui-components';

  type Emit = {
    (e: 'update:value', data: ValueType): void;
    (e: 'update:source', data: string): void;
    (e: 'select', data: any, label?: string, labelObj?: Record<number, any>, option?: any): void;
    (e: 'tabChange', data: any): void;
  };

  const props = defineProps({
    ...defaultSetting
  });

  const emit = defineEmits<Emit>();

  const myValue = ref<ValueType>(props.value);
  const mySource = ref<string>(props.source);
  const label = ref<any>(props.placeholder);
  const treeOpenKeys = ref<(string | number)[]>([]);
  const visible = ref(false);

  nextTick(() => {
    mySource.value = props.source;
    myValue.value = props.source === 'metric' ? props.metric : props.value;
  });

  const tabsChange = (e: string) => {
    mySource.value = e;
    myValue.value = undefined;
    emit('update:source', mySource.value);
    emit('update:value', undefined);
    emit('tabChange', e);
    emit('select', {}, '', { 0: undefined });
  };

  const treeSelect = (v: any, option: any) => {
    const node = option.node;
    visible.value = false;
    label.value = node[props.labelName] || node.name;
    emit('update:value', node[props.valueName]);
    emit('select', node, label.value, { 0: label.value });
  };

  const valueItemChange = (e: string) => {
    label.value = e;
    emit('update:value', e);
    emit('select', e, label.value, { 0: label.value });
  };

  const onSelect = (e: string, option: any) => {
    visible.value = false;
    label.value = option[props.labelName];
    console.log(e, option);
    emit('update:value', e);
    emit('select', e, label.value, { 0: label.value }, option);
  };

  const timeChange = (e: any) => {
    label.value = e;
    visible.value = false;
    emit('update:value', e);
    emit('select', e, label.value, { 0: label.value });
  };

  const visibleChange = (v: boolean) => {
    visible.value = v;
  };

  watchEffect(() => {
    const _options = ['metric', 'upper'].includes(props.source) ? props.metricOptions : props.options;
    const isMetric = props.source === 'metric'; // 是否为指标值
    const _value = isMetric ? props.metric : props.value;
    const _valueName = isMetric ? 'id' : props.valueName;
    const option = getOption(_options, _value as string, _valueName); // 回显label值
    myValue.value = isMetric ? props.metric : props.value;
    mySource.value = props.source;
    console.log(option);
    if (option) {
      label.value = option[props.labelName] || option.name;
      treeOpenKeys.value = openKeysByTree(_options, props.value, props.valueName);
    } else {
      if (isMetric) {
        // 处理指标值回显
        label.value = props.metric !== undefined ? props.value || props.placeholder : props.placeholder;
      } else {
        label.value = props.value !== undefined ? props.value : props.placeholder;
      }
    }
  });
</script>

<style scoped lang="less">
  @import '../DropdownButton/index.less';
  .manual-time-picker {
    position: absolute;
    top: -2px;
    left: 0;
    border: none;
    visibility: hidden;
    :deep(.ant-picker-input) {
      display: none;
    }
  }
</style>
