<template>
  <div class="board-container">
    <div class="widget-left-container">
      <div class="widget-left-header">
        <span>{{ dataBoard.boardName }}</span>
      </div>
      <div class="widget-left-wrapper">
        <ul class="list-group">
          <li v-for="(item, index) in dataChartList" :key="item.id" class="list-group-item">
            <div class="list-group-item-text">{{ item.chartName }}</div>
            <div class="list-group-item-button"><el-button icon="el-icon-plus" type="text" size="mini" :disabled="item.disabled" @click="handleAddChart(item)"></el-button></div>
          </li>
        </ul>
      </div>
    </div>
    <div class="widget-center-container">
      <div class="widget-center-header">
        <div class="widget-center-header-collapse" @click="drawer = true"><i class="el-icon-info"></i></div>
        <div class="widget-center-header-button">
          <el-button icon="el-icon-view" type="text" @click="handlePreview">
            预览
          </el-button>
          <el-button icon="el-icon-delete" type="text" @click="handleReset">
            重置
          </el-button>
          <el-button icon="el-icon-plus" type="text" v-hasPerm="['visual:board:build']" @click="handleSubmit">
            保存
          </el-button>
          <el-button icon="el-icon-close" type="text" @click="handleCancel">
            取消
          </el-button>
        </div>
      </div>
      <div class="widget-center-wrapper" id="boardWrapper">
        <grid-layout
          :layout.sync="layout"
          :col-num="24"
          :row-height="30"
          :is-draggable="true"
          :is-resizable="true"
          :is-mirrored="false"
          :vertical-compact="true"
          :use-css-transforms="true"
          :pane-container="false"
          :margin="[10, 10]"
          style="border: 1px dashed #999; height: 100%; overflow-x: hidden; overflow-y: auto;"
        >
          <grid-item
            v-for="item in layout"
            :key="item.i"
            :x="item.x"
            :y="item.y"
            :w="item.w"
            :h="item.h"
            :i="item.i"
            drag-allow-from=".vue-draggable-handle"
            @resized="handleResize"
          >
            <el-card v-loading="getChartItem(item.i).loading" class="widget-center-card" body-style="padding: 10px;">
              <div slot="header" class="widget-center-card-header vue-draggable-handle">
                <div>
                  <span>{{ getChartItem(item.i).chartName }}</span>
                </div>
                <div>
                  <i class="el-icon-delete" @click="handleDeleteChart(item.i)" />
                </div>
              </div>
              <chart-panel v-if="getChartItem(item.i).visible" :key="item.i" :ref="`charts${item.i}`" :chart-schema="getChartItem(item.i).chartSchema" :chart-data="getChartItem(item.i).data" :chart-style="{height: `${item.h * 30 + 10 * (item.h - 1) - 60}px`}" />
              <div v-else :style="{height: `${item.h * 30 + 10 * (item.h - 1) - 60}px`}"></div>
            </el-card>
          </grid-item>
        </grid-layout>
      </div>
    </div>
    <el-drawer
      size="300px"
      :visible.sync="drawer"
      :with-header="false">
      <div class="widget-board-form">
        <el-form size="mini" label-position="top">
          <el-form-item label="看板名称">
            <el-input v-model="dataBoard.boardName" size="mini" :disabled="true" />
          </el-form-item>
          <el-form-item label="缩略图">
            <el-button type="primary" size="mini" plain style="margin-bottom: 10px;" @click="generatorImage">点击生成</el-button>
            <el-image :src="dataBoard.boardThumbnail ? dataBoard.boardThumbnail : ''">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline" />
              </div>
            </el-image>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { getDataBoard, buildDataBoard } from '@/api/visual/databoard'
import { listDataChart, getDataChart, dataParser } from '@/api/visual/datachart'
import VueGridLayout from 'vue-grid-layout'
import ChartPanel from '../datachart/components/ChartPanel'
import html2canvas from 'html2canvas'

