import { reactive, ref, computed, watch, toRefs } from 'vue'
import { useRouter } from 'vue-router'
const useMarkHeader = () => {
  const { back, push } = useRouter()

  const imgOperation = reactive<{
    rotate: number
    scale: number
    center: boolean
    frontColor: string
    backgroundColor: string
  }>({
    rotate: 0,
    scale: 1,
    center: false,
    frontColor: '#fff',
    backgroundColor: '#fff',
  })

  /** 返回 */

  const onBack = () => {
    back()
  }

  /** 放大/缩小 */
  const onScaleChange = (val: number) => {
    imgOperation.scale = val
  }

  /** 居中 */
  const onCenter = () => {
    imgOperation.center = !imgOperation.center
  }

  /** 旋转 */
  const onRotate = (val: number) => {
    imgOperation.rotate = val
  }

  /** 设置前景色 */
  const setFrontColor = (val: string) => {
    imgOperation.frontColor = val
  }

  /** 设置背景色 */
  const setBackgroundColor = (val: string) => {
    imgOperation.backgroundColor = val
  }

  /** 查看样卷 */
  const onViewSample = () => {
    push({ name: 'MarkingViewSample' })
  }

  /** 查看评分标准 */
  const onViewStandard = () => {
    push({ name: 'MarkStandard' })
  }

  return {
    ...toRefs(imgOperation),
    onBack,
    onScaleChange,
    onCenter,
    onRotate,
    setFrontColor,
    setBackgroundColor,
    onViewSample,
    onViewStandard,
  }
}

export default useMarkHeader
