<script lang="ts">
import Vue, { CreateElement } from "vue";
import { Input } from "view-design";
import _ from "lodash";
import { CUSTOM_INPUT_REG } from "@wg-npm/survey-core";

export default Vue.component("question-title-dynamic", {
  components: { Input },
  props: {
    splitedTitles: {
      type: Array,
      required: true,
    },
    customFilledTitle: {
      type: Array,
      required: false,
    },
  },
  render(createElement: CreateElement) {
    let childArr: Array<any> = [];
    const self = this;
    _.forEach(this.splitedTitles, (title: string, index: number) => {
      if (CUSTOM_INPUT_REG.test(title)) {
        let corespondTitle = _.find(self.customFilledTitle, (title) => {
          return title.index === index;
        });
        if (corespondTitle !== undefined) {
          childArr.push(
            createElement(Input, {
              domProps: {
                // @ts-ignore
                value: corespondTitle.title,
              },
              props: {
                // @ts-ignore
                value: corespondTitle.title,
              },
              on: {
                input: function (value) {
                  // @ts-ignore
                  corespondTitle.title = value;
                },
              },
            })
          );
        }
      } else {
        childArr.push(title);
      }
    });
    return createElement("div", { class: "content pl-sm" }, childArr);
  },
});
</script>

<style scoped lang="less">
/deep/ .ivu-input-wrapper {
  width: auto;
}
</style>
