<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" class="field-widget-tag" :options="{sort: false, ghostClass: 'ghost', group: {name: 'dimensions', pull: true, put: false}}">
              <el-tag v-for="(item, index) in dimensions" :key="index" class="field-widget-label"><div>{{ item.alias ? item.alias + '(' + item.col + ')' : item.col }}</div></el-tag>
            </draggable>
            <div class="field-widget-cate"><i class="icon iconfont icon-zhibiao"></i><span>指标列</span></div>
            <draggable v-model="measures" class="field-widget-tag" :options="{sort: false, ghostClass: 'ghost', group: {name: 'measures', pull: true, put: false}}">
              <el-tag v-for="(item, index) in measures" :key="index" class="field-widget-label"><div>{{ item.alias ? item.alias + '(' + item.col + ')' : item.col }}</div></el-tag>
            </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 group="dimensions" :list="form.keys">
                  <el-tag v-for="(item, index) in form.keys" :key="index" class="draggable-item" closable @close="handleKeyTagClose(index, item)">
                    {{ item.alias ? item.alias : item.col }}
                  </el-tag>
                </draggable>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-divider content-position="left">列维</el-divider>
            <el-col>
              <div class="draggable-wrapper">
                <draggable group="dimensions" :list="form.groups">
                  <el-tag v-for="(item, index) in form.groups" :key="index" class="draggable-item" closable @close="handleGroupTagClose(index, item)">
                    {{ item.alias ? item.alias : item.col }}
                  </el-tag>
                </draggable>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-divider content-position="left">指标</el-divider>
            <el-col>
              <div class="draggable-wrapper">
                <draggable group="measures" :list="form.values" @change="handleValueDragChange">
                  <div v-for="(item, index) in form.values" :key="index" class="draggable-item">
                    <el-tag>{{ item.alias ? item.aggregate_type + '(' + item.col + ') -> ' + item.alias : item.aggregate_type + '(' + item.col + ')' }}</el-tag>
                    <span class="draggable-item-handle" v-if="item.radio">
                      <el-radio-group size="mini" v-model="item.aggregate_type" @change="((label)=>{handleValueChangeTagType(label, index, item)})">
                        <el-radio label="sum" size="mini">求和</el-radio>
                        <el-radio label="count" size="mini">计数</el-radio>
                        <el-radio label="avg" size="mini">平均值</el-radio>
                        <el-radio label="max" size="mini">最大值</el-radio>
                        <el-radio label="min" size="mini">最小值</el-radio>
                      </el-radio-group>
                    </span>
                    <span class="draggable-item-handle" v-else @click="handleValueTagType(index, item)"><i class="el-icon-edit-outline"></i></span>
                    <span class="draggable-item-handle" @click="handleValueTagClose(index, item)"><i class="el-icon-delete"></i></span>
                  </div>
                </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: {
        keys: [],
        groups: [],
        values: []
      },
      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
          this.dimensions = this.dataset.schemaConfig.dimensions
          this.measures = this.dataset.schemaConfig.measures
        }
      })
    },
    handleKeyTagClose (index, tag) {
      this.form.keys.splice(index, 1)
      this.dimensions.push(tag)
    },
    handleGroupTagClose (index, tag) {
      this.form.groups.splice(index, 1)
      this.dimensions.push(tag)
    },
    handleValueDragChange (tag) {
      if (tag.added) {
        this.$set(tag.added.element, 'aggregate_type', 'sum')
      }
    },
    handleValueChangeTagType (label, index, tag) {
      this.$delete(tag, 'radio')
    },
    handleValueTagType (index, tag) {
      this.$set(tag, 'radio', true)
    },
    handleValueTagClose (index, tag) {
      this.form.values.splice(index, 1)
      tag.aggregate_type = ''
      this.measures.push(tag)
    }
  }
}
</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;
        .icon {
          margin-right: 6px;
        }
      }
      .field-widget-tag {
        position: relative;
        overflow: hidden;
        padding: 10px 10px;
        margin: 0;
        min-height: 200px;
        .field-widget-label {
          font-size: 12px;
          display: block;
          width: 48%;
          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;
            text-align: center;
          }
        }
      }
    }
    .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 {
          margin: 0 5px;
          display: inline-block;
          border: 1px solid #ebecef;
          height: 32px;
          line-height: 35px;
          border-radius: 4px;
          .draggable-item-handle {
            background-color: #ecf5ff;
            border-color: #d9ecff;
            display: inline-block;
            height: 32px;
            padding: 0 10px;
            line-height: 30px;
            font-size: 12px;
            color: #409EFF;
            border-width: 1px;
            border-style: solid;
            box-sizing: border-box;
            white-space: nowrap;
            cursor: pointer;
            margin-left: -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>
