<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="roleVisible = true">切换角色</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="roleVisible" @roleSelect="fetchSelectRole" />
    <case-select v-model="visible" :show-close="!!_case.id"></case-select>
  </div>
</template>

<script>
import AppMenu from '@/components/base/AppMenu.vue'
import RoleSelect from '../components/RoleSelect.vue'
import CaseSelect from '@/components/caseSelect/Index.vue'
import Btn from '../components/Btn.vue'
import { selectRole } from '../api'
import { getWorkStatus } from '@/api/base.js'
export default {
  components: { AppMenu, Btn, CaseSelect, RoleSelect },
  data() {
    return {
      roleVisible: false,
      visible: false,
      btnList: [
        { label: '产品分析', path: '/product-analysis/report', 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._case && !this._case.id) {
      this.visible = true
    }
    if (this.role !== 4) {
      this.fetchSelectRole(4)
    }
  },
  methods: {
    handleClick(item) {
      if (!item.disabled.includes(this.role)) {
        this.$router.push(item.path)
      }
    },
    // async handleClick(item) {
    //   if (this.role === 0) {
    //     this.$message.error('请选择角色')
    //   } else if (item.disabled.includes(this.role)) {
    //     this.$message.error('您当前的角色禁止访问该页面')
    //   } else {
    //     if (['/user-study', '/market-tools'].includes(item.path)) {
    //       const flag = await this.fetchWorkStatus()
    //       if (flag) {
    //         this.$router.push(item.path)
    //       } else {
    //         this.$message.error('请先完成产品分析报告，再进行' + item.label)
    //       }
    //     } else {
    //       this.$router.push(item.path)
    //     }
    //   }
    // },
    fetchWorkStatus() {
      return new Promise(resolve => {
        getWorkStatus()
          .then(res => {
            if (res.code === 0 && res.data && res.data.case_status) {
              resolve(true)
            } else {
              resolve(false)
            }
          })
          .catch(() => resolve(false))
      })
    },
    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>
