<template>
  <div class="min-h-screen" style="background: #f8f8fa">
    <!-- top -->
    <div class="top bg-center bg-no-repeat bg-cover">
      <div class="w-full text-center text-white text-base pt-14">我的</div>
      <div class="flex w-full pb-7 justify-between">
        <div class="mt-8 ml-5">
          <img :src="avatarUrl" class="w-12 h-12 inline-block object-contain" />
          <div class="text-white ml-3 inline-block">
            <span v-if="isLogin">{{
              filter.filterPhone(userMsg?.userInfo.phone)
            }}</span>
            <span v-else>未登录</span>
          </div>
        </div>
        <div
          class="flex h-8 bg-indigo-400 mr-0 mt-11 rounded-l-full"
          @click="$router.push('setting')"
        >
          <span class="text-sm leading-8 pr-2 pl-4 text-white">个人中心</span>
          <IconVue
            name="icon-gengduo"
            color="#FFFFFF"
            size="14"
            class="my-auto pr-3"
          />
        </div>
      </div>
    </div>
    <!-- 更多服务 -->
    <div class="mx-5">
      <p class="text-base font-semibold mt-5">更多服务</p>
      <service
        class="mt-5"
        iconName="icon-xiaoxizhongxin-wode"
        label="消息中心"
        @click="$router.push('msgManage')"
      />
      <service
        class="mt-2"
        iconName="icon-guanyuwomen"
        label="关于我们"
        @click="$router.push('aboutUs')"
      />
      <service
        class="mt-2"
        iconName="icon-tongxunlu"
        iconSize="19"
        label="通讯录"
        @click="$router.push({ name: 'AddressBook' })"
      />
    </div>
    <!-- 我的网点 -->
    <GroupTitle
      title="我的网点"
      @seeMore="$router.push('branch')"
      class="mt-5"
      :iconName="isUser || !isLogin ? 'icon-gengduo' : ''"
    />
    <div class="mt-2" v-if="state.loading"></div>
    <Skeleton :loading="state.loading" :row="4">
      <branch
        class="mt-3 mx-5"
        v-if="state.branchinfo || !isUser"
        :name="state.branchinfo.name"
        :distance="state.branchinfo.distance"
        :is_normal_work="state.branchinfo.is_normal_work"
        :latitude="state.branchinfo.latitude"
        :location="state.branchinfo.location"
        :longitude="state.branchinfo.longitude"
        :opening_hours="state.branchinfo.opening_hours"
        :weekend_status="state.branchinfo.weekend_status"
        :outlet_id="state.branchinfo.outlet_id"
      />
    </Skeleton>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, onMounted, reactive, ref } from "vue";
import IconVue from "@/components/common/Icon.vue";
import Service from "@/components/Mine/Service/index.vue";
import Branch from "@/components/Mine/Branch/branch.vue";
import GroupTitle from "@/components/GroupTitle/index.vue";
import { getCurrentUserAvatarUrl, getUserMsg } from "@/utils/userMsg";
import filter from "@/filter";
import AddressService from "@/service/AddressService";
import { iNearbyOutLet } from "@/service/AddressService/types";
import { Skeleton } from "vant";
import { eRole } from "@/types/roleType";

export default defineComponent({
  name: "Mine",
  components: {
    IconVue,
    Service,
    Branch,
    GroupTitle,
    Skeleton,
  },
  props: {
    iconName: {
      type: String,
      default: "",
    },
  },
  setup(props, context) {
    const avatarUrl = getCurrentUserAvatarUrl();

    const state = reactive({
      branchinfo: {} as iNearbyOutLet,
      loading: false,
    });
    const userMsg = computed(() => {
      return getUserMsg();
    });
    const isUser = computed(() => {
      return userMsg?.value?.role2 == eRole.user;
    });
    let branchinfo = reactive({} as iNearbyOutLet);

    onMounted(async () => {
      state.loading = true;
      if (isUser) {
        const ret = await AddressService.getInstance().getNearby({
          bank_code: Number(process.env.VUE_APP_BANK_CODE),
          number: 1,
        });
        if (ret.code === 200) {
          state.branchinfo = ret.data[0];
        }
      } else {
        const ret = await AddressService.getInstance().getStaffOutlet();
        if (ret.code == 200) {
          const ssid = ret.data.ss_id;
          AddressService.getInstance()
            .getOutlets({
              id: ssid,
              level: 4,
            })
            .then((res) => {
              if (res.code == 200) {
                state.branchinfo = res.data;
              }
            });
        }
      }
      console.log("info", branchinfo);
      state.loading = false;
    });
    return {
      filter,
      state,
      isUser,
      userMsg,
      avatarUrl,
    };
  },
  computed: {
    isLogin() {
      return !!getUserMsg();
    },
  },
});
</script>

<style lang="less">
.top {
  background-image: url(../../../assets/img/mine_bg.png);
}
</style>
