<template>
  <view class="page-container">
    <!-- 会员卡区域 -->
    <view class="member-card">
      <image :src="config.baseUrl_api + '/fs/static/user_01@2x.png'" class="card-bg" mode="aspectFill">
      </image>
      
      
      <!--      &lt;!&ndash; 绑定/解绑学员 &ndash;&gt;-->
      <!--      <view class="bind-student" @click="handleBindAction">-->
      <!--        <text>{{ isBound ? '切换学员' : '绑定学员' }}</text>-->
      <!--        <image :src="config.baseUrl_api + '/fs/static/bd@2x.png'" class="bind-icon" mode="aspectFit"></image>-->
      <!--      </view>-->
      
      <!-- 用户信息 -->
      <view class="user-section">
        <view class="member-title">
          <view class="member-id">{{ userInfo?.userName }}</view>
          <view class="bind-student" @click="handleBindAction">
            <text>{{ isBound ? '切换学员' : '绑定学员' }}</text>
            <image :src="config.baseUrl_api + '/fs/static/bd@2x.png'" class="bind-icon" mode="aspectFit"></image>
          </view>
        </view>
        
        <view class="user-top">
          <view class="avatar-wrap" @click="showLogoutConfirm">
            <!-- <image class="avatar" v-if="perInfo.photo" :src="config.baseUrl_api + perInfo.photo"
              mode="aspectFill">
            </image> -->
            <image :src="config.baseUrl_api + '/fs/static/tx@2x.png'" class="avatar"
                   mode="aspectFill">
            </image>
          </view>
          <!--          <view class="member-id">{{ userInfo?.userName }}</view>-->
          <view class="user-name">{{ perInfo?.perName }}</view>
        </view>
        
        <view class="user-bottom">
          <!--          <view class="user-name">{{ perInfo?.perName }}</view>-->
          <view class="card-info">
            <view class="info-row">
              <text>会员卡号</text>
              <text>{{ perInfo?.perCode }}</text>
            </view>
            <view class="info-row">
              <text>会员有效期</text>
              <text>{{ perInfo?.perValidDate }}</text>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 已过期印章 -->
      <image v-if="perInfo?.perValidDateFlag == 0" :src="config.baseUrl_api + '/fs/static/end@2x.png'"
             class="expired-stamp" mode="aspectFit">
      </image>
      
      <!-- 卡片右下角按钮 -->
      <view class="card-btns">
        <view class="card-btn" @click="goToPay">
          <text>认证缴费</text>
        </view>
        <view class="card-btn" @click="downCert">
          <text>电子会员证</text>
        </view>
      </view>
    </view>
    
    <!-- 功能按钮卡片 -->
    <view class="func-card">
      <view class="func-list">
        <view class="func-item" @click="goToAuth">
          <view class="func-icon">
            <image :src="config.baseUrl_api + '/fs/static/btn01@2x.png'"></image>
            <!-- <uni-icons type="contact" size="40" color="#1E88E5"></uni-icons> -->
          </view>
          <text class="func-text">人员信息</text>
        </view>
        <view class="func-item" @click="goToScore">
          <view class="func-icon">
            <image :src="config.baseUrl_api + '/fs/static/btn02@2x.png'"></image>
            <!-- <uni-icons type="person" size="40" color="#1E88E5"></uni-icons> -->
          </view>
          <text class="func-text">个人会员</text>
        </view>
        <view class="func-item" @click="goToRecord(0)">
          <view class="func-icon">
            <image :src="config.baseUrl_api + '/fs/static/btn03@2x.png'"></image>
            <!-- <uni-icons type="list" size="40" color="#1E88E5"></uni-icons> -->
          </view>
          <text class="func-text">级位记录</text>
        </view>
      </view>
    </view>
    
    <!-- 查询功能区域 -->
    <view class="query-section">
      <view class="query-item" @click="goToOrder">
        <view class="query-item-left">
          <image :src="config.baseUrl_api + '/fs/static/user_icon01@2x.png'" class="query-item-icon"></image>
          <text class="query-item-text">我的订单</text>
        </view>
        <uni-icons color="#999" size="20" type="arrowright"></uni-icons>
      </view>
      <!-- <view class="query-item" @click="goToWebView(1)">
        <view class="query-item-left">
          <image :src="config.baseUrl_api + '/fs/static/user_icon03@2x.png'" class="query-item-icon"></image>
          <text class="query-item-text">单位会员查询</text>
        </view>
        <uni-icons type="arrowright" size="20" color="#999"></uni-icons>
      </view>
      <view class="query-item" @click="goToWebView(2)">
        <view class="query-item-left">
          <image :src="config.baseUrl_api + '/fs/static/user_icon03@2x.png'" class="query-item-icon"></image>
          <text class="query-item-text">个人会员查询</text>
        </view>
        <uni-icons type="arrowright" size="20" color="#999"></uni-icons>
      </view>
      <view class="query-item" @click="goToWebView(3)">
        <view class="query-item-left">
          <image :src="config.baseUrl_api + '/fs/static/user_icon02@2x.png'" class="query-item-icon"></image>
          <text class="query-item-text">旧版级位证书查询</text>
        </view>
        <uni-icons type="arrowright" size="20" color="#999"></uni-icons>
      </view> -->
      <!-- <view class="query-item" @click="goToWebView(4)">
        <view class="query-item-left">
          <image :src="config.baseUrl_api + '/fs/static/user_icon02@2x.png'" class="query-item-icon"></image>
          <text class="query-item-text">新版级位证书查询</text>
        </view>
        <uni-icons type="arrowright" size="20" color="#999"></uni-icons>
      </view> -->
      <!-- <view class="query-item" @click="goToWebView(5)">
        <view class="query-item-left">
          <image :src="config.baseUrl_api + '/fs/static/user_icon02@2x.png'" class="query-item-icon"></image>
          <text class="query-item-text">级位记录查询</text>
        </view>
        <uni-icons type="arrowright" size="20" color="#999"></uni-icons>
      </view> -->
      <!-- <view class="query-item" @click="goToWebView(6)">
        <view class="query-item-left">
          <image :src="config.baseUrl_api + '/fs/static/user_icon02@2x.png'" class="query-item-icon"></image>
          <text class="query-item-text">国际段位证书查询</text>
        </view>
        <uni-icons type="arrowright" size="20" color="#999"></uni-icons>
      </view> -->
      <view class="query-item" @click="goToRecord(1)">
        <view class="query-item-left">
          <image :src="config.baseUrl_api + '/fs/static/user_icon02@2x.png'" class="query-item-icon"></image>
          <text class="query-item-text">我的段位</text>
        </view>
        <uni-icons color="#999" size="20" type="arrowright"></uni-icons>
      </view>
      <view class="query-item" @click="goToWebView(8)">
        <view class="query-item-left">
          <image :src="config.baseUrl_api + '/fs/static/user_icon03@2x.png'" class="query-item-icon"></image>
          <text class="query-item-text">级位考官</text>
        </view>
        <uni-icons color="#999" size="20" type="arrowright"></uni-icons>
      </view>
      <view class="query-item" @click="goToWebView(9)">
        <view class="query-item-left">
          <image :src="config.baseUrl_api + '/fs/static/user_icon03@2x.png'" class="query-item-icon"></image>
          <text class="query-item-text">段位考官</text>
        </view>
        <uni-icons color="#999" size="20" type="arrowright"></uni-icons>
      </view>
      <view class="query-item" @click="goToWebView(10)">
        <view class="query-item-left">
          <image :src="config.baseUrl_api + '/fs/static/user_icon03@2x.png'" class="query-item-icon"></image>
          <text class="query-item-text">大众教练员</text>
        </view>
        <uni-icons color="#999" size="20" type="arrowright"></uni-icons>
      </view>
      <view class="query-item" @click="goToWebView(11)">
        <view class="query-item-left">
          <image :src="config.baseUrl_api + '/fs/static/user_icon03@2x.png'" class="query-item-icon"></image>
          <text class="query-item-text">大众裁判员</text>
        </view>
        <uni-icons color="#999" size="20" type="arrowright"></uni-icons>
      </view>
      <view class="query-item" @click="goToWebView(12)">
        <view class="query-item-left">
          <image :src="config.baseUrl_api + '/fs/static/user_icon03@2x.png'" class="query-item-icon"></image>
          <text class="query-item-text">培训讲师</text>
        </view>
        <uni-icons color="#999" size="20" type="arrowright"></uni-icons>
      </view>
    </view>
    
    <!--    退出-->
    <view class="logOut">
      <view class="logOutBtn" @click="showLogoutConfirm">退出登录</view>
    </view>
    
    <!-- 绑定学员弹框 -->
    <uni-popup ref="bindPopup" :mask-click="false" type="center">
      <view class="bind-popup">
        <view class="popup-title">绑定学员</view>
        <view class="popup-content">
          <view class="form-item">
            <view class="form-label">姓名</view>
            <view class="form-input">
              <input v-model="bindForm.name" placeholder="请输入姓名" placeholder-class="placeholder-class"/>
            </view>
          </view>
          <view class="form-item">
            <view class="form-label">证件号</view>
            <view class="form-input">
              <input v-model="bindForm.idcCode" placeholder="请输入证件号"
                     placeholder-class="placeholder-class"/>
            </view>
          </view>
        </view>
        <view class="popup-btns">
          <view class="popup-btn cancel" @click="closeBindPopup">取消</view>
          <view class="popup-btn confirm" @click="confirmBind">确定</view>
        </view>
      </view>
    </uni-popup>
    
    <!-- 退出登录确认框 -->
    <view v-if="showConfirm" class="confirm-mask" @click.stop="cancelLogout">
      <view class="confirm-box" @click.stop>
        <view class="confirm-content">
          <view class="confirm-title">退出登录</view>
          <view class="confirm-text">确定要退出登录吗？</view>
        </view>
        <view class="confirm-buttons">
          <view class="confirm-btn cancel" @click="cancelLogout">取消</view>
          <view class="confirm-btn confirm" @click="confirmLogout">确定</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import {
  computed,
  onMounted,
  ref,
  watch,
  nextTick
} from "vue";
import config from "/config.js";
import {
  wxLogin,
  logout,
  getWebInfo
} from '@/common/login.js';
import {useUserStore} from "@/store/modules/user.js";
import to from 'await-to-js'
import {
  bindUser,
  unbindUser,
  downStuCertSingle
} from '@/common/api.js'

