<template>
  <view class="appUser">
    <view
      class="user-center-card__header__transparent"
      v-if="isLogin"
      :style="{width: isLogin ? '100%' : '70%'}">
      <view
        class="user-center-card__header__avatar"
        @click="toPage('/pages/users/user_setting/index')">
        <nut-avatar size="large">
          <img :src="userInfo.data?.avatarUrl" />
        </nut-avatar>
      </view>
      <view
        class="user-center-card__header__info"
        @click="toPage('/pages/users/user_setting/index')">
        <view class="user-center-card__header__info__name"
          >{{ userInfo.data?.nickName || '点击设置昵称' }}
        </view>
        <view v-if="!userInfo.data?.phone">
          <nut-button
            size="mini"
            open-type="getPhoneNumber"
            @getphonenumber="getphonenumber"
            >点击绑定手机号
          </nut-button>
        </view>
        <view v-else class="user-center-card__header__info__phone"
          >{{ maskString(userInfo.data?.phone, 3, 7) }}
        </view>
      </view>
    </view>
    <view v-else class="user-center-card__header__transparent">
      <view class="user-center-card__header__avatar">
        <nut-avatar size="large">
          <img
            src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png" />
        </nut-avatar>
      </view>
      <view class="user-center-card__header__info">
        <view class="user-center-card__header__info__name" @click="clickLogin"
          >点击立即登录
        </view>
      </view>
    </view>
    <view class="user-acc flex items-center text-center justify-between">
      <view>
        <view class="text-[#ffc300] text-[40px] font-bold">{{
          userInfo.data?.pulse || 0
        }}</view>
        <view class="text-[#CFAA32] text-[28px]">豆子</view>
      </view>
      <view class="line"></view>
      <view>
        <view class="text-[#ffc300] text-[40px] font-bold">{{
          userInfo.data?.integral || 0
        }}</view>
        <view class="text-[#CFAA32] text-[28px]">积分</view>
      </view>
    </view>
    <!--我的订单-->
    <view class="border-box bg-[#fff] p-[20px]">
      <view class="flex justify-between items-center mt-2">
        <view class="text-[#333333] text-[32px]">我的订单</view>
        <view class="flex text-[#c9c9c9] items-center" @click="toOrderList(0)">
          <view class="text-[26px]">查看全部</view>
          <ArrowRight size="12" />
        </view>
      </view>
      <view class="flex justify-between text-[#666] px-[20px]">
        <view
          class="mt-[30px] flex flex-col items-center"
          @click="toOrderList(1)">
          <IconFont
            name="http://p0.meituan.net/csc/9943f6c938fc0e310141a2b99d5bde6617483.png"
            size="42" />
          <view class="mt-[15px] text-[25px] text-[#333333]">待付款</view>
        </view>
        <view
          class="mt-[30px] flex flex-col items-center"
          @click="toOrderList(2)">
          <IconFont
            name="http://p0.meituan.net/csc/5306d094d7b4b61848dd21c86b693a9515523.png"
            size="42" />
          <view class="mt-[15px] text-[25px] text-[#333333]">待使用</view>
        </view>
        <view
          class="mt-[30px] flex flex-col items-center"
          @click="toOrderList(3)">
          <IconFont
            name="http://p0.meituan.net/csc/32ea9bbf51e3bbb0cbd75bc0fea97ca815779.png"
            size="42" />
          <view class="mt-[15px] text-[25px] text-[#333333]">已使用</view>
        </view>
        <view
          class="mt-[30px] flex flex-col items-center"
          @click="toOrderList(4)">
          <IconFont
            name="http://p0.meituan.net/csc/2e0dee89e9a3e3f2e7bf65db355fa11c11630.png"
            size="42" />
          <view class="mt-[15px] text-[25px] text-[#333333]">已失效</view>
        </view>
      </view>
    </view>

    <!--  我的服务  -->
    <view class="user-center" v-if="isLogin">
      <view class="text-[#333333] text-[32px] mt-2">我的服务</view>
      <view class="box">
        <view v-for="(item, idx) in userMenuList" :key="idx">
          <view
            v-if="item.type !== 333"
            class="box-mini"
            @click="toPage(item.url)">
            <IconFont size="42" :name="item.icon"></IconFont>
            <view class="label">{{ item.label }}</view>
          </view>
          <button v-else class="kf-btn" open-type="contact">
            <IconFont class="IconFont" size="42" :name="item.icon"></IconFont>
            <view class="label">{{ item.label }}</view>
          </button>
        </view>
      </view>
    </view>

    <!--  商家管理  -->
    <view
      class="user-center"
      v-if="userInfo.data?.bid && userInfo.store_status === 1">
      <view class="text-[#333333] text-[32px] mt-2">商家服务</view>
      <view class="box">
        <view
          v-if="userInfo.data.permission.dd"
          class="box-mini"
          @click="toPage('/pages/admin/add_order/index')">
          <IconFont
            size="42"
            name="http://p0.meituan.net/csc/72a389ac6a441061fd534b96644c431b7839.png"></IconFont>
          <view class="label">后结点单</view>
        </view>
        <view
          v-if="userInfo.data.permission.hx"
          class="box-mini"
          @click="toPage('/pages/admin/verify/index')">
          <IconFont
            size="42"
            name="http://p1.meituan.net/csc/c236a8b7a73178da25218e1fb59a96f06610.png"></IconFont>
          <view class="label">订单核销</view>
        </view>
        <view
          v-if="userInfo.data.permission.tj"
          class="box-mini"
          @click="toPage('/pages/admin/order_manage/index')">
          <IconFont
            size="42"
            name="http://p0.meituan.net/csc/bd9aca457a109b4d69a692a9109a73ed9045.png"></IconFont>
          <view class="label">订单统计</view>
        </view>
        <view
          v-if="userInfo.data.permission.tx"
          class="box-mini"
          @click="toPage('/pages/admin/withdrawal/index')">
          <IconFont
            size="42"
            name="http://p0.meituan.net/csc/f85d7dc1bf9eda8977e9089b260a586b7440.png"></IconFont>
          <view class="label">收益提现</view>
        </view>
      </view>
    </view>

    <!--    版权    -->
    <view class="text-[#999999] mt-5 text-[20px] text-center">
      <view>鑫瓴科技版权所有</view>
      <view>v4.0.0</view>
    </view>
    <!-- 登录 -->
    <Auth
      :visible="isShowLogin"
      @update:visible="cancelLogin"
      @ok="getUserInfo" />
  </view>
