Component({
  properties: {
    /**
     * 表单输入框采用T-design框架下的Input组件
     * 表单属性数组，数组每项属性如下
     * required: 是否必填,
     * label: 条目标签名,
     * placeholder: 默认提示,
     * name: 对应字段名,
     * value: 真实值,
     * status: 输入框状态。可选项：success/warning/error,
     * tips: 输入框下方提示文本，会根据不同的 status 呈现不同的样式,
     * inputType: 输入类型 （text: 输入框；switch：切换按钮; picker: 下拉框选项; cascader: 级联选择）,
     * options: 当输入类型为picker或cascader时，提供可选项,
     * cascaderTitles: 当输入类型为cascader时，提供每个选项的标题,
     */
    formArr: {
      type: Array,
      value: [],
      observer(v) {
        this.setData({ formArray: v });
      },
    },
  },

  data: {
    formArray: [],
  },

  methods: {
    // 输入框
    onInputChange(e) {
      const { index } = e.currentTarget.dataset;
      const { value } = e.detail;
      this.setData({
        [`formArray[${index}].value`]: value,
      });
    },
    // 开关
    onSwitchChange(e) {
      const { index } = e.currentTarget.dataset;
      const { value } = e.detail;
      // const { formArray } = this.data;
      // formArray[index].value = value;
      // this.setData({ formArray });
      this.setData({
        [`formArray[${index}].value`]: value,
      });
    },
    // 下拉框
    showPicker(e) {
      const { index } = e.currentTarget.dataset;
      this.setData({ [`formArray[${index}].visible`]: true });
    },
    onPickerChange(e) {
      const { index } = e.currentTarget.dataset;
      const { label, value } = e.detail;
      this.setData({
        [`formArray[${index}].visible`]: false,
        [`formArray[${index}].value`]: {
          label: label[0],
          value: value[0],
        },
      });
    },
    onPickerCancel(e) {
      const { index } = e.currentTarget.dataset;
      this.setData({
        [`formArray[${index}].visible`]: false,
      });
    },
    // 级联选择
    showCascader(e) {
      const { index } = e.currentTarget.dataset;
      this.setData({ [`formArray[${index}].visible`]: true });
    },
    onCascaderChange(e) {
      const { selectedOptions, value } = e.detail;
      console.log(selectedOptions);
      console.log(value);
    },

    // 保存
    onSubmit() {
      const formObj = {};
      this.data.formArray.forEach(e => {
        if (e.inputType == 'picker') {
          formObj[e.name] = e.value.value;
        } else {
          formObj[e.name] = e.value;
        }
      });
      this.triggerEvent('submit', formObj);
    },
    // 取消
    onCancel() {
      this.triggerEvent('cancel');
    },

    _note(v) {
      let note = '';
      v.forEach(o => {
        if (note != o.label && o.value > 0) {
          if (note != '') {
            note += '/';
          }
          note += o.label;
        }
      });
      return note;
    },
  },
});