<template>
  <view class="content">
    <view class="top-area">
      <view class="reset">
        <image class="bg" src="/static/imgs/mine/mine-top-bg.png"></image>
        <view class="operation-area">
          <view class="user">
            <image class="avatar" :src="curAvatar"></image>
            <view v-if="!hasLogin" @click="go2('login')">
              <view>
                <text style="font-size: 40rpx; color: #fff; font-weight: 600">点击登录</text>
              </view>
              <view style="margin-top: 10rpx">
                <text style="font-size: 26rpx; color: #fff; font-weight: 400">登录解锁更全功能</text>
              </view>
            </view>
            <view v-else>
              <view class="user__name">
                <text class="name">{{ userInfo.name }}</text>
                <image v-if="userInfo.fddEnterpriseStatus === fddStatus.CERTIFIED_SUCCESS" class="image" src="/static/imgs/mine/certified-icon.png"></image>
                <image v-else class="image" @click="certifyCompany()" src="/static/imgs/mine/non-certified-icon.png"></image>
              </view>
              <view style="margin-top: 10rpx">
                <text style="font-size: 26rpx; color: #fff; font-weight: 400; word-break: break-all">{{ userInfo.supplierName }}</text>
              </view>
            </view>
          </view>
          <view class="operation">
            <view class="box">
              <view class="container" @click="go2('message')">
                <image class="icon" src="/static/imgs/mine/msg-icon.png"></image>
                <view v-if="messageNum > 0" class="number">
                  <text class="text">{{ messageNum }}</text>
                </view>
              </view>
              <image class="icon" @click="go2('setting')" src="/static/imgs/mine/setting-icon.png"></image>
            </view>
            <view v-if="companyNum > 1" class="box" @click="go2('toggle-supplier')">
              <text style="font-size: 24rpx; color: #fff; flex-shrink: 0">切换账号</text>
              <image class="icon" style="width: 24rpx; height: 24rpx; margin-left: 8rpx" src="/static/imgs/mine/toggle-icon.png"></image>
            </view>
          </view>
        </view>
        <view class="vip-area">
          <view class="vip-content">
            <view class="left">
              <image class="icon" src="/static/imgs/mine/vip-icon.png"></image>
              <text class="text">VIP会员</text>
            </view>
            <text class="center">立即开通会员 尊享特权</text>
            <view class="right">
              <text class="text">开通会员</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="card-area">
      <view class="header">
        <view class="item" style="justify-content: flex-start">
          <image class="icon" style="width: 32rpx; height: 32rpx" src="/static/imgs/mine/money-icon.png"></image>
          <text class="text">掌柜收入</text>
        </view>
        <view class="item" style="justify-content: flex-end">
          <qn-data-picker
            v-model="tradeDate"
            text="right"
            :border="false"
            placeholder="交易区间"
            popup-title="请选择时间"
            :localdata="tradeRange"
            :clear-icon="false"
            v-slot:default="{ data }"
          >
            <view class="time-range">
              <text style="font-size: 24rpx; color: rgba(0, 0, 0, 0.65); margin-right: 8rpx">{{ data[0] ? data[0].value : '' }}</text>
              <text style="font-size: 24rpx; color: #333333; font-weight: 500; margin-right: 8rpx">{{ data[0] ? data[0].text : '' }}</text>
              <uni-icons type="bottom" size="14" color="rgba(0,0,0,0.65)"></uni-icons>
            </view>
          </qn-data-picker>
        </view>
      </view>
      <view class="order-area">
        <view class="order-item">
          <text class="value">{{ tradeData.tradingVolume }}</text>
          <text class="label">交易额(元)</text>
        </view>
        <view class="order-item">
          <text class="value">{{ tradeData.volumeOfBusiness }}</text>
          <text class="label">交易量(吨)</text>
        </view>
        <view class="order-item">
          <text class="value">{{ tradeData.orderQuantity }}</text>
          <text class="label">成交订单(个)</text>
        </view>
      </view>
    </view>
    <view class="card-area">
      <view class="header">
        <text style="font-size: 30rpx; color: rgba(0, 0, 0, 0.85); font-weight: 600">其他工具</text>
      </view>
      <view class="icon-area">
        <view class="icon-item">
          <image class="icon" src="/static/imgs/mine/order-icon.png"></image>
          <text class="label">订单管理</text>
        </view>
        <view class="icon-item">
          <image class="icon" src="/static/imgs/mine/finance-icon.png"></image>
          <text class="label">账期订单融资</text>
        </view>
        <view class="icon-item">
          <image class="icon" src="/static/imgs/mine/contract-icon.png"></image>
          <text class="label">合同管理</text>
        </view>
        <view class="icon-item" @click="go2('credit-management')">
          <image class="icon" src="/static/imgs/mine/credit-icon.png"></image>
          <text class="label">征信管理</text>
        </view>
        <view class="icon-item" @click="go2('client-credit-list')">
          <image class="icon" src="/static/imgs/mine/credit-icon.png"></image>
          <text class="label">授信记录</text>
        </view>
        <!-- <view class="icon-item">
          <image class="icon" src="/static/imgs/mine/contract-icon.png"></image>
          <text class="label">服务区域</text>
        </view> -->
      </view>
    </view>
    <view @click="logout">mine</view>
    <view @click="go2('client-credit')">client-credit</view>
    <view @click="go2('enterprise-info')">enterprise-info</view>
  </view>
