<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
        :alias="alias"
        :html="html"
        :queryView="queryView"
        :single="single"
        :sqlAlias="sqlAlias"
      />
    </span>
    <div v-if="loadedFail" class="loaded-fail__div">
      {{ 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';

::v-deep th.todo-header-row {
  background-color: #fafafa;
  font-size: 13px;
}

::v-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;
}

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

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

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

::v-deep .el-button {
  margin-left: 0px;
}

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