<!--  -->
<template>
  <div  >
    <el-breadcrumb class="divi2" separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/visi-dataset'}">数据集管理</el-breadcrumb-item>
      <el-breadcrumb-item>动态数据集</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider class="divi"></el-divider>
    <div class="title_score">
      <!--   el-form 中添加   status-icon  可检测状态-->
      <el-form :inline="true"  ref = "dataInfo"  :model="dataInfo" :rules="datarules" class="demo-form-inline">
        <el-form-item label="数据集名称" prop="datasetName">
          <el-input v-model="dataInfo.datasetName" placeholder="请输入数据集内容"></el-input>
        </el-form-item>
        <el-form-item label="抽取周期" prop="extractionPeriod">
          <el-input  v-model="dataInfo.extractionPeriod" placeholder="请输入抽取周期"  clearable
                     @focus="dialogVisible = true">

          </el-input>
        </el-form-item>
        <!--        <el-form-item label="抽取次数">-->
        <!--          <el-input-->
        <!--            placeholder="请输入抽取次数"-->
        <!--            v-model="dataInfo.extractioNumber"-->
        <!--            maxlength = '10'-->
        <!--            minlength = ‘1’-->
        <!--            oninput="value=value.replace(/[^\d]/g, '')"-->
        <!--            clearable>-->
        <!--          </el-input>-->
        <!--        </el-form-item>-->
        <el-form-item label="类别" prop="classificationtag">
          <el-select v-model="dataInfo.classificationtag"
                     filterable
                     allow-create
                     ref = 'classfi'
                     @change="demo1()">
            <el-option v-for="data in classification" :key="data.categoryId" :label="data.categoryName" :value="data.categoryId">
            </el-option>

          </el-select>
        </el-form-item>

        <el-form-item label="备注" prop="remarks" >
          <el-input v-model = "dataInfo.remarks"  ref = 'remarks' clearable placeholder="备注"  ></el-input>
        </el-form-item>

        <!-- 测试一下获得python-kafka模板 -->
