<template>
  <div class="height100 biUserDefinedForm-add__box">
    <div class="height100 flexbox" id="biUserDefinedFormAddBox">
      <div
        style="width:200px"
        class="weidu-norm-container nav-editor left-editor"
        id="weiduNormEditor"
      >
        <bi-left-editor
          v-if="biModel=='custom'"
          :biCustom="biCustom"
          @leftViewChange="leftViewChange"
          ref="biLeftEditor"
        />
        <mobile-left-editor v-else-if="biModel=='mobile'" />
      </div>
      <div style="width:calc(100% - 420px)" id="centerEditor">
        <ts-row>
          <ts-col style="width:5px">
            <div style="height:100%;width:100%" v-move class="move-container weiduNormEditor"></div>
          </ts-col>
          <ts-col style="width:calc(100% - 10px)">
            <ts-row>
              <ts-col :span="24">
                <defined-center-editor
                  ref="centereditor"
                  v-if="biModel=='custom'"
                  :biCustom="biCustom"
                  :isAdd="isAdd"
                  :oldDatas="oldData"
                  :versionDatas="versionDatas"
                  @refreshDefinedFormTable="refreshDefinedFormTable"
                  @loadVersionData="loadVersionData"
                  @refreshVCodeDatas="refreshVCodeDatas"
                />
                <!-- <big-center-editor v-if="biModel=='bigScreen'" :isAdd="isAdd" :oldDatas="oldData" /> -->
                <mobile-center-editor v-if="biModel=='mobile'" :isAdd="isAdd" :oldDatas="oldData" />
              </ts-col>
              <!-- <ts-col :span="10" v-if="biModel=='mobile'">
                            <mTabs class="height100" :value="tabKeys" @tagClick="tagClick">
                                <mTabPane label="属性设置" :keys="1">
                                    <defined-attr-editor :biCustom="biCustom" :biModel="biModel" />
                                </mTabPane>
                            </mTabs>
              </ts-col>-->
            </ts-row>
          </ts-col>
          <ts-col style="width:5px;">
            <div style="height:100%;width:100%;" v-move class="move-container rightEditor"></div>
          </ts-col>
        </ts-row>
      </div>
      <div style="width:220px" id="rightEditor" class="nav-editor right-editor">
        <mTabs class="height100" :value="tabKeys" @tagClick="tagClick">
          <mTabPane label="属性设置" :keys="1">
            <!-- <big-attr-editor v-if="biModel=='bigScreen'" /> -->
            <defined-attr-editor
              :biCustom="biCustom"
              :biModel="biModel"
              :formId="oldData&&oldData.length>0?oldData[0].id:''"
            />
          </mTabPane>
          <mTabPane label="页面交互" :keys="2" v-if="biModel!='bigScreen'">
            <defined-Inter-editor />
          </mTabPane>
          <mTabPane label="历史版本" :keys="3" v-if="biModel!='bigScreen'">
            <ts-version-panel
              ref="tsVersionPanel"
              :param="{name:oldData&&oldData.length>0?oldData[0].id:'',systemName:'平台应用',moduleName:'自定义报表',type:3}"
              @loadVersionDataAfter="loadVersionDataAfter"
              @loadVersionData="loadVersionData"
            ></ts-version-panel>
          </mTabPane>
        </mTabs>
        <a
          class="iconright view-change-icon"
          @click="rightViewChange(true)"
          v-if="!isSmallBiRightTree"
          style="left:-6px"
        >
          <i style="color:var(--base-acv)" class="iconfont icon-shousuo1 transition__all_3s"></i>
        </a>
        <a
          class="iconleft view-change-icon"
          @click="rightViewChange(false)"
          v-if="isSmallBiRightTree"
          style="left:-6px"
        >
          <i class="iconfont icon-shousuo2 transition__all_3s"></i>
        </a>
      </div>
    </div>
  </div>
</template>

