<template>
  <view class="head-container" :style="{
    backgroundImage:
      provinceCode === '530000'
        ? 'url(https://eshangtech.com/minTestImg/530000bg.png)'
        : '',
  }">
    <div class="new-content">
      <div class="header-card">
        <image :src="'/static/images/revenue/' + provinceCode + '.png'" mode="aspectFit" class="head-log" :style="provinceCode !== 340000 ? 'width: 160rpx;height: 160rpx;' : ''
          "></image>
        <view class="head-cost-text uni-flex ai-center" :style="{ color: provinceCode === '530000' ? '#1D383E' : '' }">
          实时营收
          <div class="date-tag" :style="{
            background: provinceCode === '530000' ? '#FFFFFF' : '',
            color: provinceCode === '530000' ? '#3C6B76' : '',
          }">
            <image class="tagBefore" :src="provinceCode === '530000'
              ? '/static/images/revenue/dateIcon530000.png'
              : '/static/images/revenue/date-ico.png'
              " />
            <span>{{ nowDay }} 星期{{ getWeekDay() }}</span>
          </div>
        </view>
        <div class="uni-flex ai-base jc-center top-number">
          <text class="top-number-amount" :style="{
            backgroundImage:
              provinceCode === '530000'
                ? '-webkit-linear-gradient(bottom, #1D383E 0%, #1D383E 100%)'
                : '',
          }">{{ today.timeMoney || "0.00" }}</text>
          <span class="top-number-unit" :style="{
            color: provinceCode === '530000' ? '#1D383E' : '',
          }">(元)</span>
        </div>

        <p class="header-today-info">
          <span style="margin-right: 12rpx" :style="{
            color: provinceCode === '530000' ? '#1D383E' : '',
          }">客单交易</span>
          <text :style="{
            color: provinceCode === '530000' ? '#1D383E' : '',
          }">{{ today.totalTicketCount || 0 }}</text>
          <span style="font-size: 22rpx" :style="{
            color: provinceCode === '530000' ? '#1D383E' : '',
          }">(单)</span>
          <span class="ml-135 fs12" style="margin-right: 12rpx" :style="{
            color: provinceCode === '530000' ? '#1D383E' : '',
          }">客单均价</span>
          <text :style="{
            color: provinceCode === '530000' ? '#1D383E' : '',
          }">{{ today.avrticketCount || "0.00" }}</text>
          <span style="font-size: 22rpx" :style="{
            color: provinceCode === '530000' ? '#1D383E' : '',
          }">(元)</span>
        </p>
      </div>
    </div>
    <template v-if="headMsg.cashPay">
      <view class="revenue-card-cont" :style="{
        background: provinceCode === '530000' ? '#fff' : '',
      }">
        <div class="top-revenue-card">
          <div class="uni-flex jc-between header-date ai-center">
            <div class="revenue-card-title">对客营收</div>
            <picker mode="date" @change="bindDateChange" :end="{ lastDay }" start="2019-12-01" :value="selectDate"
              :style="{
                background: provinceCode === '530000' ? '#E3F2EE' : '',
                color: provinceCode === '530000' ? '#36945C' : '',
              }">
              <text :class="provinceCode === '530000'
                ? 'revenue-date530000'
                : 'revenue-date'
                ">{{ headMsg.dayOfShow }} 星期{{ getWeekDay(selectDate) }}</text>
            </picker>
          </div>
          <div class="uni-flex ai-base jc-center center-amount">
            <text class="revenue-alltime-amount" :style="{
              backgroundImage:
                provinceCode === '530000'
                  ? '-webkit-linear-gradient(bottom, #1E9B4A 0%, #1E9B4A 100%);'
                  : '',
            }">
              {{ headMsg.totalMoneyShow }}
            </text>
            <span class="amount-unit" :style="{
              backgroundImage:
                provinceCode === '530000'
                  ? '-webkit-linear-gradient(bottom, #1E9B4A 0%, #1E9B4A 100%);'
                  : '',
            }">(元)</span>
          </div>
        </div>
        <div class="uni-flex jc-between" v-if="provinceCode == 340000">
          <div class="revenue-tag">
            <span>计划营收</span>
            <div class="amount">{{ headMsg.budgetamoutShow }}</div>
          </div>
          <div class="revenue-tag">
            <span>相比计划</span>
            <div :class="headMsg.budgetAmount < headMsg.cashPay
              ? 'up-text-title'
              : 'down-text-title'
              " :style="{
                color: provinceCode === '530000' ? '#81AA51' : '',
              }">
              {{ $util.fmoney(headMsg.diffBudgetTotal) }}
              <span :style="{
                color: provinceCode === '530000' ? '#81AA51' : '',
                fontSize: '24rpx',
                marginLeft: '12rpx',
              }">{{ headMsg.diffBili }}%</span>
            </div>
          </div>
        </div>
        <div class="uni-flex jc-between" v-if="
          provinceCode == 340000 &&
          groupType == 1000 &&
          headMsg.shareShopCount > 0
        ">
          <div class="revenue-tag">
            <div style="font-size: 24rpx; margin-top: 15rpx">
              分润门店:
              <span class="amount" style="font-size: 28rpx; padding-left: 0.5em">
                {{ headMsg.shareShopCount }}个
              </span>
            </div>
          </div>
          <div class="revenue-tag">
            <div style="font-size: 24rpx; margin-top: 15rpx">
              驿达分润:
              <span class="amount" style="font-size: 28rpx; padding-left: 0.5em">
                {{ $util.fmoney(headMsg.royaltyPrice) }}元
              </span>
            </div>
            <!-- <div style="font-size: 24rpx;">
							累计分润
							<span class="amount" style="font-size: 28rpx;padding-left: 0.5em;">272,109.93元</span>
						</div> -->
          </div>
        </div>
        <div class="uni-flex jc-between" v-if="
          provinceCode == 340000 &&
          groupType == 1000 &&
          headMsg.deliverBillCount > 0
        ">
          <div class="revenue-tag">
            <div style="font-size: 24rpx; margin-top: 15rpx">
              万佳配送订单:
              <span class="amount" style="font-size: 28rpx; padding-left: 0.5em">
                {{ headMsg.deliverBillCount }}单
              </span>
            </div>
          </div>
          <div class="revenue-tag">
            <div style="font-size: 24rpx; margin-top: 15rpx">
              采购金额:
              <span class="amount" style="font-size: 28rpx; padding-left: 0.5em">
                {{ $util.fmoney(headMsg.deliverPrice) }}元
              </span>
            </div>
            <!-- <div style="font-size: 24rpx;">
							累计分润
							<span class="amount" style="font-size: 28rpx;padding-left: 0.5em;">272,109.93元</span>
						</div> -->
          </div>
        </div>
        <div class="view-bottom" @click="toggleCard">
          <text class="uni-icon uni-icon-arrowup" :class="{ up: isup }"></text>
        </div>
      </view>
      <div class="model-content" :class="{ hidden: isup }">
        <!-- 营收数据总览 -->
        <div class="uni-flex justify-around" style="padding-top: 18rpx" v-if="provinceCode == 620000">
          <div class="check-unit">
            <text>商超营收</text>
            <div class="check-price-color">
              {{ $util.fmoney(headMsg.scCashPay, 2) }} <text>元</text>
            </div>
          </div>
          <div class="check-unit">
            <text>商超门店</text>
            <div class="check-price-color">
              {{ headMsg.scCount }} <text>家</text>
            </div>
          </div>
          <div class="check-unit">
            <text>餐饮营收</text>
            <div class="check-price-color">
              {{ $util.fmoney(headMsg.cyCashPay, 2) }} <text>元</text>
            </div>
          </div>
          <div class="check-unit">
            <text>餐饮门店</text>
            <div class="check-price-color">
              {{ headMsg.cyCount }} <text>家</text>
            </div>
          </div>
        </div>
        <div class="uni-flex justify-around" :style="provinceCode == 620000 ? 'padding-top: 0rpx;' : 'padding-top:18rpx;'
          ">
          <div class="check-unit">
            <text>长款金额</text>
            <div class="check-price-color">
              {{ $util.fmoney(headMsg.diffMorePrice, 2) }} <text>元</text>
            </div>
          </div>
          <div class="check-unit">
            <text>短款金额</text>
            <div class="check-price-color">
              {{ $util.fmoney(headMsg.diffLessPrice, 2) }} <text>元</text>
            </div>
          </div>
          <div class="check-unit">
            <text>客单交易</text>
            <div class="check-price-color">
              {{ $util.fmoney(headMsg.ticketCount, 0) }} <text>笔</text>
            </div>
          </div>
          <div class="check-unit">
            <text>客单均价</text>
            <div class="check-price-color">
              {{ $util.fmoney(headMsg.tickave, 2) }} <text>元</text>
            </div>
          </div>
        </div>
        <div class="uni-flex justify-around mode-content" :style="provinceCode == 620000
          ? 'padding-top: 0rpx;'
          : 'padding-bottom:24rpx;'
          ">
          <div class="check-unit">
            <text>优惠金额</text>
            <div class="check-price-color">
              {{ $util.fmoney(headMsg.totalOffAmount, 2) }} <text>元</text>
            </div>
          </div>
          <div class="check-unit">
            <text>移动支付</text>
            <div class="check-price-color">
              {{ $util.fmoney(headMsg.mobilePayment, 2) }} <text>元</text>
            </div>
          </div>
          <div class="check-unit">
            <text>商品出售</text>
            <div class="check-price-color">
              {{ $util.fmoney(headMsg.totalCount, 0) }} <text>件</text>
            </div>
          </div>
          <div class="check-unit">
            <text>商品均价</text>
            <div class="check-price-color">
              {{ $util.fmoney(headMsg.countave, 2) }} <text>元</text>
            </div>
          </div>
        </div>
        <div class="uni-flex justify-around mode-content" style="padding-bottom: 24rpx" v-if="provinceCode == 620000">
          <div class="check-unit">
            <text>通美</text>
            <div class="check-price-color">
              {{ $util.fmoney(headMsg.tmCrashPay, 2) }} <text>元</text>
            </div>
          </div>
          <div class="check-unit"></div>
          <div class="check-unit"></div>
          <div class="check-unit"></div>
        </div>
      </div>
    </template>
    <template v-else>
      <view class="revenue-card-cont">
        <div class="top-revenue-card">
          <div class="uni-flex jc-between header-date ai-center">
            <div class="revenue-card-title">对客营收</div>
            <picker mode="date" @change="bindDateChange" :end="{ lastDay }" start="2019-12-01" :value="selectDate">
              <text class="revenue-date">{{ headMsg.dayOfShow }} 星期{{ getWeekDay(selectDate) }}</text>
            </picker>
          </div>
          <div class="uni-flex ai-base jc-center center-amount">
            <text class="revenue-alltime-amount">
              {{ headMsg.totalMoneyShow }}
            </text>
            <span class="amount-unit">(元)</span>
          </div>
        </div>
        <div class="uni-flex jc-between">
          <div class="revenue-tag">
            <span>计划营收</span>
            <div class="amount">{{ headMsg.budgetamoutShow }}</div>
          </div>
          <div class="revenue-tag">
            <span>相比计划</span>
            <div :class="headMsg.BUDGETAMOUNT < headMsg.totalMoney
              ? 'up-text-title'
              : 'down-text-title'
              ">
              {{ $util.fmoney(headMsg.diffBudgetTotal) }}
              <span style="font-size: 24rpx; margin-left: 12rpx">{{ headMsg.diffBili }}%</span>
            </div>
          </div>
        </div>
        <div class="view-bottom" @click="toggleCard">
          <text class="uni-icon uni-icon-arrowup" :class="{ up: isup }"></text>
        </div>
      </view>
      <div class="model-content" :class="{ hidden: isup }">
        <!-- 营收数据总览 -->
        <div class="uni-flex justify-around" style="padding-top: 18rpx">
          <div class="check-unit">
            <text>长款金额</text>
            <div class="check-price-color">
              {{ headMsg.DIFFERENT_PRICE_MORE }} <text>元</text>
            </div>
          </div>
          <div class="check-unit">
            <text>短款金额</text>
            <div class="check-price-color">
              {{ headMsg.DIFFERENT_PRICE_LESS }} <text>元</text>
            </div>
          </div>
          <div class="check-unit">
            <text>客单交易</text>
            <div class="check-price-color">
              {{ headMsg.TICKETCOUNT }} <text>笔</text>
            </div>
          </div>
          <div class="check-unit">
            <text>客单均价</text>
            <div class="check-price-color">
              {{ headMsg.TICKETAVE }} <text>元</text>
            </div>
          </div>
        </div>
        <div class="uni-flex justify-around mode-content" style="padding-bottom: 24rpx">
          <div class="check-unit">
            <text>优惠金额</text>
            <div class="check-price-color">
              {{ headMsg.TOTALOFFAMOUNT }} <text>元</text>
            </div>
          </div>
          <div class="check-unit">
            <text>移动支付</text>
            <div class="check-price-color">
              {{ headMsg.MOBILEPAYMENT }} <text>元</text>
            </div>
          </div>
          <div class="check-unit">
            <text>商品出售</text>
            <div class="check-price-color">
              {{ headMsg.COMMODITY_COUNT }} <text>件</text>
            </div>
          </div>
          <div class="check-unit">
            <text>商品均价</text>
            <div class="check-price-color">
              {{ headMsg.COMMODITYAVE }} <text>元</text>
            </div>
          </div>
        </div>
      </div>
    </template>
  </view>
