<template>
      <div :id='pageId'>
        <grid-layout
            :layout.sync="layout"
            :col-num="12"
            :row-height="30"
            :is-draggable="true"
            :is-resizable="true"
            :is-mirrored="false"
            :vertical-compact="true"
            :margin="[1, 1]"
            :use-css-transforms="true"
    >
        <grid-item v-for="(item,index) in layout"
                   :x="item.x"
                   :y="item.y"
                   :w="item.w"
                   :h="item.h"
                   :i="item.i"
                   :key="index">
          <template v-if="!item.control">
            {{item.i}}
          </template>
          <template v-if='item.control&&item.control.el=="hsLineBar"&&parms[item.control.position]'>
             <div class="designItembox">
              <div v-if='item.control.searchParms&&item.control.searchParms.length' class="searchCrolBox">
                <div v-for="(jtem,index) in item.control.searchParms" :key='index'>
                 <template v-if='jtem.el=="el-input"'>
                   <el-input   size="mini" v-model="item.control.other[jtem.prop]" :placeholder="jtem.placeholder"></el-input>
                 </template>
                 <template v-if='jtem.el=="el-date-picker-monthrange"'>
                     <el-date-picker
                                  size="mini"
                                  v-model="item.control.other[jtem.prop]"
                                  type="monthrange"
                                  value-format="yyyy-MM"
                                  range-separator="至"
                                  start-placeholder="开始月份"
                                  end-placeholder="结束月份">
                     </el-date-picker>
                 </template>
                 <template v-if='jtem.el=="el-date-picker-daterange"'>
                     <el-date-picker
                                  size="mini"
                                  v-model="item.control.other[jtem.prop]"
                                  type="daterange"
                                  value-format="yyyy-MM-dd"
                                  range-separator="至"
                                  start-placeholder="开始日期"
                                   end-placeholder="结束日期">
                     </el-date-picker>
                 </template>
                </div>
                <el-button size='mini' @click="signSearch(item)">查询</el-button>
              </div>
              <hsLineBar
                :initStyle='initStyle'
                :elInfo='item.control'
                :saveConfigDataFun='saveConfigData'
                :allSourceData='parms[item.control.position]'>
              </hsLineBar>
             </div>

          </template>
          <template v-if='item.control&&item.control.el=="el-input"'>
            <el-input v-model="searchParms[item.control.prop]" :placeholder="item.control.placeholder"></el-input>
          </template>
           <template v-if='item.control&&item.control.el=="el-button"'>
            <el-button size='mini' @click="initLayout">{{item.control.label}}</el-button>
          </template>
           <template v-if='item.control&&item.control.el=="el-date-picker-daterange"'>
            <el-button size='mini' @click="initLayout">{{item.control.label}}</el-button>
          </template>
          <template v-if='item.control&&item.control.el=="el-date-picker-monthrange"'>
                     <el-date-picker
                                  size="mini"
                                 v-model="searchParms[item.control.prop]"
                                  type="monthrange"
                                  value-format="yyyy-MM"
                                  range-separator="至"
                                  start-placeholder="开始月份"
                                  end-placeholder="结束月份">
                     </el-date-picker>
          </template>
          <template v-if='item.control&&item.control.el=="el-date-picker-daterange"'>
                     <el-date-picker
                                  size="mini"
                                  v-model="searchParms[item.control.prop]"
                                  type="daterange"
                                  value-format="yyyy-MM-dd"
                                  range-separator="至"
                                  start-placeholder="开始日期"
                                   end-placeholder="结束日期">
                     </el-date-picker>
          </template>
          <template v-if='item.control&&item.control.el=="hsCarousel"'>
            <hsCarousel
                 :initStyle='initStyle'
                :elInfo='item.control'
                :saveConfigDataFun='saveConfigData'
                :allSourceData='parms[item.control.position]'></hsCarousel>
          </template>
        </grid-item>
    </grid-layout>
    <el-button v-show="buttonSaveShow" class='tipSave' @click='savePageConfig'>保存布局</el-button>
    <pageDesign v-model='pageDesignVi' :pagePath='pagePath'></pageDesign>
  </div>
</template>

