<template>
  <div>
    <common-dialog
      fullscreen
      :title="`${currentSys.sysName} 采集配置`"
      class="collect_dialog"
      :visible="dialogVisible"
      :before-close="beforeCloseDialog"
    >
      <el-tabs
        class="collect-tabs"
        v-model="activeName"
        type="border-card"
        @tab-click="handleClick"
        v-if="dialogVisible"
      >
        <el-tab-pane label="风场点位" name="1">
          <ht-table
            @load="(params, cb) => loadData(params, cb, 1)"
            :data="data1"
            :pageResult="pageResult1"
            :selection="true"
            :quick-search-props="quickSearchProps"
            :show-export="false"
            :show-custom-column="false"
            ref="htTable1"
          >
            <template v-slot:toolbar>
              <el-button
                size="small"
                type="primary"
                @click="showDialog('windfield')"
                icon="el-icon-plus"
                >添加</el-button
              >
              <ht-delete-button
                url="${cssc}/biz/scada/pointSystem/v1/"
                :htTable="$refs.htTable1"
                >删除</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="pointName"
                label="点位名称"
                :sortable="true"
                :show-overflow-tooltip="true"
              >
              </ht-table-column>
              <ht-table-column
                prop="varName"
                label="变量名称"
                :sortable="true"
                :show-overflow-tooltip="true"
              >
              </ht-table-column>
              <ht-table-column
                prop="dataType"
                label="变量类型"
                :sortable="true"
                :filters="filters"
                :show-overflow-tooltip="true"
              >
                <template v-slot="{row}">
                  <el-tag v-if="row.dataType == 'B'">布尔</el-tag>
                  <el-tag type="success" v-if="row.dataType == 'F'"
                    >浮点</el-tag
                  >
                  <el-tag type="warning" v-if="row.dataType == 'I'"
                    >整型</el-tag
                  >
                </template>
              </ht-table-column>
              <ht-table-column
                prop="unit"
                label="单位"
                :sortable="true"
                :show-overflow-tooltip="true"
              >
              </ht-table-column>
            </template>
          </ht-table>
        </el-tab-pane>
        <el-tab-pane label="机组点位" name="3">
          <div class="fullheight collect-row">
            <div class="fullheight collect-border collect-tree">
              <h2 class="collect-header">机组类型</h2>
              <div class="collect-tree-content">
                <el-scrollbar class="editScroll">
                  <el-tree
                    highlight-current
                    :data="crewTypeList"
                    :props="defaultProps"
                    @node-click="handleCrewNodeClick"
                  >
                    <span class="custom-tree-node" slot-scope="{node}">
                      <span>
                        <i
                          class="
                                                        el-icon-menu
                                                        tree-icon
                                                    "
                        ></i
                        >{{ node.label }}
                      </span>
                    </span>
                  </el-tree>
                </el-scrollbar>
              </div>
            </div>
            <div class="fullheight collect-border collect-table">
              <h2 class="collect-header">机组点位</h2>
              <div class="collect-table-content">
                <ht-table
                  @load="(params, cb) => loadData(params, cb, 3)"
                  :data="data3"
                  :pageResult="pageResult3"
                  :selection="true"
                  :quick-search-props="quickSearchProps"
                  :show-export="false"
                  :show-custom-column="false"
                  ref="htTable3"
                >
                  <template v-slot:toolbar>
                    <el-button
                      size="small"
                      type="primary"
                      @click="showDialog('fanType')"
                      icon="el-icon-plus"
                      >添加</el-button
                    >
                    <ht-delete-button
                      url="${cssc}/biz/scada/pointSystem/v1/"
                      :htTable="$refs.htTable3"
                      >删除</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="pointName"
                      label="点位名称"
                      :sortable="true"
                      :show-overflow-tooltip="true"
                    >
                    </ht-table-column>
                    <ht-table-column
                      prop="varName"
                      label="变量名称"
                      :sortable="true"
                      :show-overflow-tooltip="true"
                    >
                    </ht-table-column>
                    <ht-table-column
                      prop="dataType"
                      label="变量类型"
                      :sortable="true"
                      :filters="filters"
                      :show-overflow-tooltip="true"
                    >
                      <template v-slot="{row}">
                        <el-tag v-if="row.dataType == 'B'">布尔</el-tag>
                        <el-tag type="success" v-if="row.dataType == 'F'"
                          >浮点</el-tag
                        >
                        <el-tag type="warning" v-if="row.dataType == 'I'"
                          >整型</el-tag
                        >
                      </template>
                    </ht-table-column>
                    <ht-table-column
                      prop="unit"
                      label="单位"
                      :sortable="true"
                      :show-overflow-tooltip="true"
                    >
                    </ht-table-column>
                  </template>
                </ht-table>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="环线点位" name="2">
          <div class="fullheight collect-row">
            <div class="fullheight collect-border collect-tree">
              <h2 class="collect-header">风场环线</h2>
              <div class="collect-tree-content">
                <el-scrollbar class="editScroll">
                  <!-- @node-click="handleLineNodeClick" -->
                  <el-tree
                    ref="lineTree"
                    highlight-current
                    node-key="id"
                    :data="lineList"
                    :props="defaultLineProps"
                    @node-click="check"
                  >
                    <span class="custom-tree-node" slot-scope="{node}">
                      <span>
                        <i
                          class="
                                                        el-icon-menu
                                                        tree-icon
                                                    "
                        ></i
                        >{{ node.label }}
                      </span>
                    </span>
                  </el-tree>
                </el-scrollbar>
              </div>
            </div>
            <div class="fullheight collect-border collect-table">
              <h2 class="collect-header">环线点位</h2>
              <div class="collect-table-content">
                <ht-table
                  @load="(params, cb) => loadData(params, cb, 2)"
                  :data="data2"
                  :pageResult="pageResult2"
                  :selection="true"
                  :quick-search-props="quickSearchProps"
                  :show-export="false"
                  :show-custom-column="false"
                  ref="htTable2"
                >
                  <template v-slot:toolbar>
                    <el-button
                      size="small"
                      type="primary"
                      @click="showDialog('line')"
                      icon="el-icon-plus"
                      >添加</el-button
                    >
                    <ht-delete-button
                      url="${cssc}/biz/scada/pointSystem/v1/"
                      :htTable="$refs.htTable2"
                      >删除</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="pointName"
                      label="点位名称"
                      :sortable="true"
                      :show-overflow-tooltip="true"
                    >
                    </ht-table-column>
                    <ht-table-column
                      prop="varName"
                      label="变量名称"
                      :sortable="true"
                      :show-overflow-tooltip="true"
                    >
                    </ht-table-column>
                    <ht-table-column
                      prop="dataType"
                      label="变量类型"
                      :sortable="true"
                      :filters="filters"
                      :show-overflow-tooltip="true"
                    >
                      <template v-slot="{row}">
                        <el-tag v-if="row.dataType == 'B'">布尔</el-tag>
                        <el-tag type="success" v-if="row.dataType == 'F'"
                          >浮点</el-tag
                        >
                        <el-tag type="warning" v-if="row.dataType == 'I'"
                          >整型</el-tag
                        >
                      </template>
                    </ht-table-column>
                    <ht-table-column
                      prop="unit"
                      label="单位"
                      :sortable="true"
                      :show-overflow-tooltip="true"
                    >
                    </ht-table-column>
                  </template>
                </ht-table>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </common-dialog>
    <import-point ref="importPoint" :importData="importData"></import-point>
    <SelectPoint ref="pointDialog"></SelectPoint>
  </div>
