<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 justify-center items-center text-center">
      <view>
        <view class="text-[#CFAA32]">豆子</view>
        <view class="text-[#ffc300] text-[35px] font-bold">{{
          userInfo.data?.pulse || 0
        }}</view>
      </view>
      <view class="line"></view>
      <view>
        <view class="text-[#CFAA32]">积分</view>
        <view class="text-[#ffc300] text-[35px] font-bold">{{
          userInfo.data?.integral || 0
        }}</view>
      </view>
    </view>
    <view class="container">
      <!--我的订单-->
      <view class="border-box bg-[#fff] p-[30px]">
        <view class="flex justify-between items-center">
          <view class="text-[#333333]">我的订单</view>
          <view
            class="flex text-[#c9c9c9] items-center"
            @click="toOrderList(0)">
            <view class="text-[25px]">查看全部</view>
            <ArrowRight size="10" />
          </view>
        </view>
        <view class="flex justify-between text-[#666] pl-[30px] pr-[30px]">
          <view
            class="mt-[30px] flex flex-col items-center"
            @click="toOrderList(1)">
            <IconFont
              name="http://p0.meituan.net/csc/9943f6c938fc0e310141a2b99d5bde6617483.png"
              size="40" />
            <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="40" />
            <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="40" />
            <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="40" />
            <view class="mt-[15px] text-[25px] text-[#333333]">已失效</view>
          </view>
        </view>
      </view>

      <!--  我的服务  -->
      <view class="user-center" v-if="isLogin">
        <view class="text-[#333333]">我的服务</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="40" :name="item.icon"></IconFont>
              <view class="label">{{ item.label }}</view>
            </view>
            <button v-else class="kf-btn" open-type="contact">
              <IconFont class="IconFont" size="40" :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]">商家服务</view>
        <nut-grid :gutter="0" :border="false">
          <nut-grid-item
            :border="false"
            v-if="userInfo.data.permission.dd"
            text="点单"
            @click="toPage('/pages/admin/add_order/index')">
            <IconFont
              size="40"
              name="http://p0.meituan.net/csc/72a389ac6a441061fd534b96644c431b7839.png"></IconFont>
          </nut-grid-item>
          <nut-grid-item
            :border="false"
            v-if="userInfo.data.permission.hx"
            text="订单核销"
            @click="toPage('/pages/admin/verify/index')">
            <IconFont
              size="40"
              name="http://p1.meituan.net/csc/c236a8b7a73178da25218e1fb59a96f06610.png"></IconFont>
          </nut-grid-item>
          <nut-grid-item
            :border="false"
            v-if="userInfo.data.permission.tj"
            text="订单统计"
            @click="toPage('/pages/admin/order_manage/index')">
            <IconFont
              size="40"
              name="http://p0.meituan.net/csc/bd9aca457a109b4d69a692a9109a73ed9045.png"></IconFont>
          </nut-grid-item>
          <nut-grid-item
            :border="false"
            v-if="userInfo.data.permission.tx"
            text="收益提现"
            @click="toPage('/pages/admin/withdrawal/index')">
            <IconFont
              size="40"
              name="http://p0.meituan.net/csc/f85d7dc1bf9eda8977e9089b260a586b7440.png"></IconFont>
          </nut-grid-item>
        </nut-grid>
      </view>

      <!--    版权    -->
      <view class="text-[#999999] mt-5 text-[20px] text-center">
        <view>鑫瓴科技版权所有</view>
        <view>v4.0.0</view>
      </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/333f2ec6a76c1fb2e442d277f8b99d5e2853.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">
.appUser {
  box-sizing: border-box;
  background-color: #f8f8f8;
  height: 100%;
  background-image: url('http://p0.meituan.net/csc/f44bb11463e3c538c307d7ce4b303bec33520.png');
  background-size: 100% 500px;
  background-repeat: no-repeat;
  position: relative;
  padding-top: 180px;
  color: var(--nut-grid-item-text-color, var(--nut-title-color2, #666666));
}

.user-center-card__header__avatar {
  img {
    border-radius: 50%;
  }
}

.user-center-card__header__info__phone {
  color: #737373;
  font-size: 25px;
}

.user-center-card__header__transparent {
  padding-left: 30px;
  background-color: transparent;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  text-align: left;
  padding-right: 20px;

  .user-center-card__header__info {
    margin-left: 20px;
    width: 400px;
    color: #333;
    font-weight: bolder;
  }
}

.container {
  position: absolute;
  top: 500px;
}

.cell-card {
  box-sizing: border-box;
  background-color: #fff;
  padding: 30px;

  .center {
    display: flex;
    justify-content: space-between;
    color: #666;
    padding: 0 30px;

    .center-t {
      margin-top: 30px;
      display: flex;
      flex-direction: column;
      align-items: center;

      .center-text {
        margin-top: 15px;
      }
    }
  }
}

.user-center {
  background-color: #fff;
  margin: 20px 0px;
  padding: 20px;

  -nut-grid-item-text-color: #333;

  .box {
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 20px;
    box-sizing: border-box;
    line-height: 1.5;

    .box-mini {
      display: flex;
      box-sizing: border-box;
      flex-direction: column;
      align-items: center;

      .label {
        font-size: 25px;
        margin-top: 10px;
        color: #333333;
      }

      image {
        width: 80px;
        height: 80px;
      }
    }
  }
}

.mer-box {
  background-color: #fff;
  margin: 20px;
  width: 100%;
}

.user-acc {
  background-image: url('http://p0.meituan.net/csc/a74c44a7af541f01efbcc6fb023e6e09132712.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 95%;
  height: 150px;
  margin: 60px auto;

  .line {
    width: 1px;
    height: 50px;
    background-color: #ffc300;
    margin: 0 100px;
  }
}

.kf-btn {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  font-size: 25px;
  color: #333333;
  line-height: 1;

  .IconFont {
    margin-bottom: 13px;
  }

  &::after {
    border: none;
    background: transparent;
    line-height: 1;
  }
}
</style>
