<template>
  <el-main ref="tablePanel" v-loading="loading" class="kanban-container">
    <div ref="toolbarPanel" class="toolbar-panel">
      <div
        class="toolbar-panel__search"
        :class="{'ht-quick__search': !hideTableSearch}"
      >
        <ht-input
          v-if="quickSearchConfig && quickSearchConfig.length > 0"
          ref="quickSearch"
          v-model.lazy="quickSearchWord"
          class="quick-search"
          :style="quickSearchWidthStyle"
          :placeholder="quickSearchPlaceholder"
          :autofocus="true"
          :disabled="loading || showAdvancedSearch"
          :debounce="2000"
          suffix-icon="el-icon-search"
          style="margin-right: 20px"
          @keydown.enter.native="doQuickSearch"
          @click.native="clickQuickSearch"
        ></ht-input>
        <div class="common-tools">
          <el-button
            v-if="hasSearchPanel && !justShowSearch"
            class="advance-search__button"
            @click="showAdvancedSearch = !showAdvancedSearch"
          >
            {{ showAdvancedSearch ? '基础搜索' : '高级搜索' }}
            <i
              :class="
                showAdvancedSearch ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
              "
            ></i>
          </el-button>
          <el-tooltip content="刷新数据" placement="top">
            <el-button
              icon="el-icon-refresh"
              class="refresh-btn-icon"
              @click="load(true)"
            ></el-button>
          </el-tooltip>
        </div>
      </div>
    </div>
    <el-collapse-transition>
      <div v-show="showAdvancedSearch" ref="searchPanel" class="search-panel">
        <slot name="search"></slot>
      </div>
    </el-collapse-transition>
    <div v-if="hasToolBar" ref="toolbarContainer" class="toolbar-container">
      <slot name="toolbar"></slot>
    </div>
    <div class="kanban-center">
      <div
        v-for="rowGroup in kanbanData"
        :key="rowGroup.id"
        class="kanban-parent"
      >
        <div v-if="!!rowGroup.group" class="kanban-row">
          {{ rowGroup.group }}
        </div>
        <template v-for="(column, index) in rowGroup.data">
          <el-card
            :key="index"
            class="kanban-column"
            :style="{'padding-bottom': buttonPermission.add ? '64px' : '0'}"
          >
            <div slot="header" class="clearfix">
              <div>
                <span>{{ column.group }}（{{ column.data.length }}）</span>
              </div>
            </div>
            <div v-if="column.data.length === 0" class="no-content">
              <p>暂无数据</p>
            </div>
            <draggable
              :list="column.data"
              v-bind="{
                group: 'task',
                ghostClass: 'ghost',
                animation: 200
              }"
              @add="onAdd"
              @end="onEnd"
            >
              <transition-group
                class="draggable-list-group"
                tag="div"
                :type="JSON.stringify({row: rowGroup.id, column: column.id})"
              >
                <el-card
                  v-for="row in column.data"
                  :key="row.id_"
                  class="kanban-item"
                  shadow="never"
                >
                  <div class="kanban-item-title">
                    <template v-for="field in kanbanConfig.fields">
                      <div
                        v-if="field.isTitle"
                        :key="field.name"
                        class="column-title"
                      >
                        <el-checkbox
                          v-if="$slots.toolbar"
                          v-model="row.checked"
                          class="column-title-checked"
                          @change="value => handleCheckChange(value, row)"
                        ></el-checkbox>
                        <template v-if="!!field.formatterData">
                          <template v-for="formatData in field.formatterData">
                            <span
                              v-if="formatData.key_ === row[field.fieldName]"
                              :key="formatData.key_"
                              style="
                                font-size: 14px;
                                color: #262626;
                                font-weight: 600;
                              "
                              :class="
                                field.fieldName === columnGroup
                                  ? 'column-tag'
                                  : ''
                              "
                            >
                              {{ formatData.value_ }}
                            </span>
                          </template>
                        </template>
                        <span v-else>{{ row[field.fieldName] }}</span>
                      </div>
                    </template>
                  </div>
                  <div class="kanban-item-body">
                    <el-row @click.native="edit(row)">
                      <div class="column-list">
                        <template v-for="field in kanbanConfig.fields">
                          <div
                            v-if="!field.isTitle"
                            :key="field.name"
                            class="column-name"
                          >
                            <label>{{ field.desc }}:</label>
                            <template v-if="!!row[field.fieldName]">
                              <template v-if="!!field.formatterData">
                                <div
                                  :class="
                                    field.fieldName === columnGroup
                                      ? 'column-tag'
                                      : 'column-value'
                                  "
                                >
                                  {{
                                    getFormatterData(
                                      field.formatterData,
                                      row[field.fieldName]
                                    )
                                  }}
                                </div>
                                <!--                              <template-->
                                <!--                                v-for="formatData in field.formatterData"-->
                                <!--                              >-->
                                <!--                                <div-->
                                <!--                                  v-if="-->
                                <!--                                    formatData.key_ === row[field.fieldName]-->
                                <!--                                  "-->
                                <!--                                  :key="formatData.key_"-->
                                <!--                                  :class="-->
                                <!--                                    field.fieldName === columnGroup-->
                                <!--                                      ? 'column-tag'-->
                                <!--                                      : 'column-value'-->
                                <!--                                  "-->
                                <!--                                  :title="formatData.value_"-->
                                <!--                                >-->
                                <!--                                  {{ formatData.value_ }}-->
                                <!--                                </div>-->
                                <!--                              </template>-->
                              </template>
                              <template v-else>
                                <div
                                  v-if="field.fieldName !== columnGroup"
                                  class="column-value"
                                  :title="row[field.fieldName]"
                                >
                                  {{ row[field.fieldName] }}
                                </div>
                                <div
                                  v-else
                                  class="column-tag"
                                  :title="row[field.fieldName]"
                                >
                                  {{ row[field.fieldName] }}
                                </div>
                              </template>
                            </template>

                            <template v-else>
                              <div class="column-value">无</div>
                            </template>
                          </div>
                        </template>
                      </div>
                    </el-row>
                    <div v-if="buttonPermission.del" class="delete-btn">
                      <el-button
                        type="text"
                        icon="el-icon-delete"
                        style="color: #262626"
                        @click="remove(row.id_)"
                      ></el-button>
                    </div>
                  </div>
                </el-card>
              </transition-group>
            </draggable>
            <div class="footer">
              <el-button
                v-if="buttonPermission.add"
                style="
                  width: calc(100% - 20px);
                  border-radius: 4px;
                  height: 32px;
                "
                type="primary"
                @click="scriptClick('add', {}, column.id, rowGroup.id)"
              >
                添加
              </el-button>
            </div>
          </el-card>
        </template>
      </div>
    </div>
  </el-main>
