<template>
  <el-row class="panel-design-show">
    <div class="container" :style="panelDetails.gridStyle">
      <vue-drag-resize-rotate
        v-for="item in panelDetails.panelDesigns"
        v-show="item.keepFlag"
        :key="item.id"
        :disabled="status"
        :panel-design="item"
        :parent="true"
        @newStyle="newStyle"
      >
        <!--视图显示 panelDesign.componentType==='view'-->
        <chart-component v-if="item.componentType==='view'" :ref="item.id" :chart-id="item.id" :chart="item.chartView" />

        <!--组件显示（待开发）-->

      </vue-drag-resize-rotate>
    </div>

  </el-row>
</template>
<script>
import { post, get } from '@/api/panel/panel'
import ChartComponent from '@/views/chart/components/ChartComponent'
import VueDragResizeRotate from '@/components/vue-drag-resize-rotate'
import { uuid } from 'vue-uuid'
import bus from '@/utils/bus'
export default {
  name: 'DrawingBoard',
  components: { ChartComponent, VueDragResizeRotate },
  props: {
    status: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      panelDetails: {
        viewsUsable: [],
        panelDesigns: [],
        gridStyle: null
      },
      gridStyleDefault: {
        position: 'relative',
        height: '100%',
        width: '100%',
        backgroundColor: '#f2f2f2',
        // background: 'linear-gradient(-90deg, rgba(0, 0, 0, .1) 1px, transparent 1px), linear-gradient(rgba(0, 0, 0, .1) 1px, transparent 1px)',
        backgroundSize: '20px 20px, 20px 20px'
      },
      ViewActiveName: 'Views'
    }
  },
  computed: {
    panelInfo() {
      return this.$store.state.panel.panelInfo
    }
  },
  watch: {
    panelInfo(newVal, oldVal) {
      this.panelDesign(newVal.id)
    }
  },

  mounted() {
    const panelId = this.$store.state.panel.panelInfo.id
    if (panelId) {
      this.panelDesign(panelId)
    }

    bus.$on('panel-drawing-load', (panelId) => {
      panelId && this.panelDesign(panelId)
    })
    bus.$on('panel-view-add', (view) => {
      view && this.panelViewAdd(view)
    })
    bus.$on('panel-drawing-save', () => {
      this.savePanel()
    })
    bus.$on('panel-drawing-preview', () => {
      this.preViewShow()
    })
  },

  methods: {
    // 加载公共组件

    // 加载panel design
    panelDesign(panelId) {
      get('panel/group/findOne/' + panelId).then(res => {
        const panelDetailsInfo = res.data
        if (panelDetailsInfo) {
          this.panelDetails = panelDetailsInfo
        }
        if (!panelDetailsInfo.gridStyle) {
          this.panelDetails.gridStyle = this.gridStyleDefault
        }
      })
    },
    panelViewAdd(view) {
      const panelDesigns = this.panelDetails.panelDesigns
      this.panelDetails.viewsUsable.forEach(function(item, index) {
        if (item.id === view.id) {
          const newComponent = {
            id: uuid.v1(),
            keepFlag: true,
            chartView: item,
            componentType: 'view',
            styleInit: false
          }
          panelDesigns.push(newComponent)
        }
      })
    },

    newStyle(viewId, newStyleInfo) {
      this.$nextTick(() => {
        this.$refs[viewId][0].chartResize()
      })
      this.panelInfo.preStyle = JSON.stringify(newStyleInfo)
    },

    // 左边往右边拖动时的事件
    start1(e) {
      console.log(e)
    },
    end1(e) {
      console.log(e)
    },
    // 右边往左边拖动时的事件
    start2(e) {
      console.log(e)
    },
    end2(e) {
      console.log(e)
    },
    // move回调方法
    onMove(e, originalEvent) {
      console.log(e)
      return true
    },
    preViewShow() {
      this.$router.replace('/preview')
    },
    savePanel() {
      post('panel/group/saveGroupWithDesign', this.panelDetails, () => {
      })
      this.$success(this.$t('commons.save_success'))
    }
  }
}
</script>

<style scoped>
  .view-list {
    height: 100%;
    width: 20%;
    min-width: 180px;
    max-width: 220px;
    border: 1px solid #E6E6E6;
    border-left: 0 solid;
    overflow-y: auto;
  }

  .view-list-thumbnails-outline {
    height: 100%;
    overflow-y: auto;
  }

  .view-list-thumbnails {
    width: 100%;
    padding: 0px 15px 15px 0px;
  }

  .panel-design {
    height: 100%;
    min-width: 500px;
    border-top: 1px solid #E6E6E6;
  }

  .panel-design-head {
    height: 40px;
  }

  .panel-design-show {
    height: 100%;
    width: 100%;
    border-top: 1px solid #E6E6E6;
  }

  .padding-lr {
    padding: 0 6px;
  }

  .itxst {
    margin: 10px;
    text-align: left;
  }

  .col {
    width: 40%;
    flex: 1;
    padding: 10px;
    border: solid 1px #eee;
    border-radius: 5px;
    float: left;
  }

  .col + .col {
    margin-left: 10px;
  }

  .item {
    padding: 2px 12px;
    margin: 3px 3px 0 3px;
    border: solid 1px #eee;
    background-color: #f1f1f1;
    text-align: left;
    display: block;
  }

  .item + .item {
    border-top: none;
    margin-top: 3px;
  }

  .item:hover {
    background-color: #fdfdfd;
    cursor: pointer;
  }

  .item-axis {
    padding: 2px 12px;
    margin: 3px 3px 0 3px;
    border: solid 1px #eee;
    background-color: #f1f1f1;
    text-align: left;
  }

  .item-axis:hover {
    background-color: #fdfdfd;
    cursor: pointer;
  }

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

  .container {
    width: 100%;
    height: 600px;
    border: 1px solid #000;
    position: relative;
    box-sizing: border-box;
  }

  span {
    font-size: 12px;
  }
</style>