</template>
<script>
export default {
  props: ['headMsg', 'today', 'lastDay', 'nowDay', 'isup', 'selectDate', 'provinceCode', 'groupType', 'currentMoney'],

  methods: {
    bindDateChange(e) {
      this.$emit('bindDateChange', e)
    },
    toggleCard() {
      this.$emit('toggle', this.isup)
    },
    getWeekDay(dayDate) {

      let show_day = ['日', '一', '二', '三', '四', '五', '六']
      let date = dayDate ? new Date(dayDate) : new Date();
      let day = date.getDay()
      return show_day[day]
    }
  }
}
</script>
<style>


.new-content {
  color: #fff;
  box-sizing: border-box;
  padding-top: 40rpx;
}

.new-content .text-title {
  flex: 1;
  text-align: center;
  font-weight: 600;
}

.new-content .header-card {
  padding: 0 30rpx;
  color: #bed4f4;
  /* color: #FAD5D2; */
  position: relative;
}

.head-cost-text {
  color: #bed4f4;
  /* color: #FAD5D2; */

  font-size: 28rpx;
}

.head-cost-text .date-tag {
  display: flex;
  border-radius: 20rpx;
  padding: 0 16rpx;
  background: #6179bf;
  color: #c6d1ed;
  /* background: #ECB0A9; */
  /* color: #AD332C; */
  font-size: 22rpx;
  margin-left: 16rpx;
  align-items: center;
}

