<template>
  <view class="pb-40rpx">
    <!-- 头部 -->
    <!-- <view :style="[{ opacity: nav0pacity }]" class="h-0 transition-opacity duration-20 z-900 fixed">
      <u-navbar :border-bottom="false" :is-back="false" title="个人中心"> </u-navbar>
    </view> -->
    <view class="my_bg">
      <view class="status_bar"></view>
      <view class="my_bg_cont flex justify-between px-25rpx pt-60rpx">
        <view @tap="$u.routeAuth('/pageA/personal/personal')">
          <cu-avatar size="120" :src="user.avatar ? user.avatar : ''"></cu-avatar>
          <!-- <u-avatar size="120" :src="user.avatar?user.avatar:'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg'"></u-avatar> -->
        </view>
        <view class="flex-1 ml-base">
          <view class="flex items-center justify-between text-xl text-txBase font-extrabold">
            <view class="flex items-center">
              <block v-if="isLogin">
                <view class="mr-30rpx line-1 w-290rpx">{{ user.nickname ? user.nickname : user.phone }}</view>
                <image v-if="user.is_vip" class="w-58rpx h-58rpx" src="/static/svg/svip.svg" mode=""></image>
              </block>
              <view v-else class="mr-30rpx w-260rpx one-ellipsis">游客</view>
            </view>
            <view @tap="$u.routeAuth('/pageA/news/index')" class="mx-base -mt-30rpx relative">
              <u-icon name="chat" size="48"></u-icon>
              <block v-if="isLogin && news_num > 0">
                <u-badge :is-dot="true" size="16" :offset="[0, 2]" class="badge"></u-badge>
              </block>
            </view>
          </view>
          <!-- 已登录 -->
          <block v-if="isLogin">
            <view class="flex items-center justify-between mt-10rpx text-txBase text-lg">
              <view class="flex-1">邀请码:{{ user.code ? user.code : '' }}</view>
              <view class="w-200rpx flex-none">
                <!-- <view @tap="copy" class="">复制</view> -->
              </view>
            </view>
            <view class="flex items-center justify-between mt-10rpx text-txBase text-lg">
              <!-- <view class="flex-1" v-if="walletShow">余额: <text class="font-medium">{{ balance.balance }}</text></view> -->
              <view class="flex-1" @tap="$u.routeAuth('/pages/points/record')">积分: <text class="font-medium">{{ user.points }}</text></view>
            </view>
            <!-- <view>
              <view class="flex">
                <view>邀请码:{{ user.code ? user.code : '' }}</view>
                <view v-if="walletShow">余额: <text class="font-medium">{{ balance.balance }}</text></view>
              </view>
              <view class="flex">
                <view @tap="copy" class="mr-100rpx">复制</view>
                <view class="mr-60rpx">积分:<text class="font-medium">{{ user.points }}</text></view>
              </view>
            </view> -->
          </block>
          <block v-else>
            <view @tap="$u.route('/pages/login/index')" class="mt-40rpx text-40rpx">去登陆</view>
          </block>
        </view>
      </view>
    </view>
    <!-- 已是会员广告位 -->
    <block v-if="!isVerify">
      <block v-if="show_vip_banner && user.is_vip == true">
        <view @tap="$u.routeAuth('/pageB/svip/index')" :style="[{ backgroundImage: 'url(' + show_vip_banner + ')' }]"
          class="bg_advertisement mt flex items-center justify-end px-30rpx">
        </view>
      </block>
      <!-- 还未成为会员 -->
      <block v-if="become_vip_banner && user.is_vip == false">
        <view @tap="$u.routeAuth('/pageB/svip/index')" :style="[{ backgroundImage: 'url(' + become_vip_banner + ')' }]"
          class="bg_advertisements mt px-30rpx">
        </view>
      </block>
    </block>
    <!--  -->
    <view class="w-710rpx bg-white rounded-xs m-auto mt-base">
      <view class="flex items-center justify-between p-base border-b border-txBorder">
        <view class="text-lg text-txBase font-extrabold">我的订单</view>
        <view class="text-md text-txBase" @tap="$u.routeAuth('/pageA/user_order/index', { type: 0 })">查看全部</view>
      </view>
      <view class="flex items-center px-base justify-around py-26rpx">
        <view class="flex items-center justify-center flex-col text-txBase text-md"
          @tap="$u.routeAuth('/pageA/user_order/index', { type: 1 })">
          <view class="flex items-start relative">
            <image class="w-48rpx h-48rpx" src="/static/images/user/pending_payment.png" mode="scaleToFill"></image>
            <block v-if="isLogin && order_count.pending_orders_count > 0">
              <view
                class="absolute left-30rpx -top-18rpx w-32rpx h-32rpx rounded-full bg-bgSubtitle text-white text-sm text-center leading-32rpx">
                {{ order_count.pending_orders_count }}
              </view>
            </block>
          </view>
          <view>待付款</view>
        </view>
        <view class="flex items-center justify-center flex-col text-txBase text-md"
          @tap="$u.routeAuth('/pageA/user_order/index', { type: 2 })">
          <view class="flex items-start relative">
            <image class="w-48rpx h-48rpx" src="@/static/images/user/received.png" mode=""></image>
            <block v-if="isLogin && order_count.unreceived_orders_count > 0">
              <view
                class="absolute left-30rpx -top-18rpx w-32rpx h-32rpx rounded-full bg-bgSubtitle text-white text-sm text-center leading-32rpx">
                {{ order_count.unreceived_orders_count }}
              </view>
            </block>
          </view>
          <view>待收货</view>
        </view>
        <view class="flex items-center justify-center flex-col text-txBase text-md"
          @tap="$u.routeAuth('/pageA/user_order/index', { type: 3 })">
          <view class="flex items-start relative">
            <image class="w-48rpx h-48rpx" src="@/static/images/user/evaluated.png" mode=""></image>
            <!-- <block v-if="isLogin">
              <view
                class="absolute left-30rpx -top-18rpx w-32rpx h-32rpx rounded-full bg-bgSubtitle text-white text-sm text-center leading-32rpx">
                3</view>
            </block> -->
          </view>
          <view>已完成</view>
        </view>
        <view @tap="$u.routeAuth('/pageA/after_sale/index')"
          class="flex items-center justify-center flex-col text-txBase text-md">
          <view class="flex items-start relative">
            <image class="w-48rpx h-48rpx" src="@/static/images/user/sfter_sale.png" mode=""></image>
            <!-- <view  class="absolute left-30rpx -top-18rpx w-32rpx h-32rpx rounded-full bg-bgSubtitle text-white text-sm text-center leading-32rpx">3</view> -->
          </view>
          <view>售后</view>
        </view>
      </view>
    </view>
    <!--  -->
    <view class="w-710rpx bg-white m-auto mt-base rounded-xs">
      <view class="flex items-center justify-between p-base border-b border-txBorder">
        <view class="text-lg text-txBase font-extrabold">常用工具</view>
        <!--  <view class="text-md text-txBase ">查看全部</view> -->
      </view>
      <view class="grid grid-cols-4 py-base">
        <!--   <view
          @tap="$u.routeAuth('/pageA/user_sign/index')"
          class="my-base flex items-center justify-center flex-col text-md text-txBase"
          v-if="!isVerify"
        >
          <image class="w-58rpx h-58rpx" src="@/static/images/user/sign_in.png" mode=""></image>
          <view class="mt-5rpx">签到积分</view>
        </view> -->
        <view @tap="$u.route('/pages/web_view/index', { url: config.article_profit })"
          class="my-base flex items-center justify-center flex-col text-md text-txBase">
          <image class="w-58rpx h-58rpx" src="@/static/images/user/commission.png" mode=""></image>
          <view class="mt-5rpx">返利说明</view>
        </view>
        <view @tap="$u.routeAuth('/pageA/collection/index')"
          class="my-base flex items-center justify-center flex-col text-md text-txBase">
          <image class="w-58rpx h-58rpx" src="@/static/images/user/my_collection.png" mode=""></image>
          <view class="mt-5rpx">我的收藏</view>
        </view>
        <view @tap="$u.routeAuth('/pageA/address/index', { type: 1 })"
          class="my-base flex items-center justify-center flex-col text-md text-txBase">
          <image class="w-58rpx h-58rpx" src="@/static/images/user/address_management.png" mode=""></image>
          <view class="mt-5rpx">地址管理</view>
        </view>
        <view @tap="$u.routeAuth('/pageA/reset_password/index')"
          class="my-base flex items-center justify-center flex-col text-md text-txBase">
          <image class="w-58rpx h-58rpx" src="@/static/images/user/password_modification.png" mode=""></image>
          <view class="mt-5rpx">密码修改</view>
        </view>
        <view @tap="$u.routeAuth('/pageA/coupon/coupon')"
          class="my-base flex items-center justify-center flex-col text-md text-txBase">
          <image class="w-58rpx h-58rpx" src="@/static/images/user/my_coupon.png" mode=""></image>
          <view class="mt-5rpx">优惠券</view>
        </view>
        <view @tap="$u.routeAuth('/pageA/history/index')"
          class="my-base flex items-center justify-center flex-col text-md text-txBase">
          <image class="w-58rpx h-58rpx" src="@/static/images/user/browse_records.png" mode=""></image>
          <view class="mt-5rpx">浏览记录</view>
        </view>
        <view @tap="$u.routeAuth('/pageA/fan_list/index')"
          class="my-base flex items-center justify-center flex-col text-md text-txBase">
          <image class="w-58rpx h-58rpx" src="@/static/images/user/fan_list.png" mode=""></image>
          <view class="mt-5rpx">粉丝列表</view>
        </view>
        <view @tap="$u.routeAuth('/pageA/invite_friends/index')" v-if="!isVerify"
          class="my-base flex items-center justify-center flex-col text-md text-txBase">
          <image class="w-58rpx h-58rpx" src="@/static/images/user/share_friends.png" mode=""></image>
          <view class="mt-5rpx">分享好友</view>
        </view>
      </view>
    </view>

    <view class="w-710rpx bg-hex-f08003 text-white px-base m-auto rounded-xs mt-base text-center py-26rpx text-46rpx" v-if="is_company" @tap="$u.routeAuth('/pageB/select_store/index')">
      帮用户下单
    </view>
    <!--  -->
    <view class="w-710rpx bg-white px-base m-auto rounded-xs mt-base">
      <!-- 销售端 -->
      <!-- <view @tap="$u.routeAuth('/pageB/index/index')"
        class="flex justify-between items-center py-base border-b border-txBorder" v-if="is_company">
        <view class="flex items-center">
          <image class="w-32rpx h-32rpx" src="/static/images/user/my_account.png" mode=""></image>
          <view class="text-txBase text-lg ml-base">员工中心</view>
        </view>
        <view>
          <u-icon color="#383838" name="arrow-right" size="32"></u-icon>
        </view>
      </view> -->
      <!-- #ifndef  MP-WEIXIN -->
      <view class="flex justify-between items-center py-base " @tap="$u.route(`/pages/web_view/index?url=${service}`)">
        <view class="flex items-center">
          <image class="w-32rpx h-32rpx" src="/static/images/user/service.png" mode=""></image>
          <view class="text-txBase text-lg ml-base">联系客服</view>
        </view>
        <view>
          <u-icon color="#383838" name="arrow-right" size="32"></u-icon>
        </view>
      </view>
      <!-- #endif -->
      <!-- #ifdef  MP-WEIXIN -->
      <view class=" py-base ">
        <button open-type="contact" hover-class="none" class="flex content-btn justify-between items-center w-full">
          <view class="flex items-center">
            <image class="w-32rpx h-32rpx" src="/static/images/user/service.png" mode=""></image>
            <view class="text-txBase text-lg ml-base">联系客服</view>
          </view>
          <view>
            <u-icon color="#383838" name="arrow-right" size="32"></u-icon>
          </view>
        </button>
      </view>
      <!-- #endif -->
      <view @tap="$u.route('/pages/web_view/index', { url: config.about_us })"
        class="flex justify-between items-center py-base border-t border-txBorder"
        :class="isLogin ? 'border-b border-txBorder' : ''">
        <view class="flex items-center">
          <image class="w-32rpx h-32rpx" src="/static/images/user/about_us.png" mode=""></image>
          <view class="text-txBase text-lg ml-base">关于我们</view>
        </view>
        <view>
          <u-icon color="#383838" name="arrow-right" size="32"></u-icon>
        </view>
      </view>
      <!-- <view @tap="$u.route('/pages/register/index')" class="flex justify-between items-center py-base border-b border-txBorder">
        <view class="flex items-center">
          <image class="w-32rpx h-32rpx" src="/static/images/user/registered_account.png" mode=""></image>
          <view class="text-txBase text-lg ml-base">注册账户</view>
        </view>
        <view>
          <u-icon color="#383838" name="arrow-right" size="32"></u-icon>
        </view>
      </view> -->
      <!-- <view
        @tap="$u.routeAuth('/pages/switch_account/index')"
        class="flex justify-between items-center py-base border-txBorder"
        :class="isLogin ? 'border-b' : ''"
      >
        <view class="flex items-center">
          <image class="w-32rpx h-32rpx" src="/static/images/user/switch_accounts.png" mode=""></image>
          <view class="text-txBase text-lg ml-base">切换账户</view>
        </view>
        <view>
          <u-icon color="#383838" name="arrow-right" size="32"></u-icon>
        </view>
      </view> -->
      <view v-if="isLogin" @tap="$u.routeAuth('/pages/feedback/index')"
        class="flex justify-between items-center py-base ">
        <view class="flex items-center">
          <image class="w-32rpx h-32rpx" src="/static/images/user/yjfk-icon.png" mode=""></image>
          <view class="text-txBase text-lg ml-base">意见反馈</view>
        </view>
        <view>
          <u-icon color="#383838" name="arrow-right" size="32"></u-icon>
        </view>
      </view>

      <!-- <view v-if="isLogin" @tap="onDestroy" class="flex justify-between items-center py-base">
        <view class="flex items-center">
          <image class="w-32rpx h-32rpx" src="/static/images/user/zx-icon.png" mode=""></image>
          <view class="text-txBase text-lg ml-base">注销</view>
        </view>
        <view>
          <u-icon color="#383838" name="arrow-right" size="32"></u-icon>
        </view>
      </view> -->
    </view>
    <!-- <block v-if="isLogin">
      <view class="text-lg text-txBase w-710rpx h-100rpx bg-white m-auto rounded-xs mt-base text-center leading-100rpx" @tap="LogOut">退出登录</view>
    </block> -->
    <view class="mt-40rpx">
      <view class="flex justify-center items-center">
        <view @tap="$u.route('/pages/web_view/index', { url: config.user_promotion_agreement })">服务协议</view>
        <view class="mx-20rpx">|</view>
        <view @tap="$u.route('/pages/web_view/index', { url: config.user_hide_agreement })">隐私协议</view>
      </view>
      <!-- 客服电话 -->
      <view @tap="getCall(tipsValue.service_phone)" v-if="tipsValue.service_phone" class="text-center text-txBase text-txBase my-10rpx">客服电话: {{tipsValue.service_phone}}</view>
      <view v-if="tipsValue.wechat" class="text-center text-txBase text-txBase my-10rpx">微信号: {{tipsValue.wechat}}</view>
      <!-- #ifdef APP-PLUS -->
      <view class="text-center text-md text-txBase">版本号:{{ version }}</view>
      <!-- #endif -->
    </view>

    <!-- 提示框 -->
    <cu-modal :title="modelData.title" v-model="showModel" :content="modelData.content" show-cancel-button async-close
      @confirm="onConfirm"></cu-modal>
  </view>