const userStore = useUserStore()
const userInfo = computed(() => userStore.user ?? {})
const perInfo = computed(() => userStore.perInfo ?? {})
console.log(222, userInfo.value)
console.log(333, perInfo.value)

// 是否已绑定学员（根据会员卡号判断）
const isBound = computed(() => {
  const perCode = perInfo.value?.perCode
  return perCode !== undefined && perCode !== null && perCode !== ''
})

const bindPopup = ref(null)
const bindForm = ref({
  name: '',
  idcCode: ''
})
const showConfirm = ref(false)

onMounted(() => {
  let webUserName = uni.getStorageSync('webUserName')
  if (!webUserName) {
    wxLogin().then(getWebInfo)
  }
})

// 标记是否已经弹出过绑定框（避免重复弹出）
let hasOpenedBindPopup = false

watch(() => perInfo.value, (newVal, oldVal) => {
  console.log(444, newVal?.perCode)
  
  // 只有当 perInfo 数据存在且 perCode 为空时才弹出
  if (newVal && !newVal.perCode && !hasOpenedBindPopup) {
    hasOpenedBindPopup = true
    nextTick(() => {
      openBindPopup()
    })
  }
}, {
  immediate: true
})

// 打开绑定弹框
const openBindPopup = () => {
  if (bindPopup.value) {
    bindForm.value = {
      name: '',
      idcCode: ''
    }
    bindPopup.value.open()
  } else {
    nextTick(() => {
      openBindPopup()
    })
  }
}

