<template>
  <el-container class="container" ref="formDesignerPage">
    <!-- 快速搜索弹窗 -->
    <div class="fast-search" v-show="searchDialogVisible">
      <div class="header-wrap">
        <h3 class="fast-search-title">搜索</h3>
        <i
          class="el-icon-close close-icon"
          @click="handleCloseSearchDialog"
        ></i>
      </div>
      <el-input
        v-model="searchField"
        ref="fastSearchInput"
        placeholder="请输入表单字段名称"
        @input="handleInput"
      >
        <i
          v-show="searchField"
          slot="suffix"
          class="el-icon-circle-close clear-icon"
          @click="handleClear"
        ></i>
      </el-input>
      <div class="fast-search-result__wrap" v-show="searchField">
        <span class="result-info-top"
          ><i class="icon-notes note-icon"> </i>搜索“{{
            searchField
          }}”，共找到{{ searchResultList.length }}个相关字段</span
        >
        <ul class="result-list">
          <li
            class="result-item"
            :class="{'is-actived': result.key === selectWidget.key}"
            v-for="result in searchResultList"
            :key="result.key"
            @click="handleClickSearchResult(result)"
          >
            <div class="result-item__left">
              <i class="left-icon" :class="result.icon"></i>
            </div>
            <div class="result-item__right">
              <div class="field-name" v-html="searchedField(result)"></div>
              <ul class="result-info">
                <li class="info-item">
                  <span class="info-item-label">控件类型:</span>
                  <span class="info-item-value">{{ result.controlName }}</span>
                </li>
                <li class="info-item" v-show="result.tableNameDesc">
                  <span class="info-item-label">绑定对象:</span>
                  <span class="info-item-value">{{
                    result.tableNameDesc
                  }}</span>
                </li>
                <li class="info-item" v-show="result.target">
                  <span class="info-item-label">绑定属性:</span>
                  <span class="info-item-value"
                    >{{ result.title }}({{ result.target }})</span
                  >
                </li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <el-header class="container__header" height="48px">
      <form-navigator
        ref="FormNavigator"
        @saveValidate="saveValidate"
        @close-dialog="close"
        @local-save="localSave"
        @load-local="loadLocal"
        :widgetForm="widgetForm"
        :form-data="formData"
        :form-id="formId"
        :curFormRight="curFormRight"
      />
    </el-header>
    <el-container class="container__body">
      <el-aside
        class="container__body--control"
        width="270px"
        v-if="asideShow"
        style="overflow: hidden"
      >
        <field-panel
          :bo-def-ids="boDefIds"
          :widgetForm="widgetForm"
          :form-type="formType"
          :form-id="formId"
          :copyFormList="copyFormList"
          @addTocopyFormList="addTocopyFormList"
        />
      </el-aside>
      <div
        class="navbar-collapse"
        :class="{'navbar-collapse-right': !asideShow}"
        @click="asideShow = !asideShow"
      >
        <div class="navbar-collapse-bg">
          <i
            class="navbar-collapse-arrow"
            :class="{
              'el-icon-arrow-left': asideShow,
              'el-icon-arrow-right': !asideShow
            }"
          ></i>
        </div>
      </div>
      <el-main
        class="container__body--widget form-container__body--widget"
        :class="{'widget-moblie__container': formType === 'mobile'}"
      >
        <widget-panel
          ref="widgetForm"
          :data.sync="widgetForm"
          :selectWidgetList.sync="selectWidgetList"
          :formType="formType"
          :select="widgetFormSelect"
          :form-data.sync="formData"
          @click-tab="handleClickTab"
          @get-collapse-active-name="getCollapseActiveName"
        />
      </el-main>
      <div
        class="navbar-collapse"
        :class="{'navbar-collapse-left': rightAsideShow}"
        @click="rightAsideShow = !rightAsideShow"
      >
        <div class="navbar-collapse-bg">
          <i
            class="navbar-collapse-arrow"
            :class="{
              'el-icon-arrow-right': rightAsideShow,
              'el-icon-arrow-left': !rightAsideShow
            }"
          ></i>
        </div>
      </div>
      <el-aside
        width="350px"
        class="container__body--property"
        v-show="rightAsideShow"
      >
        <property-panel
          @saveEnd="saveEnd"
          ref="propertyPanel"
          :widgetForm.sync="widgetForm"
          :bo-def-data="boDefData"
          :main-bo-fields.sync="mainBoFields"
          :sub-tables="subTables"
          :form-data.sync="formData"
          :sun-tables-map="sunTablesMap"
        />
      </el-aside>
    </el-container>
  </el-container>
