<template>
  <div class="fullheight">
    <div class="box-flex">
      <div class="border-left">
        <h2 class="border-header">消息类型</h2>
        <div class="tree-content">
          <el-tree
            ref="typeTree"
            highlight-current
            :data="treeList"
            :props="defaultTypeProps"
            @node-click="handleClick"
          >
            <span class="custom-tree-node" slot-scope="{node}">
              <span>
                <i class="el-icon-menu tree-icon"></i>{{ node.label }}
              </span>
            </span>
          </el-tree>
        </div>
      </div>
      <div class="border-right">
        <h2 class="border-header">{{ selectTypeName }}</h2>
        <div class="table-content">
          <ht-table
            @row-dblclick="row => showDialog(row.id)"
            @load="loadData"
            :data="data"
            :pageResult="pageResult"
            :selection="true"
            quick-search-props="code"
            :show-export="false"
            :show-custom-column="false"
            ref="htTable"
          >
            <template v-slot:toolbar>
              <el-button
                size="small"
                @click="showDialog()"
                icon="el-icon-plus"
                type="primary"
                >添加</el-button
              >
              <ht-delete-button
                url="${cssc}/biz/scada/scadaFault/v1/"
                :htTable="$refs.htTable"
                >删除</ht-delete-button
              >
              <el-button
                icon="el-icon-back"
                style="margin-left: 10px"
                @click="handleImportDialog"
                type="primary"
                plain
                >导入</el-button
              >
            </template>
            <template>
              <ht-table-column prop="name" label="名称" :sortable="true">
              </ht-table-column>
              <ht-table-column prop="code" label="编码" :sortable="true">
              </ht-table-column>
              <ht-table-column prop="level" label="级别" :sortable="true">
              </ht-table-column>
            </template>
          </ht-table>
        </div>
      </div>
    </div>
    <common-dialog
      width="700px"
      :title="selectTypeName"
      class="sp-manager__dialog outdialog"
      :visible="dialogVisible"
      :before-close="beforeCloseDialog"
      destroy-on-close
    >
      <el-form v-form data-vv-scope="infoForm">
        <ht-form-item label="名称" label-width="150px">
          <ht-input
            v-model="typeInfo.name"
            validate="required"
            placeholder="请输入名称"
            style="width:75%"
          />
        </ht-form-item>
        <ht-form-item label="编码" label-width="150px">
          <ht-input
            v-model="typeInfo.code"
            validate="required"
            placeholder="请输入编码"
            style="width:75%"
          />
        </ht-form-item>
        <ht-form-item label="级别" label-width="150px">
          <ht-input type="number" :min="0" v-model="typeInfo.level" />
        </ht-form-item>
      </el-form>
      <div slot="footer" style="text-align: center">
        <ht-submit-button
          url="${cssc}/biz/scada/scadaFault/v1/"
          :model="typeInfo"
          :request-method="saveMethod"
          scope-name="infoForm"
          @after-save-data="afterSaveData"
          >保存</ht-submit-button
        >
        <el-button @click="beforeCloseDialog">取消</el-button>
      </div>
    </common-dialog>
    <import-point ref="importPoint" :importData="importData"></import-point>
  </div>
</template>
<script>
import utils from '@/hotent-ui-util.js'
import importPoint from '@/views/Basic/modules/importPoint'
export default {
  components: {
    importPoint
  },
  data() {
    return {
      importData: {
        title: '故障信息录入',
        templateName: '故障信息模板.xls',
        downloadUrl: './../static/excel/FaultTemplate.xls',
        importUrl: window.context.cssc + '/biz/scada/scadaFault/v1/import'
      },
      dialogVisible: false,
      data: [],
      pageResult: {
        page: 1,
        pageSize: 50,
        total: 0
      },
      treeList: [],
      typeInfo: {},
      saveMethod: 'POST',
      defaultTypeProps: {
        children: 'children',
        label: 'name'
      },
      selectTypeName: '全部',
      selectValue: ''
    }
  },
  created() {
    this.initTypeList()
  },
  mounted() {
    this.$validator = this.$root.$validator
  },
  methods: {
    handleImportDialog() {
      this.$refs.importPoint.open()
    },
    handleClick(data) {
      this.selectTypeName = data.name
      this.selectValue = data.value
      this.$refs.htTable.load()
    },
    //初始化 查询字典
    initTypeList() {
      this.treeList = utils.getDictItems('msgType')
    },
    showDialog(id) {
      this.typeInfo = {}
      if (id) {
        this.saveMethod = 'PUT'
        this.$http.get('${cssc}/biz/scada/scadaFault/v1/' + id).then(
          resp => {
            this.typeInfo = resp.data
            this.dialogVisible = true
          },
          error => {
            reject(error)
          }
        )
      } else if (this.selectValue) {
        this.saveMethod = 'POST'
        this.dialogVisible = true
        this.typeInfo.type = this.selectValue
        this.$refs.htTable.load()
      } else {
        this.$message({
          message: '请选择消息类型进行添加',
          type: 'warning'
        })
      }
    },
    beforeCloseDialog() {
      this.typInfo = {}
      this.dialogVisible = false
    },
    loadData(param, cb) {
      let typeQuery = [
        {
          group: 'filter',
          operation: 'EQUAL',
          parentGroup: '',
          property: 'type',
          relation: 'AND',
          value: this.selectValue
        }
      ]
      if (this.selectValue) {
        if (param.querys && param.querys.length) {
          param.querys.push(...typeQuery)
        } else {
          param.querys = typeQuery
        }
      }
      this.$http
        .post('${cssc}/biz/scada/scadaFault/v1/query', param)
        .then(
          resp => {
            let response = resp.data
            this.data = response.rows
            this.pageResult = {
              page: response.page,
              pageSize: response.pageSize,
              total: response.total
            }
          },
          error => {
            reject(error)
          }
        )
        .finally(() => cb())
    },
    afterSaveData() {
      setTimeout(() => {
        this.beforeCloseDialog()
        this.$refs.htTable.load()
      }, 500)
    }
  }
}
</script>
<style lang="scss" scoped>
.box-flex {
  height: 100%;
  display: flex;
  justify-content: space-between;
}
.border-left,
.border-right {
  border: 1px solid #dcdfe6;
}
.border-left {
  height: 100%;
  width: 260px;
  margin-right: 10px;
}
.border-right {
  height: 100%;
  width: calc(100% - 270px);
}
.border-header {
  font-size: 14px;
  font-weight: bold;
  margin-top: 0;
  height: 32px;
  line-height: 32px;
  padding-left: 20px;
  background-color: #f5f7fa;
  border-bottom: 1px solid #dcdfe6;
}
.tree-content,
.table-content {
  height: calc(100% - 53px);
}
.table-content {
  padding: 10px;
}
.tree-icon {
  margin-right: 10px;
  color: #409eff;
}
.editScroll {
  height: 100% !important;
  overflow-x: hidden;
  /deep/ .el-scrollbar__wrap {
    overflow-x: hidden;
  }
}
.outdialog .inputs {
  width: 100%;
  /deep/ .el-input-number {
    width: 75%;
    input {
      text-align: left;
    }
  }
}
</style>
