<template>
  <div>
    <el-button @click="setHandler">设置</el-button>
    <el-dialog
      :close-on-click-modal="false"
      class="pub_dialog"
      title="绑定字段关联"
      :visible.sync="dialogVisible"
      width="50%"
    >
      <el-container>
        <el-main>
          <el-table :data="tableData" style="width: 100%" highlight-current-row id="table">
            <el-table-column label="序号" width="80" align="center" type="index"></el-table-column>
            <el-table-column label="名称" width="150" align="center">
              <template slot-scope="scope">{{scope.row.name}}</template>
            </el-table-column>
            <el-table-column label="绑定字段" width="150" align="center">
              <template slot-scope="scope">
                <el-select clearable v-model="scope.row.fieldBind">
                  <el-option
                    v-for="(item, i) in selectLit"
                    :value="item.fieldCode"
                    :label="item.fieldName"
                    :key="i"
                  ></el-option>
                </el-select>
              </template>
            </el-table-column>
          </el-table>
        </el-main>
        <el-footer height="45px" style="text-align:center;padding:5px">
          <el-button type="primary" @click="okHandler">保存</el-button>
          <el-button @click="dialogVisible = false">取消</el-button>
        </el-footer>
      </el-container>
    </el-dialog>
  </div>
</template>

<script>
import $ from "jquery";
export default {
  name: "FieldBind",
  props: {
    dictCode: String,
    modelData: String
  },
  data() {
    return {
      dialogVisible: false,
      multipleSelection: [],
      tableData: []
    };
  },
  computed: {
    selectLit: {
      get() {
        let me = this;
        let attrObj = me.GLOBAL.fwebdesigner.selectedCom;

        let finalPath = null;
        if (me.GLOBAL) {
          finalPath = me.GLOBAL.basePath;
        }

        let list = [];
        let reqUrl = null;

        if (attrObj["dataType"] == "sql") {
          if (!attrObj["data_source"]) {
            me.$message.error("请选择数据视图！");
          } else {
            let dsObj = me.GLOBAL.fwebdesigner.dsList.filter(function(obj) {
              return obj.dsCode == attrObj["data_source"];
            });
            let ds = dsObj[0];
            if (ds && ds.entityCode) {
              reqUrl =
                finalPath +
                "fweb-form/data/entities/entity/getcolumns?entityCode=" +
                ds.entityCode;
            }
          }
        }

        if (attrObj["dataType"] == "api") {
          reqUrl = finalPath + attrObj["dataUrl"];
        }

        if (reqUrl) {
          $.ajax({
            url: reqUrl,
            async: false,
            contentType: "application/json",
            data: { inFwebDesigner: 1 },
            dataType: "json",
            success: function(res) {
              if (attrObj["dataType"] == "sql") {
                list = res.data;
              }
              if (attrObj["dataType"] == "api") {
                if (res.rows) {
                  let data = res.rows;
                  res.data = data;
                  delete res["rows"];
                }
                if (res.data) {
                  let row = Array.isArray(res.data) ? res.data[0] : res.data;
                  for (var p in row) {
                    list.push({
                      fieldCode: p,
                      fieldName: p
                    });
                  }
                }
              }
            },
            error: function(jqXHR, textStatus, errorThrown) {
              console.log("jqXHR :", JSON.stringify(jqXHR));
            }
          });
        }
        return list;
      }
    }
  },
  methods: {
    okHandler() {
      let result = {};
      for (let i in this.tableData) {
        if (this.tableData[i].fieldBind) {
          result[this.tableData[i].field] = this.tableData[i].fieldBind;
        }
      }
      this.$emit("set-value", this.dictCode, JSON.stringify(result));
      this.dialogVisible = false;
    },
    setHandler() {
      this.tableData = this.initTableData();
      this.dialogVisible = true;
    },
    initTableData(){
      let me = this;
      let attrs = this.GLOBAL.fwebdesigner.selectedCom;
      let list = [];
      if (attrs.fieldBindList) {
        JSON.parse(attrs.fieldBindList).forEach(function(item) {
          let row = {
            name: item.name,
            field: item.field,
            fieldBind: ""
          };

          if (me.modelData) {
            let modelDataObj = JSON.parse(me.modelData);
            row.fieldBind = modelDataObj[row.field];
          }

          list.push(row);
        });
      }
      return list;
    }
  }
};
</script>
<style lang="scss">
.pub_dialog {
  display: flex;
  justify-content: center;
  align-items: Center;
  overflow: hidden;
  .el-dialog {
    margin: 0 auto !important;
    height: 90%;
    overflow: hidden;
    .el-dialog__body {
      position: absolute;
      left: 0;
      top: 54px;
      bottom: 0;
      right: 0;
      padding: 0;
      z-index: 1;
      overflow: hidden;
      overflow-y: auto;
    }
  }
}
</style>