<!--        <el-form-item>-->
<!--          <el-button type="primary" @click="getPythonKafkaTmp()">获得代码模板</el-button>-->
<!--        </el-form-item>-->
      </el-form>
    </div>
    <div class="body">  <!-- 数据框整体大小 -->
      <div class="allDiv"> <!-- 初始界面 -->
        <div class="leftDiv">  <!-- 控制左边树形区域的div -->
          <div class="leftDivTitle"><!-- 控制左边树形区域的上方的div -->
            <el-tag style="  width: 100%;text-align: center;">系统数据</el-tag>
          </div>
          <div class="leftDivTree"  > <!-- 控制左边树形区域的下方的div -->
            <el-tree
              v-if="showTree"
              id = 'tree'
              node-key="subEquipmentid"
              :props="treeDefaultProps"
              ref="tree"
              :load="loadTreeNode"
              lazy
              draggable
              :allow-drag="allowdrag"
              :allow-drop="allowDrop"
              @node-drag-end = "treeNodeDragEnd">
              <!--            @node-click="treeNodeClick">-->
              <span class="custom-tree-node" slot-scope="{ node, data }">
              <span>
                  <i :class="data.icon" style="margin-right: 4px"></i>{{ node.label }}
              </span>
          </span>
            </el-tree>
          </div>
        </div>
        <div class="midDiv"> <!-- 控制中间区域的div -->
          <div class="midDivTop">
            <div class="midDivTopImg">
              <el-tooltip content="运行" placement="bottom-end" effect="dark">
                <i @mouseover="yunXingMouseOver"
                   @mouseleave="yunXingMouseLeave" id='yunXing' @click="yunXingClick"
                   style="height: 50px;width: 50px; margin: 10px 5px 10px 10px ;font-size: 23px;"
                   class="iconfont icon-yunXang"></i>
              </el-tooltip>
              <el-tooltip content="预览" placement="bottom-end" effect="dark">
                <i @mouseover="yuLanMouseOver"
                   @mouseleave="yuLanMouseLeave" id="yuLan" @click="preview"
                   style="height: 25px;width: 25px; margin: 10px 5px 10px 10px;font-size: 23px;"
                   class = 'iconfont icon-preview'>
                </i>
              </el-tooltip>
              <el-tooltip content="日志" effect="dark">
                <i @mouseover="riZhiMouseOver"
                   @mouseleave="riZhiMouseLeave" id="riZhi" @click=shourizhi()
                   style="height: 25px;width: 25px; margin: 10px 5px 10px 10px;font-size: 23px;"
                   class = 'iconfont icon-tishi'>
                </i>
              </el-tooltip>
            </div>
          </div> <!-- 控制中间区域的上方div -->
          <div class="midDivData">
            <div class="datasourceDiv" id="drag" @dragover="dragDragOver" @dragleave="dragDragLeave">
              <el-divider><i class=" icon iconfont icon-xitong2"></i></el-divider>
              <div v-for="subEquipment in subEquipments" :key="subEquipment.key" style="display: inline-block">
                <div style="margin-left: 10px; margin-top:10px" @mouseover="subEquipment.quXiao = true" @mouseleave="subEquipment.quXiao = false">

                  <i draggable="true" v-if="subEquipment.table"
                     style="margin: 5px 10px 10px 15px;vertical-align: middle"
                     :class=subEquipment.icon
                     @click="handleClick(subEquipment.id)"
                     @dblclick="dblClick(subEquipment.id)">
                  </i>

                  <i style="position: absolute;" :id = subEquipment.id v-if="subEquipment.quXiao"
                     @mouseover="quXiaoMouseOver(subEquipment.id)"
                     @mouseleave="quXiaoMouseLeave(subEquipment.id)"
                     @click="quXiao(subEquipment.id)"
                     class="iconfont icon-quxiao"></i>
                  <span class="demonstration"  style="vertical-align: middle;display: block;font-size: 1px; margin-top: 5px;text-align: center">{{ subEquipment.imageTable.tableName }}</span>
                </div>
              </div>
            </div>
            <div class="rizhiDiv" v-if="showRiZhi">
              <el-tag>日志</el-tag>
              <div class="rizhiDivtext">
                <span v-text="soutRizhi"></span>
              </div>
            </div>
          </div><!-- 控制中间区域的数据输入区的div -->
        </div>
        <div class="rightDiv" v-if="true"> <!-- 控制右侧属性区域的div -->
          <el-tag style="  width: 100%;text-align: center;border-bottom: 0.2px solid #000000;" >{{detailTitle.worldName}}</el-tag>

          <el-table
            :data="tableData"
            :row-style="{height:'0'}"
            :cell-style="{padding:'0'}"
            v-loading="dataListLoading"
            size="100%"
            height=95%
            border
          >
            <el-table-column v-for="tablelist in tablelists" :key="tablelist.id"
                             :prop='tablelist.prop'
                             :label="tablelist.label">
            </el-table-column>
          </el-table>
          <!--          <el-tabs type="border-card" >-->
          <!--            <el-tab-pane label="表数据预览" >-->
          <!--              <el-tag style="  width: 100%;text-align: center;" >{{detailTitle.worldName}}</el-tag>-->
          <!--              <el-table-->
          <!--                :data="tableData"-->
          <!--                :row-style="{height:'0'}"-->
          <!--                :cell-style="{padding:'0'}"-->
          <!--                size="100%"-->
          <!--                height="428"-->
          <!--                border-->
          <!--              >-->
          <!--                <el-table-column v-for="tablelist in tablelists" :key="tablelist.id"-->
          <!--                                 :prop='tablelist.prop'-->
          <!--                                 :label="tablelist.label">-->
          <!--                </el-table-column>-->
          <!--              </el-table>-->
          <!--            </el-tab-pane>-->
          <!--            <el-tab-pane label="word"></el-tab-pane>-->
          <!--            <el-tab-pane label="图片"></el-tab-pane>-->
          <!--          </el-tabs>-->
        </div>
      </div>
      <div class="pop"><!-- 各种弹窗 -->
        <!-- 子设备字段选择弹窗 -->
        <el-dialog title="子设备配置"
                   :close-on-click-modal="false"
                   :visible.sync="showEqumField"
                   width="40%"
                   @mouseover.native="showChooseAddTitle"
                   append-to-body>
          <div style="text-align: center;margin-top: -20px;">
            <span style="width: 10%">子设备名称 :   </span>
            <span style="margin-right: 20px">{{detailTitle.worldName}}</span>
          </div>
          <div style="margin-top: 20px;margin-left: 110px;">
            <el-transfer
              filterable
              :titles="['待选字段', '已选字段']"
              @change="changeMeasurepoint"
              v-model="sureSelect"
              :data="selectData"

            />
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="showEqumField = false">取 消</el-button>
            <el-button type="primary" @click="closeEqupField">确 定</el-button>
        </span>

        </el-dialog>
        <!-- 字段预览弹窗 -->
        <el-dialog title="预览"
                   :visible.sync="showPreview"
                   width="40%"
                   append-to-body>
          <el-tabs type="border-card">
            <el-tab-pane>
              <span slot="label">{{predatasetName}}</span>
              <!--              <i class="iconfont icon-xitong4"></i>-->
              <el-divider class="tableDivider"></el-divider>
              <el-table
                :data="preTableDate"
                height="250"
                v-loading ='prewListLoading'
                border
                style="width: 100%">
                <el-table-column v-for="preTalblelist in preTalbelists" :key="preTalblelist.id"
                                 :prop="preTalblelist.prop"
                                 :label="preTalblelist.label"
                                 width="180">
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <!--          <el-tab-pane label="word"></el-tab-pane>-->
            <!--          <el-tab-pane label="图片"></el-tab-pane>-->
          </el-tabs>
          <span slot="footer" class="dialog-footer">
     <el-button @click="showPreview = false">取 消</el-button>
     <el-button type="primary" @click="showPreview = false">确 定</el-button>
    </span>
        </el-dialog>
        <el-dialog custom-class="cron-box-dialog-first" :visible.sync="dialogVisible" v-if="dialogVisible">
          <mycron v-bind:extractionPeriod.sync="dataInfo.extractionPeriod"></mycron>
        </el-dialog>
      </div>
    </div>
    <div style="text-align: right;margin-top: -135px;margin-right: 80px;position:relative;z-index: 999" >
      <el-button >取消</el-button>
      <el-button type="primary" @click="dySubmit(dataInfo) " >确定</el-button>
    </div>
<!--    <PythonKafkaTmp v-if="pythonKafkaVisible" ref="pythonKafkaTmp" @refreshDataList="getDataList"></PythonKafkaTmp>-->
    <PythonKafkaTmp v-if="pythonKafkaVisible" ref="pythonKafkaTmp" ></PythonKafkaTmp>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import mycron from './quartz/mycron'
