<template>
  <div class="workflow-tool">
    <div class="pl15">{{ setToolTitle }}</div>
    <div class="workflow-tool-right">
      <div class="workflow-tool-icon" v-for="(v, k) in state.toolList" :key="k" :title="v.title" @click="onToolClick(v.fnName)">
        <SvgIcon :name="v.icon" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="example/pagesWorkflowTool">
import { computed, reactive } from 'vue'
import { storeToRefs } from 'pinia'
import { useThemeConfig } from '/@/stores/themeConfig'

// 定义子组件向父组件传值/事件
const emit = defineEmits(['tool'])

// 定义变量内容
const storesThemeConfig = useThemeConfig()
const { themeConfig } = storeToRefs(storesThemeConfig)
const state = reactive({
  toolList: [
    { icon: 'ele-Help', title: '帮助', fnName: 'help' },
    { icon: 'ele-Download', title: '下载', fnName: 'download' },
    { icon: 'ele-Check', title: '提交', fnName: 'submit' },
    { icon: 'ele-DocumentCopy', title: '复制', fnName: 'copy' },
    { icon: 'ele-Delete', title: '删除', fnName: 'del' },
    { icon: 'ele-FullScreen', title: '全屏', fnName: 'fullscreen' },
  ],
})

// 设置 tool 标题
const setToolTitle = computed(() => {
  let { globalTitle } = themeConfig.value
  return `${globalTitle}工作流`
})
// 顶部工具栏
const onToolClick = (fnName: string) => {
  emit('tool', fnName)
}
</script>

<style scoped lang="scss">
.workflow-tool {
  height: 35px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--el-border-color-light, #ebeef5);
  color: var(--el-text-color-primary);
  .workflow-tool-right {
    flex: 1;
    display: flex;
    justify-content: flex-end;
  }
  &-icon {
    padding: 0 10px;
    cursor: pointer;
    color: var(--next-bg-topBarColor);
    height: 35px;
    line-height: 35px;
    display: flex;
    align-items: center;
    &:hover {
      background: rgba(0, 0, 0, 0.04);
      i {
        display: inline-block;
        animation: logoAnimation 0.3s ease-in-out;
      }
    }
  }
}
</style>
