<!-- 
/* @name    工具栏组件
 * @authors pen (you@example.org)
 * @date    2022-02-28 
 * @version 1.0.1 
 */
 -->
 <template>
  <div class="tools_box">
    <el-popover
      :after-enter="popoverProps.afterEnte"
      :width="150"
      :trigger="items.trigger"
      v-for="(items, index) in toolsList ? toolsList : shortList"
      :key="index"
    >
      <div class="filtrate" v-if="items.showcolumns">
        <el-row>
          <el-col
            class="tools_col_item"
            v-if="!item.type"
            :span="24"
            v-for="item in toolsColumns"
            :key="item.name"
          >
            <el-checkbox
              @change="toolsCheckEvent"
              checked
              v-model="item.visible"
            >
              <span :class="{ selBox: item.visible }" class="box_item">{{
                item.label
              }}</span>
            </el-checkbox>
          </el-col>
        </el-row>
      </div>
      <el-tooltip
        :effect="tooltipProps.effect"
        :content="items.content"
        :placement="tooltipProps.placement"
        slot="reference"
      >
        <div class="tools_item_box">
          <button
            @mouseenter="toolsMouseenter(items)"
            @mouseleave="toolsMouseleave"
            @click="toolsClick(items)"
            class="tools_icon_item"
            :class="{ tools_select_item: items.select }"
            :style="{
              'margin-right': index === shortList.length - 1 ? '0px' : '10px'
            }"
          >
            <svg
              :class="{ refresh: items.iconName === '#shuaxin' }"
              class="iconpark-icon"
              :style="{ color: items.select ? '#fc5610' : '#333' }"
            >
              <use :href="items.iconName"></use>
            </svg>
          </button>
        </div>
      </el-tooltip>
    </el-popover>
  </div>
</template>
<script>
export default {
  name: 'tools-view',
  props: {
    exportUrl: String, //导出接口 用于判断是否显示导出按钮
    popoverProps: {
      type: Object,
      default: () => ({ afterEnte: 'bottom' })
    },
    tooltipProps: {
      type: Object,
      default: () => ({ effect: 'dark', placement: 'bottom' })
    },
    toolsColumns: {
      type: [Object, Array],
      default: () => {
        return {} || []
      }
    },
    toolsList: Array,
    simpleToolsList: {
      type: Array,
      default: () => ['刷新', '筛选', '导出']
    }, //简易传值
    unshiftTools: {
      type: Array
    }
  },
  computed: {
    shortList: function () {
      let arr = []
      arr = this.defaultToolsList.filter(p =>
        this.simpleToolsList.includes(p.content)
      )
      if (this.unshiftTools && this.unshiftTools.length)
        this.unshiftTools.forEach(p => arr.unshift(p))
      if (!this.exportUrl) arr = arr.filter(p => p.id !== 'export')
      return arr
    }
  },
  data() {
    return {
      defaultToolsList: [
        {
          content: '刷新',
          trigger: 'manual',
          id: 'refresh',
          iconName: '#shuaxin',
          select: false
        },
        {
          content: '筛选',
          trigger: 'click',
          id: 'filtrate',
          iconName: '#shaixuan',
          showcolumns: true,
          select: false
        },
        {
          content: '导出',
          trigger: 'manual',
          id: 'export',
          iconName: '#daochu',
          select: false
        }
      ]
    }
  },
  methods: {
    toolsCheckEvent(val) {
      console.log('toolsCheckEvent', val)
      this.$emit('tools-check-event', val)
    },
    toolsMouseenter(item) {
      let arr = this.shortList.find(p => p.id === item.id)
      arr && (arr.select = !arr.select)
    },
    toolsMouseleave() {
      this.shortList.forEach(p => {
        p.select = false
      })
    },
    toolsClick(item) {
      this.$emit('tools-click', item)
    }
  }
}
</script>
<style scoped lang="less">
.tools_col_item:not(:last-child) {
  margin-bottom: 6px;
}
.selBox {
  // color: #5a5e66;
  color: #fc6510;
}
.box_item {
  font-size: 12px;
}
.tools_box {
  display: flex;
  .tools_icon_item {
    background: #fff;
    border-radius: 6px;
    border: 1px solid #fff;
    height: 32px !important;
    width: 32px;
    box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    svg {
      width: 16px;
      height: 16px;
    }
    .refresh {
      width: 14px;
      height: 14px;
    }
    .icon_item {
      display: inline-block;
      width: 16px;
      height: 16px;
    }
  }
  .tools_select_item {
    border: 1px solid #fc6510;
  }
}
</style>
