<template>
  <div class="home">
    <div class="top">
      <el-button style="margin-left:10px;" type="primary" size="medium" plain round @click="handleLogout">退出系统</el-button>
      <el-button type="primary" size="medium" plain round @click="visible = true">切换角色</el-button>
    </div>
    <div class="inner">
      <div class="header">
        <div class="logo">金融</div>
        <app-menu />
      </div>
      <btn v-for="(item, index) in btnList" :key="index" :attrs="{ title: item.label, left: item.left, top: item.top }" @click.native="handleClick(item)" :disabled="item.disabled.includes(role)"/>
    </div>
    <role-select :visible="visible" @roleSelect="fetchSelectRole" />
  </div>
</template>

<script>
import AppMenu from '@/components/base/AppMenu.vue'
import RoleSelect from '../components/RoleSelect.vue'
import Btn from '../components/Btn.vue'
import { selectRole } from '../api'
export default {
  components: { AppMenu, RoleSelect, Btn },
  data() {
    return {
      visible: false,
      btnList: [
        { label: '产品分析', path: '/product-analysis', disabled: [0, 2, 3], left: '960px', top: '134px' },
        { label: '用户分析', path: '/user-study', disabled: [0, 1, 3], left: '340px', top: '134px' },
        { label: '营销工具使用', path: '/market-tools', disabled: [0, 1, 2], left: '652px', top: '343px' },
        { label: '作品展示', path: '/works-show', disabled: [0], left: '320px', top: '343px' }
      ],
      menuMap: {}
    }
  },
  computed: {
    path() {
      return this.$route.path
    },
    case() {
      return this.$store.state.case
    },
    role() {
      return this.$store.state.role
    }
  },
  created() {
    if (!this.role) {
      this.visible = true
    }
  },
  methods: {
    handleClick(item) {
      if (!item.disabled.includes(this.role)) {
        this.$router.push(item.path)
      }
    },
    menuSelect(item) {
      this.$router.push(item.path)
    },
    handleLogout() {
      this.$store.dispatch('logout').then(() => {
        window.location.href = `${import.meta.env.VITE_LOGIN_URL}?rd=${encodeURIComponent(window.location.href)}`
      })
    },
    fetchSelectRole(role) {
      selectRole({ role }).then(res => {
        if (res.code === 0 && res.data && res.data.status) {
          this.$message.success('选择角色成功！')
          this.$store.commit('setRole', role)
          this.visible = false
        } else {
          this.$message.error(res.message)
        }
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>

<style scoped>
.top{
  height:80px;
  padding:20px 50px 0 0;
}
.top .el-button{
  float:right;
}
.inner{
  background:url('@/assets/images/home.png') no-repeat left center;
  width:1398px;
  height:552px;
  margin:0 auto 30px;
  border-radius:6px;
  position:relative;
}
.header{
  margin:0 6.9%;
  height:100px;
  padding-top:33px;
  display:flex;
}
.logo{
  font-size: 40px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #60A797;
  text-align:center;
  width:280px;
}
.menu{
  width: 780px;
  height:56px;
  border-radius:28px;
  display:flex;
  font-size:18px;
  line-height:56px;
  color:#fff;
}
.menu li{
  padding:0 40px;
  cursor: pointer;
}
.menu li.active{
  font-weight: bold;
}
</style>
