<template>
  <view class="app">
    <view
      class="user-center-card__header__transparent"
      v-if="isLogin"
      :style="{ width: isLogin ? '100%' : '70%' }"
    >
      <view class="user-center-card__header__avatar">
        <nut-avatar size="large">
          <img :src="userInfo.data?.avatarUrl" />
        </nut-avatar>
      </view>
      <view class="user-center-card__header__info">
        <view
          class="user-center-card__header__info__name"
          @click="toPage('/pages/users/user_setting/index')"
          >{{ userInfo.data?.nickName }}
        </view>
        <view v-if="!userInfo.data?.phone">
          <nut-button
            size="mini"
            open-type="getPhoneNumber"
            @getphonenumber="getphonenumber"
            >点击绑定手机号
          </nut-button>
        </view>
      </view>
      <view class="rightIcon">
        <Scan style="margin-right: 20px" @click="scanCode" size="22" />
        <button v-if="isLogin" open-type="contact">
          <Message
            color="#666666"
            style="margin-right: 20px"
            @click="toSetting"
            size="22"
          />
        </button>

        <Setting style="margin-right: 20px" @click="toSetting" size="22" />
      </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="container">
      <!--我的订单-->
      <view class="cell-card">
        <view class="top">
          <view>我的订单</view>
          <view class="sub" @click="toOrderList(0)">
            <view>全部订单</view>
            <ArrowRight />
          </view>
        </view>
        <view class="center">
          <view class="center-t" @click="toOrderList(1)">
            <!-- <Order size="25px"/> -->
            <IconFont
              name="http://article.biliimg.com/bfs/article/131eda0add8662808d97ffb1191d19bf3e420647.png"
              size="40"
            />
            <view class="center-text">待付款</view>
          </view>
          <view class="center-t" @click="toOrderList(2)">
            <!-- <Clock size="25px"/> -->
            <IconFont
              name="http://article.biliimg.com/bfs/article/002434c9ed4774cb732517eb27e0ff547a41c606.png"
              size="40"
            />
            <view class="center-text">待使用</view>
          </view>
          <view class="center-t" @click="toOrderList(3)">
            <!-- <Shop size="25px"/> -->
            <IconFont
              name="http://article.biliimg.com/bfs/article/7c2ca0228180fe5f3b1d74b0043d80e76c42eb7d.png"
              size="40"
            />
            <view class="center-text">已使用</view>
          </view>
          <view class="center-t" @click="toOrderList(4)">
            <!-- <Del size="25px"/> -->
            <IconFont
              name="http://article.biliimg.com/bfs/article/c4f4e069dddfa7104f794a46a759a7ed478b81ea.png"
              size="40"
            />
            <view class="center-text">已失效</view>
          </view>
        </view>
      </view>

      <!--  我的服务  -->
      <view class="user-center" v-if="isLogin">
        <view>我的服务</view>
        <view class="box">
          <view
            class="box-mini"
            v-for="(item, idx) in userMenuList"
            :key="idx"
            @click="toPage(item.url)"
          >
            <!-- <image :src="item.icon" /> -->
            <IconFont size="40" :name="item.icon"></IconFont>
            <view class="label">{{ item.label }}</view>
          </view>
        </view>
      </view>

      <!--  商家管理  -->
      <view
        class="mer-box"
        v-if="userInfo.data?.bid && userInfo.store_status === 1"
      >
        <nut-grid :gutter="10" :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="require('../../static/user/1-1.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="require('../../static/user/1-2.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="require('../../static/user/1-3.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="require('../../static/user/1-4.png')"
            ></IconFont>
          </nut-grid-item>
        </nut-grid>
      </view>

      <!--    版权    -->
      <!--            <view class="copy">© 2023 </view>-->
    </view>
    <!-- 登录 -->
    <Auth
      :visible="isShowLogin"
      @update:visible="cancelLogin"
      @ok="getUserInfo"
    />
  </view>
</template>

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

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;
  };
  store_status?: number;
  store_name?: string;
}

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

Taro.useDidShow(() => {
  const token = Taro.getStorageSync("token");
  if (token) {
    getUserInfo();
  }
});

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

const getUserInfo = async () => {
  Taro.showLoading({
    title: "加载中",
  });
  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();
  Taro.hideLoading();
};

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/pending_order/index",
    icon: require("../../static/user/dd.png"),
  },
  {
    label: "我的账户",
    url: "/pages/users/account/index",
    icon: "http://jdt168.com/uploads/default/20220829/e819815623276fdbb9a54d685292e5c7.png",
  },
  // {
  //     id: 2,
  //     label: "商家入驻",
  //     url: "/pages/users/account/index",
  //     icon: "http://jdt168.com/uploads/default/20220829/583fd6cbd729b24eab9c3cae20ae694d.png",
  // },
  {
    label: "我的推广",
    url: "/pages/users/distribution/index",
    icon: "http://jdt168.com/uploads/default/20220829/73656833c1d849c050638f9ee9903b9d.png",
  },
  // {
  //   label: "聚合积分",
  //   url: "/pages/users/integral/index",
  //   icon: require("../../static/jhjf.png"),
  // },
]);

const toSetting = () => {
  Taro.navigateTo({
    url: "/pages/users/setting/index",
  });
};

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">
.app {
  box-sizing: border-box;
  background-color: #f5f5f5;
  height: 100vh;
  background-image: url("https://cdn-we-retail.ym.tencent.com/miniapp/template/user-center-bg-v1.png");
  background-size: auto 40%;
  background-repeat: no-repeat;
  position: relative;
  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__transparent {
  position: absolute;
  left: 30px;
  top: 200px;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  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;
  }

  .rightIcon {
    height: 100px;
    margin: auto;
    display: flex;
    justify-content: flex-start;
    // align-items: center;
    button {
      padding: 0 !important;
      margin: 0 !important;
      background: transparent;
      -webkit-tap-highlight-color: transparent;
      overflow: hidden;
      position: relative;
      top: -13px;
    }

    button::after {
      border: none;
      background: transparent;
    }
  }
}

.container {
  position: absolute;
  top: 350px;
  width: 710px;
}

.cell-card {
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 20px;
  margin: 20px;
  padding: 30px;
  width: 710px;

  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .sub {
      display: flex;
      color: #c9c9c9;
      align-items: center;
    }
  }

  .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;
  border-radius: 20px;
  margin: 20px;
  padding: 20px;
  width: 710px;
  box-sizing: border-box;

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

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

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

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

.mer-box {
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 20px;
  margin: 20px;
  width: 710px;
}
</style>
