<template>
  <div class="works-show">
    <h5></h5>
    <div class="container">
      <div class="product">
        产品分析报告
        <div class="btn-bar" v-if="case_status">
          <el-button type="primary" size="medium" plain round :disabled="[0, 2, 3].includes(role)" @click="handleGo(1)">编辑</el-button>
          <el-button type="primary" size="medium" round :disabled="[0, 2, 3].includes(role)" @click="handleGo(2)">成绩</el-button>
        </div>
        <p class="tips" v-else>您还未完成产品分析报告，<br>请先去完成吧！</p>
      </div>
      <div class="user">
        用户分析报告
        <div class="btn-bar" v-if="user_analysis_status">
          <el-button type="primary" size="medium" plain round :disabled="[0, 1, 3].includes(role)" @click="handleGo(3, 1)">编辑</el-button>
          <el-button type="primary" size="medium" round :disabled="[0, 1, 3].includes(role)" @click="handleGo(3, 3)">成绩</el-button>
        </div>
        <p class="tips" v-else>您还未完成用户分析报告，<br>请先去完成吧！</p>
      </div>
      <div class="tool">
        营销工具使用
        <div class="btn-bar" v-if="marketing_status">
          <el-button type="primary" size="medium" plain round :disabled="[0, 1, 2].includes(role)"  @click="handleGo(4)">编辑</el-button>
        </div>
        <p class="tips" v-else>您还未完成营销工具使用，<br>请先去完成吧！</p>
      </div>
    </div>
  </div>
</template>

<script>
import { getWorkStatus } from '@/api/base'
export default {
  data() {
    return {
      case_status: false,
      marketing_status: false,
      user_analysis_status: false,
      navMap: {
        1: '/product-analysis/report',
        2: '/product-analysis/result',
        3: '/user-study',
        4: '/market-tools/tool'
      }
    }
  },
  computed: {
    role() {
      return this.$store.state.role
    }
  },
  created() {
    this.fetchWorkStatus()
  },
  methods: {
    handleGo(index, type) {
      const path = this.navMap[index]
      this.$router.push({ path, query: { type } })
    },
    fetchWorkStatus() {
      getWorkStatus().then(res => {
        if (res.code === 0 && res.data) {
          this.case_status = res.data.case_status
          this.marketing_status = res.data.marketing_status
          this.user_analysis_status = res.data.user_analysis_status
        }
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>

<style scoped>
.works-show{
  height:calc(100vh - 86px);
  width:1180px;
  margin:0 auto;
}
h5{
  font-size:18px;
  line-height:120px;
  height:80px;
  font-weight:normal;
  text-indent: 20px;
  color:#666;
  text-align:center;
}
.container{
  /* display: flex; */
  text-align:center;
}
.container>div{
  width:260px;
  height:360px;
  padding-top:240px;
  background:#fff;
  border-radius:10px;
  margin-right:20px;
  text-align:center;
  color:#777;
  display:inline-block;
  vertical-align: top;
}
.container .product{
  background:url('@/assets/images/works_show_icon1.png') #fff no-repeat center 8px;
}
.container .user{
  background:url('@/assets/images/works_show_icon2.png') #fff no-repeat center 10px;
}
.container .tool{
  background:url('@/assets/images/works_show_icon3.png') #fff no-repeat center 4px;
}
.btn-bar, .tips{
  padding-top:20px;
  border-top:1px dashed #c3c3c3;
  margin:20px 20px 0;
}
.btn-bar .el-button{
  padding:6px 22px;
}
.tips{
  font-size:13px;
  color:rgb(250, 84, 28);
}
</style>
