<template>
  <div>
    <el-switch v-if="com === 'switch'" v-model="faNode[nodeKey]" :placeholder="placeholder" v-bind="$attrs" v-on="$listeners" :disabled="true"></el-switch>
    <div v-if="com === 'text'" v-html="faNode[nodeKey]"></div>
    <div v-if="com === 'range'">{{faNode[nodeKey][0]}} ~ {{ faNode[nodeKey][1] }}</div>
    <div v-if="com === 'radio'"> {{getName}}</div>
    <!-- <mg-upload v-if="com === 'el-upload'" v-bind="$attrs" v-on="$listeners" :faNode='faNode' :nodeKey='nodeKey' :item='item' :disabled="disabled">
    </mg-upload> -->
  </div>
</template>

<script>
// import base from "../utils/dictionary.js";
// import mgUpload from "../mgUpload";

export default {
  name: "BaseInput",
  components: {
    // mgUpload
  },
  props: {
    item: {
      type: Object,
      required: true
    },
    faNode: {
      type: Object,
      required: true
    },
    nodeKey: {
      type: String,
      required: true
    },
    formData: {
      type: Object,
    },
    type: {
      type: String,
      default: "input"
    },
    disabled: {
      type: Boolean,
      default: false
    },
    label: {
      type: String,
      default: ""
    },
    placeholder: {
      type: String,
      default() {
        if (["input", "number", "textarea"].includes(this.type)) {
          return `请输入${this.item.label}`;
        } else if (["datetime", "date", "select"].includes(this.type)) {
          return `请选择${this.item.label}`;
        } else if (["datetimerange"].includes(this.type)) {
          return `请选择${this.item.label}日期`;
        } else {
          return undefined;
        }
      }
    }
  },
  data() {
    return {
      enumList: [],
      imgList: [],
    };
  },
  mounted() {
    this.init()
    let self = this;
    if (self.item.apiList) {
      // let enumList = self.item.apiList.filter(api => (api.blurType == 1) && api.type == 2)
      let initList = self.item.apiList.filter(api => api.blurType == 1 && (api.type == 3 || api.type == 4))
      // if (enumList && enumList.length > 0) {
      //   enumList[0].fun(self.formData,{id:''}).then(res => {
      //     self.enumList = res
      //     self.$forceUpdate()
      //   })
      // }

      if (initList && initList.length > 0) {
        initList.forEach(res => {
          Object.keys(res).forEach(key => {
            self.$set(self.formData, key, res[key])
          })
        })
      }
    }

    // if (self.item.apifun) {
    //   self.item.apifun(self.formData).then(res => {
    //     self.enumList = res
    //     self.$forceUpdate()
    //   })
    // }
  },
  watch: {
    'item.enum'(value) {
      this.init()
    }
  },
  computed: {
    getName() {
      let name = ''
      if (!(this.enumList instanceof Array)) {
        this.enumList = []
      }
      if (this.faNode[this.nodeKey + '_name']) {
        name = this.faNode[this.nodeKey + '_name']
      } else {
        name = this.$dictionary.getName('', this.faNode[this.nodeKey], this.enumList);
      }
      return name
    },
    getImgList() {
      let img = '', imgList = []
      if (this.faNode[this.nodeKey]) {
        img = this.faNode[this.nodeKey]
        img = img.split(',')
        img.forEach(item => {
          imgList.push({
            url: item
          })
        });
      }
      this.imgList = imgList
      return imgList
    },
    date() {
      return [this.faNode[this.item.start], this.faNode[this.item.end]];
    },
    com() {
      const { type } = this;
      switch (type) {
        case "input":
          return "text";
        case "textarea":
          return "text";
        case "datetime":
          return "text";
        case "date":
          return "text";
        case "daterange":
          return "range";
        case "datetimerange":
          return "range";
        case "number":
          return "text";
        case "tinymce":
          return "text";
        case "radio":
          return "radio";
        case "checkbox":
          return "radio";
        case "select":
          return "radio";
        case "switch":
          this.$set(this.faNode, this.nodeKey, this.faNode[this.nodeKey] == 'true' || this.faNode[this.nodeKey] == true);
          return "switch";
        case "el-upload":
          if (typeof this.faNode[this.nodeKey] == 'string' && this.faNode[this.nodeKey]) {
            this.faNode[this.nodeKey] = JSON.parse(this.faNode[this.nodeKey])
          }
          this.$set(this.faNode, this.nodeKey, this.faNode[this.nodeKey] || []);
          return "el-upload";
        default:
          return type || "text";
      }
    }
  },
  methods: {
    async init() {
      let self = this;
      if (self.item.options) {
        self.enumList = this.item.options;
      }
      if (self.item.enum) {
        self.enumList = self.$dictionary.getList(this.item.enum);
      }
    },
    changeTime(val) {
      if (val && this.item.start) {
        this.$set(this.faNode, this.item.start, val[0]);
        this.$set(this.faNode, this.item.end, val[1]);
      } else if (this.item.start) {
        this.$set(this.faNode, this.item.start, undefined);
        this.$set(this.faNode, this.item.end, undefined);
      }
    }
  }
};
</script>
<style lang="less" scoped>
.wrap {
  flex-wrap: wrap;
  justify-content: space-between;
}
</style>
