<template>
  <view class="my">
    <view class="head_box">
      <image class="head_img" src="../../static/img/home/head-bg.png"></image>
      <view v-if="!oaUserInfo" class="my_head">
        <view class="department flex_a_c">
          <view class="section">产品技术部</view>
          <view class="" @click="login">去登陆</view>
        </view>
      </view>
      <view class="personage">
        <view class="my_msg flex_a_c_j_sb">
          <view class="flex_a_c">
            <u--image :showLoading="true" :src="oaUserInfo.thumb" width="112.28rpx" height="112.28rpx" shape="circle">
            </u--image>
            <view class="name_work">
              <view class="name">
                <text>{{ oaUserInfo.did_leader }}</text>
                <text>{{ oaUserInfo.mobile }}</text>
              </view>
              <view class="work">
                {{ oaUserInfo.did_name }}({{ oaUserInfo.label_name }})
              </view>
            </view>
          </view>
          <view class="compile" @click="alterMyInfo">
            <view class="iconfont icon-bianji"></view>
            <view class="">编辑</view>
          </view>
        </view>
        <view class="assess">
          <view class="ass_cent flex_a_c_j_sb">
            <view class="cent_item" @click="naviTo('/subpkg/finance/finance')">
              <!-- <view class="num">{{ oaUserInfo.achievements_money }}</view> -->
              <view class="num">1000</view>
              <view class="name">可提现金额</view>
            </view>
            <view class="cent_item">
              <!-- <view class="num">{{ oaUserInfo.department_money }}</view> -->
              <view class="num">0</view>
              <view class="name">冻结金额</view>
            </view>
            <view class="cent_item" @click="test">
              <!-- <view class="num">{{ oaUserInfo.company_money }}</view> -->
              <view class="num">0</view>
              <view class="name">充值金额</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="other_guide">
      <block v-for="(item,i) in myOaData" :key="i">
        <view class="other_item flex_a_c_j_sb" @click="naviTo(item.url)">
          <view class="flex_a_c">
            <view class="iconfont2" :class="item.icon"></view>
            <view class="text">{{ item.name }}</view>
          </view>
          <view class="iconfont icon-you"></view>
        </view>
      </block>
    </view>
    <view class="log_out" @click="naviTo('/pages/oaLogin/oaLogin')">退出登录</view>
    <!-- <tabbar></tabbar> -->
  </view>
</template>

<script>
  import { mapActions } from 'vuex'
  import { getUserIndexAPI } from '@/api/oaApi.js'
  import { Toast } from '@/libs/uniApi.js'
  import { myOaData } from '@/static/server/server.js'
  // import tabbar from '../components/tabbar'
  export default {
    components: {
      // tabbar
    },
    data() {
      return {
        myOaData: myOaData,
        src: 'https://cdn.uviewui.com/uview/album/1.jpg',
        oaUserInfo: {}
      }
    },
    onReady() {
      uni.setNavigationBarColor({
        frontColor: '#ffffff',
        backgroundColor: '#3175f9'
      })
    },
    onLoad() {
      this.getOaUserInfo()
    },
    onShow() {},
    methods: {
      ...mapActions(['getWxLogin']),
      test() {
        // 获取provider
        uni.getProvider({
          service: "payment",
          success: (e) => {
            console.log(e);
            e.provider.map((value) => {
              switch (value) {
                case 'wxpay':
                  break;
                default:
                  break;
              }
            })
            let obj = {
              "appid": "wx499********7c70e", // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
              "noncestr": "c5sEwbaNPiXAF3iv", // 随机字符串
              "package": "Sign=WXPay", // 固定值
              "partnerid": "148*****52", // 微信支付商户号
              "prepayid": "wx202254********************fbe90000", // 统一下单订单号 
              "timestamp": 1597935292, // 时间戳（单位：秒）
              "sign": "A842B45937F6EFF60DEC7A2EAA52D5A0" // 签名，这里用的 MD5/RSA 签名
            };
            uni.requestPayment({
              provider: 'wxpay',
              orderInfo: obj, //微信、支付宝订单数据,就是上面那个
              success: function(res) {
                console.log('success:' + JSON.stringify(res));
              },
              fail: function(err) {
                console.log('fail:' + JSON.stringify(err));
              }
            });
          },
          fail: (e) => {
            console.log(e)
            return false;
          }
        });
      },
      login() {
        // #ifndef H5 || APP
        // #endif
        // #ifdef MP-WEIXIN || MP
        this.getWxLogin()
        // #endif
      },
      async getOaUserInfo() {
        const res = await getUserIndexAPI()
        console.log(res, '111');
        this.oaUserInfo = res
      },
      naviTo(url) {
        url ?
          uni.navigateTo({
            url: url
          }) : Toast('暂未开放')
      },
      alterMyInfo() {
        uni.navigateTo({
          url: '/pages/views/personal_center'
        })
      }
    },
    onPullDownRefresh() {
      this.getOaUserInfo()
      uni.stopPullDownRefresh()
    }
  }
</script>

<style lang="scss">
  .my {
    .head_box {
      position: relative;
      width: 100vw;
      padding-top: 30rpx;
      margin-bottom: 30rpx;

      .head_img {
        position: absolute;
        // z-index: -1;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
      }
    }

  }

  .my_head {
    padding: 0 28.07rpx;
    height: 90.39rpx;
    position: relative;
    // z-index: 1;
    // top: 20rpx;
    // background-color: $theme-oa-color;
    // background-image: url('../../static/img/home/head-bg.png');

    .department {
      // padding-top: 38.6rpx;
      font-size: 31.58rpx;
      color: #fff;

      .section {
        margin-right: 57.89rpx;
      }
    }
  }

  .personage {
    // position: relative;
    padding: 42.11rpx 28.07rpx 28.07rpx 28.07rpx;
    border-radius: 12px;
    // background-color: #fff;
    color: #fff;
    width: 694.74rpx;
    margin-left: 50%;
    transform: translate(-50%, -43.86rpx);

    .name_work {
      margin-left: 31.58rpx;
      font-size: 28.07rpx;

      .work {
        margin-top: 14.04rpx;
      }
    }

    .my_msg {
      .compile {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
    }

    .assess {
      height: 170.18rpx;
    }

    .ass_cent {
      width: 100%;
      padding: 31.58rpx 66.67rpx;
      position: absolute;
      left: 0;
      bottom: 0;
      height: 170.18rpx;
      border-radius: 12px;
      background-color: rgba(#fff, 0.18);

      .cent_item {
        font-size: 24.56rpx;
        color: #fff;
        text-align: center;

        .num {
          font-size: 38.6rpx;
          margin-bottom: 21.05rpx;
        }

      }
    }
  }

  .other_guide {
    width: 694.74rpx;
    margin: 0 auto;
    padding: 28.07rpx;
    background-color: #fff;
    border-radius: 12px;

    .other_item {
      height: 87.72rpx;
      border-bottom: 1px solid #F0F5F7;

      .text {
        font-size: 28.07rpx;
        margin-left: 24.56rpx;
      }

      .iconfont2 {
        font-size: 42.11rpx;
      }
    }
  }

  .log_out {
    color: #fff;
    border-radius: 100px;
    text-align: center;
    line-height: 84.21rpx;
    margin: 0 auto;
    margin-top: 84.21rpx;
    width: 614.04rpx;
    height: 84.21rpx;
    background: #3274F9;
    box-shadow: 0px 9px 26px 1px #E9EFF5;
  }
</style>