<template>
  <div class="chart-container">
    <el-container>
      <el-aside width="250px" class="widget-field-container">
        <el-card class="box-card" shadow="always" style="height: 100%;">
          <div slot="header" class="clearfix">
            <span>数据集</span>
            <el-dropdown trigger="click" @command="handleCommand" style="float: right; color: #499df3;">
              <span class="el-dropdown-link">
                切换<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="item in datasetOptions" :command="item.id">{{item.setName}}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div style="margin: -20px;">
            <div class="field-widget-cate"><i class="icon iconfont icon-weidu"></i><span>维度列</span></div>
            <draggable v-model="dimensions" tag="ul" :options="{sort: false, ghostClass: 'ghost', group: {name: 'dimensions', pull: true, put: false}}">
              <li v-for="(item, index) in dimensions" :key="index" class="field-widget-label"><div>{{item.tag}}</div></li>
            </draggable>
            <div class="field-widget-cate"><i class="icon iconfont icon-zhibiao"></i><span>指标列</span></div>
            <draggable v-model="measures" tag="ul" :options="{sort: false, ghostClass: 'ghost', group: {name: 'measures', pull: true, put: false}}">
              <li v-for="(item, index) in measures" :key="index" class="field-widget-label"><div>{{item.tag}}</div></li>
            </draggable>
          </div>
        </el-card>
      </el-aside>
      <el-container>
        <el-header class="chart-action-bar" style="height: 40px;text-align: right;">
          <el-button icon="el-icon-view" type="text">
            预览
          </el-button>
          <el-button icon="el-icon-delete" type="text">
            清空
          </el-button>
          <el-button icon="el-icon-plus" type="text">
            保存
          </el-button>
          <el-button icon="el-icon-close" type="text">
            取消
          </el-button>
        </el-header>
        <el-main class="widget-center-container">
          <el-row>
            <el-divider content-position="left">行维</el-divider>
            <el-col>
              <div class="draggable-wrapper">
                <draggable :options="{sort: false, ghostClass: 'ghost', group: {name: 'dimensions'}}" v-model="form.rows">
                  <el-tag v-for="(item, index) in form.rows" :key="index" class="draggable-item">
                    {{ item.tag }}
                  </el-tag>
                </draggable>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-divider content-position="left">列维</el-divider>
            <el-col>
              <div class="draggable-wrapper">
                <draggable :options="{sort: false, ghostClass: 'ghost', group: {name: 'dimensions'}}" v-model="form.cols">
                  <el-tag v-for="(item, index) in form.cols" :key="index" class="draggable-item">
                    {{ item.tag }}
                  </el-tag>
                </draggable>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-divider content-position="left">指标</el-divider>
            <el-col>
              <div class="draggable-wrapper">
                <draggable :options="{sort: false, ghostClass: 'ghost', group: {name: 'measures'}}" v-model="form.vals">
                  <el-tag v-for="(item, index) in form.vals" :key="index" class="draggable-item">
                    {{ item.tag }}
                  </el-tag>
                </draggable>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-divider>预览区</el-divider>
              <el-tabs type="card">
                <el-tab-pane label="预览">
                  <div class="data-tab-pane">预览</div>
                </el-tab-pane>
                <el-tab-pane label="查询脚本">
                  <div class="script-tab-pane">查询脚本</div>
                </el-tab-pane>
              </el-tabs>
            <el-col>
            </el-col>
          </el-row>
        </el-main>
      </el-container>
      <el-aside width="300px" class="widget-config-container">
        <el-container>
          <el-tabs type="border-card" stretch style="width: 100%;">
            <el-tab-pane label="图表属性">
              <el-main>
                <div class="chart-tab-pane">图表属性</div>
              </el-main>
            </el-tab-pane>
            <el-tab-pane label="图表配置">
              <el-main>
                <div class="chart-tab-pane">图表配置</div>
              </el-main>
            </el-tab-pane>
          </el-tabs>
        </el-container>
      </el-aside>
    </el-container>
  </div>
</template>

<script>
import { getDataSet, listDataSet } from '@/api/factory/dataset'
import draggable from 'vuedraggable'

export default {
  name: 'ChartMake',
  components: {
      draggable
  },
  data () {
      return {
          form: {
              rows: [],
              cols: [],
              vals: []
          },
          dataset: {},
          datasetOptions : [],
          dimensions: [],
          measures: []
      }
  },
  created () {
      this.getDataSetList()
  },
  methods: {
      getDataSetList () {
          listDataSet().then(response => {
              if (response.success) {
                  this.datasetOptions = response.data
              }
          })
      },
      handleCommand (command) {
          getDataSet(command).then(response => {
              if (response.success) {
                  this.dataset = response.data
                  console.log(this.dataset)
                  this.dimensions = this.dataset.schemaConfig.dimensions
                  this.measures = this.dataset.schemaConfig.measures
              }
          })
      }
  }
}
</script>

<style lang="scss" scoped>
.chart-container {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  .el-container {
    height: 100%;
    width: 100%;
    .widget-field-container {
      color: #333;
      padding: 0;
      margin-bottom: 0;
      background: #FFFFFF;
      box-shadow: 0 0 1px 1px #ccc;
      .el-card >>> .el-card__header {
        padding: 0;
        border-bottom: 1px solid #EBEEF5;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        font-size: 16px;
        background-color: lightgrey;
      }
      .field-widget-cate{
        padding: 0px 10px;
        font-size: 13px;
        background-color: #f5f7fa;
        border-bottom: 1px solid #e4e7ed;
      }
      ul {
        position: relative;
        overflow: hidden;
        padding: 10px 10px;
        margin: 0;
        min-height: 200px;
      }
      .field-widget-label {
        font-size: 12px;
        display: block;
        width: 48%;
        line-height: 25px;
        position: relative;
        float: left;
        left: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin: 1%;
        color: #333;
        border: 1px solid #F4F6FC;
        &:hover {
          color: #409EFF;
          border: 1px dashed #409EFF;
        }
        & > div {
          display: block;
          cursor: move;
          background: #F4F6FC;
          border: 1px solid #F4F6FC;
          text-align: center;
          .icon {
            margin-right: 6px;
            margin-left: 8px;
            font-size: 14px;
            display: inline-block;
            vertical-align: middle;
          }
          span {
            display: inline-block;
            vertical-align: middle;
          }
        }
      }
    }
    .widget-config-container {
      color: #333;
      padding: 0;
      margin-bottom: 0;
      background: #FFFFFF;
      box-shadow: 0 0 1px 1px #ccc;
      .chart-tab-pane {
      }
    }
    .el-main {
      padding: 0;
    }
    .chart-action-bar {
      height: 40px;
      line-height: 40px;
      height: 40px;
      text-align: right;
      color: #333;
      border-bottom: 2px solid #e4e7ed;
    }
    .widget-center-container {
      box-shadow: 0 0 1px 1px #ccc;
      border: 1px dashed #999;
      .draggable-wrapper {
        height: 40px;
        line-height: 40px;
        border: 1px solid #d7dae2;
        background: #f4f4f7;
        margin: 0 10px;
        .draggable-item {
          cursor: move;
          line-height: 30px;
          height: 30px;
          margin: 0 5px;
        }
      }
      .data-tab-pane {
        margin: 10px;
        min-height: 200px;
      }
      .script-tab-pane {
        margin: 10px;
        border: 1px dashed rgb(153, 153, 153);
        min-height: 200px;
      }
    }
  }
}
</style>
