<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="dataList" style="width: 100%" highlight-current-row>
            <el-table-column label="字段" width="150" align="center">
              <template slot-scope="scope">{{scope.row.origName}}</template>
            </el-table-column>
            <el-table-column label="名称" width="150" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.showName"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="绑定纬度" width="80" align="center">
              <template slot-scope="scope">
                <el-switch v-model="scope.row.dimension"></el-switch>
              </template>
            </el-table-column>
            <el-table-column label="绑定数值" width="80" align="center">
              <template slot-scope="scope">
                <el-switch v-model="scope.row.number"></el-switch>
              </template>
            </el-table-column>
          </el-table>
        </el-main>
        <el-footer height="45px" style="text-align:center;padding:5px">
          <el-button type="primary" @click="okHandler" size="mini">保存</el-button>
          <el-button @click="dialogVisible = false" size="mini">取消</el-button>
        </el-footer>
      </el-container>
    </el-dialog>
  </div>
</template>

<script>
import $ from "jquery";
export default {
  name: "RadarBind",
  props: {
    dictCode: String,
    modelData: String,
  },
  data() {
    return {
      dialogVisible: false,
      dataList: []
    };
  },
  methods: {
    okHandler() {
      let arr = [];

      this.dataList.forEach((item) => {
        if (item.dimension || item.number) {
          let aRow = {};

          aRow.origName = item.origName;
          aRow.showName = item.showName;
          aRow.dimension = item.dimension;
          aRow.number = item.number;

          arr.push(aRow);
        }
      });

      this.$emit("set-value", this.dictCode, JSON.stringify(arr));

      this.dialogVisible = false;
    },
    setHandler() {
      this.dataList = this.initDataList();
      this.dialogVisible = true;
    },
    initDataList() {
      let list = this.colList;
      if (!list) {
        return;
      }

      let modelDataObj = JSON.parse(this.modelData);
      let rs = [];
      for (var i in list) {
        let row = ({
          origName: list[i].fieldCode,
          showName: list[i].fieldName,
          dimension: false,
          number: false,
        });

        var matchRows = modelDataObj.filter(function(item) {
          return item.origName == row.origName;
        });

        if (matchRows.length > 0) {
          let bindRow = matchRows[0];

          if (eval(bindRow.dimension)) {
            row.dimension = eval(bindRow.dimension);
          }

          if (eval(bindRow.number)) {
            row.number = eval(bindRow.number);
          }
        }
        rs.push(row);
      }
      return rs;
    }
  },
  computed: {
    colList: {
      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,
            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) {
                  for (var p in res.data[0]) {
                    list.push({
                      fieldCode: p,
                      fieldName: p,
                      dataType: typeof res.data[0][p],
                    });
                  }
                }
              }
            },
            error: function (jqXHR, textStatus, errorThrown) {
              console.log("jqXHR :", JSON.stringify(jqXHR));
            },
          });
        }

        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>
