import { VantComponent } from '../common/component';
import { Weapp } from 'definitions/weapp';

VantComponent({
  field: true,

  relation: {
    name: 'dropdown-menu',
    type: 'ancestor',
    linked(target) {
      this.parent = target;
    },
    unlinked() {
      this.parent = null;
    }
  },

  props: {
    value: null,
    title: String,
    disabled: Boolean,
    titleClass: String,
    options: {
      type: Array,
      value: []
    }
  },

  data: {
    transition: true,
    showPopup: false,
    showWrapper: false,
    displayTitle: ''
  },

  created() {
    this.setData({ displayTitle: this.computedDisplayTitle(this.data.value) });
  },

  methods: {
    computedDisplayTitle(curValue) {
      const { title, options } = this.data;

      if (title) {
        return title;
      }

      const match = options.filter(option => option.value === curValue);
      const displayTitle = match.length ? match[0].text : '';
      return displayTitle;
    },

    onClickOverlay() {
      this.toggle();
      this.$emit('close');
    },

    onOptionTap(event: Weapp.Event) {
      let { value, displayTitle } = this.data;
      const { option } = event.currentTarget.dataset;
      const { value: optionValue } = option;

      if (optionValue !== value) {
        value = optionValue;
        displayTitle = this.computedDisplayTitle(optionValue);
        this.$emit('change', optionValue);
      }
      this.setData({ showPopup: false, value, displayTitle });

      const time = this.data.duration || 0;
      setTimeout(() => {
        this.setData({ showWrapper: false });
      }, time);

      // parent 中的 itemListData 是 children 上的数据的集合
      // 数据的更新由 children 各自维护，但是模板的更新需要额外触发 parent 的 setData
      this.parent.setData({ itemListData: this.parent.data.itemListData });
    },

    toggle() {
      const { childIndex } = this.data;
      this.parent.toggleItem(childIndex);
    }
  }
});