</template>

<script>
import Draggable from 'vuedraggable'
import _ from 'lodash'
export default {
  name: 'Kanban',
  components: {
    Draggable
  },
  props: {
    templateInfo: {
      type: Object,
      default: () => {}
    },
    managePermission: {
      type: String,
      default: ''
    },
    data: {
      type: Array,
      default: () => []
    },
    quickSearchProps: [String, Array],
    quickSearchWidth: {
      type: Number,
      default: 400
    },
    showExport: {
      type: Boolean,
      default: false
    },
    defaultQuerys: {
      type: Array,
      default() {
        return []
      }
    },
    defaultSorter: {
      type: Array,
      default() {
        return []
      }
    },
       justShowSearch: {
        //为true时只显示高级搜索中的查询条件
        type: Boolean,
        default: false,
      },
  },
  data() {
    return {
      loading: false,
      checked: false,
      kanbanData: [],
      kanbanConfig: this.templateInfo.kanbanConfig
        ? JSON.parse(this.templateInfo.kanbanConfig)
        : {},
      enabled: false,
         hasSearchPanel: false,
      lastChange: [],
      columnGroup: '',
      rowGroup: '',
      buttonPermission: {},
      showAdvancedSearch: false,
      quickSearchPlaceholder: '请输入搜索内容',
      quickSearchConfig: null,
      quickSearchWord: null,
      querys: [],
      sorter: null,
      pagination: {
        page: 1,
        pageSize: -1
      },
      filters: {},
      selection: []
    }
  },
  computed: {
    hideTableSearch() {
      const hasQuickSearch =
        this.quickSearchConfig && this.quickSearchConfig.length > 0
      return !this.showAdvancedSearch && !this.hasToolBar && !hasQuickSearch
    },
      hasToolBar() {
        return this.$slots.toolbar && this.$slots.toolbar.length > 0
      },
    quickSearchWidthStyle() {
      return {width: `${this.quickSearchWidth}` + 'px'}
    },
    calDefaultQuerys: function() {
      let calQuerys = []
      let query = {
        group: 'defaultQueryGroup',
        operation: 'EQUAL',
        relation: 'AND'
      }
      this.defaultQuerys.forEach(c => {
        calQuerys.push({...query, ...c})
      })
      return calQuerys
    }
  },
  watch: {
     justShowSearch: {
        handler(val) {
          if (val) {
            this.showAdvancedSearch = true
          }
        },
        immediate: true,
      },
    managePermission: {
      handler(newVal, oldVal) {
        if (newVal !== oldVal) {
          this.buttonPermission = JSON.parse(Base64.decode(newVal) || '{}')
        }
      },
      immediate: true,
      deep: true
    },
    data: {
      handler(newVal) {
        this.initData()
      },
      immediate: true,
      deep: true
    }
  },
  created() {
    this.$on('advance-search', (data, isSearchBtn) =>
      this.advanceSearch(data, isSearchBtn)
    )
    setTimeout(() => {
      this.quickSearchProps && this.generateQuickSearchConfig()
    }, 100)
  },
  mounted() {
       this.hasSearchPanel = !!this.$scopedSlots.search
    this.load()
  },
  methods: {
    load(doNotResetPage, isSearchBtn) {
      this.loading = false
      // 默认重置页码为第一页
      if (!doNotResetPage) {
        this.pagination.page = 1
      }
      let param = {
        pageBean: this.pagination,
        sorter: []
      }

      if (this.sorter && this.sorter.length > 0) {
        param.sorter = this.sorter
      }
      // 处理默认排序字段。只有当用户没有选择排序字段才使用默认排序
      if (this.defaultSorter.length > 0 && param.sorter.length === 0) {
        param.sorter = [...this.defaultSorter]
      }
      // 处理过滤条件
      this.handleFilters()

      if (this.querys && this.querys.length > 0) {
        param.querys = this.querys
      }

      // 处理查询条件
      if (this.calDefaultQuerys.length > 0) {
        if (!param.querys) {
          param.querys = []
        }
        this.calDefaultQuerys.forEach(item => {
          param.querys.remove(item)
        })
        param.querys = param.querys.concat(this.calDefaultQuerys)
      }

      const me = this
      // 防止外部没有回调，设置10秒后自动取消加载中的状态
      let waitTime = 10000
      if (!this._events || !this._events.load || !this._events.load.length) {
        // 如果没有绑定在当前组件里的load事件，即组件仅仅作展示数据用 直接取消loading
        waitTime = 0
      }
      const finalTickCB = setTimeout(function() {
        me.loading = false
        this.selection = []
      }, waitTime)

      if (this.nopagination) {
        param.pageBean = {}
      }
      const loadedHandler = () => {
        // 外部已经回调的情况下，取消倒计时
        clearTimeout(finalTickCB)
        me.loading = false
        this.selection = []
        setTimeout(() => {
          me.$refs.quickSearch &&
            me.$refs.quickSearch.$children[0].$el.children[0].focus()
        })
      }

      this.$emit('load', {...param}, loadedHandler, isSearchBtn)
      this.$emit('loading', {...param}, loadedHandler, isSearchBtn)
    },
    handleFilters() {
      this.clearQueryByGroupName('filter')
      // 将过滤条件添加查询参数数组中
      if (this.filters && Object.keys(this.filters).length > 0) {
        Object.keys(this.filters).forEach(k => {
          const filter = this.filters[k]
          let query = {
            property: k,
            value: filter[0],
            group: 'filter',
            relation: 'AND'
          }
          if (filter.length === 1) {
            query.operation = 'EQUAL'
            this.querys.push(query)
          } else if (filter.length > 1) {
            query.operation = 'IN'
            query.value = filter
            this.querys.push(query)
          }
        })
      }
    },
    initData() {
      this.columnGroup = this.kanbanConfig.columnGroupField.fieldName
      this.rowGroup = this.kanbanConfig.rowGroupField
        ? this.kanbanConfig.rowGroupField.fieldName
        : ''
      if (!this.rowGroup) {
        let temp = this.initColumnData(this.kanbanConfig.columnGroupField)
        this.kanbanData = [{id: 'empty', name: '', data: [...temp]}]
      } else {
        this.kanbanData = this.initRowData(
          this.kanbanConfig.rowGroupField,
          this.kanbanConfig.columnGroupField
        )
      }
    },
    initRowData(rowGroup, columnGroup) {
      let rowMap = this.getColumnGroupFormatter(rowGroup)
      let columnMap = this.getColumnGroupFormatter(columnGroup)

      let temp = []
      rowMap.forEach((row, rowKey) => {
        let tempRow = {id: rowKey, group: row.name, data: []}
        columnMap.forEach((column, columnKey) => {
          let tempColumn = {id: columnKey, group: column.name, data: []}
          this.data.forEach(item => {
            let rowField = item[rowGroup.fieldName] || 'empty'
            let columnField = item[columnGroup.fieldName] || 'empty'
            if (rowField === rowKey && columnField === columnKey) {
              tempColumn.data.push(item)
            }
          })
          tempRow.data.push(tempColumn)
        })
        temp.push(tempRow)
      })
      return temp
    },
    initColumnData(columnGroup) {
      let columnMap = this.getColumnGroupFormatter(columnGroup)
      let temp = []
      columnMap.forEach((column, columnKey) => {
        let tempColumn = {id: columnKey, group: column.name, data: []}
        this.data.forEach(item => {
          let columnField = item[columnGroup.fieldName] || 'empty'
          if (columnField === columnKey) {
            tempColumn.data.push(item)
          }
        })
        temp.push(tempColumn)
      })
      return temp
    },
    getColumnGroupFormatter(field) {
      let columnMap = new Map()
      field.formatterData.forEach(data => {
        columnMap.set(data.key_, {name: data.value_})
      })
      columnMap.set('empty', {name: '空'})
      return columnMap
    },
    onEnd(event) {
      this.load()
    },
    onAdd(event) {
      let fromType = JSON.parse(event.from.__vue__.type)
      let toType = JSON.parse(event.to.__vue__.type)
      let item = event.item._underlying_vm_

      if (fromType.column !== toType.column) {
        item[this.columnGroup] = toType.column === 'empty' ? '' : toType.column
      }
      if (fromType.row !== toType.row) {
        item[this.rowGroup] = toType.row === 'empty' ? '' : toType.row
      }
      let param = [item]
      this.$requestConfig
        .boBatchUpdate(this.templateInfo.boDefAlias, param)
        .then(resp => {
          if (resp.state) {
            console.info(resp.message)
          }
        })
    },
    scriptClick(type, selectedRow, column, row) {
      let args = {
        isKanban: 'true',
        templateId: this.templateInfo.id,
        id: selectedRow.id_ || selectedRow.id,
        action: type,
        defId: this.templateInfo.defId,
        isStartFlow: selectedRow.isStartFlow,
        openType: 'dialog',
        quitAfterSaving: 'true',
        dialogWidth: '1580',
        dialogHeight: '740',
        dataParam: {}
      }
      if (type === 'add') {
        if (column && column !== 'empty') {
          args.dataParam[this.kanbanConfig.columnGroupField.name] = column
        }
        if (row && row !== 'empty') {
          args.dataParam[this.kanbanConfig.rowGroupField.name] = row
        }
      }

      this.$emit(type, args)
    },
    edit(row) {
      if (!this.buttonPermission.edit) {
        this.$message.warning('您无编辑权限')
        return
      }
      this.scriptClick('edit', row)
    },
    remove(id) {
      this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          let data = {
            ids: id,
            boAlias: this.templateInfo.boDefAlias,
            formKey: this.templateInfo.formKey
          }
          this.$requestConfig.deleteTemplateDataById(data).then(resp => {
            if (resp.state) {
              this.$message.success(resp.message)
              this.load()
            } else {
              this.$message.error(resp.message)
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    doQuickSearch() {
      // 先删除快速查询的查询条件
      this.clearQueryByGroupName('quick')
      this.clearQueryByGroupName('advance')
      this.quickSearchWord &&
        this.quickSearchConfig.forEach(c => {
          let query = {
            property: c.prop,
            value: this.quickSearchWord.trim(),
            group: 'quick',
            relation: 'OR',
            operation: 'LIKE'
          }
          this.querys.push(query)
        })
      this.load()
    },
    clearQueryByGroupName(groupName) {
      // 待删除的查询条件
      let toDelete = []
      this.querys &&
        this.querys.forEach(query => {
          if (query.group === groupName) {
            toDelete.push(query)
          }
        })
      toDelete.forEach(d => {
        this.querys.remove(d)
      })
    },
    // 通过列属性获取列标签
    getColumnLabelByProp(prop) {
      let label = null
      if (!prop) {
        return label
      }
      this.columns.forEach(c => {
        if (c.prop && c.prop === prop) {
          label = c.label
        }
      })
      return label
    },
    generateQuickSearchConfig() {
      let labelAry = []
      if (typeof this.quickSearchProps == 'string') {
        const props = this.quickSearchProps.split(',')
        this.quickSearchConfig = []
        props.forEach(prop => {
          const label = this.getColumnLabelByProp(prop)
          if (label) {
            labelAry.push(label)
            this.quickSearchConfig.push({prop, label})
          }
        })
      }
      if (typeof this.quickSearchProps == 'object') {
        this.quickSearchProps.forEach(prop => {
          if (prop && prop.label) {
            labelAry.push(prop.label)
          }
        })
        this.quickSearchConfig = [...this.quickSearchProps]
      }
      this.quickSearchPlaceholder = `${labelAry.join(',')}来搜索`
    },
    clickQuickSearch($event) {
      if (
        !(this.loading || this.showAdvancedSearch) &&
        $event &&
        $event.target &&
        $event.target.tagName === 'I'
      ) {
        this.$nextTick(() => {
          this.doQuickSearch()
        })
      }
    },
    advanceSearch(data, isSearchBtn) {
      if (this.loading || !this.showAdvancedSearch) {
        return
      }
      this.clearQueryByGroupName('quick')
      this.clearQueryByGroupName('advance')
      data &&
        data.forEach(d => {
          const shouldPush = d.value != null && d.value !== ''
          // 高级搜索中支持一个搜索框中关联多个属性进行搜索
          if (d.prop.indexOf(',') > 0) {
            const propAry = utils.stringSplit(d.prop, ',')
            if (propAry && propAry.length > 0) {
              const groupName = `group_${propAry[0]}`
              this.clearQueryByGroupName(groupName)
              shouldPush &&
                propAry.forEach(p => {
                  this.querys.push({
                    property: p,
                    value: d.value,
                    group: groupName,
                    relation: 'OR',
                    operation: d.operation
                  })
                })
            }
          } else {
            shouldPush &&
              this.querys.push({
                property: d.prop,
                value: d.value,
                group: 'advance',
                relation: d.relation,
                operation: d.operation
              })
          }
        })
      this.load('', isSearchBtn)
    },
    handleCheckChange(checked, row) {
      let item = _.cloneDeep(row)
      if (checked) {
        this.selection.push(item)
      } else {
        var pkField = this.templateInfo.pkField || 'id_'
        this.selection = this.selection.filter(item => item[pkField] !== row[pkField])
      }
      this.$emit('selection-change', this.selection)
    },
    getFormatterData(formatterData, value) {
      let data = formatterData.find(item => item.key_ === value)
      if (data) {
        return data.value_
      }
      return value
    }
  }
}
</script>

<style lang="scss" scoped>
.kanban-container {
  height: 895px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  // padding: 10px !important;
  .search-panel {
    background-color: #f9f9f9;
    padding: 16px 16px 10px 16px;
    margin-bottom: 16px;
    box-sizing: border-box;
  }
  .kanban-parent {
    display: flex;
    margin: 8px 0;

    .kanban-row {
      writing-mode: vertical-lr;
      background: #f9f9f9;
      text-align: center;
      padding: 16px;
      border-radius: 4px;
      margin-right: 8px;
      letter-spacing: 8px;
      font-weight: 600;
      font-size: 16px;
    }

    .kanban-column {
      position: relative;
      min-height: 168px;
      width: 292px;
      border-radius: 4px;
      background: #f9f9f9;
      //padding-bottom: 64px;
      box-shadow: none;
      border: none;
      flex-shrink: 0;
      &:not(:last-child) {
        margin-right: 24px;
      }

      .no-content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -100%);
      }

      .kanban-item {
        margin-bottom: 16px;
        border-radius: 4px;
        background: #fff;
        box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.1);
        border: none;
        flex-shrink: 1;

        .kanban-item-title {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .column-title {
            font-weight: 700;
            font-size: 15px;
            padding: 10px 0;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;

            .column-title-checked {
              margin-right: 8px;
            }
          }
        }

        .kanban-item-body {
          display: flex;
          justify-content: space-between;
          align-items: flex-end;

          .column-list {
            cursor: pointer;

            .column-name {
              font-size: 12px;
              color: #8c8c8c;
              padding-bottom: 11px;
              display: flex;
              align-items: center;

              label {
                width: 90px;
              }

              .column-tag {
                background: #ebf5ff;
                border-radius: 2px;
                color: #409eff;
                padding: 5px 8px;
                font-size: 12px;
              }

              .column-value {
                color: #262626;
                width: 136px;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
              }
            }
          }

          .delete-btn {
            width: 24px;
            height: 24px;
            border: 1px solid #dcdee0;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 6px;
          }
        }
      }
      .sub-kanban-item {
        position: relative;
        overflow: visible;
        margin-left: 10px;
        &:before {
          position: absolute;
          background-color: #fff;
          width: 15px;
          height: 15px;
          border-radius: 0 0 50% 50%;
          top: -23px;
          left: 10px;
          content: '';
        }
      }
      .footer {
        margin-top: 10px;
        display: flex;
        align-items: center;
        position: absolute;
        bottom: 16px;
        width: 100%;

        .footer-left {
          width: 100px;
          font-size: 12px;
          color: #999999;
        }
      }
    }
  }
  .toolbar-container {
    ::v-deep.data-form-list__top-btn {
      margin-left: 10px;
      margin-bottom: 10px;
      &:first-child {
        margin-left: 0;
      }
    }
  }
}
::v-deep {
  .el-card__body {
    padding: 0 10px;
    border: none !important;
    border-radius: 8px;
  }
  .el-card__header {
    padding: 16px;
    border: none !important;
  }
  .el-divider--horizontal {
    margin: 5px 0;
  }
  .el-button--small.is-circle {
    padding: 7px;
  }
  .el-main {
    padding: 0;
  }

  .el-card {
    margin-bottom: 0;
  }
}
.ghost {
  background: rgba(216, 223, 226, 0.7);
  border: 2px dashed rgba(191, 197, 199, 0.8);
}
.clearfix {
  display: flex;
  align-items: center; // 纵轴对齐方式，默认是纵轴 子元素垂直居中
  justify-content: flex-start; //纵轴对齐方式，默认是纵轴

  span {
    font-size: 16px;
    padding-left: 12px;
    color: #262626;
    font-weight: 600;
  }

  &:before {
    display: inline-block;
    width: 4px;
    height: 16px;
    background: #409eff;
    opacity: 1;
    position: absolute;
    left: 16px;
    content: '';
  }
}

.toolbar-btn-wrap {
  margin: 20px 20px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  .btn-wrap {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    .el-dropdown {
      color: #2f54eb;
      margin-right: 20px;
    }
    .el-button {
      margin-right: 10px;
    }
  }
}
.kanban-center {
  overflow: auto;
  flex: 1;
  //margin-top: 15px;
}
.draggable-list-group {
  min-height: 168px;
}
.ht-quick__search {
  margin-bottom: 7px;
  max-height: 32px;
}

.common-tools {
  display: flex;
  justify-content: flex-end;

  .el-button-group {
    margin: 0 0 0 16px;
  }

  .el-button {
    padding: 6px;
    border-radius: 0;
  }
  ::v-deep.el-button.refresh-btn-icon {
    i {
      font-size: 16px;
    }
  }
  .advance-search__button {
    padding: 6px 12px;
  }
}

.toolbar-panel__search {
  display: flex;
  justify-content: space-between;
}

.quick-search {
  margin-right: 20px;
}

.quick-search + .el-divider {
  margin-right: 20px;
}

.toolbar-panel,
.toolbar-container {
  margin-bottom: 6px;
  box-sizing: border-box;
}

.search-panel {
  background-color: #f9f9f9;
  padding: 16px 16px 10px 16px;
  margin-bottom: 16px;
  box-sizing: border-box;
}
</style>
