<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="list-group-item"
                :class="{ btn: index == 1 }"
                @click="index = 1"
              >
                <i class="user01" />团体信息&ensp;&ensp;&ensp;&ensp;
              </li>
              <li
                class="list-group-item"
                :class="{ btn: index == 2 }"
                @click="index = 2"
              >
                <i class="user02" />会员认证&ensp;&ensp;&ensp;&ensp;
              </li>
              <li
                v-if="deptType==2||deptType==3"
                class="list-group-item"
                :class="{ btn: index == 3 }"
                @click="index = 3"
              >
                <i class="user03" />账户信息&ensp;&ensp;&ensp;&ensp;
              </li>
              <li
                class="list-group-item"
                :class="{ btn: index == 4 }"
                @click="index = 4"
              >
                <i class="user04" />账号与安全&ensp;&ensp;
              </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 style="min-height: 454px" :user="state.user" />
            </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 setup name="Profile">
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>