<!--
  @description: 表格头部搜索组件
  @Modifier: haofengxian
  @routerPath:
  @date: 2020-8-27-9:47
-->
<template>
  <div>
    <!--查询条件-->
    <div class="crud_menu_title clearfix">
      <span class="icon-line fl">查询条件</span>
      <span v-if="advancedSearch" class="fr pointer" @click="handleToggleSearch">
        <el-link
          :underline="false"
          :class="toggleSearchStatus ? 'arrow-is-active' : ''"
          type="primary"
          class="toggleSearchStatus icon el-icon-arrow-down"
        />
        {{ toggleSearchStatus ? '收起高级查询' : '展开高级查询' }}
      </span>
    </div>
    <div
      :class="{ SearchContent_show: toggleSearchStatus }"
      class="clearfix SearchContent"
    >
      <div class="SearchContent_leftInput fl">
        <el-form
          ref="searchForm"
          :model="searchForm"
          :label-width="tableCrud.searchLabelWidth || searchLabelWidth"
          inline
          :label-position="labelPosition"
          @submit.native.prevent
        >
          <slot name="search" />
        </el-form>
      </div>
      <div class="fr">
        <el-button
          type="primary"
          @click="searchChange"
        >
          搜 索
        </el-button>
        <el-button
          plain
          type="info"
          @click="searchReset"
        >
          重 置
        </el-button>
      </div>
    </div>
    <!--查询结果-->
    <div>
      <!-- tabs -->
      <el-tabs v-if="tabs.length>0" v-model="activeName" @tab-click="tabClick">
        <el-tab-pane
          v-for="(item,index) in tabs"
          :key="index"
          :name="item.index"
        >
          <span slot="label">
            {{ item.name }}
            <template v-if="item.showNum">
              （{{ item.num }}）
            </template>
          </span>
        </el-tab-pane>
      </el-tabs>
      <!-- 非tabs -->
      <div v-else class="crud_menu_title">
        <span class="icon-line">查询结果</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HeaderSearch',
  inject: ['tableCrud'],
  props: {
    /* 是否展示分页*/
    pageFlag: {
      type: Boolean,
      default: true
    },
    /* 是否展示高级搜索*/
    advancedSearch: {
      type: Boolean,
      default: true
    },
    /* tabs列表*/
    tabs: {
      type: Array,
      default: function() {
        return []
      }
    },
    // label显示
    labelPosition: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      searchLabelWidth: '98px',
      tabData: {
        tabIndex: ''
      }, // 选中的tab
      /* 查询折叠 */
      toggleSearchStatus: false,
      searchForm: {},
      activeName: ''
    }
  },
  created() {
    this.searchForm = this.tableCrud.searchForm
    // tabs 初始化回调
    this.tabClick({ index: 0 })
  },
  methods: {
    // tabs 初始化回调/点击回调
    tabClick(tab) {
      // tabData tabs 的当前选项
      this.tabData = Object.assign(this.tabData, this.tabs[tab.index])
      this.tabData.tabIndex = tab.index
      this.activeName = this.tabData.index
      this.tableCrud.initAutoList(this.tabData)
    },
    handleToggleSearch() {
      this.toggleSearchStatus = !this.toggleSearchStatus
    },
    // 搜索回调
    searchChange() {
      // tabData tabs 的当前选项
      this.tableCrud.onSearchChange(this.tabData)
    },
    // 搜索清空
    searchReset() {
      this.$refs['searchForm'].resetFields()
      // tabData tabs 的当前选项
      this.tableCrud.searchReset(this.tabData)
    }
  }
}
</script>

<style scoped lang="less">
  .crud_menu_title {
    border-bottom: 1px solid #EEEEEE;
    color: rgba(51, 51, 51, 1);
    line-height: 36px;
    font-size: 12px;
    margin-bottom: 10px;

    .icon-line {
      font-weight: bold;
      display: inline-block;

      &:after {
        content: '';
        display: block;
        height: 2px;
        background: rgba(0, 124, 204, 1);

      }
    }
  }
</style>
