<template>
  <view class="content">
    <yi-nav-header
      :show-left="true"
      :left-content-width="40"
      is-height
      nav-background-color="linear-gradient(to right, #ffac30, #fc3d42)"
    >
      <view slot="left">
        <u-icon name="bag" size="40" color="#fff"></u-icon>
      </view>
      <view slot="center" style="flex: 1">
        <u-search placeholder="搜索" :show-action="false" :clearabled="false" shape="round"></u-search>
      </view>
    </yi-nav-header>

    <yi-user-avatar
      :size="120"
      level-bg-color="blue"
      sex-bg-color="tomato"
      :default-avatar="require('../../../static/logo.png')"
    ></yi-user-avatar>
    <view class="button-group">
      <button
        :disabled="user.isAuth"
        :style="{ '--primary-color': primaryColor }"
        class="button-theme"
        open-type="getPhoneNumber"
        @tap.stop="$store.dispatch('user/loginByPhone', 'login')"
        @getphonenumber="handleLoginByPhone"
      >
        手机号一键登录
      </button>
      <button
        :disabled="!user.isAuth"
        :style="{ '--primary-color': primaryColor }"
        @click="$store.dispatch('user/logout')"
        class="button-theme"
      >
        登出
      </button>
      <button :style="{ '--primary-color': primaryColor }" @click="handleAuthorize" class="button-theme">
        检测是否授权头像昵称
      </button>
      <button :style="{ '--primary-color': primaryColor }" @click="handleAuthorizePhone" class="button-theme">
        拦截授权头像昵称和手机号
      </button>
      <button :style="{ '--primary-color': primaryColor }" @click="handleShowLoading" class="button-theme">
        显示 loading
      </button>
    </view>

    <view style="width: 100%">
      <u-cell-group>
        <u-cell-item
          v-for="(demo, index) in demoList"
          :key="index"
          :title="demo.title"
          @click="navigateToPage(demo.url)"
        ></u-cell-item>
      </u-cell-group>
    </view>

    <!-- 授权 -->
    <u-popup v-model="showAuthorize" mode="top">
      <yi-authorize @getUserData="handleAuthorizeIconInfo" @onHideAuthorize="hideAuthorize"></yi-authorize>
    </u-popup>
  </view>
</template>

<script>
import authorize from '../../../mixins/authorize';

import { mapState } from 'vuex';
import { Setting } from '@';
export default {
  mixins: [authorize],
  data() {
    return {
      themeList: ['#ff461f', '#ff4777', '#41ae3c', '#22a2c3'],
      demoList: [
        { title: '活动优惠券列表', url: '/demo/packageMall/activity' },
        { title: '优惠券列表', url: '/demo/packageMall/couponList' },
        { title: '分类列表', url: '/demo/packageMall/categoryList' },
        { title: '商品品牌列表', url: '/demo/packageMall/brandList' },
        { title: '商品列表', url: '/demo/packageMall/goodsList' },
        { title: '商品列表瀑布流', url: '/demo/packageMall/goodsWaterfall' },
        { title: '富文本编辑器', url: '/demo/packageEditor/rich-editor' },
        { title: '文章列表', url: '/demo/packageEditor/post-list' },
        { title: 'mescroll-uni 列表组件局部滚动示例', url: '/demo/pages/list/mescroll-uni-list' },
        { title: 'mescroll-body 列表组件局部滚动示例', url: '/demo/pages/list/mescroll-body-list' },
        { title: '上传示例', url: '/demo/packageDemo/upload' },
      ],
    };
  },
  computed: {
    ...mapState({
      primaryColor: state => state.primaryColor,
      user: state => state.user,
    }),
  },
  async onLoad() {
    // console.log('onload');
    // await this.hello();
    console.log('%c [yi-loading]: ', 'color:#1989fa;', this.$refs['yi-loading']);
    // await this.$store.dispatch('user/wxLoginCode');
  },
  methods: {
    handleAuthorizeIconInfo() {
      this.getUserData(this.todoSth);
    },
    handleAuthorizePhone() {
      // demo/pages/register/register
      this.navigateToPage('/demo/pages/register/register');
    },
    handleAuthorize() {
      this.handleShowAuthorize(this.todoSth);
    },
    todoSth() {
      console.log('%c [已经授权头像了 该干嘛干嘛!]: ', 'color:#1989fa;');
    },
    // 跳转页面
    navigateToPage(url) {
      wx.navigateTo({
        url,
      });
    },
    handleShowLoading() {
      this.$refs['yi-loading'].show();
      setTimeout(() => {
        this.$refs['yi-loading'].hide();
      }, 3000);
    },
    switchTheme(theme) {
      console.log('%c [switchTheme]: ', 'color:#1989fa;', this.$store, theme);
      this.$store.commit('updateState', { primaryColor: theme });
    },
    async handleLoginByPhone($event) {
      const res = await this.$store.dispatch('user/loginByPhone', $event);
      if (res) {
        console.log('手机号登录成功', res);
        if (res?.$user?.weixin) {
          console.log('手机号已绑定微信', res.$user.weixin);
        } else {
          console.log('手机号未绑定微信');
          if (res?.$event) {
            // 绑定微信
            const params = {
              form: {
                bindApp: 'wx_miniapp',
                bindKey: Setting.appId,
                bindData: res.$event.detail.encryptedData,
                bindDataSign: res.$event.detail.iv,
                // 绑定openId/unionId
                bindCode: res.$code,
              },
            };
            console.log('自动绑定微信', params);
            const resBind = await this.$store.dispatch('user/updateBindProfile', params);
            console.log('绑定结果', resBind);
          }
        }
      }
    },
  },
};
</script>

<style lang="scss">
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.section-wrap {
  padding: 10px;
  width: 100vw;
}
.button-group {
  padding: 20rpx;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  button {
    margin: 10rpx;
  }
}
.button-theme {
  background-color: var(--primary-color);
  font-size: 36rpx;
  color: #fff;
  margin-top: 10px;
  &:after {
    border: none;
  }
}
.switch-theme-btn {
  display: flex;
  flex-wrap: wrap;
  .button {
    margin: 5px;
    background-color: #fff;
    font-size: 30rpx;
    color: #fff;
  }
}
.button-theme-mode {
  background: #fafafa;
}
.section-mode {
  padding: 10px;
  width: 100vw;
  text {
    color: #1b1b1b;
  }
}
@media (prefers-color-scheme: dark) {
  /* DarkMode 下的样式 start */
  .button-theme-mode {
    background: #1b1b1b;
    color: #fff;
  }
  .section-mode {
    text {
      color: #fff;
    }
  }
  /* DarkMode 下的样式 end */
}
</style>