</template>

<script>
import importPoint from '@/views/Basic/modules/importPoint'
import utils from '@/hotent-ui-util.js'
import basicData from '@/api/biz/basicData.js'
import CommonDialog from '@/components/dialog/CommonDialog.vue'
import SelectPoint from '@/views/Basic/modules/SelectPoint'
export default {
  components: {CommonDialog, SelectPoint, importPoint},
  name: 'CollectionConfig',
  data() {
    return {
      importData: {
        templateName: '采集点位模板.xls',
        downloadUrl: './../static/excel/ExportCollectPiontTemplate.xls',
        importUrl: window.context.cssc + '/biz/scada/pointSystem/v1/import'
      },
      dialogVisible: false,
      activeName: '1',
      currentSys: {},
      crewTypeList: [],
      lineList: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      defaultLineProps: {
        children: 'children',
        label: 'lineName'
      },
      filters: [
        {text: '布尔', value: 'B'},
        {text: '浮点', value: 'F'},
        {text: '整型', value: 'I'}
      ],
      quickSearchProps: [
        {prop: 'p.point_name_', label: '点位名称'},
        {prop: 'ps.var_name_', label: '变量名称'}
      ],
      data1: [],
      data2: [],
      data3: [],
      pageResult1: {
        page: 1,
        pageSize: 50,
        total: 0
      },
      pageResult2: {
        page: 1,
        pageSize: 50,
        total: 0
      },
      pageResult3: {
        page: 1,
        pageSize: 50,
        total: 0
      },
      fanType: '',
      lineId: ''
    }
  },
  created() {
    this.initCrewTypeList()
    this.initLineList()
  },
  methods: {
    //导入
    handleImportDialog(name) {
      switch (name) {
        case '风场点位':
          this.importData.configType = 1
          this.importData.title = name + '信息录入'
          this.$refs.importPoint.open()
          break
        case '机组点位':
          if (this.fanType) {
            this.importData.configType = 3
            this.importData.lineId = ''
            this.importData.title = name + '信息录入'
            this.$refs.importPoint.open()
          } else {
            this.$message.warning('请选择一条机组类型')
          }
          break
        default:
          if (this.lineId) {
            this.importData.configType = 2
            this.importData.fanType = ''
            this.importData.title = name + '信息录入'
            this.$refs.importPoint.open()
          } else {
            this.$message.warning('请选择一条风场环线')
          }
      }
      console.log(this.importData)
    },
    showDialog(type) {
      if (type == 'windfield') {
        this.$refs.pointDialog.open(1, this.currentSys)
      } else if (type == 'fanType') {
        if (!this.fanType) {
          this.$message.warning('请选择要添加的机组类型')
          return
        }
        this.$refs.pointDialog.open(3, this.currentSys, this.fanType)
      } else if (type == 'line') {
        if (!this.lineId) {
          this.$message.warning('请选择要添加的一条环线')
          return
        }
        if (this.lineId.indexOf(',') !== -1) {
          this.$message.warning('只可添加至一条环线')
          return
        }
        this.$refs.pointDialog.open(
          2,
          this.currentSys,
          this.fanType,
          this.lineId
        )
      }
    },

    loadData(param, cb, type) {
      // 查询参数

      let querys = [
        {
          group: 'filter',
          operation: 'EQUAL',
          property: 'ps.config_type_',
          relation: 'AND',
          value: type
        },
        {
          group: 'filter',
          operation: 'EQUAL',
          property: 'ps.sys_id_',
          relation: 'AND',
          value: this.currentSys.id
        }
      ]
      let fanQuery = [
        {
          group: 'filter',
          operation: 'EQUAL',
          property: 'ps.fan_type_',
          relation: 'AND',
          value: this.fanType
        }
      ]
      let lineQuery = [
        {
          group: 'filter',
          operation: 'IN',
          property: 'ps.line_id_',
          relation: 'AND',
          value: this.lineId
        }
      ]
      if (type == 2) {
        // 添加环线信息
        querys.push(...lineQuery)
      } else if (type == 3 && this.fanType) {
        // 添加机组信息
        querys.push(...fanQuery)
      }
      if (param.querys && param.querys.length) {
        param.querys.push(...querys)
      } else {
        param.querys = [...querys]
      }
      this.$http
        .post('${cssc}/biz/scada/pointSystem/v1/queryPointSystemPage', param)
        .then(
          resp => {
            let response = resp.data
            this[`data${type}`] = response.rows
            this[`pageResult${type}`] = {
              page: response.page,
              pageSize: response.pageSize,
              total: response.total
            }
          },
          error => {
            reject(error)
          }
        )
        .finally(() => cb())
    },
    initCrewTypeList() {
      this.crewTypeList = utils.getDictItems('jzfjxh')
    },
    initLineList() {
      basicData.getLineList().then(res => {
        if (res.length) {
          this.lineList = res
        }
      })
    },
    handleCrewNodeClick(data) {
      // console.log(data)
      this.fanType = data.value
      this.importData.fanType = data.value
      this.$refs.htTable3.load()
    },
    check(data) {
      this.lineId = data.id
      this.importData.lineId = data.id
      this.$refs.htTable2.load()
    },
    handleClick(tab) {
      this.$root.$emit('resize')
      this.$refs[`htTable${tab.name}`].load()
    },
    open(row) {
      this.currentSys = row
      this.importData.sysId = row.id
      this.dialogVisible = true
    },
    beforeCloseDialog() {
      this.dialogVisible = false
      this.activeName = '1'
    }
  }
}
</script>

