<template>
  <div class="personal-center-container no-background-container auto-height-container">
    <el-row :gutter="20">
      <el-col :lg="8" :md="12" :sm="24" :xl="8" :xs="24">
        <vab-card class="auto-height-card">
          <div class="user-info">
            <!-- <el-avatar :size="100" :src="avatar" /> -->
            <user-avatar />

            <ul class="list-group list-group-striped">
              <li class="list-group-item">
                <div class="pull-left">
                  <vab-icon icon="user" is-custom-svg />
                  用户名称
                </div>
                <div class="pull-right">{{ state.user.userName }}</div>
              </li>
              <li class="list-group-item">
                <div class="pull-left">
                  <vab-icon icon="phone" is-custom-svg />
                  手机号码
                </div>
                <div class="pull-right">{{ state.user.phonenumber }}</div>
              </li>
              <li class="list-group-item">
                <div class="pull-left">
                  <vab-icon icon="email" is-custom-svg />
                  用户邮箱
                </div>
                <div class="pull-right">{{ state.user.email }}</div>
              </li>
              <li class="list-group-item">
                <div class="pull-left">
                  <vab-icon icon="tree" is-custom-svg />
                  所属部门
                </div>
                <div v-if="state.user.dept" class="pull-right">{{ state.user.dept.deptName }} / {{ state.postGroup }}</div>
              </li>
              <li class="list-group-item">
                <div class="pull-left">
                  <vab-icon icon="peoples" is-custom-svg />
                  所属角色
                </div>
                <div class="pull-right">{{ state.roleGroup }}</div>
              </li>
              <li class="list-group-item">
                <div class="pull-left">
                  <vab-icon icon="date" is-custom-svg />
                  创建日期
                </div>
                <div class="pull-right">{{ state.user.createTime }}</div>
              </li>
            </ul>
          </div>
        </vab-card>
      </el-col>
      <el-col :lg="16" :md="12" :sm="24" :xl="16" :xs="24">
        <vab-card class="auto-height-card">
          <el-tabs v-model="activeName">
            <el-tab-pane label="基本信息" name="first">
              <el-col :lg="12" :md="16" :sm="24" :xl="12" :xs="24">
                <user-info :user="state.user" />
              </el-col>
            </el-tab-pane>
            <el-tab-pane label="账号绑定" name="second">
              <reset-pwd />
            </el-tab-pane>
          </el-tabs>
        </vab-card>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { getUserProfile } from '/@/api/userManagement'
import { useUserStore } from '/@/store/modules/user'

defineOptions({
  name: 'PersonalCenter',
})

const state = reactive<any>({
  user: {},
  roleGroup: {},
  postGroup: {},
})

const userStore = useUserStore()
const { avatar } = storeToRefs(userStore)

const _description = decodeURI(
  '\u5bcc\u5728\u672f\u6570\uff0c\u4e0d\u5728\u52b3\u8eab\uff1b\u5229\u5728\u52bf\u5c45\uff0c\u4e0d\u5728\u529b\u8015\u3002'
)

const activeName = ref<string>('first')

const form = reactive<any>({
  fullName: 'admin',
  nickname: 'good luck',
  sex: 2,
  description: _description,
})

const inputRef = ref<any>(null)
const dynamicTags = ref<any>(['腹黑', '怕麻烦', '小仙女', '仙气飘飘'])
const inputVisible = ref<boolean>(false)
const inputValue = ref<string>('')

onMounted(() => {
  getUser()
})

function getUser() {
  getUserProfile().then((response: any) => {
    state.user = response.data
    state.roleGroup = response.roleGroup
    state.postGroup = response.postGroup
  })
}

const onSubmit = () => {
  $baseMessage('模拟保存成功', 'success', 'hey')
}

const handleClose = (tag: string) => {
  dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1)
}

const showInput = () => {
  inputVisible.value = true
  nextTick(() => {
    inputRef.value.focus()
  })
}

const handleInputConfirm = () => {
  if (inputValue.value) {
    dynamicTags.value.push(inputValue.value)
  }
  inputVisible.value = false
  inputValue.value = ''
}
</script>

<style lang="scss" scoped>
.personal-center-container {
  .list-group {
    display: list-item;
    padding-left: 0px;
    text-align: -webkit-match-parent;
    list-style: none;
    unicode-bidi: isolate;
  }

  .list-group-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 0px;
    margin-bottom: -1px;
    font-size: 13px;
    text-align: -webkit-match-parent;
    border-top: 1px solid #e7eaec;
    border-bottom: 1px solid #e7eaec;
  }

  .list-group-striped > .list-group-item {
    padding-right: 0;
    padding-left: 0;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  .pull-right {
    float: right !important;
  }

  .user-info {
    padding: var(--el-padding);
    text-align: center;

    :deep() {
      .el-avatar {
        img {
          padding: var(--el-padding);
          cursor: pointer;
        }
      }
    }

    &-full-name {
      margin-top: 15px;
      font-size: 24px;
      font-weight: 500;
      color: var(--el-color-grey);
    }

    &-description {
      margin-top: 8px;
    }

    &-follow {
      margin-top: 15px;
    }

    &-list {
      margin-top: 18px;
      line-height: 30px;
      text-align: left;
      list-style: none;

      h5 {
        margin: -20px 0 5px;
      }
    }
  }

  .item {
    display: flex;

    i {
      font-size: 40px;
    }

    &-content {
      box-sizing: border-box;
      flex: 1;
      margin-left: var(--el-margin);

      &-second {
        margin-top: 8px;
      }
    }
  }
}
</style>