// 关闭绑定弹框
const closeBindPopup = () => {
  bindPopup.value?.close()
}

// 处理绑定/切换操作
const handleBindAction = async () => {
  // if (isBound.value) {
  //   // 已绑定，先解绑再打开绑定弹框
  //   uni.showLoading({
  //     title: '解绑中...',
  //     mask: true
  //   })
  //   const [err] = await to(unbindUser())
  //   uni.hideLoading()
  //   if (err) return
  //   getWebInfo()
  //   openBindPopup()
  // } else {
  //   // 未绑定，打开绑定弹框
  //   openBindPopup()
  // }
  openBindPopup()
}

// 确认绑定
const confirmBind = async () => {
  if (!bindForm.value.name) {
    uni.showToast({
      title: '请输入姓名',
      icon: 'none'
    })
    return
  }
  if (!bindForm.value.idcCode) {
    uni.showToast({
      title: '请输入证件号',
      icon: 'none'
    })
    return
  }
  
  if (isBound.value) {
    // 已绑定，先解绑再打开绑定弹框
    uni.showLoading({
      title: '解绑中...',
      mask: true
    })
    const [err] = await to(unbindUser())
    uni.hideLoading()
    if (err) return
    await getWebInfo()
  }
  
  uni.showLoading({
    title: '绑定中...',
    mask: true
  })
  
  const [err, res] = await to(bindUser({
    name: bindForm.value.name,
    idcCode: bindForm.value.idcCode
  }))
  uni.hideLoading()
  
  if (err) {
    console.log(err)
    // uni.showToast({
    //   title: err?.data?.msg || err?.message || '绑定失败，请稍后重试',
    //   icon: 'none',
    //   duration: 3000
    // })
    // return
    handelGo()
    closeBindPopup()
  } else {
    uni.showToast({
      title: '绑定成功',
      icon: 'success'
    })
    closeBindPopup()
    await getWebInfo()
  }
  
  // uni.showToast({
  // 	title: '绑定成功',
  // 	icon: 'success'
  // })
  
}

