import { defineComponent } from 'vue'
import { ElButton } from 'element-plus'
import './index.css'
import logo from './images/logo.png'
import { state } from '@/state'

export default defineComponent({
  name: 'col-header',
  data() {
    return {
      navigator: [
        { name: '首页', href: '#', current: false },
        { name: '曲谱', href: '#', current: false },
        { name: '视频课', href: '#', current: false },
        { name: '云教练', href: '#', current: false },
        { name: '社区', href: '#', current: false },
        { name: '下载', href: '/downLoad', current: false }
      ]
    }
  },
  mounted() {},
  render() {
    return (
      <div class="topNav">
        <div class="mx-52 flex justify-between items-center h-[70px]">
          <div class="flex items-center h-full">
            <div class="logoWrap">
              <img class="w-full" src={logo} alt="" />
            </div>
            <div class="flex space-x-[76px] md:space-x-16 ml-28 sm:ml-20 h-full navWrap">
              {this.navigator.map((item: any) => (
                <a
                  href={item.href}
                  onClick={() => {
                    this.navigator.forEach((item: any) => {
                      item.current = false
                    })
                    item.current = true
                  }}
                  class={[
                    item.current
                      ? 'text-[#1FF0C9] border-b-[3px] border-b-[#1FF0C9]'
                      : 'activeItem',
                    'itemCenter'
                  ]}
                >
                  {item.name}
                </a>
              ))}
            </div>
          </div>
          <div>
            <ElButton
              type="primary"
              round
              onClick={() => {
                state.loginPopupStatus = true
              }}
            >
              登录/注册
            </ElButton>
          </div>
        </div>
      </div>
    )
  }
})