<!--用户选择组件-->
<template>
  <el-popover v-model="show" placement="bottom-start" width="630" popper-class="data-source-selector-popover" trigger="click">
    <div style="padding: 15px" v-loading="loading">
      <div style="display: flex; margin-bottom: 10px">
        <div style="flex: 1">
          主数据源： <el-tag :size="size">{{ dsInfo.name }}</el-tag>
        </div>
        <div style="flex: 1">
          数据源类型： <el-tag size="size">{{ dsInfo.type }}</el-tag>
        </div>
      </div>
      <el-table :data="sysModels" :row-style="{ cursor: 'pointer' }" highlight-current-row border height="300px" @row-click="handleCurrentChange" :size="size">
        <el-table-column property="modelName" label="模型名称"></el-table-column>
        <el-table-column property="tableName" label="表名"></el-table-column>
        <el-table-column property="remark" label="表说明"></el-table-column>
      </el-table>
    </div>

    <el-input :value="tableInfo" placeholder="点击选择数据源" slot="reference" icon="el-icon-edit-outline" :size="size" readonly>
      <el-button slot="append" :size="size">点击选择</el-button>
    </el-input>
  </el-popover>
</template>
<script>
import { isPlainObject } from "lodash";
export default {
  name: "AceDataSourceTableSelector",
  model: {
    event: "change",
    prop: "value",
  },
  props: {
    appId: {
      type: String,
      required: true,
    },
    size: {
      type: String,
      default: "small",
    },
    value: {
      type: Object,
    },
    id: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      loading: false,
      currentRow: null,
      dsInfo: {
        name: "",
        type: "",
        id: "",
      },
      dataSource: {},
      show: false,
      sysModels: [],
    };
  },
  computed: {
    tableInfo() {
      //tableName
      // return ""
      // eslint-disable-next-line no-prototype-builtins
      if (!isPlainObject(this.value) || !this.value.hasOwnProperty("tableName")) {
        //是否为对象， 对象里是否有tabColName属性
        return "请选择数据库字段";
      }
      //判断是否是关联表字段
      return this.value.tableName;
    },
  },
  watch: {
    appId() {
      this.getSysGroupDatasources();
    },
  },
  mounted() {
    this.show = true;
    this.getSysGroupDatasources();
    this.show = false;
  },

  methods: {
    handleCurrentChange(val) {
      this.dataSource = val;
      this.$emit("change", val);
      this.show = false;
    },
    async getSysGroupDatasources() {
      let result = await this.$http({
        url: this.$http.adornUrl("/sysGroupDatasources/get/majorDataSource"),
        method: "get",
        params: this.$http.adornParams({
          appId: this.appId,
        }),
      });
      if (result.data.code === 40000) {
        this.dsInfo = result.data.instance;
        this.getSysModels();
      }
    },
    async getSysModels() {
      let result = await this.$http({
        url: this.$http.adornUrl("/sysModels/query/list"),
        method: "get",
        params: this.$http.adornParams({
          appId: this.appId,
          dsId: this.dsInfo.id,
        }),
      });
      let { data } = result;
      if (data.code === 40000) {
        this.sysModels = data.list;
      }
    },
  },
};
</script>
<style>
.data-source-selector-popover {
  padding: 0;
}
</style>