</template>

<script>
import { exit, go2 } from '@/utils/hook.js'
import { fddEnterpriseStatus } from '@/enums/index.js'
import { getBaseInfo, getVerifyUrl } from '@/apis/commonApi.js'
import qnDataPicker from '@/components/qn-data-picker/qn-data-picker.vue'
import { dateTimeFormat } from '@/utils/index.js'
import { getOrderStatistics } from '@/apis/mineApi.js'
// 获取本月第一天和最后一天
const currentMonth = (() => {
  let endDate = new Date()
  let beginDate = new Date(endDate.getFullYear(), endDate.getMonth(), 1)
  return [dateTimeFormat(beginDate, 'yyyy-mm-dd'), dateTimeFormat(endDate, 'yyyy-mm-dd')]
})()

// 获取上月第一天和最后一天
const lastMonth = (() => {
  let now = new Date()
  let endDate = new Date(now.getFullYear(), now.getMonth(), 0)
  let beginDate = new Date(now.getFullYear(), now.getMonth() - 1, 1)
  return [dateTimeFormat(beginDate, 'yyyy-mm-dd'), dateTimeFormat(endDate, 'yyyy-mm-dd')]
})()
export default {
  components: { qnDataPicker },
  data() {
    return {
      fddStatus: Object.freeze(fddEnterpriseStatus),
      messageNum: 0,
      companyNum: 0,
      tradeRange: [
        {
          text: '本月',
          value: currentMonth.join('~')
        },
        {
          text: '上月',
          value: lastMonth.join('~')
        },
        {
          text: '总计',
          value: ''
        }
      ],
      tradeDate: currentMonth.join('~'),
      tradeData: {
        tradingVolume: 0,
        volumeOfBusiness: 0,
        orderQuantity: 0
      }
    }
  },
  methods: {
    logout() {
      exit()
    },
    // 企业法大大实名认证
    certifyCompany() {
      if (this.userInfo.fddEnterpriseStatus === fddEnterpriseStatus.UNCERTIFIED || this.userInfo.fddEnterpriseStatus === fddEnterpriseStatus.CERTIFIED_FAIL) {
        getVerifyUrl({ enterpriseId: this.$store.state.supplierInfo.id }).then((res) => {
          if (res) {
            // #ifdef APP-PLUS
            go2('page-view', { title: '实名认证', url: encodeURIComponent(res) })
            // #endif
            // #ifdef H5
            window ? (window.location.href = res) : ''
            // #endif
          }
        })
      }
      if (this.userInfo.fddEnterpriseStatus === fddEnterpriseStatus.UNCERTIFIED) {
        uni.showToast({
          title: '认证中，请稍后~',
          icon: 'none'
        })
      }
    },
    go2,
    // 获取纸盘商订单统计
    getStatistics() {
      if (!this.hasLogin) {
        return
      }
      let beginDate = this.tradeDate.split('~')[0] || ''
      let endDate = this.tradeDate.split('~')[1] || ''
      // 供应商id
      let currentSupplier = this.$store.state.supplierInfo.supplierId
      getOrderStatistics({
        beginDate,
        endDate,
        currentSupplier
      }).then((res) => {
        console.log('res', res)
        if (res) {
          this.tradeData = res
        }
      })
    }
  },
  watch: {
    tradeDate(val) {
      console.log('val:', val)
    },
    '$store.state.supplierInfo.supplierId': {
      handler(val) {
        console.log('切换了供应商:', val)
        if (val) {
          this.getStatistics()
        }
      },
      immediate: true
    },
    tradeDate() {
      this.getStatistics()
    }
  },
  computed: {
    hasLogin() {
      console.log('token:', this.$store.state.qnToken)
      return this.$store.state.qnToken != ''
    },
    curAvatar() {
      if (!this.hasLogin) {
        return '/static/imgs/mine/user-avatar.png'
      }
      if (this.userInfo.avatar) {
        return this.userInfo.avatar
      } else {
        return '/static/imgs/mine/default-avatar.png'
      }
    },
    userInfo() {
      return {
        avatar: this.$store.state.userInfo.avatar || '',
        name: this.$store.state.userInfo.name || this.$store.state.userInfo.mobile || '',
        supplierName: this.$store.state.supplierInfo.name || '',
        fddEnterpriseStatus: this.$store.state.supplierInfo.fddEnterpriseStatus || 1
      }
    }
  },
  onLoad() {
  },
  onShow() {
    getBaseInfo({}, true).then((res) => {
      if (res) {
        this.companyNum = res.enterpriseList.length
      }
    })
  },
  created() {
    this.getStatistics()
  }
}
</script>

