<template>
  <view class="mine-container" :style="{ height: `${windowHeight}px` }">
    <!--顶部个人信息栏-->
    <view class="header-section">
      <view class="flex padding justify-between">
        <view class="flex align-center">
          <view v-if="!avatar" class="cu-avatar xl round bg-white">
            <view class="iconfont icon-people text-gray icon"></view>
          </view>
          <image v-if="avatar" @click="handleToAvatar" :src="avatar" class="cu-avatar xl round" mode="widthFix">
          </image>
<!--          <view v-if="token" @click="handleToLogin" class="login-tip">
            点击登录
          </view> -->
          <view  class="user-info">
            <view class="u_title">
              iccid号：{{ iccid }}
            </view>
			<view class="u_title">
			  到期时间：{{ endTime }}
			</view>
			<view class="u_title">
			  当前套餐：{{ packageName }}
			</view>
          </view>
        </view>
      </view>
    </view>
	
	  <view class="package-box">
		  <view class="package-top">
		  	<view 
			  @click="handleLeftTab" 
		      :class="{ 'left-tab': true, active: leftTab.isActive }"
			>
		  		   {{leftTab.name}}
		  	</view>
		  	<view 
			  @click="handleRightTab" 
			  :class="{ 'right-tab': true, active: rightTab.isActive }"
			>
		  		   {{rightTab.name}}
		  	</view>
		  </view>
		   <view class="package-bottom">
                 <view v-for="(item, index) in packageList" :key="index" 
                       class="package-item" @click="selectPackage(index)">
					   <view class="package-title">
					   	  <text>{{ item.thaliGroupName }}</text>
					   </view>
					   <view class="package-price">
					   	  <text>{{ item.thaliPayPrice }}元</text>
					   </view>
                 </view>
		   </view>
	  </view>


    <view class="content-section">
      <view class="mine-actions grid col-4 text-center">
        <view class="action-item" @click="handleBind">
          <view class="iconfont icon-friendfill text-pink icon"></view>
          <text class="text">绑定充值卡</text>
        </view>
        <view class="action-item" @click="handleGetCardInfo">
          <view class="iconfont icon-community text-blue icon"></view>
          <text class="text">获取充值卡信息</text>
        </view>
        <view class="action-item" @click="handleGetRealNameUrl">
          <view class="iconfont icon-service text-mauve icon"></view>
          <text class="text">点击实名</text>
        </view>
		<view class="action-item" @click="handleJump">
		  <view class="iconfont icon-service text-mauve icon"></view>
		  <text class="text">一键授权</text>
		</view>
      </view>

    </view>
  </view>
  <view>
	  <uni-popup ref="popup" type="dialog">
	    <uni-popup-dialog 
		  type="info" 
		  cancelText="关闭" 
		  confirmText="绑定"
	      title="" 
		  content="" 
	      @confirm="dialogConfirm"
	      @close="dialogClose">
			<input 
			  v-model="rechargeNum" 
			  class="input" 
			  type="text" 
			  placeholder="请输入充值号" 
			  maxlength="30" 
			/>
	    </uni-popup-dialog>
	  </uni-popup>
  </view>
</template>

<script setup>
import { ref, reactive,onMounted } from 'vue';
import modal from "@/plugins/modal";
import { getToken, setToken, removeToken } from "@/utils/auth";
import { userBindRechargeNum,getRechargeNum ,getRealNameUrl, getGroupPackage, recharge, getPackageSort} from '@/api/card'
import config from '@/config.js'
import useUserStore from '@/store/modules/user'
const userStore = useUserStore()
const name = userStore.name;
const version = config.appInfo.version;

const avatar = ref(userStore.avatar);
const windowHeight = ref(uni.getSystemInfoSync().windowHeight - 50);
const popup = ref(null);
const rechargeNum = ref('')
const token = ref('');
const iccid = ref('')
const endTime = ref('')
const packageName = ref('')
const thaliGroupId = ref('')
const packageList = ref([])

const leftTab = ref({
	name: undefined,
	thaliGroupId: undefined,
    isActive: true,
})

const rightTab = ref({
	name: undefined,
	thaliGroupId: undefined,
	isActive: false,
})
uni.$on('refresh', () => {
  avatar.value = userStore.avatar;
})

console.log(avatar.value)

function handleToInfo() {
  uni.navigateTo({
    url: '/pages_mine/pages/info/index'
  });
};
function handleToEditInfo() {
  uni.navigateTo({
    url: '/pages_mine/pages/info/edit'
  });
};
function handleToSetting() {
  uni.navigateTo({
    url: '/pages_mine/pages/setting/index'
  });
};
function handleToLogin() {
  uni.reLaunch({
    url: '/pages/login'
  });
};
function handleToAvatar() {
  uni.navigateTo({
    url: '/pages_mine/pages/avatar/index'
  });
};
function handleLogout() {
};
function dialogConfirm() {
  const data = rechargeNum.value
  if (rechargeNum.value) {
  	userBindRechargeNum(data).then(res => {
  		if(res.code === 200) {
			modal.showToast({
			  title: '绑定成功',
			  icon:'sucess',
			  duration: 1000
			});
		} else {
		   // 如果绑定失败，显示错误提示
			modal.showToast({
			  title: '绑定失败：' + res.msg, // 假设 res.msg 包含错误信息
			  icon: 'error',
			  duration: 1000
			});
		}
  	})
  } else {
  	    // 如果没有值，提示用户输入充值号
  	    modal.showToast({
  	      title: '请输入充值号',
  	      icon: 'none', // 或者使用其他适当的图标
  	      duration: 1000
  	    });
  }
};
function dialogClose() {
    
};
function handleHelp() {
  uni.navigateTo({
    url: '/pages_mine/pages/help/index'
  });
};
function handleAbout() {
	const data = {rechargeNum : '1442212701559'}
	
	getRealNameUrl(data).then(res => {
		console.log(res,9)
	})
};

