<template>
  <div class="data-source-selector">
    <el-input :type="inputType" :readonly="readonly" :value="fieldInfo" size="small">
      <el-button @click="handleSelect" icon="el-icon-edit-outline" v-if="layout === 'lr' && !readonly" slot="append"> 选择字段 </el-button>
    </el-input>
    <el-button v-if="layout === 'ud' && !readonly" type="primary" style="margin-top: 8px; width: 100%" @click="handleSelect" size="mini" icon="el-icon-edit-outline">点击选择字段</el-button>

    <form-model v-if="!readonly" ref="formModel" :enableRelatedTable="enableRelatedTable" :modelId="modelId" @submit="handleSubmit"></form-model>
  </div>
</template>

<script>
import FormModel from "./components/FormModel.vue";
import { isPlainObject } from "lodash";
export default {
  name: "AceDataSourceFiledSelector",
  components: { FormModel },
  data() {
    return {
      modelData: "", //选中数据
    };
  },
  model: {
    prop: "value",
    event: "change",
  },
  computed: {
    inputType() {
      return this.layout === "ud" ? "textarea" : "text";
    },
    fieldInfo() {
      if (!isPlainObject(this.value) || !this.value.hasOwnProperty.call("tabColName")) {
        //是否为对象， 对象里是否有tabColName属性
        return "请选择数据库字段";
      }
      //判断是否是关联表字段
      return `${this.enableRelatedTable ? "【主表】" : ""}${this.value.objColName}（${this.value.caption}）`;
    //   if (this.value.isRelatedTable) {
    //     return `${this.enableRelatedTable ? "【关联表】" : ""}${this.value.objColName}（${this.value.caption}）`;
    //   } else {
        
    //   }
    },
  },
  props: {
    layout: {
      type: String,
      //可选值 上下布局 “ud”    左右布局 “lr”
      default: "ud",
    },
    value: {
      type: Object,
      default() {
        return {};
      },
    },
    enableRelatedTable: {
      type: Boolean,
      default: false,
    },
    modelId: {
      type: String,
      default: "",
      required: true,
    },
    readonly: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    handleSelect() {
      this.$refs.formModel.showDialog();
    },
    handleSubmit(val) {
      delete val.hasRelatedTable; //删除是否有关联表属性
      this.$emit("change", val);
    },
  },
};
</script>
