<template>
  <!-- 状态栏 -->
  <view class="status_bar"></view>

  <!-- 导航栏 -->
  <uni-nav-bar :border="false" :title="navTitle" rightWidth="200rpx">
    <template #right>
      <view @tap="switchTerrace" class="switchTerrace">
        <jx-icon icon="qiehuan" color="#2dd091" />
        <text style="color: #2dd091"> 切换平台</text>
      </view>
    </template>
  </uni-nav-bar>

  <view class="phone-login-root">
    <view class="top-mask"></view>
    <view class="img">
      <image @tap="switchTerrace" :src="log" mode="scaleToFill" />
    </view>

    <view class="center-root">
      <view class="tab-root">
        <text class="icon">|</text>
        <text
          class="tab-item"
          v-for="(item, i) in loginTypeList"
          :key="i"
          :class="{ active: i == activeItem }"
          @tap="activeItem = i"
          >{{ item.title }}</text
        >
      </view>

      <swiper
        :duration="200"
        class="swiper"
        @change="change"
        :current="activeItem"
      >
        <swiper-item>
          <view class="form-root">
            <code-login @codeLogin="codeLogin" />
          </view>
        </swiper-item>
        <swiper-item>
          <view class="form-root">
            <pas-word-login @pwdLogin="pwdLogin" />
          </view>
        </swiper-item>
      </swiper>

      <view class="copyright-root">
        <view
          class="center"
          :class="{ 'center-active': store.state.serveInfo.isAgreementIf }"
        >
          <label>
            <checkbox-group @change="agreement">
              <checkbox
                :checked="isAgreement"
                value="cb"
                color="#2dd091"
                style="transform: scale(0.7); border-radius: 50%"
              />我已阅读并同意
            </checkbox-group>
          </label>
          <text class="text" @tap="user">《用户协议》</text>
          <text class="text" @tap="privacy">《隐私协议》</text>

          <view
            class="lab"
            :class="{ 'lab-active': store.state.serveInfo.isAgreementIf }"
            >请勾选同意后在进行登录</view
          >
        </view>
      </view>
    </view>

    <view class="info">欢迎进入京西到家商家版</view>
  </view>

  <!-- 公共组件 -->
  <jx-loading />
</template>

<script lang="ts" setup>
import jxIcon from '@/components/jx-icon/jx-icon.vue'
import CodeLogin from './codeLogin/codeLogin.vue'
import PasWordLogin from './paswordLogin/paswordLogin.vue'
import weixinFn from './weixin'
import { store } from '@/store'
const {
  loginTypeList, // 切换tab
  activeItem, // tab高亮
  codeLogin, // 验证码登录
  pwdLogin, // 密码登录
  user, // 用户协议
  privacy, // 隐私协议
  change, // 切换
  log, // log
  switchTerrace, // 切换平台
  navTitle, // 导航栏标题
  agreement, // 是否同意协议
  isAgreement, // 是否同意协议
} = weixinFn()
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
<style>
page {
  background-color: #fff;
}
</style>