<template>
  <div class="w100">
    <el-input v-if="com === 'input'" :type="item.inputType||'text'" v-model="faNode[nodeKey]" :placeholder="placeholder" v-bind="$attrs" v-on="$listeners" :disabled="disabled">
      <template slot="prepend" v-if="item.prepend">{{item.prepend}}</template>
      <template slot="append" v-if="item.append">{{item.append}}</template>
    </el-input>

    <el-input v-if="com === 'textarea'" type="textarea" v-model="faNode[nodeKey]" :placeholder="placeholder" v-bind="$attrs" v-on="$listeners" :disabled="disabled">
      <template slot="prepend" v-if="item.prepend">{{item.prepend}}</template>
      <template slot="append" v-if="item.append">{{item.append}}</template>
    </el-input>

    <el-input-number v-if="com === 'number'" v-model="faNode[nodeKey]" :placeholder="placeholder" v-bind="$attrs" v-on="$listeners" :disabled="disabled"></el-input-number>

    <el-select v-if="com === 'select'" @change="saveName" @focus='focus' v-model="faNode[nodeKey]" filterable clearable :placeholder="placeholder" :remote-method='remoteMethod' v-bind="$attrs" v-on="$listeners" :disabled="disabled">
      <el-option v-for="option in enumList" :key="option.value" :label="option.label" :value="option.value">
      </el-option>
    </el-select>

    <el-time-picker v-if="com === 'datetime'" :format="item.format || 'HH:mm:ss'" :value-format="item.format || 'HH:mm:ss'" v-model="faNode[nodeKey]" :placeholder="placeholder" v-bind="$attrs" v-on="$listeners" :disabled="disabled">
    </el-time-picker>
    <el-time-picker v-if="com === 'timerange'" is-range :format="item.format || 'HH:mm:ss'" :value-format="item.format || 'HH:mm:ss'" v-model="faNode[nodeKey]" :placeholder="placeholder" v-bind="$attrs" v-on="$listeners" :disabled="disabled">
    </el-time-picker>
    <el-date-picker v-if="com === 'date'" :type="item.inputType||'date'" style="width: 100%;" :format="item.format || 'yyyy-MM-dd'" :value-format="item.format || 'yyyy-MM-dd'" v-model="faNode[nodeKey]" :placeholder="placeholder" v-bind="$attrs" v-on="$listeners" :disabled="disabled"></el-date-picker>
    <el-date-picker v-if="com === 'daterange'" @change="changeTime" type="daterange" range-separator="至" :start-placeholder="placeholder" :end-placeholder="placeholder" :default-time="['00:00:00', '23:59:59']" style="width: 100%;" :format="item.format || 'yyyy-MM-dd'" :value-format="item.format || 'yyyy-MM-dd HH:mm:ss'" v-model="faNode[nodeKey]" :placeholder="placeholder" v-bind="$attrs" v-on="$listeners" :disabled="disabled"></el-date-picker>

    <el-switch v-if="com === 'switch'" v-model="faNode[nodeKey]" :placeholder="placeholder" v-bind="$attrs" v-on="$listeners" :disabled="disabled"></el-switch>
    <el-checkbox-group v-if="com === 'checkbox'" v-model="faNode[nodeKey]" v-bind="$attrs" v-on="$listeners" :disabled="disabled">
      <el-checkbox v-for="item in enumList" :key="item.value" :label="item.value">{{ item.label }}</el-checkbox>
    </el-checkbox-group>
    <el-radio-group v-if="com === 'radio'" v-model="faNode[nodeKey]" v-bind="$attrs" v-on="$listeners" :disabled="disabled">
      <el-radio v-for="item in enumList" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
    </el-radio-group>
    <el-cascader v-if="com === 'el-cascader'" :options="enumList" v-model="faNode[nodeKey]" :placeholder="placeholder" v-bind="$attrs" v-on="$listeners" :disabled="disabled"></el-cascader>
    <el-slider v-if="com === 'el-slider'" v-model="faNode[nodeKey]" v-bind="$attrs" v-on="$listeners" :disabled="disabled">
    </el-slider>
    <div v-if="type === 'text'" v-html="faNode[nodeKey]">
    </div>
  </div>
