<template>
  <page-layout>
    <q-list class="bg-white">
      <UploadFile :multiple="false" :form-fields="formFields" url="seller/seller/upload" accept="image/*"
        field-name="avatar" class="full-width" flat square @uploaded="uploaded">
        <template v-slot:header="scope">
          <q-item>
            <q-item-section>头像</q-item-section>
            <q-item-section avatar class="right-avatar">
              <q-circular-progress v-if="scope.isUploading" :value="parseFloat(scope.uploadProgressLabel)" show-value
                size="md" color="red" track-color="grey-3">
                <user-avatar size="md" :src="store.user.avatar_url"></user-avatar>
              </q-circular-progress>
              <user-avatar v-else size="md" :src="store.user.avatar_url"></user-avatar>
            </q-item-section>
            <q-item-section side>
              <q-icon name="arrow_forward_ios" size="14px" />
            </q-item-section>
          </q-item>
        </template>
      </UploadFile>
      <q-item>
        <q-item-section>
          <q-item-label>绑定手机号</q-item-label>
          <q-item-label caption>供修改登录密码、支付密码使用</q-item-label>
        </q-item-section>
        <q-item-section side>{{ store.user.phone }}</q-item-section>
        <q-item-section side>
          <q-icon name="arrow_forward_ios" size="14px" color="grey-5"/></q-item-section>
      </q-item>
      <q-item to="/my/change_pwd">
        <q-item-section>登录密码</q-item-section>
        <q-item-section side>
          <q-icon name="arrow_forward_ios" size="14px" />
        </q-item-section>
      </q-item>
    </q-list>

    <q-list class="bg-white q-mt-sm">
      <q-item to="/my/change_pay_pwd">
        <q-item-section>支付密码</q-item-section>
        <q-item-section side>
          <q-icon name="arrow_forward_ios" size="14px" />
        </q-item-section>
      </q-item>
    </q-list>
  </page-layout>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue";
import { api } from "boot/axios";
import { useRouter } from "vue-router";
import { useQuasar } from "quasar";
import UploadFile from "src/components/UploadFile.vue";
import { useSelfStore } from "src/stores/self";
const $q = useQuasar();
const router = useRouter();
const store = useSelfStore();
const formFields = [{ name: "test", value: "1" }];
function uploaded(res) {
  store.refresh();
  $q.notify({
    type: "positive",
    message: res?.message || "修改头像成功！"
  });
}
</script>
<style lang="scss" scoped>
.upload-file {
  :deep(.q-uploader__list) {
    display: none;
  }
}
</style>