// 绑定充值卡
function handleBind() {
	popup.value.open()
	// rechargeNum.value = ''
};



// 获取充值卡信息
function handleGetCardInfo() {
	// const data = rechargeNum.value
	const data = '89861591292320027863'
	getRechargeNum(data).then(res => {
		console.log(res,19)
		iccid.value = res.data.card.iccId
		endTime.value = res.data.card.createTime
		packageName.value = res.data.card.thaliName
		
	})
};

// 获取实名链接
function handleGetRealNameUrl() {
	const data = rechargeNum.value
		// const data = '89861591292320027863'
	getRealNameUrl(data).then(res => {
		if(res.code === 200) {
			const URL = res.data
			location.href = URL
		}
	})
};


function handleJump() {
	const URL = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx6aeb90e7fd5d434e&redirect_uri=https%3A%2F%2Fwxgzh.youpin5g.net&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect'
	location.href = URL
}


function handleBuilding() {
  const data = rechargeNum.value	
	getRechargeNum(data).then(res => {
		console.log(res,91)
	})
}



// 获取套餐种类
function getPackageSortList() {
  // const data = rechargeNum.value	
  const data = '89861591292320027863'
	getPackageSort(data).then(res => {
		console.log(res,911)
		leftTab.value.name = res.rows[0].groupName;
		leftTab.value.thaliGroupId = res.rows[0].id;

		rightTab.value.name = res.rows[1].groupName;
		rightTab.value.thaliGroupId = res.rows[1].id;
		
	})
}

function handleLeftTab() {
	leftTab.value.isActive = true;
	rightTab.value.isActive = false;
	
    const data = leftTab.value.thaliGroupId;
    getGroupPackage(data).then(res => {
        packageList.value = res.data.map(item => {
            return {
                thaliGroupName: item.thaliGroupName,
                thaliPayPrice: item.thaliPayPrice
            };
        });
    }).catch(error => {
        console.error("API请求失败:", error);
    });
}

function handleRightTab() {
	leftTab.value.isActive = false;
    rightTab.value.isActive = true;
	
	const data = rightTab.value.thaliGroupId
	getGroupPackage(data).then(res => {
	    packageList.value = res.data.map(item => {
	        return {
	            thaliGroupName: item.thaliGroupName,
	            thaliPayPrice: item.thaliPayPrice
	        };
	    });
	}).catch(error => {
	    console.error("API请求失败:", error);
	});
}


function selectPackage(index) {
  console.log("选中的套餐:", packageList.value[index]);
}



// 获取套餐种类
// function getPackageSortList() {
//   // const data = rechargeNum.value	
//   const data = '89861591292320027863'
// 	getPackageSort(data).then(res => {
// 		console.log(res,911)

// 	})
// }




onMounted(() => {
  const userToken = getToken();
  if (userToken) {
	token.value = userToken;
  } 
  
  console.log(token,1)
  
  handleGetCardInfo()
  getPackageSortList()
  
  setTimeout(() => {
    handleLeftTab();
  }, 1000);

});
</script>

<style lang="scss">
page {
  background-color: #f5f6f7;
}

.mine-container {
  width: 100%;
  height: 100%;


  .header-section {
    padding: 15px 15px 45px 15px;
    background-color: #3c96f3;
    color: white;

    .login-tip {
      font-size: 18px;
      margin-left: 10px;
    }

    .cu-avatar {
      border: 2px solid #eaeaea;

      .icon {
        font-size: 40px;
      }
    }

    .user-info {
      margin-left: 15px;

      .u_title {
        font-size: 14px;
        line-height: 30px;
      }
    }
  }
  
  .package-box {
	  margin: 15px 15px;
	  padding: 20px 20px;
	  border-radius: 8px;
	  background-color: white;
	  display: flex;
	  flex-direction: column;
	  
	  
	  .package-top {
		  display: flex;
		  flex-direction: row;
		  justify-content: space-around;
		  
		  .left-tab,
		  .right-tab {
		    display: flex;
		    align-items: center;
		    justify-content: center;
		    height: 30px;
		    width: 140px;
		    border-radius: 3px;
		    color: #fff;
		    cursor: pointer;
		    transition: background-color 0.3s;
		  }
		  
		  .left-tab.active,
		  .right-tab.active {
		    background-color: #e57335; /* 激活时的颜色 */
		  }
		  
		  .left-tab:not(.active),
		  .right-tab:not(.active) {
		    background-color: #d0d0d0; /* 非激活时的颜色 */
		  }
	  }

	  
	  .package-bottom {
	      display: flex;
		  flex-direction: row;
		  justify-content: space-around;
	      flex-wrap: wrap;
	      gap: 10px;
		  padding-top: 30rpx;
		  
		  .package-title {
			  display: flex;
			  justify-content: center;
		  }
		  .package-price {
			  display: flex;
			  justify-content: center;
			  color: gray;
		  }
	  }
	  
	  .package-item {
	      border: 1px solid orange;
		  width: 130px;
	      padding: 15px;
	      cursor: pointer;
		  border-radius: 8px;
	  }
	  
	  .package-item:hover {
	      border-color: darkorange;
	  }
  }

  .content-section {
    position: relative;
    // top: -50px;

    .mine-actions {
      margin: 15px 15px;
      padding: 20px 0px;
      border-radius: 8px;
      background-color: white;

      .action-item {
        .icon {
          font-size: 28px;
        }

        .text {
          display: block;
          font-size: 13px;
          margin: 8px 0px;
        }
      }
    }
  }
}


</style>
