<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-header height="45px" style="text-align:right;padding:5px">
          <el-button type @click="okHandler">确定</el-button>
        </el-header>
        <el-main>
          <el-table :data="dataList" style="width: 100%" highlight-current-row>
            <el-table-column label="字段" width="80" align="center">
              <template slot-scope="scope">{{scope.row.origName}}</template>
            </el-table-column>
            <el-table-column label="名称" width="100" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.showName"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="显示" width="70" align="center">
              <template slot-scope="scope">
                <el-switch v-model="scope.row.colShow"></el-switch>
              </template>
            </el-table-column>
            <el-table-column label="显示顺序" width="130" align="center">
              <template slot-scope="scope">
                <el-input-number v-model="scope.row.order"></el-input-number>
              </template>
            </el-table-column>
            <el-table-column label="显示为百分比" width="95" align="center">
              <template slot-scope="scope">
                <el-switch v-model="scope.row.markPercent"></el-switch>
              </template>
            </el-table-column>
            <el-table-column label="开启飘红飘绿" width="95" align="center">
              <template slot-scope="scope">
                <el-switch v-model="scope.row.flyRedGreen"></el-switch>
              </template>
            </el-table-column>
            <el-table-column label="列宽(px)" width="80" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.width" label="请输入表头宽度"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="合并数据行" width="80" align="center">
              <template slot-scope="scope">
                <el-switch v-model="scope.row.merge"></el-switch>
              </template>
            </el-table-column>
          </el-table>
        </el-main>
      </el-container>
    </el-dialog>
  </div>
</template>

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

      this.dataList.forEach(item => {
        if (item.colShow) {
          let aRow = {};

          aRow.origName = item.origName;
          aRow.showName = item.showName;
          aRow.order = item.order;
          aRow.colShow = item.colShow;
          aRow.markPercent = item.markPercent;
          aRow.flyRedGreen = item.flyRedGreen;
          aRow.width = item.width;
          aRow.merge = item.merge;

          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 me = this;
      let list = this.colList;
      if (!list) {
        return;
      }

      let rs = [];
      for (var i in list) {
        let row = {
          origName: list[i].fieldCode,
          showName: list[i].fieldName,
          colShow: false,
          order: eval(i) + 1,
          markPercent: false,
          flyRedGreen: false,
          width: null,
          merge: false
        };

        if (me.modelData) {
          let modelDataObj = JSON.parse(me.modelData);
          var matchRows = modelDataObj.filter(function(item) {
            return item.origName == row.origName;
          });
          if (matchRows.length > 0) {
            let bindRow = matchRows[0];

            if (bindRow.showName) {
              row.showName = bindRow.showName;
            }

            if (bindRow.colShow) {
              row.colShow = bindRow.colShow;
            }

            row.order = bindRow.order;

            if (bindRow.markPercent) {
              row.markPercent = bindRow.markPercent;
            }

            if (bindRow.flyRedGreen) {
              row.flyRedGreen = bindRow.flyRedGreen;
            }

            if (bindRow.width) {
              row.width = bindRow.width;
            }

            if(bindRow.merge) {
              row.merge = bindRow.merge;
            }
          }
        }

        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>