<script>
import biLeftEditor from './biLeftEditor'
import definedCenterEditor from './definedCenterEditor'
import definedAttrEditor from './definedAttrEditor'
import definedInterEditor from './definedInterEditor'
import biUtils from '../utils/biUtils'
export default {
  components: {
    biLeftEditor,
    definedCenterEditor,
    definedAttrEditor,
    definedInterEditor
  },
  props: {
    isAdd: {
      type: Boolean,
      default: true
    },
    oldData: {
      type: Array,
      default: () => {
        return []
      }
    },
    biModel: {
      type: String,
      default: 'custom'
    }
  },
  data() {
    return {
      tabKeys: 1,
      selectData: {},
      versionDatas: [],
      titleText: '',
      other:
        this.oldData.length === 0
          ? {}
          : this.oldData[0].other
          ? JSON.parse(this.oldData[0].other)
          : {},
      isShowAttr: false,
      biCustom: {},
      layObj: {
        closeBtn: false
      },
      weiduNormWidth: 0,
      rightWidth: 0,
      isSmallBiRightTree: false // 收起右边
    }
  },
  created() {},
  mounted() {
    this.biCustom = this.other ? this.other.biCustom : {}
    this.weiduNormWidth = document.getElementById('weiduNormEditor').offsetWidth
    this.rightWidth = document.getElementById('rightEditor').offsetWidth
    this.$nextTick(() => {
      this.rightViewChange(true)
      this.leftViewChange(true)
      this.$refs.biLeftEditor.isSmallBiLeftTree = true
    })
    // this.other =
    if (this.oldData.length > 0) {
      switch (this.biModel) {
        case 'bigScreen':
          this.$store.commit(
            'setBigScreenNature',
            this.other && this.other ? this.other.natureArr : {}
          )
          break
        case 'custom':
          this.$store.commit(
            'setNatureArr',
            this.other && this.other.natureArr ? this.other.natureArr : []
          )
          // console.log(JSON.stringify(this.other.natureArr))
          break
        case 'mobile':
          this.$store.commit(
            'setPhoneNature',
            this.other && this.other ? this.other : []
          )
          break
      }
    }

    this.$eventBus.$on('itemselectchange', this.itemselectchange)
    // this.$eventBus.$on('loadVersionData', this.loadVersionData)
    this.$eventBus.$on('biCustomChange', this.biCustomChange)
    // this.$eventBus.$on('refreshVCodeDatas',this.refreshVCodeDatas)
    var _this = this
    document.onkeydown = function(e) {
      let key = window.event.keyCode
      let preview
      if (_this.$refs.centereditor) {
        preview = _this.$refs.centereditor.showDialogType != 'preview'
      } else {
        preview = true
      }

      if (key == 46 && !_this.isShowAttr && preview) {
        this.$eventBus.$emit('optDel')
      }
    }
  },
  directives: {
    // 移动左侧数据源，自定义可托宽度
    move(el, bindings) {
      el.onmousedown = function(e) {
        var init = e.clientX
        var moverEl = document.getElementById(el.classList[1]) // 被拖动的元素
        var initWidth = moverEl.offsetWidth
        var weiduNormEditor = document.getElementById('weiduNormEditor') // 数据源面板
        var editorBoxWidth = document.getElementById('biUserDefinedFormAddBox') //整体窗口
          .offsetWidth
        var centerEditor = document.getElementById('centerEditor') // 中间设计区
        var rightEditor = document.getElementById('rightEditor') // 右侧面板
        document.onmousemove = function(e) {
          var end = e.clientX
          var newWidth =
            el.classList[1] === 'rightEditor'
              ? init - end + initWidth
              : end - init + initWidth
          if (newWidth < 30) {
            return
          }
          moverEl.style.width = newWidth + 'px'
          // centerEditor.style.width = `calc(100% - ${(weiduNormEditor.offsetWidth+rightEditor.offsetWidth+4)}px)`
          centerEditor.style.width =
            editorBoxWidth -
            weiduNormEditor.offsetWidth -
            rightEditor.offsetWidth -
            4 +
            'px'
        }
        document.onmouseup = function() {
          document.onmousemove = document.onmouseup = null
        }
      }
    }
  },
  methods: {
    clickMainEditor() {
      this.itemselectchange({ select: false })
    },
    // 右侧属性面板
    rightViewChange(isSmallBiRightTree) {
      this.isSmallBiRightTree = isSmallBiRightTree
    },
    // 拖动左边宽度
    leftViewChange(isSmallBiLeftTree) {
      var weiduNormEditor = document.getElementById('weiduNormEditor') // 数据源面板
      var editorBoxWidth = document.getElementById('biUserDefinedFormAddBox')
        .offsetWidth
      var centerEditor = document.getElementById('centerEditor')
      var rightEditor = document.getElementById('rightEditor')
      if (isSmallBiLeftTree) {
        // 收起
        weiduNormEditor.style.width = 30 + 'px'
        weiduNormEditor.getElementsByClassName('m-tabs__box')[0].style.width =
          '0'
      } else {
        weiduNormEditor.style.width = this.weiduNormWidth + 'px'
        weiduNormEditor.getElementsByClassName('m-tabs__box')[0].style.width =
          '100%'
      }
      centerEditor.style.width =
        editorBoxWidth -
        weiduNormEditor.offsetWidth -
        rightEditor.offsetWidth -
        4 +
        'px'
    },
    refreshDefinedFormTable(params) {
      this.$emit('refreshDefinedFormTable', params)
    },
    itemselectchange(item) {
      this.selectData = item.select ? item.target : {}
      // 属性面板收起的情况下，点击组件，打开右侧属性面板
      // 统一点击其他不收起
      // if (item.select && this.isSmallBiRightTree) {
      //   this.rightViewChange(false)
      // } else if (!item.select && !this.isSmallBiRightTree) {
      //   this.rightViewChange(true)
      // }
      //  if (item.select &&this.isSmallBiRightTree) {
      //     this.rightViewChange(false)
      //   }

      this.$store.commit('setSelectData', {
        ...this.selectData
      })
    },
    biCustomChange(item) {
      this.biCustom = item.target
    },
    // 刷新版本信息
    refreshVCodeDatas() {
      this.$refs.tsVersionPanel.$refs.tstable.refresh()
    },
    // 加载版本号
    loadVersionData(nowVersionCode) {
      let url =
        nowVersionCode && nowVersionCode != '草稿'
          ? '/ts-version/api/version/data?versionCode=' + nowVersionCode
          : 'ts-version/api/version/data?type=3&systemName=平台应用&moduleName=自定义报表&name=' +
            this.oldData[0].id +
            '&copyFlag=1'
      const _this = this
      this.$api({
        url: url,
        method: 'get',
        contentType: 'application/x-www-form-urlencoded; charset=utf-8'
      })
        .then(function(res) {
          if (res.success) {
            _this.oldData[0].versionCode = nowVersionCode
            _this.oldData[0].other = _this.$utils.escape2Html(res.object)
            _this.other = _this.oldData[0].other
              ? JSON.parse(_this.oldData[0].other)
              : {}
            _this.$store.commit(
              'setNatureArr',
              _this.other && _this.other.natureArr ? _this.other.natureArr : []
            )
            _this.$store.commit('setSelectData', {})
          } else {
            _this.$utils.msg(_this, '加载失败，请联系管理员', 'error')
          }
        })
        .catch(function(error) {
          // 请求失败
        })
    },
    // linkselectchange(item) {
    //   //点击链接块触发弹窗
    //   this.selectData = item.select ? item.target : {}
    //   if (item.select) {
    //     this.tabKeys = 1
    //     this.$refs.attrRightDialog.open()
    //   } else {
    //     this.$refs.attrRightDialog.close()
    //   }
    //   this.$store.commit('setSelectData', {
    //     ...this.selectData
    //   })
    // },
    // tab切换
    tagClick(key) {
      this.tabKeys = key
      this.rightViewChange(false)
    },
    loadVersionDataAfter(data) {
      this.versionDatas = []
      if (data && Array.isArray(data)) {
        for (let item of [...data]) {
          item.versionCode = item.versionCode || '草稿'
          this.versionDatas.push(item)
        }
      }
    }
  },
  watch: {
    isSmallBiRightTree: {
      handler(isSmallBiRightTree) {
        var weiduNormEditor = document.getElementById('weiduNormEditor') // 数据源面板
        var editorBoxWidth = document.getElementById('biUserDefinedFormAddBox')
          .offsetWidth
        var centerEditor = document.getElementById('centerEditor')
        var rightEditor = document.getElementById('rightEditor')
        if (isSmallBiRightTree) {
          // 收起
          rightEditor.style.width = 30 + 'px'
          rightEditor.getElementsByClassName('m-tabs__box')[0].style.width = '0'
        } else {
          rightEditor.style.width = this.rightWidth + 'px'
          rightEditor.getElementsByClassName('m-tabs__box')[0].style.width =
            '100%'
        }
        centerEditor.style.width =
          editorBoxWidth -
          weiduNormEditor.offsetWidth -
          rightEditor.offsetWidth -
          4 +
          'px'
      }
    }
  },
  destroyed: function() {
    // 多个弹框的情况下，请慎用this.$eventBus，多传入方法
    this.$eventBus.$off('itemselectchange', this.itemselectchange)
    // this.$eventBus.$off('linkselectchange', this.linkselectchange)
    this.$eventBus.$off('biCustomChange', this.biCustomChange)
    // this.$eventBus.$off('loadVersionData', this.loadVersionData)
    // this.$eventBus.$off('refreshVCodeDatas', this.refreshVCodeDatas)
  }
}
</script>