import PythonKafkaTmp from '../alg/python-kafka-tmp.vue'
import { MessageBox } from 'element-ui'
import { Message } from 'element-ui'
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {
    mycron,
    PythonKafkaTmp
  },
  data () {
    var checkExtractionPeriod = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('抽取周期不能为空'))
      } else {
        return callback()
      }
    }
    // 这里存放数据
    return {
      dataInfo: {
        datasetName: '', // 数据集名称
        extractionPeriod: '', // 抽取周期
        extractioNumber: '', // 抽取次数
        classificationtag: 1,
        remarks: ''
      },
      measurepoint: [], // 你要的数据在这儿
      pythonKafkaVisible: false,
      dataListLoading: false,
      prewListLoading: false,
      classification: [],
      predatasetName: '数据集预览', // 预览是时候显示的表头信息
      // base_url: 'http://localhost:8086/',
      showTree: true, // 获取树的数据后 更新数据
      showInfo: false, // 属性数据预览
      showRiZhi: false, // 控制日志的显隐
      soutRizhi: '运行过程，将会显示在这儿 。再次点击日志图标，将关闭窗口', // 输出日志内容
      soutRiZhiSucess: '-------------------------------info--------------------------' + '\n\n',
      showPreview: false, // 控制预览窗口的显隐
      showTable: false,
      // userID: '666', // 用户编号
      userID: this.$store.state.user.id,
      userName: this.$store.state.user.name,
      ildName: '', // 制作数据集时，之后留下的文件名称 方便改为用户指定的名字。
      subEquipments: [], // 存储拖拽的子设备
      yunXingUid: 0, // 点击运行后，命名产生的文件名
      dragFlg: 0, // 判断是否拖拽至指定区域
      subEquipmentId: 0, // 拖拽子设备的id 从0开始
      selectData: [], // 存储子设备字段
      sureSelect: [], //  存储已经选择的子设备字段
      showEqumField: false, // 控制子设备段显隐
      imsql: [], // 向后台提交是数据 包括：所属煤矿、系统、子系统、设备等 以及选择的字段，hbase的地址
      sign: 0, // 标记双击图标选择的ID 用于记录选择的字段数据
      clicktime: null, // 用于解决双击会触发两次单击事件
      dialogVisible: false,
      detailTitle: { // 右侧属性框表头
        worldName: '属性信息'
      },
      tablelists: [], // 子设备字段名
      tableData: [], // 子设备数据
      preTalbelists: [{
        prop: 'ziduan',
        label: '字段'
      }], // 选择的子设备字段
      preTableDate: [], // 选择的子设备字段对应的数据
      treeDefaultProps: {
        children: 'children',
        label: 'name',
        isLeaf: 'leaf'
      },
      datarules: {
        datasetName: [
          { required: true, message: '请输入数据集名称', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        extractionPeriod: [
          { validator: checkExtractionPeriod, trigger: 'blur' }
        ]
      }

    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {
    'dataInfo.datasetName' (oldval, newval) {
      this.predatasetName = newval + '预览'
    },
    'dataInfo.extractionPeriod' () {
      this.$refs['dataInfo'].validateField('extractionPeriod')
    }
  },
  // 方法集合
  methods: {
    // 手动给穿梭框内容添加title
    showChooseAddTitle (e) {

      // let dom = e.target;
      // if (dom.title) return;

      // dom.title = dom.innerText;

    },
    changeMeasurepoint (value, direction, movedKeys) {
      let measurepointID = 0
      for (let i = 0; i < movedKeys.length; i++) {
        const sign = movedKeys[i]
        measurepointID = this.selectData[sign].measurepointId

        if (direction === 'right') {
          this.measurepoint.push(measurepointID)
        } else {
          this.measurepoint.splice(this.measurepoint.indexOf(measurepointID), 1)
        }
      }
    },
    demo1 () {
      if (typeof this.dataInfo.classificationtag !== 'number') {
        MessageBox.confirm(
          `确定新增分类[${this.dataInfo.classificationtag}]?`,
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        ).then(() => {
          this.$http({
            url: this.$http.adornUrl(`/category/save`),
            method: 'post',
            data: this.$http.adornData({
              'categoryId': undefined,
              'categoryName': this.dataInfo.classificationtag
            })
          }).then(({data}) => {
            if (data && data.code === 0) {
              // 更新this.dataInfo.classificationtag 为最新的分类ID
              this.classificationList()
              this.$refs.classfi.blur()
              this.$refs.remarks.focus()

              //  = this.dataInfo.classificationtag
            }
          })
        }).catch(() => {
          this.dataInfo.classificationtag = ''
        })
      }
    },
    // 新增 / 修改
    addOrUpdateHandle (id) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id)
      })
    },
    yunXingMouseOver () {
      document.getElementById('yunXing').className = 'iconfont icon-yunXang1'
    },
    yunXingMouseLeave () {
      document.getElementById('yunXing').className = 'iconfont icon-yunXang'
    },
    async yunXingClick () {
      this.showRiZhi = true
      if (this.imsql.length === 0) {
        this.soutRizhi = '  ' + '请先选择抽取的字段....'
      } else {
        this.soutRizhi = '  ' + '检测设备状态完毕，开始抽取数据....'  // 输出日志内容
        this.yunXingUid = new Date().getTime()
        for (let i = 0; i < this.imsql.length; i++) {
          if (i === 0) {
            this.imsql[i].oldFileName = this.userID + '_' + this.imsql[i].subEquipmentID + '_' + this.imsql[i].id
            this.imsql[i].newFileName = this.imsql[i].oldFileName
            if (this.imsql.length === 1) {
              this.imsql[i].oldFileName = this.userID + '_' + this.yunXingUid
              this.imsql[i].newFileName = this.userID + '_' + this.yunXingUid
            }
          } else if (i === this.imsql.length - 1) {
            this.imsql[i].oldFileName = this.imsql[i - 1].newFileName
            this.imsql[i].newFileName = this.userID + '_' + this.yunXingUid
          } else {
            this.imsql[i].oldFileName = this.imsql[i - 1].newFileName
            this.imsql[i].newFileName = this.userID + '_' + this.imsql[i].subEquipmentID + '_' + this.imsql[i].id
          }
        }
        for (let j = 0; j < this.imsql.length; j++) {
          await this.$http({
            url: this.$http.adornUrl('/dataset/dynamic/makeDyDataSet'),
            method: 'post',
            data: this.$http.adornData(this.imsql[j], false)
          }).then(subresult => {
            var context = subresult.data

            this.soutRizhi = '  ' + context.info + '\n\n' + this.soutRizhi
          })
        }
        this.soutRizhi = this.soutRiZhiSucess + '  ' + '抽取结束，点击制作数据集' + '\n\n' + this.soutRizhi
      }
    },
    yuLanMouseOver () {
      document.getElementById('yuLan').className = 'iconfont icon-preview1'
    },
    yuLanMouseLeave () {
      document.getElementById('yuLan').className = 'iconfont icon-preview'
    },
    preview () {
      this.preTalbelists = true
      this.prewListLoading = true   // 打开预览等待
      this.preTalbelists = [] // 将原始默认数据清空
      for (let i = 0; i < this.imsql.length; i++) {
        for (let j = 0; j < this.imsql[i].chosedata.length; j++) {
          this.preTalbelists.push({
            prop: this.imsql[i].subEquipmentID + '_' + this.imsql[i].chosedata[j],
            label: this.imsql[i].subEquipment + '.' + this.imsql[i].chosedataZh[j]

          })
        }
      }
      // 获取数据
      this.$http({
        url: this.$http.adornUrl('/dataset/dynamic/getprecontent'),
        method: 'post',
        data: this.$http.adornData(this.imsql, false)
      }).then(preDatas => {
        const Content = preDatas.data.preContent
        this.preTableDate = [] // 清空之前是数据
        if (Content.length !== 0) {
          for (var c = 0; c < Content.length; c++) {
            this.preTableDate.push(Content[c])
          }
        }
      })
      this.prewListLoading = false
      this.showPreview = true
    },
    riZhiMouseOver () {
      document.getElementById('riZhi').className = 'iconfont icon-tishi1'
    },
    riZhiMouseLeave () {
      document.getElementById('riZhi').className = 'iconfont icon-tishi'
    },
    shourizhi () {
      this.showRiZhi = !this.showRiZhi
    },
    quXiaoMouseOver (id) {
      document.getElementById(id).className = 'iconfont icon-quxiao1'
    },
    quXiaoMouseLeave (id) {
      document.getElementById(id).className = 'iconfont icon-quxiao'
    },
    quXiao (id) {
      this.dataListLoading = false
      for (let i = 0; i < this.subEquipments.length; i++) {
        // 找到对应的设备 删除

        if (id === this.subEquipments[i].id) {
          this.$refs.tree.getNode(this.subEquipments[i].sql.subEquipmentID).data.icon = 'iconfont icon-xitong3'
          this.$refs.tree.getNode(this.subEquipments[i].sql.subEquipmentID).data.flag = 'subEquipment'
          // 看当前左侧属性栏显示的数据 ，是否为该设备 ，如果是，进行清除
          if (this.detailTitle.worldName === this.subEquipments[i].imageTable.tableName) {
            this.detailTitle.worldName = '属性信息'
            this.tablelists = []
            this.tableData = []
          }

          // 删除对应的测量点ID
          this.subEquipments[i].filedList.forEach((info) => {
            var number = this.measurepoint.indexOf(info)
            if (number === -1) {
              this.measurepoint.splice(number, 1)
            }
          })

          // 删除
          this.subEquipments.splice(i, 1)
        }
      }
      for (let j = 0; j < this.imsql.length; j++) {
        if (id === this.imsql[j].id) {
          this.imsql.splice(j, 1)
        }
      }
    },
    allowdrag (node) {
      if (node.data.flag === 'subEquipment') { return true }
    },
    allowDrop () {
      return false // 设置树节点内不可拖拽
    },
    dragDragOver (e) {
      this.dragFlg = 1
      e.preventDefault()
    },
    dragDragLeave (e) {
      this.dragFlg = 0
    },
    treeNodeDragEnd (node) {
      if (this.dragFlg === 1 && node.data.flag === 'subEquipment') {
        // 修改属性值，表示该节点已经拖拽过
        node.data.limit = 'children-1'
        node.data.icon = 'iconfont icon-xitong4'
        // this.$set(node.data, 'icon', 'iconfont icon-xitong4')

        const subEquipment = {
          id: this.subEquipmentId,
          table: false, // 子设备图标显隐显隐
          nodeId: node.id,
          quXiao: false, // 子设备上方取消图标的显隐
          indexContent: '', // 图片上方的内容
          selectList: [], // 数据库中子设备字段名
          sureSelectList: [], // 选择的子设备字段名
          filedList: [{
            key: 0,
            prop: 'time',
            label: '时间',
            measurepointId: 'time' + Math.floor(Math.random() * 10000 + 1)
          }], // 数据库的字段名
          icon: 'icon iconfont icon-xitong1', // 图标
          sql: {
            id: '', // 记录对应的节点id
            coal: '', // 所属煤矿
            system: '', // 所属系统
            subsystem: '', // 所属子系统
            equipment: '', // 所属设备
            subEquipment: '', // 子设备名称
            subEquipmentID: '', // 子设备名称id
            hbaseTableName: '', // 子设备对应的数据存放地址
            userID: this.userID, // 执行操作的用户id
            chosedata: []//  选择子设备的字段
          },
          imageTable: {
            tableName: '',
            tableDB: ''
          }
        }

        subEquipment.imageTable.tableName = node.data.name
        subEquipment.imageTable.tableDB = node.parent.data.name
        subEquipment.sql.hbaseTableName = node.data.hbaseTableName
        subEquipment.sql.subEquipmentID = node.data.subEquipmentid
        console.log(subEquipment.sql.hbaseTableName + 'and' + subEquipment.sql.subEquipmentID)
        if (node.level === 1) {
          this.$http({
            url: this.$http.adornUrl('/universaltable/getRootLevel' + node.data.subEquipmentid),
            method: 'post'
          }).then(tablists => {
            let headers = tablists.data.data
            console.log('第二层headers:' + JSON.stringify(headers))
            if (headers) {
              for (let i = 0; i < headers.length; i++) {
                var list = {
                  key: i + 1,
                  label: headers[i].name,
                  type: headers[i].type,
                  // fieldId: response.data[i].fieldId,
                  measurepointId: headers[i].id,
                  flag: '未选中',
                  prop: headers[i].name,
                  seen: false
                }
                console.log('list:' + list)
                subEquipment.filedList.push(list)
              }
            }
          })
        }
        if (node.level > 1) {
          // 获取hbase 表头信息
          this.$http({
            url: this.$http.adornUrl('/universaltable/getOtherLeafItem?tableId=' + node.data.levelId + '&id=' + node.data.coalid),
            method: 'post'
          }).then(tablists => {
            let headers = tablists.data.data
            console.log('第三层及之后headers:' + JSON.stringify(headers))
            if (headers) {
              for (let i = 0; i < headers.length; i++) {
                var list = {
                  key: i + 1,
                  label: headers[i].name,
                  type: headers[i].type,
                  // fieldId: response.data[i].fieldId,
                  measurepointId: headers[i].id,
                  flag: '未选中',
                  prop: tablists.data.pinyin[i],
                  seen: false
                }
                console.log('list:' + list)
                subEquipment.filedList.push(list)
              }
            }
          })
        }
        //
        // // 拖拽结束后，如果属性区域没显示数据，自动显示拖拽的设备
        // if (this.tablelists.length === 0) {
        //   this.detailTitle.worldName = node.data.name
        //   this.tablelists = subEquipment.filedList
        // }
        this.subEquipments.push(subEquipment)

        this.subEquipmentId = this.subEquipmentId + 1
        for (let i = 0; i < this.subEquipments.length; i++) {
          if (node.id === this.subEquipments[i].nodeId) {
            this.subEquipments[i].table = true
            this.subEquipments[i].indexContent = this.subEquipments[i].imageTable.tableDB + '.' + this.subEquipments[i].imageTable.tableName
            this.subEquipments[i].quXiao = false
          }
        }
        this.dragFlg = 0
      }
    },
    treeNodeClick (data, node) {
      if (node.data.flag === 'subEquipment') {
        this.detailTitle.worldName = node.data.name
        this.equimentClick()
      }
    },

    // 单击事件
    handleClick (id) {
      clearTimeout(this.time)  // 首先清除计时器
      this.time = setTimeout(() => {
        this.equimentClick(id)
      }, 300)
    },
    // 双击事件
    dblClick (id) {
      clearTimeout(this.time)  // 清除
      // 这里可以添加你自己双击事件的方法或者逻辑
      this.equimentDoubleClick(id)
    },

    equimentClick (id) {
      this.dataListLoading = true
      for (let i = 0; i < this.subEquipments.length; i++) {
        if (id === this.subEquipments[i].id) {
          // 处理两次单击同一个设备
          if (this.detailTitle.worldName !== this.subEquipments[i].imageTable.tableName) {
            let l = []
            for (let j = 0; j < this.subEquipments[i].filedList.length; j++) {
              let o = this.subEquipments[i].filedList[j]
              if (o.prop != "time") {
                o.prop = o.prop + '_after'
              }
              l.push(o)
            }
            // this.tablelists = this.subEquipments[i].filedList
            this.tablelists = l
            this.detailTitle.worldName = this.subEquipments[i].imageTable.tableName
            this.tableData = []
            // 获取右侧表格数据
            this.$http({
              url: this.$http.adornUrl('/dataset/dynamic/getContent'),
              method: 'post',
              data: this.$http.adornData(this.subEquipments[i].sql, false)
            }).then(contextResponse => {
              if (contextResponse.data.code === 500) {
                this.tableData = []
              } else {
                const subeqpmContent = JSON.parse(JSON.stringify(contextResponse.data.equmentAll))

                this.tableData = subeqpmContent
              }
              this.dataListLoading = false
            })
          }

          this.showInfo = true
          break
        }
      }
      if (this.tableData.length > 0) {
        this.dataListLoading = false
      }
    },
    equimentDoubleClick (id) {
      this.showEqumField = true
      for (let i = 0; i < this.subEquipments.length; i++) {
        if (id === this.subEquipments[i].id) {
          // 构造向后台传输的数据
          this.subEquipments[i].sql.id = this.subEquipments[i].id
          this.subEquipments[i].sql.equipment = this.subEquipments[i].imageTable.tableDB
          this.subEquipments[i].sql.subEquipment = this.subEquipments[i].imageTable.tableName
          this.sign = id
          this.selectData = [] // 将原始字段置空
          this.sureSelect = this.subEquipments[i].sureSelectList
          this.selectData = this.subEquipments[i].filedList
          // if (this.subEquipments[i].selectList.length === 0) { // 判断是否已有字段数据

          //   this.axios.post(this.base_url + 'getcolumns', this.subEquipments[i].sql).then(response => {
          //     for (let j = 0; j < response.data.length; j++) {
          //       this.selectData.push({
          //         key: j,
          //         label: response.data[j].name
          //       })
          //     }
          //   })
          //   this.subEquipments[i].selectList = this.selectData
          // } else {

          //   this.selectData = this.subEquipments[i].selectList
          // }
          break
        }
      }
    },
    closeEqupField () {
      this.showEqumField = false
      // 根据选择的ID 找出对应的字段名 存储在sql 中
      const chooseFiledEn = []
      const chooseFiledZh = []
      for (let i = 0; i < this.sureSelect.length; i++) {
        const sign = this.sureSelect[i]

        chooseFiledEn.push(this.selectData[sign].prop)
        chooseFiledZh.push(this.selectData[sign].label)
      }
      // 保存已经选择的字段
      for (let i = 0; i < this.subEquipments.length; i++) {
        if (this.sign === this.subEquipments[i].id) {
          this.subEquipments[i].sureSelectList = this.sureSelect
          this.subEquipments[i].sql.chosedata = chooseFiledEn
          this.subEquipments[i].sql.chosedataZh = chooseFiledZh
          var imsign = true
          for (let j = 0; j < this.imsql.length; j++) {
            if (this.imsql[j].id === this.subEquipments[i].sql.id) { // 判断设备数据是否已添加到列表中
              this.imsql[j] = this.subEquipments[i].sql // 更新数据
              imsign = false
            }
          }

          if (this.subEquipments[i].sureSelectList.length > 0) {
            this.subEquipments[i].icon = 'icon iconfont icon-xitong1_1'
          } else {
            this.subEquipments[i].icon = 'icon iconfont icon-xitong1'
          }
          if (imsign) {
            this.imsql.push(this.subEquipments[i].sql)
          }

          break
        }
      }
    },
    dySubmit (dataInfo) {
      if (this.yunXingUid === 0) {
        Message.info('请先点击运行')
        return
      }
      this.$refs['dataInfo'].validate((valid) => {
        if (!valid) {
          return false
        } else {
          if (typeof this.dataInfo.classificationtag !== 'number') {
            for (let clss of this.classification) {
              if (clss.categoryName === this.dataInfo.classificationtag) {
                this.dataInfo.classificationtag = clss.categoryId
                break
              }
            }
          }
          var info = {
            oldname: this.userID + '_' + this.yunXingUid, // 制作数据集使用的原始名字   便于后台用于将原数据集 重命名
            datasetName: this.dataInfo.datasetName, // 数据集名称
            extractionPeriod: this.dataInfo.extractionPeriod, // 抽取周期
            // extractioNumber: this.dataInfo.extractioNumber, // 抽取次数
            remarks: this.dataInfo.remarks,
            classification: this.dataInfo.classificationtag,
            imsql: this.imsql,
            userID: this.userID,
            sign: 1
          }

          MessageBox.confirm(`是否新建动态数据集?`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$http({
              url: this.$http.adornUrl('/dataset/dynamic/dySubmit'),
              method: 'post',
              data: this.$http.adornData(info, false)
            }).then(res => {
              var resContent = res.data

              if (resContent && resContent.code === 0) {
                Message({
                  message: '数据集' + this.dataInfo.datasetName + '创建成功，点击确定制作数据集',
                  type: 'success'
                })
                this.$router.replace({path: '/visi-dataset', query: {'status': '2'}})
                this.$destroy()
              } else {
                Message({
                  message: '数据集' + this.dataInfo.datasetName + '创建失败',
                  type: 'error'
                })
              }
            })
          }).catch(() => {})
        }
      })
    },
    classificationList () {
      this.classification = []
      this.$http({
        url: this.$http.adornUrl('/category/select'),
        method: 'get'
      }).then(({ data }) => {
        var ss = []
        for (var i = 0; i < data.list.length; i++) {
          ss[i] = data.list[i]
        }
        this.classification = Array.from(new Set(ss))
      })
    },

    // 获取代码模板
    getPythonKafkaTmp () {
      this.pythonKafkaVisible = true
      var info = []
      for (const meas of this.measurepoint) {
        if (meas.indexOf('time') === -1) {
          info.push(meas)
        }
      }
      this.$nextTick(() => {
        this.$refs.pythonKafkaTmp.init(info.join())
      })
    },
    loadTreeNode (node, resolve) {
      let coalAll = []
      console.log('loadTreeNode')
      if (node.level === 0) {
        this.$http({
          url: this.$http.adornUrl('/levelManage/projectattributes/getAllProject'),
          method: 'post'
        }).then(({data}) => {
          console.log('后端返回的项目信息：' + JSON.stringify(data))
          if (!(data && data.code === 0)) {
            Message.error(data.msg)
          } else {
            let coalContent = data.data
            for (let sign = 0; sign < coalContent.length; sign++) {
              var coal = {
                name: coalContent[sign].name,
                coalid: coalContent[sign].id,
                limit: 'coal',
                hbaseTableName: '',
                icon: 'iconfont icon-xitongfuwu',
                leaf: false
              }
              if (data.data[sign].disabled === 0) {
                coal.isdisabled = 1
              } else {
                coal.isdisabled = 0
              }
              coal.treeNodeDeep = 1
              coalAll.push(coal)
            }
          }
          console.log(coalAll)
          return resolve(coalAll)
        })
      }
      if (node.level === 1) {
        if (node.data.isdisabled === 1) return resolve([])
        else {
          this.$http({
            url: this.$http.adornUrl('/universaltable/getRootLevel?id=' + node.data.coalid),
            method: 'post'
          }).then(({data}) => {
            console.log('第二层非叶子节点信息：' + JSON.stringify(data))
            let data1 = []
            let coalContent = data.data
            for (let j = 0; j < coalContent.length; j++) {
              let coal = {
                name: coalContent[j].name,
                coalid: coalContent[j].id,
                limit: 'coal',
                hbaseTableName: coalContent[j].hbaseTableName,
                icon: 'icon iconfont icon-xitongfuwu',
                // leaf: true,
                levelId: data.levelId,
                flag: 'subEquipment'
              }
              coal.treeNodeDeep = 2
              data1.push(coal)
            }
            return resolve(data1)
          })
        }
      }
      if (node.level > 1) {
        for (let i = 2; i < 50; i++) {
          if (node.level === i) {
            this.$http({
              url: this.$http.adornUrl('/universaltable/getSonLevel?tableId=' + node.data.levelId + '&id=' + node.data.coalid),
              method: 'post'
            }).then(({data}) => {
              console.log('第三次非叶子节点信息：' + JSON.stringify(data.data))
              let data2 = []
              let coalContent = data.data
              for (let j = 0; j < coalContent.length; j++) {
                let coal = {
                  name: coalContent[j].name,
                  coalid: coalContent[j].id,
                  limit: 'coal',
                  hbaseTableName: coalContent[j].hbaseTableName,
                  icon: 'icon iconfont icon-xitongfuwu',
                  // leaf: true,
                  levelId: data.levelId,
                  flag: 'subEquipment'
                }
                coal.treeNodeDeep = i + 1
                data2.push(coal)
              }
              return resolve(data2)
            })
          }
        }
      }
    }

    // getCoal (resolve) {
    //   var coalData = {
    //     userID: this.userID
    //   }
    //   let coalAll = []
    //   this.$http({
    //     url: this.$http.adornUrl('/dataset/tree/getcoal'),
    //     method: 'post',
    //     data: this.$http.adornData(coalData, false)
    //   }).then(({data}) => {
    //     if (!(data && data.code === 0)) {
    //       Message.error(data.msg)
    //     } else {
    //       const coalContent = data.info
    //       for (let sign = 0; sign < coalContent.length; sign++) {
    //         var coal = {
    //           name: coalContent[sign].name,
    //           coalid: coalContent[sign].id,
    //           limit: 'coal',
    //           hbaseTableName: '',
    //           icon: 'iconfont icon-xitongfuwu',
    //           leaf: false
    //         }
    //         coalAll.push(coal)
    //       }
    //     }
    //     return resolve(coalAll)
    //     // console.log('***************')
    //     // console.log(coalAll)
    //   })
    // },
    // getSystem (coalId, resolve) {
    //   var coalData = {
    //     userID: this.userID,
    //     coalid: coalId
    //   }
    //   this.$http({
    //     url: this.$http.adornUrl('/dataset/tree/getfisystem'),
    //     method: 'post',
    //     data: this.$http.adornData(coalData, false)
    //   }).then(systemRespond => {
    //     let systemAll = []
    //     if (systemRespond.data.length <= 0) {
    //       Message.error(systemRespond.msg)
    //     } else {
    //       const systemContent = systemRespond.data
    //       for (let i = 0; i < systemContent.length; i++) {
    //         var system = {
    //           name: systemContent[i].name,
    //           systemid: systemContent[i].id,
    //           limit: 'system',
    //           icon: 'icon iconfont icon-xitongfuwu',
    //           hbaseTableName: '',
    //           leaf: false
    //         }
    //         systemAll.push(system)
    //       }
    //     }
    //     return resolve(systemAll)
    //   })
    // },
    // getSubSystem (systemid, resolve) {
    //   const systemData = {
    //     systemid: systemid,
    //     userID: this.userID
    //   }
    //   this.$http({
    //     url: this.$http.adornUrl('/dataset/tree/getsubSystem'),
    //     method: 'post',
    //     data: this.$http.adornData(systemData, false)
    //   }).then(subrespond => {
    //     let subSystemAll = []
    //     let subSystemContent = subrespond.data
    //     if (subSystemContent.length !== 0) {
    //       for (let j = 0; j < subSystemContent.length; j++) {
    //         var subSystem = {
    //           name: subSystemContent[j].name,
    //           subSustemid: subSystemContent[j].id,
    //           limit: 'subSystem',
    //           icon: 'iconfont icon-xitongfuwu',
    //           leaf: false
    //         }
    //         subSystemAll.push(subSystem)
    //       }
    //     }
    //     return resolve(subSystemAll)
    //   })
    // },
    // getEquipment (subSustemid, resolve) {
    //   const subSystemData = {
    //     subSystemid: subSustemid,
    //     userID: this.userID
    //   }
    //   this.$http({
    //     url: this.$http.adornUrl('/dataset/tree/getequipment'),
    //     method: 'post',
    //     data: this.$http.adornData(subSystemData, false)
    //   }).then(eqprespond => {
    //     let equipmentAll = []
    //     const eqpSystemContent = eqprespond.data
    //     if (eqpSystemContent.length !== 0) {
    //       for (let k = 0; k < eqpSystemContent.length; k++) {
    //         var equipment = {
    //           name: eqpSystemContent[k].name,
    //           equipmentid: eqpSystemContent[k].id,
    //           limit: 'equipment',
    //           hbaseTableName: '',
    //           icon: 'iconfont icon-xitongfuwu',
    //           leaf: false
    //         }
    //         equipmentAll.push(equipment)
    //       }
    //     }
    //     return resolve(equipmentAll)
    //   })
    // },
    // getSubEquipment (equipmentid, resolve) {
    //   const equimentData = {
    //     userID: this.userID,
    //     equipment: equipmentid
    //   }
    //   this.$http({
    //     url: this.$http.adornUrl('/dataset/tree/getsubequipment'),
    //     method: 'post',
    //     data: this.$http.adornData(equimentData, false)
    //   }).then(subEqpRespond => {
    //     let subEquimentAll = []
    //     const subEqpSystemContent = subEqpRespond.data
    //     if (subEqpSystemContent.length === 0) {
    //       Message.error(subEqpRespond.msg)
    //     } else {
    //       for (let m = 0; m < subEqpSystemContent.length; m++) {
    //         var subEquiment = {
    //           name: subEqpSystemContent[m].name,
    //           subEquipmentid: subEqpSystemContent[m].id,
    //           hbaseTableName: subEqpSystemContent[m].hbaseTableName,
    //           limit: 'children',
    //           icon: 'iconfont icon-xitong3',
    //           leaf: true
    //         }
    //         subEquimentAll.push(subEquiment)
    //       }
    //     }
    //     return resolve(subEquimentAll)
    //   })
    // },
    // // 左侧树的懒加载 五层结构
    // loadTreeNode (node, resolve) {
    //   if (node.level === 0) {
    //     this.getCoal(resolve)
    //   } else if (node.level === 1) {
    //     this.getSystem(node.data.coalid, resolve)
    //   } else if (node.level === 2) {
    //     this.getSubSystem(node.data.systemid, resolve)
    //   } else if (node.level === 3) {
    //     this.getEquipment(node.data.subSustemid, resolve)
    //   } else {
    //     this.getSubEquipment(node.data.equipmentid, resolve)
    //   }
    // }

    // getSubSystem (resolve) {
    //   this.$http({
    //     url: this.$http.adornUrl('/dataset/tree/getsubSystem'),
    //     method: 'post'
    //   }).then(subrespond => {
    //     let subSystemAll = []
    //     let subSystemContent = subrespond.data
    //     if (subSystemContent.length === 0) {
    //       Message.error(subrespond.msg)
    //     } else {
    //       for (let j = 0; j < subSystemContent.length; j++) {
    //         var subSystem = {
    //           name: subSystemContent[j].name,
    //           subSustemid: subSystemContent[j].id,
    //           limit: 'subSystem',
    //           icon: 'iconfont icon-xitongfuwu',
    //           leaf: false
    //         }
    //         subSystemAll.push(subSystem)
    //       }
    //     }
    //     return resolve(subSystemAll)
    //   })
    // },
    // getEquipment (subSustemid, resolve) {
    //   const subSystemData = {
    //     subSystemid: subSustemid
    //   }
    //   this.$http({
    //     url: this.$http.adornUrl('/dataset/tree/getequipment'),
    //     method: 'post',
    //     data: this.$http.adornData(subSystemData, false)
    //   }).then(eqprespond => {
    //     let equipmentAll = []
    //     const eqpSystemContent = eqprespond.data
    //     if (eqpSystemContent.length === 0) {
    //       Message.error(eqprespond.msg)
    //     } else {
    //       for (let k = 0; k < eqpSystemContent.length; k++) {
    //         var equipment = {
    //           name: eqpSystemContent[k].name,
    //           equipmentid: eqpSystemContent[k].id,
    //           limit: 'equipment',
    //           hbaseTableName: '',
    //           icon: 'iconfont icon-xitongfuwu',
    //           leaf: false
    //         }
    //         equipmentAll.push(equipment)
    //       }
    //     }
    //     return resolve(equipmentAll)
    //   })
    // },
    // getSubEquipment (equipmentid, resolve) {
    //   const equimentData = {
    //     equipment: equipmentid
    //   }
    //   this.$http({
    //     url: this.$http.adornUrl('/dataset/tree/getsubequipment'),
    //     method: 'post',
    //     data: this.$http.adornData(equimentData, false)
    //   }).then(subEqpRespond => {
    //     let subEquimentAll = []
    //     const subEqpSystemContent = subEqpRespond.data
    //     if (subEqpSystemContent.length === 0) {
    //       Message.error(subEqpRespond.msg)
    //     } else {
    //       for (let m = 0; m < subEqpSystemContent.length; m++) {
    //         var subEquiment = {
    //           name: subEqpSystemContent[m].name,
    //           subEquipmentid: subEqpSystemContent[m].id,
    //           hbaseTableName: subEqpSystemContent[m].hbaseTableName,
    //           limit: 'children',
    //           icon: 'iconfont icon-xitong3',
    //           leaf: true
    //         }
    //         subEquimentAll.push(subEquiment)
    //       }
    //     }
    //     return resolve(subEquimentAll)
    //   })
    // },
    // // 左侧树的懒加载
    // loadTreeNode (node, resolve) {
    //   if (node.level === 0) {
    //     this.getSubSystem(resolve)
    //   } else if (node.level === 1) {
    //     this.getEquipment(node.data.subSustemid, resolve)
    //   } else {
    //     this.getSubEquipment(node.data.equipmentid, resolve)
    //   }
    // }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  mounted () {
    this.classificationList()
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  created () {},
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped>
.divi2 {
  display: block;
  height: 1px;
  width: 100%;
  position: relative;
}