<script>
import VueGridLayout from 'vue-grid-layout'
import pageDesign from './queryBiDesign'
import uuidv1 from 'uuid/v1'
export default {
  name: 'designLayout',
  components: {
    GridLayout: VueGridLayout.GridLayout,
    GridItem: VueGridLayout.GridItem,
    pageDesign
  },
  props: {
    pagePath: {
      type: String,
      default: ''
    }
  },
  watch: {
    'pagePath': {
      handler: function(newVal, oldVal) {
        if (newVal) {
          this.getPageConfig(newVal)
        }
      },
      deep: true
    }
  },
  data() {
    return {
      pageDesignVi: false,
      igg: true,
      pageId: 'a' + uuidv1(),
      parms: {},
      initStyle: {
        background: '#232449'
      },
      searchList: [
        {
          el: 'el-input',
          prop: 'orderName',
          placeholder: '请输入单号'
        }
      ],
      layout: [
        { 'x': 0,
          'y': 0,
          'w': 4,
          'h': 4,
          'i': '0',
          control: {
            el: 'hsLineBar',
            position: 'table0',
            page: 'design',
            isHsEchart: true,
            searchList: []
          }
        },
        { 'x': 2,
          'y': 0,
          'w': 4,
          'h': 4,
          'i': '1',
          control: {
            el: 'hsLineBar',
            position: 'table1',
            page: 'design',
            isHsEchart: true
          }},
        { 'x': 4,
          'y': 0,
          'w': 4,
          'h': 4,
          'i': '2',
          control: {
            el: 'hsLineBar',
            position: 'table2',
            page: 'design',
            isHsEchart: true
          }},
        { 'x': 8, 'y': 0, 'w': 2, 'h': 3, 'i': '4' },
        { 'x': 10, 'y': 0, 'w': 2, 'h': 3, 'i': '5' },
        { 'x': 0, 'y': 5, 'w': 2, 'h': 5, 'i': '6' },
        { 'x': 2, 'y': 5, 'w': 2, 'h': 5, 'i': '7' },
        { 'x': 4, 'y': 5, 'w': 2, 'h': 5, 'i': '8' },
        { 'x': 6, 'y': 3, 'w': 2, 'h': 4, 'i': '9' },
        { 'x': 6, 'y': 3, 'w': 2, 'h': 4, 'i': '9' },
        { 'x': 6, 'y': 3, 'w': 2, 'h': 4, 'i': '9' },
        { 'x': 6, 'y': 3, 'w': 2, 'h': 4, 'i': '9' }
      ],
      buttonSaveShow: false,
      searchParms: {},
      singleRequest: ['hsCarousel'] // 这个数组里的组件 表示只请求数据，不请求参数
    }
  },
  beforeDestroy() {
    document.removeEventListener('keydown', this.onkeydownDiv)
  },
  mounted() {
    if (this.pagePath) {
      this.getPageConfig()
    }
    document.addEventListener('keydown', this.onkeydownDiv)
  },
  methods: {
    allSearch() {

    },
    signSearch(data) {
      this.getTableConfigData(data.control)
    },
    showReset(flage) {
      const select = `#${this.pageId} .vue-resizable-handle`
      const dom = Array.from(document.querySelectorAll(select))
      if (flage) {
        dom.forEach(item => {
          item.classList.add('showStyle')
        })
      } else {
        dom.forEach(item => {
          item.classList.remove('showStyle')
        })
      }
    },
    onkeydownDiv(event) {
      event.stopPropagation()
      console.warn('shift+alt+M', '显示拖动布局图标')
      if (event.shiftKey && event.altKey && event.keyCode === 77) {
        this.buttonSaveShow = true
        this.showReset(true)
      }
      console.warn('shift+alt+H', '隐藏拖动布局图标')
      if (event.shiftKey && event.altKey && event.keyCode === 72) {
        this.buttonSaveShow = false
        this.showReset(false)
      }
      console.warn('shift+alt+D', '弹出局部的queryBI')
      if (event.shiftKey && event.altKey && event.keyCode === 68) {
        this.pageDesignVi = true
      }
    },
    initLayout() {
      const listoutCopy = JSON.parse(JSON.stringify(this.layout))
      listoutCopy.forEach(item => {
        if (item.control && item.control.prop) {
          this.$set(this.parms, item.control.prop, item.control.default)
        }
        if (item.control && item.control.isRequestControl) {
          this.$set(this.parms, item.control.position, {
            config: {},
            sourceData: []
          })
        }
      })
      listoutCopy.forEach(item => {
        if (item.control && item.control.isRequestControl) { // 这个字段用来判断是否请求数据
          this.getTableConfigData(item.control, this.searchParms)
        }
      })
    },
    getTableConfigData(control, other = {}) {
      const { page, position, el } = control
      const keys = Object.keys(other)
      keys.forEach(k => {
        if (other[k] === null || other[k] === undefined) {
          delete other[k]
        }
      })
      const params = {
        page: page,
        position: position,
        other: other
      }
      const that = this
      if (this.singleRequest.includes(el)) { // 只请求数据源
        const sourceDataP = this.$API.getData(params)
        sourceDataP.then(res => {
          that.parms[position].sourceData = res
        })
      } else {
        const configP = this.$API.getConfig(params)
        const sourceDataP = this.$API.getData(params)
        Promise.all([configP, sourceDataP])
          .then(res => {
            that.parms[position].config = res[0]
            that.parms[position].sourceData = res[1]
          })
      }
    },
    saveConfigData(config, data, elInfo) {
      const params = {
        page: elInfo.page,
        position: elInfo.position
      }
      this.$API.runSave(params, config, data)
    },
    savePageConfig() {
      const parm = {
        page: this.pagePath,
        position: 'pageConfig'
      }
      this.$API.runSave(parm, {}, this.layout).then(_ => {
        this.buttonSaveShow = false
        this.showReset(false)
        this.getPageConfig()
      })
    },
    getPageConfig(pagePath) {
      const params = {
        page: pagePath || this.pagePath,
        position: 'pageConfig'
      }
      this.$API.getData(params).then(res => {
        this.$nextTick(x => {
          this.layout = res.filter(x => x.control)
          this.layout.forEach(item => {
            this.$set(item.control, 'other', {})
          })
          this.initLayout()
        })
      })
    }

  }
}
</script>
<style>
.tipSave{
    position: fixed;
    top: 0;
    right: 0;
    border-radius: 100%;
}
.showStyle{
  bottom:-10px !important;
  background: red !important;
}
.designItembox{
  height: 100%;
  width: 100%;
}
.searchCrolBox{
display: flex;
}
.el-carousel__item{
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
