<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="40rpx" height="40rpx"></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_ico2.png'),
          name: '人脸认证',
          url: '/pages/train_management/face_authentication?type=update_facial_input'
        },
        {
          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'
        },
        // #ifdef APP-PLUS
        {
          img: require('../../../static/images/my_ico5.png'),
          name: '版本更新',
        },
        // #endif
        {
          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) {
      console.log('点击了')
      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: 400rpx;
    background-size: 100% 100%;
    padding: 20rpx;
    box-sizing: border-box;

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

      .mytop_main_info_tx {
        margin-right: 20rpx;
      }

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

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

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

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

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

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

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

          .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: 0rpx 40rpx;
  box-sizing: border-box;


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