<template>
  <div class="home">
    <div class="top">
      <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>
    </div>
    <!-- <btn :attrs="{ title: '用户研究', left: '240px', top: '120px' }" @click.native="handleClick('/user-study')" /> -->
    <role-select :visible="visible" @roleSelect="fetchSelectRole" />
  </div>
</template>

<script>
import AppMenu from '@/components/base/AppMenu.vue'
import RoleSelect from '../components/RoleSelect.vue'
import { selectRole } from '../api'
export default {
  components: { AppMenu, RoleSelect },
  data() {
    return {
      visible: false,
      menuList: [
        { label: '首页', path: '/home' },
        { label: '产品分析', path: '/product-analysis' },
        { label: '用户研究', path: '/user-study' },
        { label: '营销工具使用', path: '/market-tools' },
        { label: '作品展示', path: '/works-show' }
      ],
      menuMap: {}
    }
  },
  computed: {
    path() {
      return this.$route.path
    },
    case() {
      return this.$store.state.case
    }
  },
  methods: {
    handleClick(path) {
      this.$router.push(path)
    },
    menuSelect(item) {
      this.$router.push(item.path)
    },
    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;
}
.top .el-button{
  float:right;
  margin:20px 50px 0 0;
}
.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>
