<template>
  <el-container class="profile-view">
    <el-main class="profile-main sa-p-0">
      <el-row :gutter="36">
        <el-col class="main-left" :xs="24" :sm="24" :md="24" :lg="8" :xl="10">
          <div class="sa-title">{{ t('modules.profile.userInfo') }}</div>
          <div class="top">
            <div class="content-name sa-m-b-16 sa-flex sa-row-between">
              <div class="sa-flex">
                <div class="sa-m-r-20">
                  <sa-image v-if="state.account.avatar" :url="state.account.avatar" size="64" radius="32"></sa-image>
                  <img v-else src="/static/images/shop/avatar.png"
                    style="width: 64px; height: 64px; border-radius: 32px; object-fit: cover"
                    :alt="t('modules.profile.defaultAvatar')" />
                </div>
                <div>
                  <div class="name sa-m-b-8">
                    {{ state.account.loginAccount || state.account.name }}
                    <span class="id sa-m-l-8">#{{ state.account.id }}</span>
                  </div>
                  <div v-if="state.account.roleName">
                    {{ state.account.roleName }}
                  </div>
                </div>
              </div>
              <el-button v-auth="'admin.index.update'" @click="selectImage" type="primary">{{
                t('modules.profile.uploadAvatar') }}</el-button>
            </div>
            <div class="detail">
              <div class="detail-item">
                <div class="label sa-m-b-8">{{ t('modules.profile.userName') }}</div>
                <div class="sa-flex">
                  <el-input readonly v-model="state.account.name"
                    :placeholder="t('modules.profile.enterUserName')"></el-input>
                </div>
              </div>
              <div class="detail-item">
                <div class="label sa-m-b-8">{{ t('modules.profile.loginAccount') }}</div>
                <el-input readonly v-model="state.account.loginAccount"
                  :placeholder="t('modules.profile.enterLoginAccount')"></el-input>
              </div>
              <div class="detail-item">
                <div class="label sa-m-b-8">{{ t('modules.profile.role') }}</div>
                <el-input readonly v-model="state.account.roleName" placeholder="roleName"></el-input>
              </div>
              <!-- <div class="detail-item">
                <div class="label sa-m-b-8">电子邮件</div>
                <el-input v-model="state.account.email" placeholder="请输入电子邮箱"></el-input>
              </div>
              <div class="detail-item">
                <div class="label sa-m-b-8">手机号码</div>
                <el-input v-model="state.account.phoneNo" placeholder="请输入手机号码"></el-input>
              </div>
              <div class="detail-item sa-flex">
                <el-button type="primary" @click="updateAccount">确定修改</el-button>
                <el-button @click="getInfo">重置</el-button>
              </div> -->
            </div>
          </div>
          <div class="login">
            <div class="sa-title">{{ t('modules.profile.logout') }}</div>
            <el-button type="danger" @click="logout">{{ t('modules.profile.logout') }}</el-button>
          </div>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script setup>
import { reactive, onMounted } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { useI18n } from 'vue-i18n';
import adminApi from '@/app/admin/api';
import { useFile } from '@/sheep/components/sa-file/sa-file-modal.vue';
import sheep from '@/sheep';

const { t } = useI18n();

const accountStore = sheep.$store('account');

let state = reactive({
  account: {},
});
async function getInfo() {
  state.account = await accountStore.getInfo();
}
function updateAccount() {
  adminApi.account.edit(state.account);
}
function logout() {
  ElMessageBox.confirm(t('modules.profile.confirmLogout'), t('modules.profile.logout'), {
    confirmButtonText: t('common.confirm'),
    cancelButtonText: t('common.cancel'),
    type: 'warning',
  })
    .then(() => {
      accountStore.logout();
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: t('common.cancelled'),
      });
    });
}

function selectImage() {
  useFile(
    {
      fileType: 'image',
    },
    {
      confirm: (data) => {
        state.account.avatar = data.url;
      },
    },
  );
}

onMounted(() => {
  getInfo();
});
</script>

<style lang="scss" scoped>
.profile-view {
  .profile-main {
    overflow-x: hidden;
  }

  .main-left {
    :deep() {
      .el-input {
        width: 100%;
        max-width: 260px;
      }
    }
  }

  .top {
    background: var(--sa-table-header-bg);
    padding: 16px;
    border-radius: 4px;

    .content-name {
      color: var(--sa-font);
      font-size: 16px;
      flex-wrap: wrap;

      .name {
        font-size: 20px;
      }

      .id {
        color: var(--sa-subfont);
        font-size: 16px;
      }
    }
  }

  .detail {
    background: var(--sa-background-assist);
    padding: 16px;
    border-radius: 4px;

    .detail-item {
      font-size: 16px;
      margin: 0 0 18px 0;
      width: 100%;

      &:last-child {
        margin: 0;
      }

      .label {
        font-size: 12px;
        color: var(--sa-subfont);
      }
    }
  }

  .login,
  .wechat {
    color: var(--sa-subtitle);

    img {
      width: 32px;
      height: 32px;
    }
  }
}
</style>

<style lang="scss">
.el-dialog.sa-dialog.scan-dialog {
  --el-dialog-width: 400px;

  .profile-scan {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .scan-image {
    position: relative;
  }

  .scan-image-tip {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(253, 253, 253, 0.94);
    flex-direction: column;
    justify-content: center;

    .tip-code {
      font-size: 18px;
      color: var(--sa-title);
      margin-bottom: 16px;
    }

    .tip-refresh {
      font-size: 16px;
      color: var(--el-color-primary);
      cursor: pointer;

      .el-icon {
        font-size: 20px;
      }

      span {
        line-height: 1;
      }
    }
  }
}
</style>