export default {
  name: 'DataBoardBuild',
  components: {
    GridLayout: VueGridLayout.GridLayout,
    GridItem: VueGridLayout.GridItem,
    ChartPanel
  },
  data() {
    return {
      dataBoard: {},
      dataChartList: [],
      layout: [],
      charts: [],
      drawer: false
    }
  },
  created() {
    this.getDataBoard(this.$route.params.id)
    this.getDataChartList()
  },
  methods: {
    getDataBoard(id) {
      getDataBoard(id).then(response => {
        if (response.success) {
          this.dataBoard = response.data
          this.layout = this.dataBoard.boardConfig ? JSON.parse(JSON.stringify(this.dataBoard.boardConfig.layout)) : []
          const charts = this.dataBoard.charts ? JSON.parse(JSON.stringify(this.dataBoard.charts)) : []
          charts.forEach((item, index, arr) => {
            this.parserChart(item)
          })
          this.charts = charts
        }
      })
    },
    parserChart(chart) {
      this.$set(chart, 'loading', true)
      if (chart.chartConfig) {
        dataParser(JSON.parse(chart.chartConfig)).then(response => {
          if (response.success) {
            this.$set(chart, 'data', response.data.data)
            this.$set(chart, 'chartSchema', JSON.parse(chart.chartConfig))
            this.$set(chart, 'loading', false)
            this.$set(chart, 'visible', true)
          }
        })
      } else {
        this.$set(chart, 'loading', false)
      }
    },
    getChartItem(id) {
      return this.charts.find(chart => chart.id === id)
    },
    getDataChartList() {
      listDataChart().then(response => {
        if (response.success) {
          this.dataChartList = response.data
        }
      })
    },
    handleAddChart(chart) {
      const index = this.layout.findIndex(item => item.i === chart.id)
      if (index !== -1) {
        this.$set(chart, 'disabled', true)
        return
      }
      getDataChart(chart.id).then(response => {
        if (response.success) {
          const obj = {
            x: 0,
            y: 0,
            w: 12,
            h: 9,
            i: chart.id
          }
          this.layout.push(obj)
          const data = response.data
          this.parserChart(data)
          this.charts.push(data)
          this.$set(chart, 'disabled', true)
        }
      })
    },
    handleDeleteChart(id) {
      this.layout.splice(this.layout.findIndex(item => item.i === id), 1)
      this.charts.splice(this.charts.findIndex(item => item.id === id), 1)
      this.$set(this.dataChartList.find(item => item.id === id), 'disabled', false)
    },
    handlePreview() {
      const route = this.$router.resolve({ path: `/visual/board/view/${this.dataBoard.id}` })
      window.open(route.href, '_blank')
    },
    handleReset() {
      this.layout = this.dataBoard.boardConfig ? JSON.parse(JSON.stringify(this.dataBoard.boardConfig.layout)) : []
      const charts = this.dataBoard.charts ? JSON.parse(JSON.stringify(this.dataBoard.charts)) : []
      charts.forEach((item, index, arr) => {
        this.parserChart(item)
      })
      this.charts = charts
      this.dataChartList.forEach((item, index, arr) => {
        if (charts.findIndex(chart => chart.id === item.id) === -1) {
          this.$set(item, 'disabled', false)
        } else {
          this.$set(item, 'disabled', true)
        }
      })
    },
    handleSubmit() {
      const data = {
        id: this.dataBoard.id,
        boardThumbnail: this.dataBoard.boardThumbnail,
        boardConfig: {
          layout: this.layout
        }
      }
      buildDataBoard(data).then(response => {
        if (response.success) {
          this.$message.success('保存成功')
        }
      })
    },
    handleCancel() {
      window.location.href = 'about:blank'
      window.close()
    },
    handleResize(i, newH, newW, newHPx, newWPx) {
      console.log('handleResize', i)
      if (this.charts.find(chart => chart.id === i).visible) {
        this.$refs[`charts${i}`][0].$children[0].$emit('resized')
      }
    },
    generatorImage() {
      html2canvas(document.getElementById('boardWrapper')).then(canvas => {
        const dataURL = canvas.toDataURL('image/png')
        this.$set(this.dataBoard, 'boardThumbnail', dataURL)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.board-container {
  height: 100vh;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  flex: 1;
  flex-basis: auto;
  box-sizing: border-box;
  min-width: 0;
  ::-webkit-scrollbar {
    width: 3px;
    height: 5px;
  }
  ::-webkit-scrollbar-track-piece {
    background: #d3dce6;
  }
  ::-webkit-scrollbar-thumb {
    background: #99a9bf;
    border-radius: 10px;
  }
  .widget-left-container {
    width: 250px;
    box-sizing: border-box;
    .widget-left-header {
      height: 40px;
      line-height: 40px;
      padding: 0 20px;
    }
    .widget-left-wrapper {
      height: calc(100% - 40px);
      padding: 20px;
      overflow-x: hidden;
      overflow-y: auto;
      border-top: 1px solid #e4e7ed;
      .list-group {
        padding: 0;
        margin: 0;
        .list-group-item {
          display: flex;
          justify-content: space-between;
          height: 30px;
          line-height: 30px;
          font-size: 14px;
          .list-group-item-text {
            width: 130px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .list-group-item-button {
            cursor: pointer;
          }
        }
      }
    }
  }
  .widget-center-container {
    width: calc(100% - 550px);
    flex: 1;
    flex-basis: auto;
    box-sizing: border-box;
    border-left: 1px solid #e4e7ed;
    border-right: 1px solid #e4e7ed;
    .widget-center-header {
      height: 40px;
      line-height: 40px;
      .widget-center-header-collapse {
        float: right;
        padding-right: 20px;
      }
      .widget-center-header-button {
        float: right;
        text-align: right;
        padding-right: 20px;
      }
    }
    .widget-center-wrapper {
      height: calc(100% - 40px);
      padding: 10px;
      overflow-x: hidden;
      overflow-y: auto;
      border-top: 1px solid #e4e7ed;
      .widget-center-card {
        ::v-deep .el-card__header {
          padding: 0;
          .widget-center-card-header {
            font-size: 14px;
            display: flex;
            justify-content: space-between;
            height: 30px;
            padding: 0 10px;
            line-height: 30px;
            i {
              margin-right: 10px;
              color: #409EFF;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
  .widget-board-form {
    padding: 20px;
    .el-image{
      width: 250px;
      height: 150px;
      ::v-deep .image-slot {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        background: #f5f7fa;
        color: #909399;
        font-size: 30px;
      }
    }
  }
}
</style>
