import { locations, defaultValue, getTownValue } from '../../../common/dataLocation';

Component({
  options: {
    addGlobalClass: true,
    multipleSlots: true,
  },
  properties: {
    /**
     * 结果文本展示模式
     * address: 地址模式，所选区域自动合并成地址描述
     * selector: 选项模式，所选区域每个级别单独展示
     */
    textMode: {
      type: String,
      value: 'address',
    },
    /**
     * 选项框展示模式
     * cell: 单元格模式，以一行单元格形式展示
     * picker: 下拉框模式，以文本加箭头模式展示
     */
    styleMode: {
      type: String,
      value: 'cell',
    },
    pickerClass: {
      type: String,
      value: '',
    },
    color: {
      type: String,
      value: 'black',
    },
    // 外部设定当前选项值
    location: {
      type: Object,
      observer(v) {
        let note = '';
        note += v.provinceText ? v.provinceText : '';
        note += v.provinceText == v.cityText ? '' : v.cityText ? `/${v.cityText}` : '';
        note += v.districtText ? `/${v.districtText}` : '';
        note += v.townText ? `/${v.townText}` : '';
        const value = v.value
          ? v.value
          : getTownValue([v.provinceText, v.cityText, v.districtText, v.townText], 'label');
        this.setData({
          value,
          provinceText: v.provinceText ? v.provinceText : '全部省份',
          cityText: v.cityText ? v.cityText : '全部城市',
          districtText: v.districtText ? v.districtText : '全部区县',
          townText: v.townText ? v.townText : '全部街镇',
          note,
        });
      },
    },
  },

  data: {
    subTitles: ['请选择省份', '请选择城市', '请选择区/县', '请选择街镇'],
    options: locations(),
    visible: false,
    value: '',
    provinceText: undefined,
    cityText: undefined,
    districtText: undefined,
    townText: undefined,
  },

  lifetimes: {
    attached: function () {
      // 在组件实例进入页面节点树时执行
      const values = defaultValue();
      if (values.length == 4) {
        this.setData({
          value: values[3].value,
          provinceText: values[0].label,
          cityText: values[1].label,
          districtText: values[2].label,
          townText: values[3].label,
          note: this._note(values),
        });
        const param = this._getEventParams(values);
        this.triggerEvent('locationInitValue', param);
      }
    },
    detached: function () {
      // 在组件实例被从页面节点树移除时执行
    },
  },

  methods: {
    showCascader() {
      this.setData({ visible: true });
    },
    onPick(e) {
      // console.log(e.detail);
    },
    onChange(e) {
      const { selectedOptions, value } = e.detail;
      const provinceText = selectedOptions[0].label;
      const cityText = selectedOptions[1].label;
      const districtText = selectedOptions[2].label;
      const townText = selectedOptions[3].label;
      let note = this._note(selectedOptions);
      this.setData({
        value,
        provinceText,
        cityText,
        districtText,
        townText,
        note,
      });

      this._triggerEvent(selectedOptions);
    },

    // 获取传递事件中的传递值
    _getEventParams(selectedOptions) {
      const setText = p => (p.value > 0 ? p.label : null);
      const setValue = p => (p.value > 0 ? p.value : null);
      const param = {
        provinceText: setText(selectedOptions[0]),
        cityText: setText(selectedOptions[1]),
        districtText: setText(selectedOptions[2]),
        townText: setText(selectedOptions[3]),
        provinceValue: setValue(selectedOptions[0]),
        cityValue: setValue(selectedOptions[1]),
        districtValue: setValue(selectedOptions[2]),
        townValue: setValue(selectedOptions[3]),
        locationValue: selectedOptions[3].value,
      };
      return param;
    },

    _triggerEvent(selectedOptions) {
      const param = this._getEventParams(selectedOptions);
      this.triggerEvent('onChange', param);
    },
    /**
     * 将行政区域组合为地址描述
     * 1. 直辖市的名称只展示一次
     * 2. 当有行政区域选择为"全部"时（配置表中对应的value值都为负数），省略不展示
     */
    _note(v) {
      let note = '';
      v.forEach(o => {
        if (note != o.label && o.value > 0) {
          if (note != '') {
            note += '/';
          }
          note += o.label;
        }
      });
      return note;
    },
  },
});