</template>

<script>
  import uniCopy from '@/utils/uni-copy';
  import CartMixin from '@/pages/shop_cart/mixin';
  export default {
    mixins: [CartMixin],
    data() {
      return {
        become_vip_banner: '', //非会员背景图
        show_vip_banner: '', //会员背景图
        modelData: {
          type: '',
          title: '',
          content: '',
        },
        showModel: false,
        scrollNumber: 0,
        tipsValue: {},
        // service: process.env.VUE_APP_SERVICE,
        version: process.env.VUE_APP_VERSION,
      };
    },
    onPageScroll(e) {
      this.scrollNumber = e.scrollTop;
    },
    computed: {
      service() {
        const clien = process.env.VUE_APP_SERVICE
        const user = this.$store.getters.user ?? {}
        const phone = user?.phone
        const name = user?.nickname ?? phone ?? '访客'
        return `${clien}?u_cust_name=${name}&u_cust_phone=${phone}&u_cust_id=${phone}`
      },

      user() {
        return this.$store.getters.user ?? {};
      },
      walletShow() {
        return this.$store.getters.hiddenConfig?.wallet_show ?? true;
      },
      isVerify() {
        return this.$store.getters.hiddenConfig?.is_verify ?? false;
      },
      balance() {
        return this.$store.getters.user?.balance ?? {};
      },
      config() {
        return this.$store.getters.article ?? {};
      },
      nav0pacity() {
        const option = (this.scrollNumber - 10) / 20;
        return option >= 1 ? 1 : option;
      },
      order_count() {
        return this.$store.getters.order_count ?? {};
      },
      //是否为店员
      is_company() {
        return this.user?.is_company ?? false
      }
    },
    onShow() {
      this.$store.dispatch('user/getOrderNum');
      this.$store.dispatch('user/getUserInfo');
    },
    onLoad() {
      this.getNotmunber();
      this.getMunber();
      this.getTips()
    },
    methods: {
      async getTips() {
        let {
          values
        } = await this.$api.get('/v1/configs-custom', {
          params: {
            keys: ['service_phone', 'wechat']
          }
        })
        this.tipsValue=values
      },
      //拨打电话
      getCall(val) {
        uni.makePhoneCall({
          phoneNumber: val, //仅为示例
        });
      },
      //获取不是会员的背景图
      async getNotmunber() {
        let resDate = await this.$api.get('/v1/ads', {
          params: {
            keys: 'wechat_mini_become_vip_banner',
          },
        });
        this.become_vip_banner = resDate.wechat_mini_become_vip_banner[0]?.image ?? '';
      },
      //获取会员的图片
      async getMunber() {
        let resDate = await this.$api.get('/v1/ads', {
          params: {
            keys: 'wechat_mini_show_vip_banner',
          },
        });
        this.show_vip_banner = resDate.wechat_mini_show_vip_banner[0]?.image ?? '';
      },
      //退出登录
      LogOut() {
        this.modelData = {
          type: 'logout',
          title: '确定退出登录？',
          content: '退出后，需要重新登录授权',
        };

        this.showModel = true;
      },
      //注销
      onDestroy() {
        this.modelData = {
          type: 'destroy',
          title: '确定注销？',
          content: '注销后将会删除账号所有数据请谨慎操作',
        };
        this.showModel = true;
      },
      onConfirm() {
        if (this.modelData.type == 'logout') {
          this.$store.dispatch('user/logout');
        } else if (this.modelData.type == 'destroy') {
          this.$u.toast('注销申请成功，十五个工作日内将自动注销');
        }
        uni.removeTabBarBadge({
          index: 2,
        });
        this.showModel = false;
      },
      //复制
      copy() {
        uniCopy({
          content: this.user.code ?? '',
          success: (res) => {
            this.$u.toast(res);
          },
          error: (e) => {
            this.$u.toast(e);
          },
        });
      },
    },
  };
