<template>
	<view class="main_container">
		<view class="mytop">
			<view class="mytop_main">
				<view class="mytop_main_info">
					<view class="mytop_main_info_tx">
						<u-avatar :src="userInfo.PHOTO || 'account-fill'" size="50"></u-avatar>
					</view>
					<view class="mytop_main_test">
						<view class="mytop_main_test_name">
              {{ userInfo.NAME }}
						</view>
						<view class="mytop_main_test_p">
              {{ userInfo.DEPARTMENT_NAME }}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="my_main">
			<view class="my_main_info">
				<view class="my_main_info_wrap" v-for="(item,index) in list" :key="item.name" @click="clickItem(item.name,index)">
					<view class="my_main_info_wrap_img">
						<u--image :src="item.img" width="40upx" height="40upx"></u--image>
					</view>
					<view class="my_main_info_wrap_info">
						<view class="my_main_info_wrap_info_lable">
              {{ item.name }}
						</view>
						<view class="">
							<u-icon name="arrow-right" color="#999" size="14"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="layout_btner" @click="logOut">
			<view class="layout_btn">
				退出登录
			</view>
		</view>
		<u-modal :show="updateVersion.modalShow" title="温馨提示" :showConfirmButton="updateVersion.showConfirmButton"
			:showCancelButton="updateVersion.showCancelButton" :confirmText="updateVersion.confirmText" :cancelText="updateVersion.cancelText"
			@cancel="modalCancel" @confirm="modalConfirm">
			<view style="text-align: center;color:#606266">
				<rich-text :nodes="updateVersion.modalContent"></rich-text>
			</view>
		</u-modal>
	</view>
</template>

<script>
import updateVersion from '../../../utils/updateVersion'

export default {
  mixins:[updateVersion],
  data() {
    return {
      list:[
        {
          img: require('../../../static/images/my_ico1.png'),
          name:'个人信息',
          url:'/pages/mine/information/index'
        },
        {
          img: require('../../../static/images/my_ico3.png'),
          name:'问题反馈',
          url:'/pages/mine/feedback/feedback'
        },
        {
          img: require('../../../static/images/my_ico4.png'),
          name:'修改密码',
          url:'/pages/mine/change_password/change_password'
        },
        {
          img: require('../../../static/images/my_ico5.png'),
          name:'版本更新',
        },
        {
          img: require('../../../static/images/my_ico6.png'),
          name:'关于我们',
          url: '/pages/mine/about_us/about_us'
        },
      ],
    }
  },
  computed: {
    userInfo() {
      return this.$store.getters.getUserInfo
    }
  },
  methods: {
    logOut() {
      uni.showModal({
        title: '提示',
        content: '确定退出登录吗？',
        success: (result) => {
          if (result.confirm) {
            let userInfo = {}
            for (const userInfoKey in this.userInfo) {
              if (this.userInfo.hasOwnProperty(userInfoKey)) {
                userInfo[userInfoKey] = ''
              }
            }
            this.$store.dispatch('setUserInfo', userInfo)
            uni.redirectTo({
              url: '/pages/login/login'
            })
          }
        }
      })
    },
    clickItem(name,index){
      if(name === '版本更新') this.fnUpdateVersion()
      else {
        uni.$u.route({
          url: this.list[index].url
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
	.main_container {
		width: 100%;

		.mytop {
			width: 100%;
			background: url(/static/images/mybannerbg.png);
			height: 400upx;
			background-size: 100% 100%;
			padding: 20upx;
			box-sizing: border-box;

			.mytop_main_info {
				width: 80%;
				margin: 0 auto;
				margin-top: 150upx;
				display: flex;
				align-items: center;

				.mytop_main_info_tx {
					margin-right: 20upx;
				}

				.mytop_main_test_name {
					color: #fff;
					font-size: 36upx;
					font-weight: 600;
				}

				.mytop_main_test_p {
					color: #fff;
					font-size: 26upx;
					opacity: 0.6;
					margin-top: 5upx;
				}
			}
		}

		.my_main {
			width: 100%;
			padding: 40upx;
			margin-top: -120upx;
			box-sizing: border-box;

			.my_main_info {
				width: 100%;
				background: #fff;
				padding: 20upx 40upx;
				box-sizing: border-box;
				border-radius: 10upx;
				box-shadow: 0 0 20upx #eee;

				.my_main_info_wrap {
					width: 100%;
					display: flex;
					align-items: center;

					.my_main_info_wrap_img {
						width: 50upx;
						height: 50upx;
						margin-top: 10upx;
					}

					.my_main_info_wrap_info {
						flex: 1;
						border-bottom: 1upx solid #eee;
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 30upx 0upx;
						padding-left: 10upx;

						.my_main_info_wrap_info_lable {

						}
					}
				}

				.my_main_info_wrap:last-child .my_main_info_wrap_info {
					border-bottom: none;
				}
			}
		}
	}

	.layout_btner {
		width: 100%;
		text-align: center;
		padding: 0upx 40upx;
		box-sizing: border-box;


		.layout_btn {
			width: 100%;
			text-align: center;
			padding: 20upx;
			background: #e72f2f;
			box-sizing: border-box;
			color: #fff;
			box-shadow: 0 0 20upx #eee;
			border-radius: 10upx;
		}
	}
</style>