<template>
  <div class="popup" v-show="visible">
    <div class="popup-container">
      <p>你好呀～<br>欢迎来到金融产品数字化营销实训系统！<br>首先，请选择你的身份角色吧。</p>
      <ul>
        <li class="item" v-for="item in roleList" :key="item.id">
          <img :src="item.icon">
          <p>
            <el-radio v-model="roleSelected" :label="item.id">{{item.label}}</el-radio>
          </p>
        </li>
      </ul>
      <div style="text-align:center;margin-top:25px;">
        <el-button type="primary" size="small" round @click="handleSelect"> 选好了 </el-button>
      </div>
    </div>
    <div class="overlay"></div>
  </div>
</template>
<script>
import role1 from '@/assets/images/role_1.png'
import role2 from '@/assets/images/role_2.png'
import role3 from '@/assets/images/role_3.png'
import role4 from '@/assets/images/role_4.png'
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    role() {
      return this.$store.state.role
    }
  },
  data() {
    return {
      roleList: [
        { label: '我是产品分析员', icon: role1, id: 1 },
        { label: '我是用户分析员', icon: role2, id: 2 },
        { label: '我是营销专员', icon: role3, id: 3 },
        { label: '我是团队组长', icon: role4, id: 4 }
      ],
      roleSelected: ''
    }
  },
  watch: {
    role: {
      handler(v) {
        this.roleSelected = v
      },
      immediate: true
    }
  },
  methods: {
    handleSelect() {
      if (this.roleSelected) {
        this.$emit('roleSelect', this.roleSelected)
      } else {
        this.$message.error('请选择角色')
      }
    }
  }
}
</script>
<style scoped>
.overlay{
  position:fixed;
  left:0;
  top:0;
  right:0;
  bottom:0;
  z-index:1999;
  background:rgba(0, 0, 0, .5);
}
.popup-container{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  z-index:2000;
  width:735px;
  height:462px;
  border-radius:10px;
  box-shadow: 0 1px 3px rgb(0 0 0 / 30%);
  background:#fff;
  background-size:313px;
}
.popup-container>p{
  padding:36px 0 36px 48px;
  font-size:18px;
  color:#333;
  line-height:24px;
}
.popup-container ul{
  display: flex;
}
.popup-container ul li{
  width:25%;
  text-align:center;
  position:relative;
  padding-top:200px;
}
.popup-container ul li img{
  position:absolute;
  left:50%;
  top:0;
  transform: translateX(-50%);
}
</style>
