<template>
  <div class="xt-title">
    <div class="xt-title_left">
      <i
        v-if="goBack"
        :class="['iconfont xt-title_left-back', 'icon-xt-drawer-return_selected']"
        @click="$router.go(-1)"
      />
      <span>{{ title }}</span>
      <slot name="title" />
    </div>
    <div class="xt-title_right">
      <slot name="prefix" />
      <div v-if="rightData" class="flex">
        <div
          v-for="item in rightData"
          :key="item.type"
          v-auth="item.auth"
          :class="['xt-title_item', item.icon ? 'xt-title_item--icon' : 'xt-title_item--btn']"
        >
          <a-upload
            v-if="item.type == 'upload'"
            :max-count="1"
            action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
          >
            <i class="iconfont icon-xt-details_upload_default" />
          </a-upload>
          <!-- icon-xt-print_default -->
          <i v-else-if="item.icon" :class="['iconfont', item.icon]" @click="handleClick(item)" />
          <a-button
            v-else
            :type="item.btnType || 'primary'"
            size="large"
            @click="handleClick(item)"
          >
            <template #icon>
              <i :class="['iconfont mr-1', item.btnIcon]" />
            </template>
            {{ item.btnText }}
          </a-button>
        </div>
      </div>
      <slot name="suffix" />
    </div>
  </div>
</template>

<script setup lang="ts">
  interface Props {
    // 标题
    title: string | number | undefined;
    goBack?: boolean;
    rightData?: Array<{
      type: string;
      icon?: string;
      iconType?: string | 'primary';
      isBtn?: boolean;
      btnText?: string;
      btnType?: string | 'primary' | 'ghost' | 'dashed' | 'link' | 'text' | 'default';
      btnIcon?: string;
      auth?: Array<string>;
    }>;
    upload?: {
      accept: string;
      action: string;
      data: object;
      maxCount: number;
    };
  }
  withDefaults(defineProps<Props>(), {
    title: '',
    goBack: false,
    // upload: {
    //   accept:
    // }
    rightData: () => [],
  });
  const emit = defineEmits(['click']);

  // 回调
  function handleClick(data) {
    console.log('🚀 ~ file: Title.vue:55 ~ handleClick ~ data:', data);
    emit('click', data);
  }
</script>

<style lang="less" scoped>
  .xt-title {
    display: flex;
    justify-content: space-between;

    &_left {
      font-size: 24px;
      font-weight: 600;
      color: #000a18;
      display: flex;
      align-items: center;

      &-back {
        font-size: 20px;
        position: relative;
        color: #262a41;
        margin-right: 24px;
        cursor: pointer;

        &::after {
          position: absolute;
          content: '';
          top: 5px;
          right: -14px;
          width: 1px;
          height: 22px;
          background: rgb(222 226 231 / 100%);
          // background: rgb(63, 119, 187);
        }
      }
    }

    &_right {
      display: flex;
    }

    &_item {
      margin-right: 10px;
      cursor: pointer;

      &--icon {
        width: 40px;
        height: 40px;
        background: #fff;
        border-radius: 4px;
        color: #3d4155;
        text-align: center;

        & .iconfont {
          font-size: 20px;
          line-height: 40px;
        }

        &:hover {
          color: #0075ff;
        }
      }

      &--btn {
        height: 40px;
        border-radius: 4px;

        & .iconfont {
          font-size: 14px;
        }
      }

      &:last-child {
        margin-right: 0;
      }
    }
  }

  ::v-deep(.ant-btn) {
    border-radius: 5px;
    font-size: 14px;
  }
</style>
