<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="6" :xs="24" class="colHight">
        <div>
          <div class="avatarBox">
            <userAvatar :user="state.user"/>
            <h3 class="">{{ state.user.userName }}</h3>
          </div>
          
          <div>
            <ul class="list-group list-group-striped">
              <li
                :class="{ btn: index == 1 }"
                class="list-group-item"
                @click="index = 1"
              >
                <i class="user01"/>团体信息&nbsp;&nbsp;&nbsp;&nbsp;
              </li>
              <li
                :class="{ btn: index == 2 }"
                class="list-group-item"
                @click="index = 2"
              >
                <i class="user02"/>会员认证&nbsp;&nbsp;&nbsp;&nbsp;
              </li>
              <li
                v-if="deptType==2||deptType==3"
                :class="{ btn: index == 3 }"
                class="list-group-item"
                @click="index = 3"
              >
                <i class="user03"/>账户信息&nbsp;&nbsp;&nbsp;&nbsp;
              </li>
              <li
                :class="{ btn: index == 4 }"
                class="list-group-item"
                @click="index = 4"
              >
                <i class="user04"/>账号与安全&nbsp;&nbsp;
              </li>
              <!-- <li class="list-group-item">
                <svg-icon icon-class="peoples" />
                所属角色
                <div class="pull-right">{{ state.roleGroup }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="date" />
                创建日期
                <div class="pull-right">{{ state.user.createTime }}</div>
              </li> -->
            </ul>
          </div>
        </div>
      </el-col>
      <el-col :span="18" :xs="24">
        <!-- <template #header>
            <div class="clearfix">
              <span>基本资料</span>
            </div>
          </template> -->
        <div v-if="index == 1">
          <Group/>
        </div>
        <div v-if="index == 2">
          <Member :id="id"/>
        </div>
        <div v-if="index == 3">
          <Rates/>
        </div>
        <div v-if="index == 4">
          <el-tabs v-model="activeTab">
            <el-tab-pane label="基本资料" name="userinfo">
              <userInfo :user="state.user" style="min-height: 454px"/>
            </el-tab-pane>
            <el-tab-pane label="修改密码" name="resetPwd">
              <resetPwd style="min-height: 454px"/>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script name="Profile" setup>
import {ref, reactive, computed, onMounted} from 'vue'
import UserAvatar from './userAvatar'
import UserInfo from './userInfo'
import ResetPwd from './resetPwd'
import Group from './group.vue'
import Member from './member.vue'
import Rates from './rates.vue'
import useUserStore from '@/store/modules/user'
import {useRoute} from 'vue-router'
import {getUserProfile} from '@/api/system/user'

const route = useRoute()
const deptType = computed(() => useUserStore().deptType)
const index = ref(1)
const activeTab = ref('userinfo')
const state = reactive({
  user: {},
  roleGroup: {},
  postGroup: {}
})

onMounted(() => {
  index.value = route.query.type || 1
  getUser()
})

function getUser() {
  getUserProfile().then((response) => {
    state.user = response.data.user
    state.roleGroup = response.data.roleGroup
    state.postGroup = response.data.postGroup
  })
}
</script>

<style lang="scss" scoped>
.user01 {
  background: url("@/assets/admin/user01@2x.png") no-repeat center;
  background-size: contain;
}

.user02 {
  background: url("@/assets/admin/user02@2x.png") no-repeat center;
  background-size: contain;
}

.user03 {
  background: url("@/assets/admin/user03@2x.png") no-repeat center;
  background-size: contain;
}

.user04 {
  background: url("@/assets/admin/user04@2x.png") no-repeat center;
  background-size: contain;
}

.list-group-item {
  text-align: center;
  height: 60px;
  line-height: 60px;
  background: #FFFFFF;
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000000;
  padding: 0;
  border: none;
  border-radius: 5px;
  margin-bottom: 17px;
  
  i {
    display: inline-block;
    width: 34px;
    height: 34px;
    margin-right: 20px;
  }
  
  &.btn {
    color: #fff;
    background: #1561CB;
    
    .user01 {
      background: url("@/assets/admin/user01_dwn@2x.png") no-repeat center;
      background-size: contain;
    }
    
    .user02 {
      background: url("@/assets/admin/user02_dwn@2x.png") no-repeat center;
      background-size: contain;
    }
    
    .user03 {
      background: url("@/assets/admin/user03_dwn@2x.png") no-repeat center;
      background-size: contain;
    }
    
    .user04 {
      background: url("@/assets/admin/user04_dwn@2x.png") no-repeat center;
      background-size: contain;
    }
  }
}

.colHight {
  height: 800px;
}

.avatarBox {
  background: url("@/assets/admin/user_bg@2x.png") no-repeat center;
  background-size: cover;
  text-align: center;
  padding: 30px 0 10px;
}
</style>