</script>

<style lang="scss" scoped>
  .border-t {
    border-top: 1rpx solid #E5E5E5;
  }

  .content-btn {
    padding: 0 !important;
    margin: 0;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
    margin-left: initial;
    transform: translate(0upx, 0upx);
    margin-right: initial;
    appearance: none;
  }

  .mt {
    margin-top: 20rpx !important;
  }

  .status_bar {
    height: var(--status-bar-height);
    width: 100%;
  }

  .my_bg {
    /*  #ifdef  MP-WEIXIN */
    padding-top: 90rpx;
    /*  #endif  */
    background: linear-gradient(0deg, rgba(241, 239, 242, 1) 0%, rgba(188, 230, 213, 1) 100%, rgba(121, 179, 156, 1) 100%, rgba(211, 237, 228, 1) 100%);
  }

  .my_bg_cont {
    width: 710rpx;
    height: 273rpx;
    margin: 0 auto;
    background-image: url('/static/images/user/my_bg.png');
    background-size: 100%;
  }

  .badge {
    @apply bg-badge;
  }

  .bg_advertisement {
    width: 710rpx;
    height: 158rpx;
    margin: 0 auto;
    // background-image: url('../../static/images/user/user_advertisement.png');
    background-size: 100% 100%;
  }

  .bg_advertisements {
    width: 710rpx;
    height: 158rpx;
    margin: 0 auto;
    // background-image: url('../../static/images/user/become_munber.png');
    background-size: 100% 100%;
  }

  .user_btn {
    width: 145rpx;
    height: 53rpx;
    text-align: center;
    line-height: 53rpx;
    background: linear-gradient(90deg, rgba(245, 222, 181, 1) 0%, rgba(241, 201, 129, 1) 100%);
    box-shadow: 0px 2rpx 4rpx rgba(0, 0, 0, 0.5);
    border-radius: 90rpx;
    @apply text-md text-txBase;
  }
</style>
