<template>
  <view class="index">
    <capsule :showBorder="true" bgColor="transparent">
      <template v-slot:top>
        <view class="detail-top">
          <view class="top-left">
            <image class="" src="@/static/images/catalogue_icon.png" />
          </view>
          <view class="top-text">团蜂电子名片</view>
        </view>
      </template>
    </capsule>
    <view class="seat"></view>
    <view class="box-bg">
		<!-- <view class="bg"></view> -->
	</view>
    <view class="container">
		<view class="empty-box">
			<image src="@/static/images/empty-card.png" />
			<text>暂未添加名片</text>
		</view>
      <view class="card-btn">
        <button @click="addCard">+&nbsp; &nbsp;&nbsp;新增名片</button>
      </view>
    </view>

    <!-- <view class="contant">
			<view class="header" :style="{ marginTop: top + 'rpx' }">
				<view class="header-icon" @click="openDrawer">
					<image class="" src="@/static/catalogue_icon.png" />
				</view>
				<view class="header-title">团蜂电子名片</view>
			</view>
			<view class="main">
				<view class="card-list"></view>
				<view class="add-card" @click="addCard">
					<view class="card-icon">
						<tui-icon name="plus" :size="24" color="rgb(58, 143, 255)"></tui-icon>
					</view>
					<view class="card-text">新增名片</view>
				</view>
			</view>
			<button open-type="getPhoneNumber" @click="addCard" @getphonenumber="getPhone">点击事件</button>
		</view> -->
    <tui-drawer mode="left" :visible="visible" @close="closeDrawer">
      <view class="d-container" :style="{ marginTop: top + 'rpx' }">
        <view class="d-image">
          <image class="" src="@/static/header_image.png" />
          <text>摘星辰</text>
        </view>
        <view class="quit" @click="quitLogin">退出登录</view>
      </view>
    </tui-drawer>
  </view>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      top: null,
    };
  },
  onLoad() {
    uni.getSystemInfo({
      success: (res) => {
        this.top = res.safeAreaInsets.top * 2;
      },
    });
  },
  methods: {
    //  打开侧边弹框
    openDrawer() {
      this.visible = true;
    },
    //  新增卡片
    addCard() {
      // #ifdef MP-WEIXIN
      wx.login({
        success: (res) => {
          console.log(res);
        },
      });
      // #endif
      uni.navigateTo({
        url: "/pages_module/establish/index",
      });
    },
    getPhone(e) {
      console.log(e);
    },
    // 退出登录
    quitLogin() {
      this.visible = false;
    },
    //  关闭侧边弹框
    closeDrawer() {
      this.visible = false;
    },
  },
};
</script>

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