<script lang="ts" name="PageTopButtons">
import { defineComponent, ref, h } from 'vue'
import { useRouter } from 'vue-router'
import { ElSpace } from 'element-plus'
import ButtonLink from './ButtonLink'


export default defineComponent({
  emit: ['submit', 'preview', 'save'],
  props: {
    actions: {
      type: [Array, Boolean],
      default: true
    }
  },
  setup(props, { attrs, slots, emit, expose }) {
    // 路由
    const router = useRouter()
    // 统一点击事件
    function onClick(type: string) {
      // 如点击返回，判断父组件是否监听back事件，如无则默认返回上一页
      if (type === 'back') {
        if (typeof attrs.onBack === 'function') {
          attrs.onBack()
          return
        }
        router.back()
        return
      }
      // 除back事件，其它事件需定义在父组件
      emit(type)
    }
    return () => h(
      'div',
      {
        class: 'page-top-wrap'
      },
      [
        // 左侧按钮
        h(
          'div',
          props.actions === true || (Array.isArray(props.actions) && props.actions.includes('back')) ? h(
            ButtonLink,
            {
              icon: 'icon-sicmp-fanhui',
              text: '返回',
              onClick: () => onClick('back')
            }
          ) : ''
        ),
        // 右侧按钮
        h(
          'div',
          h(
            ElSpace,
            {
              size: 'large',
              class: 'buttons-space'
            },
            () => [
              props.actions === true || (Array.isArray(props.actions) && props.actions.includes('submit')) ? h(
                ButtonLink,
                {
                  icon: 'icon-sicmp-tijiao',
                  text: '提交',
                  onClick: () => onClick('submit')
                }
              ) : null,
              props.actions === true || (Array.isArray(props.actions) && props.actions.includes('preview')) ? h(
                ButtonLink,
                {
                  icon: 'icon-sicmp-yulanyonghu',
                  text: '预览',
                  onClick: () => onClick('preview')
                }
              ) : null,
              props.actions === true || (Array.isArray(props.actions) && props.actions.includes('validate')) ? h(
                ButtonLink,
                {
                  icon: 'icon-sicmp-jiancha',
                  text: '检查',
                  onClick: () => onClick('validate')
                }
              ) : null,
              props.actions === true || (Array.isArray(props.actions) && props.actions.includes('save')) ? h(
                ButtonLink,
                {
                  icon: 'icon-sicmp-baocun',
                  text: '保存',
                  onClick: () => onClick('save')
                }
              ) : null,
              props.actions === true || (Array.isArray(props.actions) && props.actions.includes('approve')) ? h(
                ButtonLink,
                {
                  icon: 'icon-sicmp-shenhetongguo',
                  text: '通过审批',
                  type: 'success',
                  onClick: () => onClick('approve')
                }
              ) : null,
              props.actions === true || (Array.isArray(props.actions) && props.actions.includes('turnBack')) ? h(
                ButtonLink,
                {
                  icon: 'icon-sicmp-tuihui',
                  text: '退回修改',
                  type: 'warning',
                  onClick: () => onClick('turnBack')
                }
              ) : null,
              props.actions === true || (Array.isArray(props.actions) && props.actions.includes('refuse')) ? h(
                ButtonLink,
                {
                  icon: 'icon-sicmp-shenhejujue',
                  text: '审批拒绝',
                  type: 'danger',
                  onClick: () => onClick('refuse')
                }
              ) : null,
              props.actions === true || (Array.isArray(props.actions) && props.actions.includes('download')) ? h(
                ButtonLink,
                {
                  icon: 'icon-sicmp-xiazai',
                  text: '下载PDF',
                  type: 'primary',
                  onClick: () => onClick('download')
                }
              ) : null
            ]
          )
        )
      ]
    )
  }
})
</script>

<style lang="scss" scoped>
.page-top-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

:deep(.icon-sicmp) {
  font-size: 20px;
}
:deep(.button-text) {
  margin-left: 6px;
}

:deep(.el-space) {
  .el-space__item {
    &:last-child {
      margin-right: 0 !important;
    }
  }
}
</style>