<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="handelIndex(1) "
              >
                <i class="user01" />单位信息&ensp;&ensp;&ensp;&ensp;
              </li>
              <li
                class="list-group-item"
                :class="{ btn: index == 2 }"
                @click="handelIndex(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="handelIndex(3)"
              >
                <i class="user03" />账户信息&ensp;&ensp;&ensp;&ensp;
              </li>
              <li
                style="position: relative;"
                class="list-group-item" :class="{ btn: index == 5 }"
                @click="handelIndex(5)"
              >
                <tetx style="position: relative;left: -19px;">
                  <el-icon size="30" style="position: relative;top: 7px;" color="#9a9fa1" :class="{ bg: index == 5 }">
                    <Location />
                  </el-icon>
                  <span>收货地址</span>
                </tetx>
              </li>
              <li
                class="list-group-item"
                :class="{ btn: index == 4 }"
                @click="handelIndex(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>-->
            
            </ul>
          </div>
        </div>
      </el-col>
      <el-col :span="18" :xs="24">
        <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>
        <div v-if="index == 5">
          <addressView />
        </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 addressView from './addressView.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
  })
}

function handelIndex(v) {
  index.value = v
}
</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;
}

.bg {
  color: #fff;
}
</style>