</template>
<script>
import FormNavigator from '@/components/form/FormNavigator.vue'
import FieldPanel from '@/components/form/FieldPanel.vue'
import WidgetPanel from '@/components/form/WidgetPanel.vue'
import PropertyPanel from '@/components/form/PropertyPanel.vue'
import request from '@/request.js'
import sysType from '@/api/sysType'
import req from '@/request'
import form from '@/api/form.js'
import {
  basicComponents,
  advanceComponents,
  flowComponents
} from '@/api/controlsConfig.js'
import {mapState, mapMutations} from 'vuex'

import utils from '@/hotent-ui-util'

const SEARCH_METHOD_MAP = {
  tab: 'searchTabLayoutField',
  grid: 'searchColumnLayoutField',
  table: 'searchTableLayoutField',
  subtable: 'searchSubTableLayoutField',
  subDiv: 'searchDivSubTableLayoutField',
  accordion: 'searchCollapseLayoutField'
}
export default {
  props: ['visibleDialog', 'formId', 'formDefId', 'addBpmForm', 'formType'],
  components: {FormNavigator, FieldPanel, WidgetPanel, PropertyPanel},
  data() {
    return {
      asideShow: true,
      rightAsideShow: true,
      widgetForm: {
        list: [],
        config: {
          labelWidth: 100,
          labelPosition: 'right',
          size: 'small',
          globalQueryJson: []
        }
      },
      selectWidgetList: [],
      formData: this.addBpmForm,
      boDefData: null,
      widgetFormSelect: {options: {validateType: ''}},
      mainBoFields: [],
      subTables: [],
      sunTablesMap: {},
      boDefIds: '',
      copyFormList: [],
      searchDialogVisible: false,
      searchField: '',
      resultCount: 0,
      searchResultList: [],
      currentActivedIndex: 0, //tab布局时当前点击tab的index
      collapseActivedNames: [], //折叠面板控件当前展开面板集合
      timer: null,
      curFormRight:[] // 当前表单的操作权限.1,使用。2，管理端列表查看权限，3，编辑。4，删除
    }
  },
  watch: {
    visibleDialog: {
      handler: function(newVal) {
        if (newVal) {
          this.initData(this.formId, this.addBpmForm.bos)
        }
      },
      immediate: true
    }
  },
  computed: {
    ...mapState('form', ['selectWidget']),
    searchedField() {
      return result => {
        return (
          result.desc &&
          result.desc.replace(
            this.searchField,
            `<span class="keywords">${this.searchField}</span>`
          )
        )
      }
    },
    componentConfig() {
      const componentList = [
        ...basicComponents,
        ...advanceComponents,
        ...flowComponents
      ]
      return componentList.reduce((pre, cur) => {
        pre[cur.ctrlType] = {desc: cur.desc, icon: cur.icon}
        return pre
      }, {})
    }
  },
  created() {
    this.setSelectWidget({options: {validateType: ''}})
  },
  mounted() {
    this.monitor()
    window.addEventListener('keydown', this.handleKeyCodeEvent)
  },
  methods: {
    ...mapMutations({
      setSelectWidget: 'form/setSelectWidget' // 设置当前选中控件
    }),
    handleKeyCodeEvent(event) {
      if (event.keyCode === 70 && event.ctrlKey) {
        this.searchDialogVisible = true
        event.preventDefault()
        this.searchField = ''
        this.searchResultList = []
        this.$nextTick(() => {
          if (this.$refs.fastSearchInput && this.$refs.fastSearchInput.focus)
            this.$refs.fastSearchInput.focus()
        })
      }
    },
    handleClickTab(index) {
      this.currentActivedIndex = index
    },
    getCollapseActiveName(activeNames) {
      this.collapseActivedNames = activeNames
    },
    handleClear() {
      this.searchField = ''
      this.searchResultList = []
    },
    handleInput(val) {
      const this_ = this
      _.debounce(function() {
        this_.handleSearchField(val)
      }, 200)()
    },
    handleSearchField(val) {
      if (val) {
        //赋值之前先清空
        this.searchResultList = []
        this.widgetForm.list.map(item => {
          if (item.isLayout && SEARCH_METHOD_MAP[item.ctrlType]) {
            this[SEARCH_METHOD_MAP[item.ctrlType]](val, item)
          } else {
            this.noLayoutControl(val, item)
          }
        })
        if (this.searchResultList.length === 1) {
          this.widgetFormSelect = {}
          this.$set(this, 'widgetFormSelect', this.searchResultList[0])
          this.setSelectWidget(this.searchResultList[0])
          setTimeout(() => {
            this.goToTargetPosition(this.searchResultList[0].key)
            this.handleCloseSearchDialog()
          }, 500)
        }
      }
    },
    //查询没有布局控件的字段
    noLayoutControl(val, item, currentTableDesc) {
      if (item.desc.includes(val)) {
        const pathLength = item.fieldPath && item.fieldPath.split('.').length
        let currentTableName = ''
        if (pathLength === 2 && !currentTableDesc) {
          const resultObj = this.mainBoFields.find(
            it => it.name === item.tableName
          )
          currentTableName = resultObj && resultObj.desc
        } else {
          currentTableName = currentTableDesc
        }
        this.searchResultList.push({
          ...item,
          tableNameDesc: currentTableName,
          controlName:
            this.componentConfig[item.ctrlType] &&
            this.componentConfig[item.ctrlType].desc,
          icon:
            this.componentConfig[item.ctrlType] &&
            this.componentConfig[item.ctrlType].icon
        })
      }
    },
    //查询tab布局控件字段
    searchTabLayoutField(val, item) {
      if (item.columns && item.columns.length) {
        const currentActivedTab = item.columns[this.currentActivedIndex]
        if (
          currentActivedTab &&
          currentActivedTab.list &&
          currentActivedTab.list.length
        ) {
          this.commonSearchField(val, currentActivedTab.list)
        }
      }
    },
    //查询折叠面板布局控件字段
    searchCollapseLayoutField(val, item) {
      if (item.columns && item.columns.length) {
        item.columns.map(it => {
          if (
            this.collapseActivedNames.length &&
            this.collapseActivedNames.includes(it.idKey)
          ) {
            this.commonSearchField(val, it.list)
          }
        })
      }
    },
    //tab和折叠面板布局控件通用逻辑
    commonSearchField(val, list) {
      if (list && list.length) {
        list.map(listItem => {
          if (listItem.isLayout && SEARCH_METHOD_MAP[listItem.ctrlType]) {
            this[SEARCH_METHOD_MAP[listItem.ctrlType]](val, listItem)
          } else {
            this.noLayoutControl(val, listItem)
          }
        })
      }
    },
    //查询栅格布局控件字段
    searchColumnLayoutField(val, item, currentTableDesc) {
      item.columns.map(it => {
        if (it.list && it.list.length > 0) {
          it.list.map(fields => {
            this.noLayoutControl(val, fields, currentTableDesc)
          })
        }
      })
    },
    //查询表格布局控件字段
    searchTableLayoutField(val, item) {
      item.rows.map(it => {
        it.cols.map(list => {
          if (list.list && list.list.length > 0) {
            list.list.map(fields => {
              this.noLayoutControl(val, fields)
            })
          }
        })
      })
    },
    //查询子表,孙表布局控件字段
    searchSubTableLayoutField(val, item) {
      item.list.length &&
        item.list.map(it => {
          if (it.isLayout && it.list && it.list.length) {
            it.list.map(sunItem => {
              this.noLayoutControl(val, sunItem, it.desc)
            })
          } else {
            this.noLayoutControl(val, it, item.desc)
          }
        })
    },
    //查询Div子表,Div孙表布局控件字段
    searchDivSubTableLayoutField(val, item) {
      if (item.list && item.list.length) {
        item.list.map(it => {
          if (it.isLayout) {
            if (it.ctrlType === 'grid') {
              this.searchColumnLayoutField(val, it, item.desc)
            } else {
              if (it.list && it.list.length) {
                it.list.map(sunItem => {
                  if (sunItem.isLayout && sunItem.ctrlType === 'grid') {
                    this.searchColumnLayoutField(val, sunItem, it.desc)
                  } else {
                    this.noLayoutControl(val, sunItem, it.desc)
                  }
                })
              }
            }
          } else {
            this.noLayoutControl(val, it, item.desc)
          }
        })
      }
    },
    goToTargetPosition(key) {
      this.$nextTick(() => {
        this.$el.querySelector(`#item_${key}`) &&
          this.$el.querySelector(`#item_${key}`).scrollIntoView({
            behavior: 'smooth',
            block: 'center',
            inline: 'nearest'
          })
      })
    },
    handleClickSearchResult(result) {
      this.widgetFormSelect = {}
      this.$set(this, 'widgetFormSelect', result)
      this.setSelectWidget(result)
      this.goToTargetPosition(result.key)
      this.handleCloseSearchDialog()
    },
    handleCloseSearchDialog() {
      this.searchDialogVisible = false
    },
    addTocopyFormList(form) {
      if (this.copyFormList.length > 0) {
        let isIn = false
        this.copyFormList.forEach(item => {
          if (item.id == form.id) {
            isIn = true
          }
        })
        if (!isIn) {
          this.copyFormList.push(form)
        }
      } else {
        this.copyFormList.push(form)
      }
    },
    monitor() {
      let that = this
      document.onkeydown = function(e) {
        //按下删除提交
        let key = window.event.keyCode
        //事件中keycode=18为删除事件 左Alt
        if (key == 18 && e.code == 'AltRight') {
          that.handleWidgetDelete()
        }
      }
    },
    //删除表单字段控件
    deleteWidget(list) {
      for (let i = list.length - 1; i >= 0; i--) {
        if (list[i].key && !list[i].columns && !list[i].rows && !list[i].list) {
          //没使用布局字段
          if (this.selectWidgetList.indexOf(list[i].key) != -1) {
            list.splice(i, 1)
          }
        } else if (list[i].columns && list[i].columns.length > 0) {
          //栅格，tab页签，折叠面板
          for (let j = list[i].columns.length - 1; j >= 0; j--) {
            this.deleteWidget(list[i].columns[j].list)
          }
        } else if (list[i].rows && list[i].rows.length > 0) {
          //表格布局
          for (let k = list[i].rows.length - 1; k >= 0; k--) {
            if (list[i].rows[k].cols.length > 0) {
              for (let m = list[i].rows[k].cols.length - 1; m >= 0; m--) {
                this.deleteWidget(list[i].rows[k].cols[m].list)
              }
            }
          }
        } else if (list[i].list && list[i].list.length > 0) {
          //子表，孙表
          this.deleteWidget(list[i].list)
        }
      }
    },
    handleWidgetDelete() {
      let list = this.widgetForm.list
      if (list.length > 0) {
        this.deleteWidget(list)
        this.selectWidgetList.empty()
      }
    },
    /**
     * 保存本地配置
     */
    localSave() {
      let localSaveData = {}
      localSaveData.widgetForm = this.widgetForm
      localSaveData.formData = this.formData
      localSaveData.boDefData = this.boDefData
      localSaveData.widgetFormSelect = this.$store.state.form.selectWidget
      localSaveData.mainBoFields = this.mainBoFields
      localSaveData.subTables = this.subTables
      localSaveData.sunTablesMap = this.sunTablesMap

      var jsonStr = JSON.stringify(localSaveData)
      var blob = new Blob([jsonStr], {type: 'application/json'})
      var saveAs = window.saveAs
      var name = this.formData.name || this.formData.key || '表单设计'
      saveAs(blob, name + new Date().getTime() + '.json')
    },
    /**
     * 加载本地存储
     */
    loadLocal(localSaveData) {
      const oldFormKey = this.formData.formKey
      const newFormKey = localSaveData.formData.formKey
      if (oldFormKey != newFormKey) {
        this.$message.error(
          '当前表单与本地导入的表单不是同一个表单，无法导入。'
        )
        return
      }
      const oldDefId = this.formData.defId
      const newVersion = this.formData.rev
      this.widgetForm = localSaveData.widgetForm
      this.formData = localSaveData.formData
      this.formData.rev = newVersion
      this.formData.defId = oldDefId
      this.boDefData = localSaveData.boDefData
      if (localSaveData.widgetFormSelect) {
        this.setSelectWidget(localSaveData.widgetFormSelect)
      }
      this.mainBoFields = localSaveData.mainBoFields
      this.subTables = localSaveData.subTables
      this.sunTablesMap = localSaveData.sunTablesMap
      this.$message.success('导入成功')
    },
    saveEnd() {
      this.$refs.FormNavigator.saveEnd()
    },
    saveValidate() {
      this.$refs.propertyPanel.saveValidate()
    },
    close(value) {
      if (value) {
        this.$emit('update:formDefId', value.formData.defId)
        this.$emit('update:formId', value.formData.id)
        this.formData = value.formData
        this.formData.rev = value.rev
      } else {
        this.$emit('update:visibleDialog', false)
      }
    },
    initData(formId, bos) {
     
      this.copyFormList = []
      if (this.formDefId) {
        request
          .get('${form}/form/formDef/v1/get?formDefId=' + this.formDefId)
          .then(response => {
            this.widgetForm = JSON.parse(response.data.value.expand)
          })
      } else if (
        this.formData.templateConf &&
        this.formData.templateConf.boDefId
      ) {
        request
          .post(
            '${form}/form/form/v1/generateExpand',
            this.formData.templateConf
          )
          .then(response => {
            this.widgetForm = JSON.parse(response.data.value)
          })
      }

      if (bos && bos.length > 0) {
        const boDefIds = bos.extractByKey('id').join(',')
        this.getBoDefData(boDefIds)
        this.widgetForm.boDefList = bos
        this.boDefIds = boDefIds

        this.setDefaultCategory()

        //获取表单别名
        let alias = this.formData.bos[0].alias
        this.formData.name = this.formData.bos[0].description
        this.getDefaultKey(alias).then(res => {
          this.formData.formKey = res.data.value
        })
        this.getFormRight()
        return
      }

      if (formId) {
        request
          .get('${form}/form/form/v1/formDesign?formId=' + formId)
          .then(response => {
            this.formData = response.data
            this.formData.id = formId
            this.boDefIds = JSON.parse(this.formData.bos)
              .extractByKey('id')
              .join(',')
            this.getBoDefData(this.boDefIds)
            this.getFormRight()
          })
      }
    },
    setDefaultCategory() {
      //获取默认分类
      sysType.getSysTypeByCatId(7).then(data => {
        if (data && data.length) {
          const list = utils.nest2tile(data)
          const defaultCategory = list.find(item => item.typeKey === 'default')
          if (defaultCategory) {
            this.formData.typeId = defaultCategory.id
            this.formData.typeName = defaultCategory.name
          }
        }
      })
    },
    getDefaultKey(key) {
      return req.get(
        window.context.form + '/form/form/v1/getDefaultKey?key=' + key
      )
    },
    getBoDefData(boDefId) {
      request.post('${form}/bo/def/v1/getBOTree', boDefId).then(response => {
        this.boDefData = response.data
        this.getMainBoFields()
      })
    },
    getMainBoFields() {
      this.mainBoFields = []
      // 多个BO   一个Bo 对应一个主表
      if (
        this.boDefData &&
        this.boDefData.children &&
        this.boDefData.children.length
      ) {
        this.boDefData.children.forEach(element => {
          let boData = {...element}
          let boSubTables = boData.children.filter(
            field => field.nodeType == 'sub'
          )

          boSubTables.forEach(subTable => {
            //收集孙实体
            const sunTables = subTable.children.filter(
              field => field.nodeType == 'sub'
            )
            if (sunTables && sunTables.length > 0) {
              this.sunTablesMap[subTable.name] = sunTables
            }

            let sunTable1 = {...subTable}
            sunTable1.children = subTable.children.filter(
              field => field.status != 'hide' && field.nodeType != 'sub'
            )
            this.subTables.push(sunTable1)
          })

          // 删除子表字段
          boData.children = boData.children.filter(field => {
            return field.nodeType != 'sub' && field.status != 'hide'
          })

          this.mainBoFields.push(boData)
        })
      }
    },
    getFormRight(){
      // 新增的时候给所有权限
      if (!this.formData.id) {
        this.curFormRight = ['2','3','4']
        return
      }
      let _param = {}
      _param.querys = [{property: "formKey", value: this.formData.formKey, group: "quick", relation: "AND", operation: "EQUAL"},
                       {group: "defaultQueryGroup", operation: "EQUAL", relation: "AND", property: "formType",value: this.formType }]
      this.$addRightMarkIntoFilter(_param)
      form.getPageJson(_param).then(response => {
        if (response.rows && response.rows.length > 0) {
          this.curFormRight = response.rows[0].resourceRight
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/css/element-variables.scss';
.fast-search {
  padding: 24px;
  position: fixed;
  width: 508px;
  min-height: 92px;
  left: 50%;
  z-index: 1002;
  top: 46px;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);
  .header-wrap {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
    .fast-search-title {
      color: #222;
      font-size: 16px;
      margin: 0;
    }
    .close-icon {
      color: #666;
      cursor: pointer;
    }
  }
  ::v-deep {
    .el-input__suffix {
      top: 10px;
    }
    .el-input--small .el-input__inner {
      height: 36px;
      line-height: 36px;
    }
  }
  .search-icon,
  .clear-icon {
    color: #333;
    font-size: 16px;
    padding-right: 8px;
    &:hover {
      cursor: pointer;
      color: #409eff;
    }
  }
  .fast-search-result__wrap {
    padding-top: 20px;
    .result-info-top {
      font-size: 14px;
      color: #333;
      .note-icon {
        padding-right: 8px;
      }
    }
    .result-list {
      margin-top: 12px;
      max-height: 420px;
      overflow: auto;
      .result-item {
        display: flex;
        align-items: center;
        height: 58px;
        border-radius: 2px;
        margin-bottom: 20px;
        padding-left: 10px;
        &:hover {
          cursor: pointer;
          background: #f8f8f8;
        }
        .result-item__left {
          .left-icon {
            font-size: 20px;
          }
        }
        .result-item__right {
          padding-left: 8px;
          .field-name {
            margin: 0;
            font-size: 14px;
            font-weight: 400;
            ::v-deep.keywords {
              color: #409eff;
            }
          }
        }
        .result-info {
          display: flex;
          .info-item {
            padding-right: 20px;
            span {
              font-size: 12px;
              color: #888888;
            }
            .info-item-value {
              padding-left: 8px;
            }
          }
        }
      }
      .is-actived {
        background: rgba(248, 248, 248, 0.39);
      }
    }
  }
}
.container {
  height: 100%;
  .container__header {
    padding: 0;
    background: $--color-white;
    z-index: 7;
  }
  .container__body {
    height: calc(100% - 80px);
  }
  .container__footer {
    background: $--background-color-secondary;
    border-top: 1px solid $--border-color-base;
  }
  .container__body--control {
    box-shadow: 2px 0 5px $--border-color-light;
    //隐藏滚动条
    &::-webkit-scrollbar {
      width: 0;
      background-color: transparent;
    }
    /*火狐下隐藏滚动条*/
    scrollbar-width: none;
  }
  .container__body--widget {
    background: $--background-color-base;
    position: relative;
    padding: 0 5px;
    margin-top: 1px;
    padding-left: 0;
    margin-left: -8px;
    margin-right: -8px;
  }
  .widget-moblie__container {
    background: #fff;
  }
  .container__body--property {
    margin-left: 3px;
    box-shadow: -2px 0 5px $--border-color-light;
    box-shadow: 0px 0px 20px #e4e7ed;
    //隐藏滚动条
    &::-webkit-scrollbar {
      width: 0;
      background-color: transparent;
    }
    /*火狐下隐藏滚动条*/
    scrollbar-width: none;
  }
  .navbar-collapse {
    margin-top: 40px;
    width: 10px;
    z-index: 999;
  }
  .navbar-collapse-bg {
    margin-left: 1px;
    height: 28px;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 10px solid #fff;
    border-right: none;
    position: relative;
  }
  .navbar-collapse-left {
    .navbar-collapse-bg {
      margin-right: 1px;
      border-top: 8px solid transparent;
      border-bottom: 8px solid transparent;
      border-right: 10px solid #fff;
      border-left: none;
      .navbar-collapse-arrow {
        left: 0;
      }
    }
  }
  .navbar-collapse-bg:hover {
    cursor: pointer;
  }
  .navbar-collapse-arrow {
    position: absolute;
    left: -12px;
    top: 7px;
  }
}
.el-container {
  min-width: 1300px;
  overflow-y: auto;
}
</style>