<template>
  <view class="container">
    <view class="head-wrap">
      <view class="content">
        <view
          class="avatar-wrap"
          @tap="$Router.push('/pages/user/personalCenter/index')"
        >
          <u-avatar :src="user_info.avatar" size="80"></u-avatar>
        </view>
        <view>
          <!-- 已登录 -->
          <view class="user-base" v-if="user_info.nickname">
            <view class="user-nickname">{{ user_info.nickname }}</view>
            <view class="btn-wrap">
              <view
                class="btn-content"
                @tap="$Router.push('/pages/user/settings/index')"
                >设置</view
              >
              <view class="btn-content">认证</view>
            </view>
          </view>

          <!-- 未登录 -->
          <view
            class="clickLogin"
            v-else
            @tap="$Router.push('/pages/login/index')"
          >
            点击登录
          </view>
        </view>
      </view>

      <!-- 收藏 -->
      <view class="Collect">
        <u-grid :border="false" col="4">
          <u-grid-item
            v-for="(listItem, listIndex) in list1"
            :key="listIndex"
            @tap="$Router.push(listItem.url)"
          >
            <u-icon
              :customStyle="{ paddingTop: 20 + 'rpx' }"
              :name="listItem.name"
              :size="24"
              color="#fff"
            />
            <text class="grid-text">{{ listItem.title }}</text>
          </u-grid-item>
        </u-grid>
      </view>

      <!-- 我的订单 -->
      <view
        class="order-out-box"
        @tap="$Router.push('/pages/user/myOrder/index')"
      >
        <view class="order-inner-box">
          <u-grid :border="false" col="4" style="background-color: #fff">
            <u-grid-item
              v-for="(listItem, listIndex) in list2"
              :key="listIndex"
            >
              <u-icon
                :customStyle="{ paddingTop: 20 + 'rpx' }"
                :name="listItem.name"
                :size="34"
              ></u-icon>
              <text class="grid-text">{{ listItem.title }}</text>
            </u-grid-item>
          </u-grid>
        </view>
      </view>
    </view>

    <!-- 我的收益 -->
    <view class="income-out-box">
      <view class="income-inner-box">
        <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>

    <!-- 预约列表 -->
    <view class="appointList">
      <u-cell
        icon="setting-fill"
        title="预约列表"
        isLink
        url="/pages/user/appoint/index"
      />
    </view>

    <view class="other-out-box">
      <view class="other-inner-box">
        <u-cell-group :border="false">
          <u-cell
            size="large"
            :border="false"
            icon="setting-fill"
            title="我的团队"
            isLink
            url=""
          ></u-cell>
          <u-cell
            size="large"
            :border="false"
            icon="setting-fill"
            title="关于我们"
            isLink
            url=""
          ></u-cell>
          <u-cell
            size="large"
            :border="false"
            icon="setting-fill"
            title="隐私条款"
            isLink
            url=""
          ></u-cell>
          <u-cell
            size="large"
            :border="false"
            icon="setting-fill"
            title="客服中心"
            isLink
            url=""
          ></u-cell>
        </u-cell-group>
      </view>
    </view>
  </view>
</template>
<script>
import { mapGetters } from 'vuex';

export default {
  data() {
    return {
      list1: [
        {
          name: 'photo',
          title: '收藏',
          url: '/pages/user/collect/list',
        },
        {
          name: 'lock',
          title: '积分',
          url: '/pages/user/score/index',
        },
        {
          name: 'star',
          title: '询价记录',
          url: '/pages/user/inquiry/index',
        },
        {
          name: 'hourglass',
          title: '优惠券',
          url: '/pages/user/coupon/index',
        },
      ],
      list2: [
        {
          name: 'photo',
          title: '我的订单',
        },
        {
          name: 'lock',
          title: '待付款',
        },
        {
          name: 'star',
          title: '已完成',
        },
        {
          name: 'hourglass',
          title: '待评价',
        },
      ],
      incomeList: [
        {
          num: '0.00',
          title: '总收益',
        },
        {
          num: '0.00',
          title: '本月收益',
        },
        {
          num: '0.00',
          title: '本周收益',
        },
        {
          num: '0.00',
          title: '可提现',
        },
      ],
    };
  },
  computed: {
    ...mapGetters(['user_info']),
  },
};
</script>
<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #efefef;
}

/* 顶部登录 */
.head-wrap {
  background-color: #347caf;
  height: 390rpx;

  .content {
    display: flex;
    padding: 38rpx 0 0 36rpx;
    box-sizing: border-box;

    .clickLogin {
      font-size: 48rpx;
      color: #ffffff;
      margin-top: 40rpx;
      margin-left: 20rpx;
    }

    .avatar-wrap {
      display: inline-block;
    }

    .user-base {
      margin-left: 10rpx;
      vertical-align: middle;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;

      .user-nickname {
        margin-top: 20rpx;
        font-size: 40rpx;
        color: #ffffff;
      }

      .btn-wrap {
        width: 160rpx;
        margin-top: 20rpx;
        display: flex;
        justify-content: space-between;

        .btn-content {
          font-size: 24rpx;
          padding: 0 16rpx;
          border-radius: 16rpx;
          background-color: #ffffff;
        }
      }
    }
  }

  .Collect {
    margin-top: 10rpx;

    // 宫格颜色
    .grid-text {
      font-size: 30rpx;
      color: #fff;
      margin-top: 5rpx;
      box-sizing: border-box;
    }
  }

  .order-out-box {
    margin-top: 30rpx;
    padding: 10rpx 16rpx;
    box-sizing: border-box;

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

.income-out-box {
  margin-top: 110rpx;
  padding: 10rpx 16rpx;
  box-sizing: border-box;

  .income-inner-box {
    padding: 20rpx;
    background-color: $uni-bg-color;

    .income-head {
      display: flex;
      justify-content: space-between;

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

    .income-content {
      .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;
      }
    }
  }
}

.other-out-box {
  margin-top: 10rpx;
  padding: 20rpx 16rpx;
  box-sizing: border-box;

  .other-inner-box {
    background-color: $uni-bg-color;
  }
}

.appointList {
  background-color: #fff;
  margin: 10rpx 16rpx 0 16rpx;
}
</style>