<style lang="scss" scoped>
.content {
  width: 750rpx;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.top-area {
  width: 750rpx;
  height: 380rpx;
  overflow: hidden;
  position: relative;
  border-radius: 0 0 350px 350px;
  transform: scaleX(2.5);
  .reset {
    width: 750rpx;
    height: 380rpx;
    transform: scaleX(0.4); // 将比例缩至正常
    position: relative;
    overflow: hidden;
  }
  .bg {
    width: 750rpx;
    height: 380rpx;
    z-index: 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }
  .operation-area {
    width: 750rpx;
    margin: 96rpx 0 36rpx;
    padding: 0 32rpx;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    .user {
      z-index: 5;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      .avatar {
        width: 156rpx;
        height: 156rpx;
        border-radius: 50%;
        flex-grow: 0;
        flex-shrink: 0;
        overflow: hidden;
        margin-right: 16rpx;
      }
      .user__name {
        flex-grow: 1;
        flex-shrink: 1;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        .name {
          font-size: 40rpx;
          color: #fff;
          font-weight: 600;
          margin-right: 16rpx;
          word-break: break-all;
        }
        .image {
          width: 100rpx;
          height: 32rpx;
          flex-grow: 0;
          flex-shrink: 0;
        }
      }
    }
    .operation {
      z-index: 5;
      margin-top: 18rpx;
      margin-left: 20rpx;
      flex-grow: 0;
      flex-shrink: 0;
      .box {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        margin-bottom: 36rpx;
        .container {
          width: 40rpx;
          height: 40rpx;
          flex-grow: 0;
          flex-shrink: 0;
          margin-right: 26rpx;
          position: relative;
          .number {
            position: absolute;
            top: -12rpx;
            right: -12rpx;
            // width:32rpx;
            // height: 32rpx;
            padding: 6rpx 10rpx;
            background-color: #f5222d;
            border-radius: 16rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            .text {
              font-size: 20rpx;
              color: #fff;
              font-weight: 500;
            }
          }
        }
        .icon {
          width: 40rpx;
          height: 40rpx;
          flex-grow: 0;
          flex-shrink: 0;
        }
      }
    }
  }
  .vip-area {
    z-index: 5;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 686rpx;
    height: 90rpx;
    margin: 0 32rpx;
    background-image: linear-gradient(90deg, #333333 0%, #696c6b 99%);
    border-radius: 10rpx;
    .vip-content {
      width: 686rpx;
      padding: 18rpx 24rpx 0;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      .left {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        .icon {
          width: 28rpx;
          height: 28rpx;
          flex-grow: 0;
          flex-shrink: 0;
        }
        .text {
          font-size: 26rpx;
          color: #dbc189;
          font-weight: 500;
        }
      }
      .center {
        font-size: 24rpx;
        color: #e7e1be;
        font-weight: 600;
      }
      .right {
        position: relative;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: 128rpx;
        height: 44rpx;
        border-radius: 14rpx;
        background-image: linear-gradient(90deg, #f4edce 1%, #f3d99e 98%);
        .text {
          font-size: 24rpx;
          color: #443015;
        }
      }
    }
  }
}
.card-area {
  width: 686rpx;
  margin: 20rpx 32rpx 0;
  background-color: #fff;
  box-shadow: 0 2rpx 14rpx 0 rgba(220, 220, 220, 0.5);
  border-radius: 10rpx;
  .header {
    padding: 20rpx 24rpx 14rpx;
    border-bottom: 2rpx solid #f8f8f8;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    .item {
      display: flex;
      flex-direction: row;
      align-items: center;
      .icon {
        flex-grow: 0;
        flex-shrink: 0;
        margin-right: 10rpx;
      }
      .text {
        font-size: 30rpx;
        color: rgba(0, 0, 0, 0.85);
        letter-spacing: 1.5rpx;
        font-weight: 600;
      }
    }
  }
}
.order-area {
  padding: 20rpx 20rpx 30rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  .order-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .value {
      font-size: 36rpx;
      color: rgba(0, 0, 0, 0.85);
      font-weight: 500;
    }
    .label {
      font-size: 26rpx;
      color: #666666;
      margin-top: 10rpx;
    }
  }
}
.icon-area {
  padding: 40rpx 32rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  .icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 140rpx;
    margin-bottom: 36rpx;
    .icon {
      width: 68rpx;
      height: 68rpx;
      flex-grow: 0;
      flex-shrink: 0;
    }
    .label {
      font-size: 26rpx;
      color: #666666;
      margin-top: 10rpx;
    }
  }
}
.time-range {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
}
</style>
