<script setup>
import { computed } from "vue";
import { useNamespace } from "@yh-ui/hooks";
import { useComponentTheme } from "@yh-ui/theme";
import { useLocale } from "@yh-ui/hooks";
import { submitBarProps, submitBarEmits } from "./submit-bar";
defineOptions({ name: "YhSubmitBar" });
const props = defineProps(submitBarProps);
const emit = defineEmits(submitBarEmits);
const ns = useNamespace("submit-bar");
const { themeStyle } = useComponentTheme(
  "submit-bar",
  computed(() => props.themeOverrides)
);
const { t } = useLocale();
const displayPrice = computed(() => {
  const raw = props.centUnit ? props.price / 100 : props.price;
  const len = Math.max(0, Math.min(20, Number(props.decimalLength) || 0));
  return raw.toFixed(len);
});
const priceLabel = computed(() => props.label || t("submitbar.total"));
const selectedText = computed(() => {
  if (!props.selectedCount) return "";
  return t("submitbar.selected").replace("{count}", String(props.selectedCount));
});
const btnText = computed(() => props.buttonText || t("submitbar.submit"));
function handleSubmit(e) {
  if (props.disabled || props.loading) return;
  emit("submit", e);
}
function handleCheck(e) {
  const val = e.target.checked;
  emit("update:checked", val);
  emit("check-change", val);
}
</script>

<template>
  <div
    :class="[ns.b(), ns.is('safe-area', safeAreaInsetBottom)]"
    :style="themeStyle"
    role="toolbar"
  >
    <!-- 顶部提示 -->
    <div v-if="tip || $slots.tip" :class="ns.e('tip')">
      <slot name="tip">{{ tip }}</slot>
    </div>

    <div :class="ns.e('inner')">
      <!-- 全选区 -->
      <label
        v-if="showCheckbox"
        :class="ns.e('check')"
        role="checkbox"
        :aria-checked="indeterminate ? 'mixed' : checked"
      >
        <input
          type="checkbox"
          :class="ns.e('check-input')"
          :checked="checked"
          :indeterminate="indeterminate"
          @change="handleCheck"
        />
        <span :class="ns.e('check-label')">{{ t("submitbar.allSelect") }}</span>
      </label>

      <!-- 左侧自定义 -->
      <slot name="left" />

      <!-- 价格区 -->
      <div :class="ns.e('price-area')">
        <div v-if="selectedText" :class="ns.e('selected-count')">{{ selectedText }}</div>
        <div :class="ns.e('price-row')">
          <span :class="ns.e('label')">{{ priceLabel }}</span>
          <slot name="price">
            <span :class="ns.e('price')">
              <span :class="ns.e('currency')">{{ currency }}</span>
              <span :class="ns.e('price-int')">{{ displayPrice.split(".")[0] }}</span>
              <span v-if="Number(decimalLength) > 0" :class="ns.e('price-dec')"
                >.{{ displayPrice.split(".")[1] || "" }}</span
              >
            </span>
          </slot>
        </div>
      </div>

      <!-- 右侧自定义 -->
      <slot name="right" />

      <!-- 提交按钮 -->
      <button
        :class="[ns.e('btn'), ns.em('btn', buttonType), ns.is('disabled', disabled || loading)]"
        :disabled="disabled || loading"
        :aria-disabled="disabled || loading"
        :aria-busy="loading"
        @click="handleSubmit"
      >
        <slot name="button">
          <span v-if="loading" :class="ns.e('btn-loading')" aria-hidden="true" />
          <span>{{ btnText }}</span>
        </slot>
      </button>
    </div>

    <!-- 安全区底部占位 -->
    <div v-if="safeAreaInsetBottom" :class="ns.e('safe')"></div>
  </div>
</template>

<style>
@charset "UTF-8";
/**
 * YH-UI Sass Variables
 * 原具体的 CSS 变量输出规则 (:root, html.dark 等) 已移至 root.scss，以防止各组件样式编译时产生重复的全局变量 CSS 冗余。
 */
