<template xmlns:el-col="http://www.w3.org/1999/html">
  <el-col>
    <el-row>
      <span>仪表盘名称：{{panelName}}</span>

    </el-row>
  </el-col>
</template>

<script>
  import {loadTable, getScene, addGroup, delGroup, addTable, delTable, groupTree} from '@/api/dataset/dataset'

  export default {
    name: 'PanelView',
    data() {
      return {
        sceneMode: false,
        dialogTitle: '',
        search: '',
        editGroup: false,
        editTable: false,
        tData: [],
        tableData: [],
        currGroup: {},
        expandedArray: [],
        groupForm: {
          name: '',
          pid: null,
          level: 0,
          type: '',
          children: [],
          sort: 'type desc,name asc'
        },
        tableForm: {
          name: '',
          mode: '',
          sort: 'type asc,create_time desc,name asc'
        },
        groupFormRules: {
          name: [
            {required: true, message: this.$t('commons.input_content'), trigger: 'blur'}
          ]
        },
        tableFormRules: {
          name: [
            {required: true, message: this.$t('commons.input_content'), trigger: 'blur'}
          ],
          mode: [
            {required: true, message: this.$t('commons.input_content'), trigger: 'blur'}
          ]
        }
      }
    },
    computed: {
      panelName: function () {
        console.log(this.$store.state.panel.panelName)
        return this.$store.state.panel.panelName
      }
    },
    watch: {
      // search(val){
      //   this.groupForm.name = val;
      //   this.tree(this.groupForm);
      // }
    },
    mounted() {
      this.tree(this.groupForm)
      this.refresh()
      this.tableTree()
      // this.$router.push('/dataset');
    },
    methods: {
      clickAdd(param) {
        // console.log(param);
        this.add(param.type)
        this.groupForm.pid = param.data.id
        this.groupForm.level = param.data.level + 1
      },

      beforeClickAdd(type, data, node) {
        return {
          'type': type,
          'data': data,
          'node': node
        }
      },

      clickMore(param) {
        console.log(param)
        switch (param.type) {
          case 'rename':
            this.add(param.data.type)
            this.groupForm = JSON.parse(JSON.stringify(param.data))
            break
          case 'move':

            break
          case 'delete':
            this.delete(param.data)
            break
          case 'editTable':
            this.editTable = true
            this.tableForm = JSON.parse(JSON.stringify(param.data))
            this.tableForm.mode = this.tableForm.mode + ''
            break
          case 'deleteTable':
            this.deleteTable(param.data)
            break
        }
      },

      beforeClickMore(type, data, node) {
        return {
          'type': type,
          'data': data,
          'node': node
        }
      },

      add(type) {
        switch (type) {
          case 'group':
            this.dialogTitle = this.$t('dataset.group')
            break
          case 'scene':
            this.dialogTitle = this.$t('dataset.scene')
            break
        }
        this.groupForm.type = type
        this.editGroup = true
      },

      saveGroup(group) {
        // console.log(group);
        this.$refs['groupForm'].validate((valid) => {
          if (valid) {
            addGroup(group).then(res => {
              this.close()
              this.$message({
                message: this.$t('commons.save_success'),
                type: 'success',
                showClose: true
              })
              this.tree(this.groupForm)
            })
          } else {
            this.$message({
              message: this.$t('commons.input_content'),
              type: 'error',
              showClose: true
            })
            return false
          }
        })
      },

      saveTable(table) {
        //   console.log(table)
        table.mode = parseInt(table.mode)
        this.$refs['tableForm'].validate((valid) => {
          if (valid) {
            addTable(table).then(response => {
              this.closeTable()
              this.$message({
                message: this.$t('commons.save_success'),
                type: 'success',
                showClose: true
              })
              this.tableTree()
              // this.$router.push('/dataset/home')
              this.$emit('switchComponent', {name: ''})
              this.$store.dispatch('dataset/setTable', null)
            })
          } else {
            this.$message({
              message: this.$t('commons.input_content'),
              type: 'error',
              showClose: true
            })
            return false
          }
        })
      },

      delete(data) {
        this.$confirm(this.$t('dataset.confirm_delete'), this.$t('dataset.tips'), {
          confirmButtonText: this.$t('dataset.confirm'),
          cancelButtonText: this.$t('dataset.cancel'),
          type: 'warning'
        }).then(() => {
          delGroup(data.id).then(response => {
            this.$message({
              type: 'success',
              message: this.$t('dataset.delete_success'),
              showClose: true
            })
            this.tree(this.groupForm)
          })
        }).catch(() => {
        })
      },

      deleteTable(data) {
        this.$confirm(this.$t('dataset.confirm_delete'), this.$t('dataset.tips'), {
          confirmButtonText: this.$t('dataset.confirm'),
          cancelButtonText: this.$t('dataset.cancel'),
          type: 'warning'
        }).then(() => {
          delTable(data.id).then(response => {
            this.$message({
              type: 'success',
              message: this.$t('dataset.delete_success'),
              showClose: true
            })
            this.tableTree()
            // this.$router.push('/dataset/home')
            this.$emit('switchComponent', {name: ''})
            this.$store.dispatch('dataset/setTable', null)
          })
        }).catch(() => {
        })
      },

      close() {
        this.editGroup = false
        this.groupForm = {
          name: '',
          pid: null,
          level: 0,
          type: '',
          children: [],
          sort: 'type desc,name asc'
        }
      },

      closeTable() {
        this.editTable = false
        this.tableForm = {
          name: ''
        }
      },

      tree(group) {
        groupTree(group).then(res => {
          this.tData = res.data
        })
      },

      tableTree() {
        this.tableData = []
        if (this.currGroup.id) {
          loadTable({
            sort: 'type asc,create_time desc,name asc',
            sceneId: this.currGroup.id
          }).then(res => {
            this.tableData = res.data
          })
        }
      },

      nodeClick(data, node) {
        // console.log(data);
        // console.log(node);
        if (data.type === 'scene') {
          this.sceneMode = true
          this.currGroup = data
          this.$store.dispatch('dataset/setSceneData', this.currGroup.id)
        }
        if (node.expanded) {
          this.expandedArray.push(data.id)
        } else {
          const index = this.expandedArray.indexOf(data.id)
          if (index > -1) {
            this.expandedArray.splice(index, 1)
          }
        }
        // console.log(this.expandedArray);
      },

      back() {
        this.sceneMode = false
        //   const route = this.$store.state.permission.currentRoutes
        //   console.log(route)
        // this.$router.push('/dataset/index')
        this.$store.dispatch('dataset/setSceneData', null)
        this.$emit('switchComponent', {name: ''})
      },
      clickAddData(param) {
        // console.log(param);
        switch (param.type) {
          case 'db':
            this.addDB()
            break
          case 'sql':
            this.$message(param.type)
            break
          case 'excel':
            this.$message(param.type)
            break
          case 'custom':
            this.$message(param.type)
            break
        }
      },

      beforeClickAddData(type) {
        return {
          'type': type
        }
      },

      addDB() {
        // this.$router.push({
        //   name: 'add_db',
        //   params: {
        //     scene: this.currGroup
        //   }
        // })
        this.$emit('switchComponent', {name: 'AddDB', param: this.currGroup})
      },
      sceneClick(data, node) {
        // console.log(data);
        this.$store.dispatch('dataset/setTable', null)
        this.$store.dispatch('dataset/setTable', data.id)
        // this.$router.push({
        //   name: 'table',
        //   params: {
        //     table: data
        //   }
        // })
        this.$emit('switchComponent', {name: 'ViewTable'})
      },
      refresh() {
        const path = this.$route.path
        if (path === '/dataset/table') {
          this.sceneMode = true
          const sceneId = this.$store.state.dataset.sceneData
          getScene(sceneId).then(res => {
            this.currGroup = res.data
          })
        }
      },
      panelDefaultClick(data, node) {
        // console.log(data);
        // console.log(node);
      },
    }
  }
</script>

<style scoped>
  .header-title {
    font-size: 14px;
    flex: 1;
    color: #606266;
    font-weight: bold;

  }

  .el-divider--horizontal {
    margin: 12px 0
  }

  .search-input {
    padding: 12px 0;
  }

  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }

  .custom-position {
    flex: 1;
    display: flex;
    align-items: center;
    font-size: 14px;
    flex-flow: row nowrap;
  }

  .form-item {
    margin-bottom: 0;
  }

  .title-css {
    height: 26px;
  }

  .title-text {
    line-height: 26px;
  }
</style>
