<template>
  <div class="form-container">
    <LabelComp :label="formItemObj.name" :popText="formItemObj.note" />
    <component
      v-bind:is="cur_comp[formItemObj.dataType]"
      :initValue="trueValue()"
      :isDisabled="!formItemObj.unDisabled"
      :unit="formItemObj.unit"
      :selectData="formItemObj.dataSource"
      :formItemObj="formItemObj"
      :info="info"
      :defaultFileList="trueValue()"
      @change="change"
    />
  </div>
</template>
<script>
// import LabelComp from "./items/label.vue";
import LabelComp from "./items/label.vue";
import InputComp from "./items/input.vue";
import SelectComp from "./items/select.vue";
import DateComp from "./items/date.vue";
import UploadComp from "./items/upload.vue";
import ImageUploadComp from "./items/ImageUpload.vue";
import { $Bus } from "@/utils/Bus";
export default {
  components: {
    LabelComp,
  },
  props: {
    formItemObj: {
      type: Object,
      default: () => {
        return {};
      },
    },
    info: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      cur_comp: {
        INTEGER: InputComp,
        STRING: InputComp,
        DOUBLE: InputComp,
        TEXT: InputComp,
        ENUM: SelectComp,
        DATETIME: DateComp,
        ATTACHMENT: ImageUploadComp,
      },
      result: this.info,
    };
  },
  mounted() {},
  methods: {
    change(val) {
      let pathArr = this.splitPath(this.formItemObj.path);
      // this.info[pathArr[0]][pathArr[1]] = val;
      console.log(
        "%c [ pathArr, value $emit ]: ",
        "color: #bf2c9f; background: pink; font-size: 13px;",
        pathArr,
        val
      );
      $Bus.$emit("formInfoChange", { pathArr: pathArr, value: val });
    },
    splitPath(path) {
      return path.split(".");
    },
    trueValue() {
      let pathArr = this.splitPath(this.formItemObj.path);
      let value = "";
      let path = "";
      if (
        pathArr.length > 1 &&
        this.info[pathArr[0]].hasOwnProperty(pathArr[1])
      ) {
        path = [pathArr[0]][pathArr[1]];
        value = this.info[pathArr[0]][pathArr[1]];
      } else if (pathArr.length === 1) {
        path = [pathArr[0]];
        value = this.info[pathArr[0]];
      }
      return value;
    },
  },
};
</script>

<style lang="less" scoped>
.form-container {
  display: flex;
  align-items: center;
}
</style>
