<template>
  <el-form-item :class="{'display-none':item.hideShow}" :label="localLabel+':'" :label-width="item.labelWidth?item.labelWidth:''" v-bind="item.attrs" :prop="item.prop" :colon="false">
    <template v-if="item.showLabel||showLabel" slot="label">&nbsp;</template>
    <template>
      <div :class="{'flex':item.btnShow}">
        <slot v-if="item.dom === 'slot'" :name="item.prop" v-bind:form-data="formData" v-bind:item="item" v-bind:fa-node="faNode" v-bind:node-key="nodeKey"></slot>
        <component v-else-if="item.dom" :is="item.dom" ref="component" :fa-node="faNode" :node-key="nodeKey" v-bind="item.attrs" :disabled="item.disabled || detail" :type="item.type" :item="item" :form-data="formData" v-on="item.listeners">
        </component>
        <input-pro v-else-if='!detail' :fa-node="faNode" :node-key="nodeKey" v-bind="item.attrs" :disabled="item.disabled" :type="item.type" :item="item" :form-data="formData" v-on="item.listeners" />
        <detail-pro v-else-if='detail' :fa-node="faNode" :node-key="nodeKey" v-bind="item.attrs" :disabled="item.disabled" :type="item.type" :item="item" :form-data="formData" v-on="item.listeners" />
        <el-button class="ml15" :type="item.btn.type" @click="clickBtn(item.btn)" v-if="item.btnShow">{{item.btn.label||'确定'}}</el-button>
      </div>
    </template>
  </el-form-item>
</template>

<script>
import InputPro from "./InputPro";
import detailPro from "./detailPro";
export default {
  name: "BaseItem",
  components: {
    InputPro,
    detailPro,
  },
  props: {
    // 配置对象
    item: {
      type: Object,
      required: true,
    },
    showLabel: {
      type: Boolean,
    },
    detail: {
      type: Boolean,
    },
    // 数据对象
    formData: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {};
  },
  computed: {
    localLabel() {
      return this.item.label ? this.item.label : "";
    },
    // 获取对象父节点  例如：prop='a.b.c',父对象则是 formData.a.b
    faNode() {
      const prop = this.item.prop || "";
      const keys = prop.split(".");
      keys.pop();
      let res = this.formData;
      keys.forEach((key) => {
        res = res[key];
      });
      return res;
    },
    nodeKey() {
      const prop = this.item.prop || "";
      return prop.split(".").pop();
    },
    // 对表单进行验证
    validate() {
      return this.$refs.component.validate
    }
  },
  created() { },
  methods: {
    clickBtn(item) {
      let self = this
      if (item.href) {
        let href = item.href
        let reg = /\$\{(.+?)\}/;
        let reg_g = /\$\{(.+?)\}/g;
        let result = href.match(reg_g);
        if (result) {
          result.forEach(res => {
            let temp = res.match(reg)[1]
            href = href.replace(res, self.formData[temp])
          })
        }
        window.open(href);
      } else if (item.callBack) {
        item.callBack()
      }
    }
  }
};
</script>
<style lang="less" scoped>
.flex {
  display: flex;
  .ml15 {
    margin-left: 15px;
  }
}
.display-none {
  display: none;
}
</style> 