<template>
  <div>
    <!-- 模型管理弹窗 -->
    <el-dialog :visible.sync="dialogVisible" width="900px" close-on-click-modal :show-close="false" title="数据源字段选择">
      <el-table border ref="formModel" :data="dataColList" size="mini" max-height="600px" highlight-current-row @row-click="singleSelection">
        <el-table-column width="150px" prop="tabColName" label="表列名"></el-table-column>
        <el-table-column prop="objColName" label="字段名"> </el-table-column>
        <el-table-column prop="caption" label="字段备注"> </el-table-column>
        <el-table-column prop="dataType" label="字段类型"> </el-table-column>
        <el-table-column label="主键">
          <template slot-scope="{ row }">
            {{ row.pkFlg == "1" ? "是" : "否" }}
          </template>
        </el-table-column>
        <el-table-column label="允许为空">
          <template slot-scope="{ row }">
            {{ row.nullable == "0" ? "否" : "是" }}
          </template>
        </el-table-column>
        <el-table-column v-if="enableRelatedTable" width="140" label="关联表" align="center" show-overflow-tooltip>
          <template slot-scope="{ row }">
            <el-button type="text" size="mini" icon="el-icon-date" v-if="row.hasRelatedTable" @click="relateSchedule(row)">选择关联表字段</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row>
        <div class="bottom">
          <el-button type="primary" @click="confirm">确定</el-button>
          <el-button @click="dialogVisible = false">取消</el-button>
        </div>
      </el-row>
    </el-dialog>
    <!-- 附表弹窗 -->
    <el-dialog :visible.sync="relateVisible" width="900px" append-to-body :modal-append-to-body="false" close-on-click-modal :show-close="false" title="附表字段选择">
      <el-form>
        <div class="header">
          <el-row>
            <el-col>
              <el-form-item label="附表对象模型:">
                <div class="headerRelSelect">
                  <el-select v-model="currentModelId" placeholder="请选择附表对象模型" size="small" @change="getSubTableColDataList">
                    <el-option v-for="item in fkModelDOsList" :key="item.id" :value="item.id" :label="item.modelName"> </el-option>
                  </el-select>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <el-table :data="fkDataColList" border size="mini" ref="table" style="width: 2000px" max-height="300px" highlight-current-row @row-click="singleRelSelection">
          <el-table-column prop="tabColName" label="表列名"> </el-table-column>
          <el-table-column prop="objColName" label="字段名"> </el-table-column>
          <el-table-column prop="caption" label="字段备注"> </el-table-column>
          <el-table-column prop="dataType" label="数据类型"> </el-table-column>
          <el-table-column label="允许为空">
            <template slot-scope="{ row }">
              {{ row.nullable == "0" ? "否" : "是" }}
            </template>
          </el-table-column>
          <el-table-column label="主键">
            <template slot-scope="{ row }">
              {{ row.pkFlg == "1" ? "是" : "否" }}
            </template>
          </el-table-column>
        </el-table>
        <el-row>
          <el-form-item>
            <div class="bottom">
              <el-button type="primary" @click="relConfirm">确定</el-button>
              <el-button @click="relateVisible = false">取消</el-button>
            </div>
          </el-form-item>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "formModel",
  props: {
    modelId: String,
    enableRelatedTable: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      //选中行数据
      selectRows: {
        mainTabColName: "", //主表列名
        tabColName: "", //表列名
        objColName: "", //实体列名
        caption: "", //字段说明
        dataType: "", //数据类型
        pkFlg: "", //是否允许为空
        nullable: "", //是否为主键 0 否 1是
        hasRelatedTable: false, //是否有关联表
        isRelatedTable: false, //是否是关联表数据
        fkModelName: "", // 附表对象名称
        fkModelDOs: [], //关联副表信息
      },
      relateVisible: false,
      dialogVisible: false,
      //对象模型数据
      modelDataList: [],
      fkModelDOsList: [], //关联附表信息
      tableData: [],
      currentModelId: "",
      fkTabName: [], //附表名称
      fkDataColList: [], //附表信息
      dataColList: [], //模型属性列表
      modelDataListLoading: false,
      /* 只有在选择关联表字段时才会带上 */
      masterTableColInfo: null,

      //关联表信息信息
      relateTableInfo: null,
    };
  },
  created() {
    //获取对象模型
    this.getTableColDataList();
  },
  methods: {
    //主表选中
    singleSelection(row) {
      this.selectRows = row;
      this.selectRows.isRelatedTable = false;
    },
    //附表选中
    singleRelSelection(row) {
      this.selectRows = row;
      this.selectRows.isRelatedTable = true;
    },
    //关联附表
    relateSchedule(row) {
      this.fkModelDOsList = row.fkModelDOs;
      this.getSubTableColDataList(this.fkModelDOsList[0].id);

      this.relateVisible = true;
    },
    showDialog() {
      this.dialogVisible = true;
    },
    //附表确认
    relConfirm() {
      if (this.selectRows.tabColName === "") {
        alert("未选中任何数据！");
      }
      //是否为关联表
      this.selectRows.isRelatedTable = true;
      //将附表信息加入选择列数据中
      this.selectRows.relateTableInfo = this.relateTableInfo;
      //提交选中数据
      this.$emit("submit", this.selectRows);
      this.relateVisible = false;
      this.dialogVisible = false;
    },
    //主表确认
    confirm() {
      if (this.selectRows.tabColName === "") {
        alert("未选中任何数据！");
      }
      this.selectRows.isRelatedTable = false;
      delete this.selectRows.fkModelDOs; //删除主表列数据中 关联表数据
      //提交选中数据
      this.$emit("submit", this.selectRows);
      this.dialogVisible = false;
    },
    //获取附表模型属性列表
    getSubTableColDataList(id) {
      this.currentModelId = id;
      this.fkModelDOsList.forEach((item) => {
        if (item.id === id) {
          this.fkDataColList = item.sysModelColDOS; //更新 列（字段）数据列表
          this.relateTableInfo = item; //关联表数据
          delete this.relateTableInfo.sysModelColDOS; //删除字段列表
        }
      });
    },
    //获取主表模型属性列表
    getTableColDataList() {
      this.$http({
        url: this.$http.adornUrl("/sysModelCols/query/colList/andFkCols"),
        method: "get",
        params: this.$http.adornParams({
          modelId: this.modelId,
        }),
      }).then(({ data }) => {
        if (data && data.code === 40000) {
          if (data.list.length > 0) {
            this.dataColList = data.list;
            //遍历主表列数据 判断是否为附表主键字段
            this.dataColList.forEach((item) => {
              //属性 fkModelDOs 存在 ，存在关联表
              //显示“关联表”按钮
              item.hasRelatedTable = item.fkModelDOs && item.fkModelDOs.length > 0;
            });
          }
        } else {
          this.messageBox && this.messageBox.close();
          this.messageBox = this.$message.error(data.msg);
        }
      });
    },
  },
};
</script>

<style lang="scss">
.header {
  // float: left;
  display: flex;

  .headerSelect {
    margin-left: 72px;
  }
  .headerRelSelect {
    margin-left: 100px;
  }
}
.bottom {
  margin-top: 10px;
  float: right;
}
</style>
