<template>
  <div id="main" class="h-all">
    <el-dialog
      @close="close"
      v-dialogDrag
      :title=title
      style="font-size: 10px;" width='600px'
      :visible.sync="innerVisible">
        <el-form inline="true">
          <el-main>
            <el-table
              tooltip-effect="dark"
              highlight-current-row
              ref="singleTable"
              :data="reportTemplateList"
              border="true"
              stripe
              height="400px"
              header-row-class-name="table-header"
              cell-class-name="table-cell"
              @current-change="handleCurrentChange">
              <el-table-column
                prop="reportTemplateName"
                :label="$t('ReportTemplateManagement.reportTemplateName')">
              </el-table-column>
              <el-table-column
                prop="reportType"
                :formatter="formatReportType"
                :label="$t('ReportTemplateManagement.templateType')">
              </el-table-column>
              <el-table-column
                prop="description"
                :label="$t('ReportTemplateManagement.desc')"
                :show-overflow-tooltip="true">
              </el-table-column>
            </el-table>
          </el-main>
        </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size='mini' type="primary" @click="AddTo">
          {{$t("common.ok")}}
        </el-button>
        <el-button size='mini' @click="close">{{$t("common.cancel")}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import ReportTemplateService from "../../domain/services/ReportTemplateService";
import HelperUtil from "../../utils/HelperUtil";

export default {
  name: 'ImportReportTemplate',
  props: {
    innerVisible: false,
    detailType: '',
    templateType: {},
    title: ''
  },
  data: function () {
    return {
      selectList: [],
      reportTemplateList: []
    }
  },
  methods: {
    /**
     * @Description  : 获取模板
     * @author       : ls
     * @date         : 2020/6/8 9:59
     * @param        :
     * @return       :
     */
    getTemplate: function () {
      this.selectList = []
      this.selectList.push({
        quaryAttribute: 'reportType',
        compareSymbol: '=',
        compareValue: this.detailType
      })
      ReportTemplateService.queryReportTemplate(this.selectList).then(result => {
        this.reportTemplateList = Object.values(result)
      }).catch(err => {
        this.InfoTip.errorTip(this, err)
      })
    },
    /**
     * @Description  : 处理
     * @author       : ls
     * @date         : 2020/6/8 10:15
     * @param        :
     * @return       :
     */
    handleCurrentChange: function (val) {
      this.templateType = val
      console.log(this.templateType)
    },
    /**
     * @Description  : 确认
     * @author       : ls
     * @date         : 2020/6/8 10:16
     * @param        :
     * @return       :
     */
    AddTo: function () {
      if (JSON.stringify(this.templateType) === '{}') {
        this.InfoTip.warningTip_alarm(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.SAVE_SELECT_CODE))
        return
      }
      this.$emit('update:templateType', this.templateType)
      this.$emit('update:innerVisible', false)
    },
    /**
     * @Description  : 格式化
     * @author       : ls
     * @date         : 2020/6/8 10:11
     * @param        :
     * @return       :
     */
    formatReportType: function (row) {
      var ret = ''
      switch (row.reportType) {
        case 0:
          ret = this.$t('ReportTemplateManagement.alarmDistribution')
          break
        case 1:
          ret = this.$t('ReportTemplateManagement.alarmTrend')
          break
        case 2:
          ret = this.$t('ReportTemplateManagement.alarmTopBottom')
          break
        case 3:
          ret = this.$t('ReportTemplateManagement.performanceDistribution')
          break
        case 4:
          ret = this.$t('ReportTemplateManagement.performanceTrend')
          break
        case 5:
          ret = this.$t('ReportTemplateManagement.performanceTopBottom')
          break
      }
      return ret
    },
    close: function () {
      this.$emit('update:innerVisible', false)
    }
  },
  created: function () {
    this.getTemplate()
  },
  watch: {
    innerVisible (newVal, oldVal) {
    },
    monitorObject (newVal) {
      switch (newVal) {
        case 0:
          this.monitorObjectFlag0 = false
          this.monitorObjectFlag1 = true
          this.monitorObjectFlag2 = true
          this.chooseDeviceFlag = true
          break
        case 1:
          this.monitorObjectFlag0 = true
          this.monitorObjectFlag1 = false
          this.monitorObjectFlag2 = true
          this.chooseDeviceFlag = true
          break
        case 2:
          this.monitorObjectFlag0 = true
          this.monitorObjectFlag1 = true
          this.monitorObjectFlag2 = false
          this.chooseDeviceFlag = false
          break
      }
    }
  }
}
</script>

<style scoped lang="scss">
  /*!* 外层布局容器样式 *!*/
  .el-header {
    background-color: #f9fafc;
    color: #333;
    line-height: 40px;
  }

  #box{
    width:100%;
    height:100%;
    overflow:hidden;
  }
  .el-card__header {
    background-color: greenyellow;
  }

  /* .el-input {
     width: 330px;
   }*/

  /deep/ .el-textarea__inner{
    font-size: 12px;
  }
</style>
