<template>
  <view class="container">
    <view class="head-info">
      <view class="head-flex">
        <view class="flex">
          <view style="margin-right: 20rpx">
            <!-- <u-avatar :src="avatar" size="80" @tap="$Router.push('/pages/client/clientUser/personal')" /> -->
            <u-avatar :src="avatar" size="80" @click='handlerReviewImg' />
          </view>
          <view class="nickname"> {{ nickname }} </view>
        </view>

        <view class='setting-img-box' @tap="$Router.push('/PageMine/setting/index')">
          <image class='setting-img' src='@/static/user/mine/icon_user_mine_setting.png'></image>
          <!-- <u-icon name="setting" color="#000" size="26"></u-icon> -->
        </view>
      </view>
      <!-- 收藏 积分 购物车 优惠券  -->

      <view class="collect-box">
        <u-grid :border="false" col="4">
          <u-grid-item v-for="(listItem, listIndex) in collectList" :key="listIndex" @tap="$Router.push(listItem.url)">
            <u-icon :customStyle="{ paddingTop: 20 + 'rpx' }" :name="listItem.name" :size="28" color="#000" />
            <text class="grid-text">{{ listItem.title }}</text>
          </u-grid-item>
        </u-grid>
      </view>

      <view class="order-out-box">
        <view class="order-inner-box">
          <u-grid :border="false" col="4" style="background-color: #fff">
            <u-grid-item v-for="(listItem, listIndex) in oderList" :key="listIndex" @tap="gotoOrder(listItem)">
              <u-icon :name="listItem.name" :size="34" />
              <text class="grid-text">{{ listItem.title }}</text>
            </u-grid-item>
          </u-grid>
        </view>
      </view>

      <!-- 我的收益 -->
      <view class="income" @click="handlerSkipMyProfit">
        <view class="income-head">
          <text class="my-income">我的钱包</text>
          <u-icon name="arrow-right" />
        </view>
        <view class="income-content">
          <u-grid :border="false" col="4" bgColor="#fff">
            <u-grid-item v-for="(listItem, listIndex) in incomeList" :key="listIndex">
              <view class="num-box">{{ listItem.num }}元</view>
              <view class="num-title">{{ listItem.title }}</view>
            </u-grid-item>
          </u-grid>
        </view>
      </view>

    </view>

    <!-- 列表 -->
    <TapList></TapList>

    <tabbar currentTab="clientMine" />
  </view>
</template>

<script>
  import {
    mapGetters
  } from 'vuex';
  import TapList from './components/TapList.vue';
  export default {
    components: {
      TapList
    },
    data() {
      return {
        system: {},
        systemBar: 0,
        collectList: [{
            name: 'photo',
            title: '收藏',
            url: '/PageMine/favourite',
          },
          {
            name: 'lock',
            title: '积分',
            url: '/pages/client/clientUser/myScore/index',
          },
          {
            name: 'star',
            title: '购物车',
            url: '/PageMine/shopCar',
          },
          {
            name: 'hourglass',
            title: '优惠券',
            url: '/PageMine/coupon',
          },
        ],
        oderList: [{
            name: 'order',
            title: '全部订单',
            type: 0,
          },
          {
            name: 'bag-fill',
            title: '已发货',
            type: 1,
          },
          {
            name: 'car-fill',
            title: '已完成',
            type: 2,
          }
          // {
          //   name: 'heart',
          //   title: '待评价',
          //   type: 3,
          // },
        ],
        incomeList: [{
            num: '0.00',
            title: '总收益',
          },
          {
            num: '0.00',
            title: '本月收益',
          },
          {
            num: '0.00',
            title: '本周收益',
          },
          {
            num: '0.00',
            title: '可提现',
          },
        ]
      };
    },
    computed: {
      ...mapGetters(['userId', 'gender', 'avatar', 'nickname'])
    },
    methods: {
      getHeight() {
        wx.getSystemInfo({
          success: res => {
            this.system = res;
          },
        });
        this.systemBar = this.system.statusBarHeight;
      },
      // 点击跳转到全部订单
      gotoOrder(item) {
        this.$store.commit('order/GET_ORDER_TYPE', item)
        uni.navigateTo({
          url: `/PageMine/orderModules/index`,
        });
      },
      // 点击跳转到我的收益
      handlerSkipMyProfit() {
      	uni.navigateTo({
      		url: '/PageMine/profit/index',
      	});
      },
      // 点击预览图片
      handlerReviewImg() {
        uni.previewImage({
          urls: [this.avatar],
        });
      }
    },
    onLoad() {
      this.getHeight();
    },
  };
</script>

<style lang="scss" scoped>
  .container {

    .flex {
      display: flex;
      align-items: center;
    }

    .head-info {
      padding: 200rpx 22rpx 0;
      background: linear-gradient(180deg, #D4E2FF 0%, #E6EAFB 53%, #F2F2F2);

      .head-flex {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .nickname {
          font-size: 36rpx;
          color: #0C1223;
          margin-bottom: 8rpx;
          margin-top: 20rpx;
          font-weight: bold;
        }
        .setting-img-box{
          .setting-img{
            width:48rpx;
            height:48rpx;
          }
        }
      }

      .collect-box {
        width: 100%;

        .grid-text {
          font-size: 30rpx;
          color: #000;
        }
      }

      .order-out-box {
        width: 100%;
        margin-top: 44rpx;

        .order-inner-box {
          padding: 30rpx;
          font-size: 30rpx;
          border-radius: 10rpx;
          background-color: $uni-bg-color;
        }
      }
    }

    .income {
      padding: 22rpx;
      border-radius: 10rpx;
      width: calc(100% - 44rpx);
      background-color: $uni-bg-color;
      margin-top:24rpx;
      .income-head {
        display: flex;
        justify-content: space-between;

        .my-income {
          color: $uni-color-primary;
          font-size: 32rpx;
          font-weight: 600;
        }
      }

      .income-content {
        margin: 15rpx 0;

        .num-box {
          padding: 20rpx 0;
          font-size: 36rpx;
          font-weight: 600;
          color: $uni-text-color;
        }

        .num-title {
          font-size: 28rpx;
          color: $uni-text-color-grey;
        }
      }
    }
  }

  .flex {
    display: flex;
  }

</style>
