<template>
  <div :class="prefixCls" :style="{ width: `${vertical ? buttonWidth : buttonWidth * 2 + 20}px` }">
    <a-button
      :class="{ 'select-button': true, primary: isBaseHome }"
      :style="{ width: `${buttonWidth}px` }"
      @click="handleMenuClick(PageEnum.BASE_HOME)"
    >
      {{ t('routes.basic.baseHome') }}
    </a-button>
    <a-button
      :class="{ 'select-button': true, primary: !isBaseHome }"
      :style="{ width: `${buttonWidth}px` }"
      @click="handleMenuClick(PageEnum.SECONDARY_HOME)"
    >
      {{ t('routes.basic.secondaryHome') }}
    </a-button>
  </div>
</template>

<script lang="ts" setup>
  // import { Button, Dropdown, Menu, MenuItem } from 'ant-design-vue';
  // import { DownOutlined } from '@ant-design/icons-vue';
  import { useDesign } from '/@/hooks/web/useDesign';
  import { computed, ref } from 'vue';
  import { PageEnum } from '/@/enums/pageEnum';
  import { useRouter } from 'vue-router';
  import { useI18n } from '/@/hooks/web/useI18n';

  const props = withDefaults(
    defineProps<{
      vertical?: boolean;
      buttonWidth?: number;
    }>(),
    {
      vertical: false,
      buttonWidth: 210,
    }
  );

  const { prefixCls: precls } = useDesign('system-select');
  const prefixCls = computed(() => {
    return props.vertical ? `${precls}-vertical w-${props.buttonWidth}px` : `${precls} w-${props.buttonWidth * 2}px`;
  });
  const router = useRouter();
  const { t } = useI18n();

  // 由于BASE_HOME仅代表了一个页面，其他页面都隶属于SECONDARY_HOME，所以简单处理
  const isBaseHome = router.currentRoute.value.path === PageEnum.BASE_HOME;
  // const text = ref(isBaseHome ? PageEnum.BASE_HOME : PageEnum.SECONDARY_HOME);

  function handleMenuClick(value) {
    router.push({ path: value });
  }

  // const OPTIONS = ref({
  //   [PageEnum.BASE_HOME]: t('routes.basic.baseHome'),
  //   [PageEnum.SECONDARY_HOME]: t('routes.basic.secondaryHome'),
  // });
  const OPTIONS = ref([
    {
      value: PageEnum.BASE_HOME,
      label: t('routes.basic.baseHome'),
    },
    {
      value: PageEnum.SECONDARY_HOME,
      label: t('routes.basic.secondaryHome'),
    },
  ]);

  defineExpose({ OPTIONS, prefixCls, handleMenuClick });
</script>
<style lang="less" scoped>
  @prefix-cls: ~'@{namespace}-system-select';

  .@{prefix-cls} {
    // margin-bottom: 10px;
    position: relative;
    z-index: @layout-basic-z-index;

    .select-button {
      width: 190px !important;
      height: @multiple-height + 10px;
      background-image: url(/src/assets/images/sealedGoaf/home-button-left.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      border: none;
      background-color: unset;

      :deep(span) {
        color: black;
        font-size: 14px;
        font-weight: 600;
        line-height: 100%;
      };

    }

    .primary {
      // border-color: @primary-color;
      // background-color: @primary-color;
      // color: @white;
    }
    .select-button:nth-child(1) {
      margin: 0 10px 0 5px;
      :deep(span){
        color: #0070ff;
      }
    }
    .select-button:nth-child(2) {
      background-image: url(/src/assets/images/sealedGoaf/home-button-right.png);
    }
  }

  .@{prefix-cls}-vertical {
    // margin-bottom: 10px;
    position: relative;
    z-index: @layout-basic-z-index;

    .select-button {
      height: @multiple-height;
    }

    .primary {
      border-color: @primary-color;
      background-color: @primary-color;
      color: @white;
    }

    .select-button:nth-child(1) {
      border-radius: 0px;
      border-top-left-radius: 10px;
    }
    .select-button:nth-child(2) {
      border-radius: 0px;
    }
  }
</style>
