<template>
  <view class="step-tabbar">
    <view class="total-statistics">
      <view v-show="!isStepOne" class="total-school">
        合计参赛园所：<text class="count">{{ totalSchool }}</text>
      </view>
      <view v-show="!isStepOne" class="total-people">
        合计初赛人数预估：<text class="count">{{ totalPeople }}</text>
      </view>
    </view>
    <view class="next-button">
      <image
        class="next-icon"
        :src="isStepOne ? staticImg.backIconO : staticImg.backIcon"
        @click="handleReturn"
      />
      <view
        :class="['button', submitIsShow ? 'bgc-0' : 'bgc']"
        @click="isStepOne ? handleNext() : handleSubmit()"
      >
        {{ isStepOne ? "下一步" : "提交" }}
      </view>
    </view>
  </view>
</template>

<script>
const staticImg = {
  backIconO: require("@/static/competitionRegister/common/back-icon-o.png"),
  backIcon: require("@/static/competitionRegister/common/back-icon.png"),
};

export default {
  name: "step-tabbar",
  props: {
    // 是否是第一步
    isStepOne: {
      type: Boolean,
      default: false,
    },
    // 按钮背景
    submitIsShow: {
      type: Boolean,
      default: false,
    },
    // 参赛园所总数
    totalSchool: {
      type: [String, Number],
      default: 0,
    },
    // 预计参加人数
    totalPeople: {
      type: [String, Number],
      default: 0,
    },
    // 赛事id
    competitionId: {
      type: [String, Number],
      default: "",
    },
  },
  data() {
    return {
      staticImg,
    };
  },
  methods: {
    // 返回上一步
    handleReturn() {
      if (!this.isStepOne) {
        uni.redirectTo({
          url: `/pages/competitionRegister/index?competitionId=${this.competitionId}`,
        });
      }
    },
    // 下一步
    handleNext() {
      uni.redirectTo({
        url: `/pages/competitionRegister/collectInformation?competitionId=${this.competitionId}`,
      });
    },
    // 提交
    handleSubmit() {
      if (this.submitIsShow) this.$emit("handleSubmit");
    },
  },
};
</script>

<style lang="less" scoped>
.step-tabbar {
  width: 750rpx;
  height: 100rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  height: calc(116rpx + constant(safe-area-inset-bottom));
  height: calc(116rpx + env(safe-area-inset-bottom));
  background: #ffffff;
  box-shadow: 0rpx -14rpx 20rpx 0rpx rgba(152, 152, 152, 0.05);
  border-radius: 40rpx 40rpx 0rpx 0rpx;
  display: flex;
  justify-content: space-between;
  padding: 32rpx;
  padding-bottom: 0rpx;
  box-sizing: border-box;
  .total-statistics {
    font-size: 30rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    .count {
      font-size: 30rpx;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #4e78fc;
    }
  }

  .next-button {
    display: flex;
    .next-icon {
      width: 84rpx;
      height: 84rpx;
      object-fit: cover;
    }
    .button {
      width: 220rpx;
      height: 84rpx;
      border-radius: 42rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 34rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #ffffff;
      margin-left: 20rpx;
    }

    .bgc-0 {
      background: linear-gradient(130deg, #466efc 0%, #84bdfc 100%);
    }

    .bgc {
      background: linear-gradient(130deg, #466efc 0%, #84bdfc 100%);
      opacity: 0.4;
    }
  }
}
</style>