.divi {
  display: block;
  height: 1px;
  width: 100%;
  margin: 24px 0;
  background-color: #dcdfe6;
}

.title_score{
  margin-top: 30px;
  margin-left: 180px;
}
.body {
  min-width: 1250px;
  height: 800px;
  position: relative;
  margin: 1px 25px 0px 100px;
}
.allDiv{
  width: 100%;
  height: 80%;
  border-left: 0.2px solid #000;
}
.leftDiv{
  width: 20%;
  height: 100%;
  float: left;
  border-bottom:0.2px solid #000;
  border-top:0.2px solid #000;
  /*//overflow-y: auto;*/
}
.leftDivTree{
  width: 100%;
  height: 93.7%;
  overflow: scroll;
}

.el-tree {
  display: inline-block;
  min-width: 100%;

}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.midDiv{
  width: 49.5%;
  height: 100%;
  float: left;
  border-top:0.2px solid #000;
  border-bottom:0.2px solid #000;
  border-left:0.2px solid #000;
  overflow-y: scroll;
}
.midDivTop{
  height:6.3%;
  width: 100%;
}
.midDivTopImg{
  /*padding-top: 5px;*/
}

.midDivData{
  width: 100%;
  height: 93.7%;
  margin-top: -10px;
  background: url("../../../assets/datasetImg/background.png");
}
.datasourceDiv {
  width: 100%;
  height: 100%;
}
.datasourceDiv  .el-divider--horizontal
{
  margin: 0;
}
.rizhiDiv{
  width: 49.3%;
  height:15%;
  position: absolute;
  margin-top: -8.8%;
  margin-left: 2px;
  /*overflow：auto*/
  /*bottom: 12.6px;*/
}
.rizhiDivtext{
  width: 100%;
  height: 75.5%;
  font-size: 1px;
  /*border: 0.2px solid #000;*/
  overflow: auto;
  margin-top: 10px;
  /*background: #ffff;*/
  white-space: pre-wrap;
}
.rightDiv{
  width: 30%;
  height: 100%;
  float: left;
  overflow: auto;
  border:0.5px solid #000;
}
.icon {
  width: 1em; height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.el-tree.iconfont{
  margin-right: 100px;
}
</style>