</template>

<script lang="ts" setup>
import {ref} from 'vue';
import {ArrowRight, IconFont} from '@nutui/icons-vue-taro';
import Taro from '@tarojs/taro';
import Auth from '@/components/Auth.vue';
import {getPersonalInfo, getPhone, bindParent} from '@/api/user';
import {maskString} from '@/utils';

const isShowLogin = ref(false);

const isLogin = ref(false);

interface UserInfo {
  data?: {
    nickName?: string;
    avatarUrl?: string;
    ID?: string;
    bid?: string;
    phone?: string;
    uid?: string;
    permission?: any;
    integral?: string;
    pulse?: string;
  };
  store_status?: number;
  store_name?: string;
}

const userInfo = ref<UserInfo>({});

Taro.useDidShow(() => {
  init_data();
});

// Taro.startPullDownRefresh({
//   success: () => {
//     init_data();
//   },
//   complete: () => {
//     Taro.stopPullDownRefresh();
//   },
// });

const init_data = () => {
  const token = Taro.getStorageSync('token');
  if (token) {
    getUserInfo();
  }
};

const test = () => {
  console.log(process.env.TARO_APP_ID);
  Taro.openCustomerServiceChat({
    corpId: 'wwb5dd953ca36043ef',
    extInfo: {
      url: 'https://work.weixin.qq.com/kfid/kfcb2b0420e94102346',
    },
  });
};

const cancelLogin = () => {
  isShowLogin.value = false;
};

const getUserInfo = async () => {
  const res = await getPersonalInfo();
  userInfo.value = {
    ...res.data,
    data: {
      ...res.data.data,
      permission: res.data.data.permission
        ? JSON.parse(res.data.data.permission)
        : {},
    },
  };
  Taro.setStorageSync('userInfo', userInfo.value);
  isLogin.value = true;
  cancelLogin();
};

const getphonenumber = async (e: any) => {
  await getPhone({
    uid: userInfo.value.data?.uid,
    code: e.detail.code,
  });
  await getUserInfo();
};

const toOrderList = (e: number) => {
  if (!isLogin.value)
    return Taro.showToast({
      title: '请先登录',
      icon: 'none',
    });
  Taro.navigateTo({
    url: `/pages/users/order_list/index?type=${e}`,
  });
};

const userMenuList = ref([
  {
    label: '账户明细',
    url: '/pages/users/account/index',
    icon: 'http://p0.meituan.net/csc/104f787b7cc5582868be46ff52475ecf7084.png',
  },
  {
    label: '后结订单',
    url: '/pages/users/pending_order/index',
    icon: 'http://p0.meituan.net/csc/68d3f1f1ea375897a2b918851199b6546322.png',
  },
  {
    label: '我的推广',
    url: '/pages/users/distribution/index',
    icon: 'http://p0.meituan.net/csc/950814cc0ed1289f170e8612fab597cd5310.png',
  },
  {
    label: '联系客服',
    type: 333,
    url: '/pages/users/account/index',
    icon: 'http://p0.meituan.net/csc/ddd4b6ff4271ec05ced60db0aee1e9548383.png',
  },
  {
    label: '设置',
    url: '/pages/users/setting/index',
    icon: 'http://p0.meituan.net/csc/1d8e6b328d384ff042c282976b82feec6005.png',
  },
]);

const clickLogin = () => {
  // isShowLogin.value = true
  Taro.redirectTo({
    url: '/pages/users/login/index',
  });
};

const toPage = (url: string) => {
  Taro.navigateTo({
    url: url,
  });
};

const scanCode = () => {
  Taro.scanCode({
    onlyFromCamera: true,
    scanType: ['qrCode'],
    success: async data => {
      try {
        await bindParent({
          uid: data.result,
        });
        Taro.showToast({
          title: '绑定成功',
          icon: 'none',
        });
      } catch (error) {
        Taro.showToast({
          title: error.msg,
          icon: 'none',
        });
      }
    },
  });
};
</script>

<style lang="scss">
@import './index.scss';
</style>