</template>

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

export default {
  name: "BaseInput",
  components: {},
  props: {
    item: {
      type: Object,
      required: true,
    },
    formData: {
      type: Object,
      required: true,
    },
    faNode: {
      type: Object,
      required: true,
    },
    nodeKey: {
      type: String,
      required: true,
    },
    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 (["daterange"].includes(this.type)) {
          return `请选择${this.item.label}日期`;
        } else {
          return undefined;
        }
      },
    },
  },
  data() {
    return {
      checkbox: "",
      enumList: [],
      imgList: [],
    };
  },
  created() {
    this.init();
    if (this.item.apiList) {
      let enumList = this.item.apiList.filter(
        (api) => api.blurType == 1 && api.type == 2
      );
      let initList = this.item.apiList.filter(
        (api) => api.blurType == 1 && api.type != 3
      );
      if (enumList && enumList.length > 0 && enumList[0].fun) {
        enumList[0].fun().then((res) => {
          this.enumList = res;
        });
      }
      if (initList && initList.length > 0) {
        initList.forEach((res) => {
          Object.keys(res).forEach((key) => {
            this.$set(this.formData, key, res[key]);
          });
        });
      }
      if (this.faNode[this.nodeKey]) {
        this.remoteMethod();
      }
    }
  },
  watch: {
    "item.enum"(value) {
      this.init();
    },
    "item.options"(value) {
      this.init();
    },
  },
  computed: {
    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() {
      let { type } = this;
      if (!(this.faNode[this.nodeKey] + "")) {
        this.faNode[this.nodeKey] = "";
      }
      this.$set(this.faNode, this.nodeKey, this.faNode[this.nodeKey]);
      switch (type) {
        case "daterange":
          this.$set(this.faNode, this.nodeKey, this.faNode[this.nodeKey] || []);
          return "daterange";
        case "checkbox":
          this.$set(this.faNode, this.nodeKey, this.faNode[this.nodeKey] || []);
          return "checkbox";
        case "el-upload":
          this.$set(this.faNode, this.nodeKey, this.faNode[this.nodeKey] || []);
          return "el-upload";
        case "switch":
          this.$set(
            this.faNode,
            this.nodeKey,
            this.faNode[this.nodeKey] || false
          );
          return "switch";
        default:
          return type || "input";
      }
    },
  },
  methods: {
    saveName(value) {
      let self = this;
      if (self.item.clearKey && self.item.clearKey.length > 0) {
        self.item.clearKey.forEach((data) => {
          self.$set(this.formData, data, "");
        });
      }
      if (self.item.saveName) {
        this.$set(
          this.faNode,
          this.nodeKey + "_name",
          this.$dictionary.getName("", this.faNode[this.nodeKey], this.enumList)
        );
      }
    },
    showLog(val) {
      console.log(val);
    },
    async init() {
      let self = this;
      if (self.item.options) {
        self.enumList = self.item.options;
        if (self.faNode[self.nodeKey]) {
          let temp = self.enumList.filter(
            (node) => node.value + "" == self.faNode[self.nodeKey] + ""
          );
          if (temp.length > 0) {
            self.faNode[self.nodeKey] = temp[0].value;
          }
        }
      }
      if (self.item.enum) {
        self.enumList = await this.$dictionary.getList(self.item.enum);
      }
    },
    focus() {
      if (this.item.apifun) {
        this.remoteMethod();
      }
    },
    remoteMethod(keyword) {
      if (this.item.apifun) {
        let self = this;
        this.formData.keyword = keyword;
        // let fun = this.$setForm.setAPIParam({}, 1, this.formData, this.item.apiItem)()
        this.item.apifun(this.formData).then((res) => {
          self.enumList = res;
        });
      }
    },
    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>
.w100 {
  width: 100%;
}
.wrap {
  flex-wrap: wrap;
  justify-content: space-between;
}
.el-select {
  width: 100%;
}
.el-date-editor {
  width: 100%;
}
.el-cascader {
  width: 100%;
}
.el-radio {
  line-height: 2;
}
</style>
