<script lang="ts" setup>
import { useAppStore } from '@/store/modules/app'
import { propTypes } from '@/utils/propTypes'
import { useDesign } from '@/hooks/web/useDesign'
import { useRouter } from 'vue-router'

const router = useRouter() // 路由

defineOptions({ name: 'Collapse' })

const { getPrefixCls } = useDesign()

const prefixCls = getPrefixCls('collapse')

defineProps({
  color: propTypes.string.def('')
})

const appStore = useAppStore()

const collapse = computed(() => appStore.getCollapse)

const toggleCollapse = () => {
  const collapsed = unref(collapse)
  appStore.setCollapse(!collapsed)
}
const toHome = () => {
  router.push({
    name: 'PortalHome'
  })
}
</script>

<template>
  <div class="colla_box" :class="prefixCls">
    <Icon
      :color="color"
      :icon="collapse ? 'ep:expand' : 'ep:fold'"
      :size="18"
      class="cursor-pointer transition-transform duration-200 cubic-bezier(0.4, 0, 0.2, 1)"
      @click="toggleCollapse"
      :style="collapse ? 'transform: translateX(-20px)' : 'transform: translateX(20px)'"
    />
    <!-- <div class="back-button" @click="toHome()">
      <img src="@/assets/imgs/news/back_home.png" class="back" alt="返回门户" />
      <span>返回门户</span>
    </div> -->
  </div>
</template>
<style lang="less" scoped>
.colla_box {
  display: flex;
  align-items: center;
  margin-left: 30px;
}
.colla_box i {
  z-index: 999;
}
.back-button {
  width: 80px;
  height: 24px;
  font-size: 12px;
  color: #fff;
  border: 1px solid #dcdcdc;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  // margin-right: 30px;
  margin-left: 20px;
  .back {
    width: 12px;
    height: 12px;
    margin-right: 4px;
  }
}
</style>
