<template>
  <view v-if="!isLoading" class="container b-f">

    <!-- 分销商中心 -->
    <view class="center" v-if="isDealer">

      <!-- 头部背景图 -->
      <view class="dealer-bg">
        <image class="image" mode="widthFix" :src="setting.background"></image>
      </view>

      <!-- 内容区 -->
      <view class="widget-body b-f dis-flex flex-dir-column flex-y-center">
        <!-- 用户信息 -->
        <view class="widget widget__base m-top20 b-f dis-flex flex-dir-column">
          <view class="base__user f-30">
            <!-- 用户头像 -->
            <view class="user-avatar">
              <avatar-image :url="user.avatar_url" :width="150" :borderWidth="4" :borderColor="`#fff`" />
            </view>
            <view class="user-nickName f-32">{{ user.nick_name }}</view>
            <view class="user-referee f-24 col-9">
              {{ setting.words.index.words.referee.value }}：{{ refereeName }}
            </view>
          </view>
          <view class="base__capital dis-flex flex-dir-column">
            <!-- 佣金卡片 -->
            <view class="capital-card dis-flex">
              <view class="card-left">
                <view class="f-28 col-f">
                  <text space="ensp">{{ setting.words.index.words.money.value }} {{ dealer.money }}</text>
                  <text class="m-l-10">元</text>
                </view>
                <view class="f-28 col-f">
                  <text space="ensp">{{ setting.words.index.words.freeze_money.value }} {{ dealer.freeze_money }}</text>
                  <text class="m-l-10">元</text>
                </view>
              </view>
              <view class="card-right flex-box dis-flex flex-x-end flex-y-center">
                <view class="withdraw-btn f-26" @click="$navTo('pages/dealer/withdraw/apply')">
                  {{ setting.words.index.words.withdraw.value }}
                </view>
              </view>
            </view>
            <!-- 已提现金额 -->
            <view class="capital-already clear">
              <view class="already-left f-26 fl">{{ setting.words.index.words.total_money.value }}</view>
              <view class="already-right f-26 fr">{{ dealer.total_money }}元</view>
            </view>
          </view>
        </view>

        <!-- 操作列表 -->
        <view class="widget widget__operat clear b-f">
          <view class="operat__item" @click="$navTo('pages/dealer/withdraw/list')">
            <view class="item__icon">
              <text class="iconfont icon-zhangben" style="color:#F9BA21;"></text>
            </view>
            <view class="item__text f-26">{{ setting.words.withdraw_list.title.value }}</view>
          </view>
          <view class="operat__item" @click="$navTo('pages/dealer/order')">
            <view class="item__icon">
              <text class="iconfont icon-dingdan" style="color:#FF7575;"></text>
            </view>
            <view class="item__text f-26">{{ setting.words.order.title.value }}</view>
          </view>
          <view class="operat__item" @click="$navTo('pages/dealer/team')">
            <view class="item__icon">
              <text class="iconfont icon-tuandui" style="color:#59C78E;"></text>
            </view>
            <view class="item__text f-26">{{ setting.words.team.title.value }}</view>
          </view>
          <view class="operat__item" @click="$navTo('pages/dealer/poster')">
            <view class="item__icon">
              <text class="iconfont icon-erweima" style="color:#5fa5ff;"></text>
            </view>
            <view class="item__text f-26">{{ setting.words.poster.title.value }}</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 当前不是分销商 -->
    <view class="container b-f" v-if="!isDealer">
      <view class="no-dealer">
        <view class="no-icon dis-flex flex-x-center">
          <image src="/static/not-dealer.png"></image>
        </view>
        <view class="no-msg dis-flex flex-x-center f-30">{{ setting.words.index.words.not_dealer.value }}
        </view>
        <!-- 立即申请 -->
        <view class="no-submit form-submit">
          <view class="button" @click="$navTo('pages/dealer/apply')">{{ setting.words.index.words.apply_now.value }}
          </view>
        </view>
      </view>
    </view>

  </view>

</template>

<script>
  import AvatarImage from '@/components/avatar-image'
  import * as Api from '@/api/dealer'

  export default {
    components: {
      AvatarImage
    },
    data() {
      return {
        // 正在加载
        isLoading: true,
        // 当前用户信息
        user: undefined,
        // 当前是否为分销商
        isDealer: false,
        // 当前分销商信息
        dealer: undefined,
        // 推荐人昵称
        refereeName: undefined,
        // 分销设置
        setting: {
          background: undefined,
          words: undefined
        }
      }
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
      this.getCenter()
    },

    methods: {

      // 获取分销商中心数据
      getCenter() {
        const app = this
        app.isLoading = true
        Api.center()
          .then(result => {
            // api数据赋值
            const data = result.data
            app.isDealer = data.isDealer
            app.user = data.user
            app.dealer = data.dealer
            app.refereeName = data.refereeName
            app.setting = data.setting
            // 设置当前页面标题
            app.setPageTitle()
            app.isLoading = false
          })
      },

      // 设置当前页面标题
      setPageTitle() {
        uni.setNavigationBarTitle({
          title: this.setting.words.index.title.value
        })
      }

    }
  }
</script>

<style>
  page {
    background: #fff;
  }
</style>
<style lang="scss" scoped>
  .dealer-bg {
    .image {
      width: 100%;
    }
  }

  .widget-body {
    position: relative;

    .widget {
      width: 88%;
      box-sizing: border-box;
      box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.11);
      border-radius: 12rpx;
    }
  }

  .widget__base {
    margin-top: -60rpx;

    .base__user {
      position: relative;
      padding: 15rpx 40rpx;
      border-bottom: 1rpx solid #e7e7e7;

      .user-avatar {
        position: absolute;
        top: -75rpx;
        right: 60rpx;
      }

      .user-nickName {
        margin-top: 30rpx;
        margin-bottom: 10rpx;
      }
    }

    .base__capital {
      padding: 35rpx;

      .capital-card {
        height: 200rpx;
        padding: 36rpx 0;
        background-color: #8e84fc;
        border-radius: 10rpx;
        box-sizing: border-box;

        .card-left {
          flex: 1;
          display: flex;
          justify-content: space-around;
          align-items: flex-start;
          flex-direction: column;
          padding-left: 32rpx;
        }

        .card-right {
          .withdraw-btn {
            width: 130rpx;
            height: 50rpx;
            background: #fff;
            color: #8e84fc;
            border-radius: 25rpx;
            margin-right: 32rpx;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
      }

      .capital-already {
        padding: 20rpx;
        padding-bottom: 0;
      }
    }
  }

  /* 操作列表 */
  .widget__operat {
    padding: 50rpx;
    margin-top: 40rpx;

    .operat__item {
      width: 33.33333%;
      float: left;
      margin-bottom: 50rpx;
      text-align: center;

      &:last-child {
        margin-bottom: 0;
      }

      .item__icon {
        margin-bottom: 8rpx;
        font-size: 58rpx;
      }
    }
  }

  /* 当前不是分销商 */
  .no-dealer {
    padding-top: 150rpx;
  }

  .no-icon {
    image {
      width: 420rpx;
      height: 240rpx;
    }
  }

  .no-msg {
    padding: 86rpx 0;
  }

  .form-submit {
    .button {
      font-size: 30rpx;
      background: #786cff;
      border: 1rpx solid #786cff;
      color: white;
      border-radius: 50rpx;
      padding: 22rpx 0;
      width: 470rpx;
      box-sizing: border-box;
      margin: 0 auto;
      text-align: center;

      &.disabled {
        opacity: 0.6;
      }
    }
  }
</style>