const handelGo = () => {
  uni.showModal({
    title: "提示",
    content: "当前账号非中国跆拳道协会有效会员。请先完成认证缴费，即可正常登录使用。",
    success: function (res) {
      if (res.confirm) {
        // closeBindPopup()
        uni.navigateTo({
          url: `/personal/addVip_per?name=${bindForm.value.name}&idcCode=${bindForm.value.idcCode}`
        });
      } else if (res.cancel) {
        // closeBindPopup()
      }
      
    },
    
  })
}

// 返回上一页
const goBack = () => {
  uni.navigateBack()
}

const goToAuth = () => {
  if (!isBound.value) {
    uni.showToast({title: '请先绑定学员', icon: 'none'})
    return
  }
  uni.navigateTo({
    url: '/personal/personInfo'
  });
};

const goToScore = () => {
  if (!isBound.value) {
    uni.showToast({title: '请先绑定学员', icon: 'none'})
    return
  }
  uni.navigateTo({
    url: '/personal/memberInfo'
  });
};

const goToWebView = (type) => {
  // const url = "https://member.taekwondo.org.cn/#/authAccurate?type=" + type
  const url = "https://tk001.wxjylt.com/pc.html#/authAccurate?type=" + type
  uni.navigateTo({
    url: "/pages/webview/webview?url=" + encodeURIComponent(url)
  });
};

// 导航到级位记录
const goToRecord = (type) => {
  if (!isBound.value) {
    uni.showToast({title: '请先绑定学员', icon: 'none'})
    return
  }
  uni.navigateTo({
    url: '/personal/levelRecord?type=' + type
  });
};

