<template>
  <view class="page-container container-with-elep full-height-with-titile">
    <!-- 功能列表 -->
    <view class="content">
      <view class="card">
        <view
          v-for="(item, index) in securityItems"
          :key="item.color.title"
          class="card-item"
          :class="{ 'no-border': index === securityItems.length - 1 }"
          @click="handleItemClick(item.type)"
        >
          <view class="item-left">
            <view class="icon-wrapper">
              <uni-icons :type="item.icon" size="24" :color="item.color" />
            </view>
            <text class="item-title">{{ item.title }}</text>
          </view>
          <uni-icons type="right" size="16" color="#CCCCCC" />
        </view>
      </view>
      <!-- 安全提示 -->
      <view class="security-tips">
        <uni-icons type="info" size="16" color="#999999" />
        <text class="tips-text">{{ this.$languageData.password.safeTip }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      securityItems: [
        {
          title: this.$languageData.password.updateLoginPwd,
          icon: 'locked',
          type: 'loginPassword',
		  color:'#46A1DE'
        },
        {
          title: this.$languageData.password.setPayPwd,
          icon: 'wallet',
          type: 'setPayPassword',
		  color:'#2ECC71'
        },
        {
          title: this.$languageData.password.findPayPwd,
          icon: 'refresh',
          type: 'retrievePayPassword',
		  color:'#E74C3C'
        },
		//TODO
    //     {
    //       title: this.$languageData.password.loginLock,
    //       icon: 'link',
    //       type: 'loginLock',
		  // color:'#F39C12'
    //     },
    //     {
    //       title: this.$languageData.password.eqAdmin,
    //       icon: 'phone',
    //       type: 'deviceManagement',
		  // color:'#9B59B6'
    //     }
      ],
	  languageData:{},
	  
    }
  },
  onLoad() {
  	this.languageData = this.$languageData;
  },
  methods: {
    handleItemClick(type) {
		this.handleTo(type);
    },
	handleTo(type) {
		if(type=='loginPassword'){
			this.$tab.navigateTo('/pages/mine/pwd/index')
		}else if(type=='setPayPassword'){
			this.$tab.navigateTo('/pages/mine/pwd/payPwd')
		}else if(type=='retrievePayPassword'){
			uni.navigateTo({
				url:'/pages/mine/pwd/findPayPass'
			})
		}else if(type=='loginLock'){
			
		}else if(type=='deviceManagement'){
			
		}else{
			
		}
	},
  }
}
</script>

<style lang="scss" scoped>
  page {
    height: 100%;
    background-color: #F5F5F5;
  }
  
  .page-container {
    min-height: 100%;
    display: flex;
    flex-direction: column;
  }
  
  .content {
    flex: 1;
    padding: 20rpx 0;
  }
  
  .card {
    background-color: #FFFFFF;
    border-radius: 12rpx;
    overflow: hidden;
  }
  
  .card-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24rpx;
    border-bottom: 1px solid #EEEEEE;
  }
  
  .card-item:active {
    background-color: #F5F5F5;
  }
  
  .no-border {
    border-bottom: none;
  }
  
  .item-left {
    display: flex;
    align-items: center;
  }
  
  .icon-wrapper {
    width: 48rpx;
    height: 48rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20rpx;
  }
  
  .item-title {
    font-size: 13px;
    color: #333333;
  }
  
  .security-tips {
    display: flex;
    align-items: center;
    margin-top: 40rpx;
    padding: 0 20rpx;
  }
  
  .tips-text {
    margin-left: 8rpx;
    font-size: 11px;
    color: #999999;
    line-height: 1.5;
  }
</style>