.tagBefore {
  width: 20rpx;
  height: 20rpx;
  margin-right: 8rpx;
}

/* .date-tag::before {
  content: "";
  background: url(/static/images/revenue/date-ico.png) no-repeat center;
  width: 21rpx;
  height: 32rpx;
  background-size: contain;
  display: block;
  margin-right: 8rpx;
} */
.head-log {
  position: absolute;
  right: 19rpx;
  top: -4rpx;
  width: 125rpx;
  height: 91rpx;
}

.new-content .top-number {
  padding-top: 16rpx;
  padding-bottom: 16rpx;
  padding-left: 4rpx;
  letter-spacing: 2rpx;
  line-height: 1.1;
  transition: all 1s;
}

.new-content .top-number-unit {
  font-size: 24rpx;
  font-weight: 600;
  line-height: 72rpx;
  text-align: left;
  font-family: "Bahnschrift Regular";
}

.new-content .top-number-amount {
  background-image: -webkit-linear-gradient(top,
      #ffffff 40%,
      #b3c1e7 100%);
  /*#f8b8b1 100%);  */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 76rpx;
  font-family: "Bahnschrift Regular";
}

.new-content p.header-today-info {
  font-size: 24rpx;
  position: relative;
  z-index: 2;
}

.new-content .header-today-info text {
  font-family: "Bahnschrift Regular";
  font-size: 30rpx;
}

.ml-135 {
  margin-left: 135rpx;
}

.heade-text {
  text-align: right;
  line-height: 1;
  letter-spacing: 0;
  color: #bed4f4;
  /* color: #FAD5D2; */
  font-family: "Bahnschrift Regular";
  display: flex;
  align-items: center;
}

.header-date {
  padding: 25rpx 0 16rpx 24rpx;
  /* background: linear-gradient( to left,#ffffff 0%, #e3e8fd 100%); */
  margin-bottom: 16rpx;
}

.header-date picker {
  color: #fff;
  padding: 2rpx 46rpx 0rpx 20rpx;
  position: relative;
  /* width: 180rpx; */
  border-radius: 24rpx 0px 0px 25rpx;
  background: #8994b8;
  font-size: 26rpx;
  box-sizing: border-box;
}

.header-date picker .revenue-date:before {
  content: "";
  position: absolute;
  width: 0rpx;
  height: 0rpx;
  border: 0rpx;
  border-left: 12rpx solid transparent;
  border-right: 12rpx solid transparent;
  border-top: 12rpx solid #fff;
  right: 16rpx;
  top: 20rpx;
  display: block;
  border-radius: 6rpx;
}

.header-date picker .revenue-date530000:before {
  content: "";
  position: absolute;
  width: 0rpx;
  height: 0rpx;
  border: 0rpx;
  border-left: 12rpx solid transparent;
  border-right: 12rpx solid transparent;
  border-top: 12rpx solid #36945c;
  right: 16rpx;
  top: 20rpx;
  display: block;
  border-radius: 6rpx;
}

.revenue-card-cont {
  border-radius: 12rpx;
  margin: 38rpx 32rpx 0 32rpx;
  overflow: hidden;
  box-shadow: 1rpx 2rpx 8rpx 0px rgba(224, 224, 224, 0.4);
  background: linear-gradient(to top, #ffffff 0%, #ffffff 51%, #e5e9fc 100%);
  /*#fbebe7 100%);*/
}

.revenue-card-title {
  font-weight: 500;
  text-align: left;
  font-size: 28rpx;
}

.center-amount,
.revenue-alltime-amount {
  background-image: -webkit-linear-gradient(bottom, #e4a061 0%, #e3b890 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  justify-content: center;
}

.amount-unit {
  background-image: -webkit-linear-gradient(bottom, #e4a061 0%, #e3b890 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 26rpx;
}

.revenue-alltime-amount {
  font-size: 86rpx;
  font-family: "Bahnschrift Regular";
  font-weight: 400;
  text-align: center;
  line-height: 1.3;
}

.revenue-tag {
  color: #7e7e7e;
  margin-top: 20rpx;
  text-align: center;
  flex: 1;
  font-size: 24rpx;
  position: relative;
}

.revenue-tag+.revenue-tag::before {
  content: "";
  display: inline-block;
  width: 2rpx;
  height: 66rpx;
  background: #ededed;
  position: absolute;
  left: 0;
  top: 8rpx;
}

.revenue-tag .amount {
  color: #252525;
}

.up-text-title {
  color: #6eb92b;
}

.up-text-title::before {
  content: "+";
}

.up-text-title:after {
  content: "";
  margin-left: 4rpx;
  width: 16rpx;
  height: 18rpx;
  display: inline-block;
  background: url("/static/images/revenue/up-arrow.png") no-repeat center;
  background-size: contain;
}

.down-text-title {
  color: #ee3e3e;
}

.down-text-title::before {
  content: "-";
}

.down-text-title:after {
  content: "";
  margin-left: 4rpx;
  width: 16rpx;
  height: 18rpx;
  display: inline-block;
  background: url("/static/images/revenue/down-arrow.png") no-repeat center;
  background-size: contain;
}

.check-unit {
  font-size: 24rpx;

  flex: 1;
  text-align: center;
  padding-top: 16rpx;
}

.check-price-color {
  font-size: 32rpx;
  color: #868686;
  line-height: 1.2;
  font-family: "Bahnschrift Regular";
}

.check-price-color text {
  font-size: 22rpx;
}

.view-bottom {
  transition: 0.2s all;
  text-align: center;
  height: 70rpx;
  width: 700rpx;
  margin: 0 auto;
  background-color: #fff;
  line-height: 70rpx;
}

.uni-icon-arrowup {
  color: #5ea9e9;
  font-size: 28rpx;
  transition: all 0.25s;
}

.up {
  transform: rotate(-180deg);
}

.model-content {
  /* max-height: 236rpx; */
  transition: height 0.25s;
  background-color: #f9f9f9;
  box-sizing: border-box;
  margin: 0 20rpx 8px 20rpx;
  border-radius: 0 0 12rpx 12rpx;
}

.hidden {
  /* padding-top: 0rpx; */
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s;
}
</style>