// 导航到我的订单
const goToOrder = () => {
  if (!isBound.value) {
    uni.showToast({title: '请先绑定学员', icon: 'none'})
    return
  }
  uni.navigateTo({
    url: '/personal/order'
  });
};

// 导航到缴费
const goToPay = () => {
  const perId = userInfo.value.perId ?? ''
  uni.navigateTo({
    url: `/personal/addVip_per?perId=${perId}`
  });
};

// 下载电子会员证
const downCert = async () => {
  if (!isBound.value) {
    uni.showToast({title: '请先绑定学员', icon: 'none'})
    return
  }
  const perId = userInfo.value?.perId
  if (!perId) return
  
  uni.showLoading({title: '加载中...', mask: true})
  const [err, res] = await to(downStuCertSingle(perId))
  uni.hideLoading()
  
  if (err) {
    uni.showToast({title: err?.data?.msg || '获取会员证失败', icon: 'none'})
    return
  }
  const pdfUrl = res?.data
  if (pdfUrl) {
    uni.navigateTo({
      url: `/personal/certPreview?url=${encodeURIComponent(pdfUrl)}`
    })
  }
};


// 显示退出登录确认框
const showLogoutConfirm = () => {
  showConfirm.value = true;
};

// 取消退出登录
const cancelLogout = () => {
  showConfirm.value = false;
};

// 确认退出登录
const confirmLogout = () => {
  // 调用退出登录接口
  logout().then(() => {
    // 跳转到登录页
    uni.reLaunch({
      url: '/login/login'
    })
  });
};
</script>

<style lang="scss" scoped>
.page-container {
  min-height: 100vh;
  background: #f5f5f5;
}

/* 导航栏 */
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88rpx;
  background: #ffffff;
  padding: 0 30rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-left {
  width: 44rpx;
  height: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
}

.nav-right {
  width: 44rpx;
}

/* 会员卡 */
.member-card {
  position: relative;
  height: 450rpx;
  border-radius: 0;
  overflow: hidden;
}

.member-title {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eff2f8;
  padding-bottom: 20rpx;
  margin-bottom: 20rpx;
  
  .member-id {
    font-size: 30rpx;
    
  }
}

.card-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.bind-student {
  //position: absolute;
  //top: 30rpx;
  //right: 30rpx;
  display: flex;
  align-items: center;
  //gap: 8rpx;
  z-index: 10;
  padding: 5rpx 16rpx;
  border-radius: 30rpx;
  //border: 1px solid #fff;
  background: #dbbf79;
}

.bind-student text {
  font-size: 26rpx;
  color: #5c4b37;
}

.bind-icon {
  width: 45rpx;
  height: 45rpx;
}

.user-section {
  position: relative;
  z-index: 1;
  padding: 30rpx 30rpx 0;
}

.user-top {
  display: flex;
  align-items: center;
  gap: 20rpx;
  margin-bottom: 10rpx;
}

.avatar-wrap {
  flex-shrink: 0;
}

.avatar {
  width: 110rpx;
  height: 110rpx;
  border-radius: 50%;
  border: 3rpx solid rgba(255, 255, 255, 0.6);
}

.member-id {
  font-size: 26rpx;
  color: #503000;
}

.user-bottom {
  //padding-left: 0;
  padding: 0 30rpx;
}

.user-name {
  font-size: 50rpx;
  font-weight: bold;
  color: #5c4b37;
  margin-bottom: 16rpx;
  margin-left: 16rpx;
}

.card-info {
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}

.info-row {
  font-size: 30rpx;
  color: #503000;
  display: flex;
  justify-content: space-between;
}

/* 已过期印章 */
.expired-stamp {
  position: absolute;
  right: 30rpx;
  bottom: 150rpx;
  width: 150rpx;
  height: 150rpx;
  z-index: 1;
}

/* 卡片右下角按钮 */
.card-btns {
  position: absolute;
  left: 50rpx;
  bottom: 37rpx;
  z-index: 10;
  display: flex;
  gap: 16rpx;
}

