<template>
  <div name="online-form">
    <el-row class="top-title__row">
      <h3 class="top-title">{{queryView.name?(queryView.name ):""}}</h3>
    </el-row>
    <span v-if="html">
      <dynamic-view :sqlAlias="sqlAlias" :alias="alias" :html="html" :single="single" :queryView="queryView"/>
    </span>
    <div class="loaded-fail__div" v-if="loadedFail">{{alias}}视图不存在...</div>
  </div>
</template>

<script>
  import DynamicView from "@/components/querySql/DynamicView.vue";
  import utils from "@/utils.js";

  export default {
    name: "querySqlContent",
    props: {
      sqlAlias: String,
      alias: String,
      single: String,
    },
    data() {
      return {
        queryView: {},
        displayFields: [],
        html: "",
        alarmSettingMap:{},
        summaryTypeMap:{},
        loadedFail:false
      };
    },
    watch: {
      alias: function(newVal) {
        if (newVal) {
          this.init();
        }
      }
  },
    components: {
      DynamicView
    },

    created() {
      this.init();
    },
    methods: {
      // 根据当前formKey初始化
      init() {
        const loading = this.$loading(this.options);
        let _me = this;
        this.$store
                .dispatch("form/getQuerySqlView", {
                  sqlAlias: this.sqlAlias,
                  alias: this.alias
                })
                .then(result => {
                  if (result) {
                    _me.queryView = result;
                    _me.html = result.template;

                    let params = { sqlAlias: _me.sqlAlias, alias: _me.alias };
                    let pageBean = {
                      pageBean: {
                        page: "1",
                        pageSize: result.pageSize ? result.pageSize : 30,
                        showTotal: "true"
                      }
                    }; //初次加载默认pageBean
                    params.pagination = pageBean;
                    this.$store
                            .dispatch("form/getQuerySqlViewByPagination", params)
                            .then(() => {
                              loading.close();
                            });
                  }else{
                    this.loadedFail = true;
                  }
                }).finally(()=>{
                  loading.close();
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
@import "@/assets/css/element-variables.scss";
  /deep/ th.todo-header-row {
    background-color: #fafafa;
    font-size: 13px;
  }

  /deep/ tr.todo-row {
    font-size: 13px;
    color: $--color-text-regular;
  }

  .el-container {
    background-color: #fff;
  }

  .top-title__row {
    margin-bottom: 10px;
    .top-title{
      font-size: 14px;
      border-bottom: 1px solid #ccc;
      margin: 17px 0 0 0;
      padding: 0 0 12px 20px;
    }
  }

  .el-header {
    border-bottom: 1.5px solid #ededed;
  }

  .i {
    margin-right: 4px;
  }

  .todo-subject {
    cursor: pointer;
  }

  .todo-subject:hover {
    color: $--theme-color;
  }

  /deep/ .el-dialog__body {
    padding: 15px 10px;
  }

  /deep/ .el-checkbox {
    margin-left: 15px;
  }

  /deep/ .el-radio {
    margin-left: 15px;
  }

  /deep/ .el-button {
    margin-left: 0px;
  }
  .loaded-fail__div {
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: #f56c6c;
  }
</style>