<style lang="scss" scoped>
.collect_dialog /deep/ .inputs {
  width: 400px;
}
.collect_dialog /deep/ .el-dialog__body {
  height: calc(100% - 20px - 50px);
  padding-bottom: 0;
  padding-top: 20px;
  background: #f2f6fc;
}
.collect_dialog /deep/ .el-tabs__content {
  height: calc(100% - 70px);
}
.collect_dialog /deep/ .el-tabs__content .el-tab-pane {
  height: 100%;
}
.collect-tabs {
  height: calc(100% - 20px);
}
.tree-icon {
  margin-right: 6px;
  color: #409eff;
}

.collect-row {
  display: flex;
}
.collect-border {
  border: 1px solid #dcdfe6;
}
.collect-tree {
  width: 240px;
  margin-right: 10px;
}
.collect-table {
  width: calc(100% - 250px);
}
.collect-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;
}
.collect-table-content {
  height: calc(100% - 32px - 22px);
  padding: 0 10px;
}
.collect-tree-content {
  height: calc(100% - 50px);
}
.editScroll {
  height: 100% !important;
  overflow-x: hidden;
  /deep/ .el-scrollbar__wrap {
    overflow-x: hidden;
  }
}
.collect-table-content /deep/ .ht-table-panel[data-v-7d63940d] {
  margin-top: 10px;
}
</style>