.card-btn {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 30rpx;
  padding: 0 30rpx 5rpx 30rpx;
  border: 1px solid #e0c36c;
}

.card-btn text {
  height: 24rpx;
  line-height: 24rpx;
  font-size: 24rpx;
  color: #c7990f;
}

/* 功能按钮卡片 */
.func-card {
  margin: -23rpx 30rpx 30rpx;
  background: #ffffff;
  border-radius: 20rpx;
  padding: 36rpx 0;
  box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.06);
  position: relative;
  z-index: 2;
}

.func-list {
  display: flex;
  justify-content: space-around;
  padding: 0 20rpx;
}

.func-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12rpx;
}

.func-icon {
  width: 72rpx;
  height: 72rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  // background: #f0f7ff;
  // border-radius: 16rpx;
  image {
    width: 72rpx;
    height: 72rpx;
  }
}

.func-text {
  font-size: 24rpx;
  color: #333;
}

/* 查询功能区域 */
.query-section {
  margin: 0 30rpx;
  background: #ffffff;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.query-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32rpx 30rpx;
  border-bottom: 1rpx solid #f5f5f5;
}

.query-item:last-child {
  border-bottom: none;
}

.query-item-left {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.query-item-icon {
  width: 44rpx;
  height: 48rpx;
}

.query-item-text {
  font-size: 28rpx;
  color: #333;
}

/* 绑定学员弹框 */
.bind-popup {
  width: 600rpx;
  background: #ffffff;
  border-radius: 24rpx;
  overflow: hidden;
}

.popup-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
  text-align: center;
  padding: 40rpx 30rpx 20rpx;
}

.popup-content {
  padding: 20rpx 30rpx 40rpx;
}

.form-item {
  display: flex;
  align-items: center;
  margin-bottom: 24rpx;
}

.form-item:last-child {
  margin-bottom: 0;
}

.form-label {
  width: 120rpx;
  font-size: 28rpx;
  color: #333;
  flex-shrink: 0;
}

.form-input {
  flex: 1;
  background: #f5f5f5;
  border-radius: 12rpx;
  padding: 20rpx 24rpx;
}

.form-input input {
  font-size: 28rpx;
  color: #333;
  width: 100%;
}

.placeholder-class {
  color: #999;
}

.popup-btns {
  display: flex;
  border-top: 1rpx solid #eee;
}

.popup-btn {
  flex: 1;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  font-size: 30rpx;
}

.popup-btn.cancel {
  color: #666;
  border-right: 1rpx solid #eee;
}

.popup-btn.confirm {
  color: #C40F18;
  font-weight: 500;
}

/* 退出登录确认框 */
.confirm-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.confirm-box {
  width: 600rpx;
  background: #ffffff;
  border-radius: 20rpx;
  overflow: hidden;
}

.confirm-content {
  padding: 40rpx;
  text-align: center;
}

.confirm-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 20rpx;
}

.confirm-text {
  font-size: 28rpx;
  color: #666;
  margin-top: 30rpx;
  color: #C40F18;
  color: #dbbb69;
  
}

.confirm-buttons {
  display: flex;
  border-top: 1rpx solid #eee;
}

.confirm-btn {
  flex: 1;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  font-size: 30rpx;
}

.confirm-btn.cancel {
  color: #666;
  border-right: 1rpx solid #eee;
}

.confirm-btn.confirm {
  color: #C40F18;
  font-weight: 500;
  color: #dbbb69;
}

.logOut {
  display: flex;
  justify-content: center;
  margin-top: 16px;
  padding-bottom: 20rpx;
  
  .logOutBtn {
    background-image: linear-gradient(135deg, #dbbb69 10%, #f0deb0 100%);;
    backdrop-filter: blur(4px);
    width: 80%;
    border: 1px solid #dadada;
    padding: 20rpx 50rpx;
    border-radius: 50rpx;
    font-weight: 600;
    font-size: 30rpx;
    color: #fff;
    text-align: center;
    cursor: pointer;
  }
}
</style>