.yh-submit-bar {
  --yh-submit-bar-bg: var(--yh-bg-color);
  --yh-submit-bar-border: var(--yh-border-color-lighter);
  --yh-submit-bar-height: 56px;
  --yh-submit-bar-price-color: var(--yh-color-danger);
  --yh-submit-bar-price-size: 22px;
  --yh-submit-bar-label-color: var(--yh-text-color-regular);
  --yh-submit-bar-btn-radius: var(--yh-radius-large);
  --yh-submit-bar-btn-min-width: 108px;
  --yh-submit-bar-tip-bg: var(--yh-color-warning-light-9);
  --yh-submit-bar-tip-color: var(--yh-color-warning);
  --yh-submit-bar-z-index: 200;
  --yh-submit-bar-shadow: 0 -2px 12px var(--yh-shadow-color);
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--yh-submit-bar-z-index);
  background: var(--yh-submit-bar-bg);
  border-top: 1px solid var(--yh-submit-bar-border);
  box-shadow: var(--yh-submit-bar-shadow);
}
.yh-submit-bar.is-safe-area {
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.yh-submit-bar__tip {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  background: var(--yh-submit-bar-tip-bg);
  font-size: var(--yh-font-size-sm);
  color: var(--yh-submit-bar-tip-color);
  line-height: 1.4;
}

.yh-submit-bar__inner {
  display: flex;
  align-items: center;
  height: var(--yh-submit-bar-height);
  padding: 0 12px;
  gap: 8px;
}

.yh-submit-bar__check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  flex-shrink: 0;
}

.yh-submit-bar__check-input {
  width: 18px;
  height: 18px;
  accent-color: var(--yh-color-primary);
  cursor: pointer;
}

.yh-submit-bar__check-label {
  font-size: var(--yh-font-size-sm);
  color: var(--yh-text-color-regular);
  white-space: nowrap;
}

.yh-submit-bar__price-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  min-width: 0;
}

.yh-submit-bar__selected-count {
  font-size: var(--yh-font-size-xs);
  color: var(--yh-text-color-secondary);
  margin-bottom: 2px;
}

.yh-submit-bar__price-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.yh-submit-bar__label {
  font-size: var(--yh-font-size-sm);
  color: var(--yh-submit-bar-label-color);
  white-space: nowrap;
}

.yh-submit-bar__price {
  color: var(--yh-submit-bar-price-color);
  font-weight: 700;
  display: inline-flex;
  align-items: baseline;
}

.yh-submit-bar__currency {
  font-size: var(--yh-font-size-sm);
}

.yh-submit-bar__price-int {
  font-size: var(--yh-submit-bar-price-size);
  line-height: 1;
}

.yh-submit-bar__price-dec {
  font-size: var(--yh-font-size-sm);
}

.yh-submit-bar__btn {
  flex-shrink: 0;
  min-width: var(--yh-submit-bar-btn-min-width);
  height: 40px;
  border: none;
  border-radius: var(--yh-submit-bar-btn-radius);
  font-size: var(--yh-font-size-base);
  font-weight: 600;
  cursor: pointer;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background var(--yh-transition-base), opacity var(--yh-transition-base);
}
.yh-submit-bar__btn--primary {
  background: var(--yh-color-primary);
  color: #fff;
}
.yh-submit-bar__btn--primary:hover {
  background: var(--yh-color-primary-dark-2);
}

.yh-submit-bar__btn--danger {
  background: var(--yh-color-danger);
  color: #fff;
}
.yh-submit-bar__btn--danger:hover {
  background: var(--yh-color-danger-dark-2);
}

.yh-submit-bar__btn--warning {
  background: var(--yh-color-warning);
  color: #fff;
}
.yh-submit-bar__btn--warning:hover {
  background: var(--yh-color-warning-dark-2);
}

.yh-submit-bar__btn--success {
  background: var(--yh-color-success);
  color: #fff;
}
.yh-submit-bar__btn--success:hover {
  background: var(--yh-color-success-dark-2);
}

.yh-submit-bar__btn--default {
  background: var(--yh-fill-color-light);
  color: var(--yh-text-color-regular);
  border: 1px solid var(--yh-border-color);
}

.yh-submit-bar__btn.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.yh-submit-bar__btn-loading {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  animation: yh-submit-bar-spin 0.8s linear infinite;
}

@keyframes yh-submit-bar-spin {
  to {
    transform: rotate(360deg);
  }
}
.yh-submit-bar__safe {
  height: env(safe-area-inset-bottom, 0);
}
</style>
