<template>
  <view class="pb-50rpx">
    <u-navbar back-icon-color="#000000" title-color="#000000" :border-bottom="false" title="切换账号">
      <view v-if="accountList.length > 1" @tap="delShow = !delShow" slot="right" class="pr-base text-lg text-txBase">
        {{ !delShow ? '编辑' : '取消' }}
      </view>
    </u-navbar>
    <view @tap="switchAccount(item)" class="relative" v-for="(item, index) in accountList" :key="index">
      <view class="mt-base">
        <view class="flex py-30rpx items-center justify-between bg-white">
          <view class="flex items-center ml-base">
            <cu-avatar size="108" :src="item.avatar ? item.avatar : ''"></cu-avatar>
            <view class="ml-base">
              <view class="text-xl text-txBase font-extrabold">{{ item.nickname ? item.nickname : '匿名用户' }}</view>
              <view class="text-lg text-txBase">{{ item.phone }}</view>
            </view>
          </view>
          <block v-if="item.phone == user.phone">
            <view class="relative mr-base text-lg text-txGray">
              <u-badge :is-dot="true" :offset="[16, 140]" size="48" class="badge"></u-badge>
              <view>当前使用</view>
            </view>
          </block>
        </view>
      </view>
      <!-- 弹窗 -->
      <view
        v-if="item.phone != user.phone && delShow"
        class="flex text-md text-white items-center justify-end absolute top-0 right-0 left-0 w-full h-full z-50 bg-txBase bg-opacity-70"
      >
        <view @tap.stop="del(item)" class="btn bg-hex-D43030">删除<br />账号</view>
      </view>
    </view>
    <!--  -->
    <view
      @tap="$u.routeAuth('/pages/login/index', { type: 'added' })"
      class="flex pl-base py-30rpx items-center mt-base bg-white text-lg text-txBase"
    >
      <image class="w-148rpx h-148rpx" src="/static/svg/add_acc.svg" mode=""></image>
      <view class="ml-base">添加其他账号</view>
    </view>
    <!-- 删除弹窗 -->
    <cu-modal @confirm="confirm" @cancel="delShow = false" v-model="show" :content="content" show-cancel-button confirm-color="#378166"></cu-modal>
    <!-- 登录失效 -->
    <cu-modal
      @confirm="$u.route('/pages/login/index',{phone:acctiveUser.phone})"
      @cancel="delShow = false"
      v-model="loginShow"
      title="切换失败"
      content="切换账户失败，是否重新登录？"
      confirmText="去登陆"
      show-cancel-button
      confirm-color="#378166"
    ></cu-modal>
  </view>
</template>

<script>
import Request from 'luch-request';
const http = new Request();
export default {
  data() {
    return {
      loginShow: false,
      delShow: false,
      show: false,
      content: '是否删除该账号',
      phone: '',
      acctiveUser:{}
    };
  },
  computed: {
    accountList() {
      return this.$store.getters.allaccounts;
    },
    user() {
      return this.$store.getters.user ?? {};
    },
  },
  onLoad() {
    this.$store.dispatch('user/getUserInfo');
  },
  methods: {
    //删除账号
    confirm() {
      const all = this.accountList.filter(({ phone }) => phone != this.phone);
      this.$store.commit('user/SET_ACCOUNTS', all);
      this.delShow = false;
    },
    del({ phone }) {
      this.show = true;
      this.phone = phone;
    },
    //切换账号
    async switchAccount(item) {
      this.acctiveUser = item
      http
        .get(process.env.VUE_APP_BASE_API+'/v1/me', {
          header: {
            Authorization: 'Bearer ' + item.token,
            Accept: 'application/json;version=1.2.0'
          },
        })
        .then(async ({ data }) => {
          if (this.user.phone == item.phone) {
            this.$u.toast("当前账户已登录状态")
            return
          } else {
            await this.$store.commit('user/SET_TOKEN', item.token)
            await this.$store.dispatch('user/getUserInfo')
            this.$u.toast("账户切换成功")
          }
        })
        .catch((err) => {
          this.loginShow = true
          console.log('token失效');
        });

    },
  },
};
</script>

<style lang="scss" scoped>
.badge {
  width: 18rpx;
  height: 18rpx;
  border-radius: 50%;
  @apply bg-primary;
}

.btn {
  @apply mr-66rpx flex items-center justify-center w-98rpx h-98rpx rounded-full;
}
</style>
