import { computed } from 'vue'

export function useBackground() {
  // 默认背景色
  const defaultBackgroundColor = '#f1f1f1'
  // 渐变色起始色
  const gradientStartColor = '#C8E3FF'
  // 渐变色结束色
  const gradientEndColor = '#E8F4FF'

  // 多端背景样式
  const backgroundStyle = computed(() => {
    // 默认样式
    return {
      background: defaultBackgroundColor,
      minHeight: '100vh',
      position: 'relative',
    }
  })

  // 顶部渐变背景样式
  const topGradientStyle = computed(() => ({
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    height: '470rpx',
    background: getGradientBackground(),
    zIndex: 1,
  }))
  const setTopGradientStyle = (startColor: string, endColor: string) => ({
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    height: '470rpx',
    background: setGradientBackground(startColor, endColor),
    zIndex: 1,
  })

  // 获取背景色值
  const getBackgroundColor = () => defaultBackgroundColor

  // 获取渐变背景色值
  const getGradientBackground = () =>
    `linear-gradient(180deg, 
      #C8E3FF 0%, 
      #E3ECF6 50%, 
      #f1f1f1 100%)`
//设置渐变背景色
const setGradientBackground = (startColor: string, endColor: string) =>
    `linear-gradient(180deg, 
      ${startColor} 0%, 
      ${endColor} 50%, 
      #f1f1f1 100%)`
  return {
    backgroundStyle,
    topGradientStyle,
    getBackgroundColor,
    getGradientBackground,
	setTopGradientStyle
  }
}