<style lang="less" scoped>
.biUserDefinedForm-add__box {
  .m-row,
  .m-col {
    height: 100%;
    overflow: hidden;
  }
  /deep/.m-dialay__right {
    top: 0px !important;
  }
  .weidu-norm-container {
    min-width: 30px;
  }
  .move-container {
    background: #eeeeee;
    cursor: col-resize;
  }
  /deep/.attr_null {
    display: flex;
    display: -webkit-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
  }
  /deep/.vxe-form--item:first-child {
    margin-top: 5px;
  }
  /deep/ .form__title {
    width: 65px;
    padding: 0 5px;
  }
  /deep/.form-inline {
    /deep/.vxe-form--item-content {
      display: inline-flex;
    }
  }
  .right-editor {
    /deep/.m-tabs {
      position: relative;
      .m-tabs__outbox {
        flex-direction: row-reverse;
        .m-tabs__header {
          border-left: 1px solid var(--border_color);
          li {
            border-radius: 0 5px 5px 0;
            border-right: 1px solid var(--border_color);
          }
        }
      }
    }
  }
  .left-editor {
    /deep/.m-tabs__outbox {
      .m-tabs__header {
        border-right: 1px solid var(--border_color);
        li {
          border-radius: 5px 0 0 5px;
        }
      }
    }
  }
  .nav-editor {
    /deep/.m-tabs__outbox {
      display: flex;
      .m-tabs__header {
        border-bottom: none;
        display: block;
        white-space: normal;
        width: 30px;
        height: 100%;
        overflow-x: hidden;
        li {
          height: auto;
          margin: 0;
          line-height: 20px;
          padding: 10px 6px;
          border: 0.55px solid var(--border_color);
          cursor: pointer;
          background: #f5f5f5;
          &:hover {
            background: #0079fb47;
            color: white;
            .text {
              color: #fff !important;
            }
          }
        }
        li.active {
          .text {
            color: #fff !important;
          }
          background: var(--base-acv) !important;
          color: #fff !important;
        }
      }
      .m-tabs__box {
        height: 100%;
      }
    }
  }
}
</style>
