<template>
  <div v-if="showCoupon || showBalance" class="pay-wrap">
    <van-cell-group class="pay-section">
      <van-cell
        title="优惠券"
        is-link
        @click="couponShow = true"
        v-if="showCoupon"
      >
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        <template #title>
          <span class="coupon-title">优惠券</span>
        </template>
        <template #default>
          <div v-if="checkCouponList.length == 0">{{ coupon }}</div>
          <div v-else>
            <span style="color: #ff4444"
              >- ¥ {{ faceValue | moneyFormat }}元</span
            >
          </div>
        </template>
      </van-cell>
      <van-cell
        v-if="showBalance"
        :disabled="false"
        @click="onClickCheckbox"
        :border="false"
        title="余额支付"
        title-class="pay-name"
        value-class="pay-value"
        :center="true"
      >
        <template slot="icon">
          <img class="logo" :src="iconSrcUrl" alt="" />
        </template>
        <template slot="title">
          余额（剩余：￥{{ balance | moneyFormat }}）
        </template>
        <template slot="default">
          <van-checkbox v-model="payType" checked-color="#2dc7aa">
            <template #icon="props" v-if="activeIcon && inactiveIcon">
              <img
                class="checkbox_img"
                :src="props.checked ? activeIcon : inactiveIcon"
              />
            </template>
          </van-checkbox>
        </template>
      </van-cell>
    </van-cell-group>
    <!-- 优惠券弹窗 -->
    <van-popup
      v-model="couponShow"
      position="bottom"
      :close-on-click-overlay="true"
      round
      :lazy-render="false"
      :style="{ height: '350px' }"
      get-container=".pay-wrap"
    >
      <div class="couponList">
        <h3 class="title">选择优惠券</h3>
        <list
          class="list"
          :status="0"
          :isEdit="true"
          :buyList="buyList"
          :useSystem="useSystem"
          :all="true"
          :studentId="studentIds"
          @resetTitle="resetTitle"
          ref="list"
        />
        <div style="padding: 0.25rem 0.26rem 0.05rem">
          <van-button type="info" block size="large" round @click="sumitCoupon"
            >确认</van-button
          >
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import list from "@/views/coupon/list.vue";
export default {
  components: { list },
  props: [
    "showBalance",
    "showCoupon",
    "balance",
    "payType",
    "useSystem",
    "buyList",
    "studentId",
    "iconSrc",
    "activeIcon",
    "inactiveIcon",
  ],
  data() {
    return {
      couponShow: false,
      coupon: "",
      checkCouponList: [],
      faceValue: 0,
      dataList: [],
    };
  },
  mounted() {
    this.getCouponList();
  },
  methods: {
    getCouponList(page) {
      if (this.$refs.list) {
        this.resetCoupon();
        this.$refs.list.FetchList(page);
      }
    },
    onClickCheckbox() {
      this.$emit("onClickCheckbox");
    },
    resetTitle(title) {
      this.coupon = title;
    },
    sumitCoupon(val) {
      this.checkCouponList = this.$refs.list.checkCouponList;

      this.faceValue = this.$refs.list.faceValue;

      this.$emit("setCoupon", {
        couponList: [...this.checkCouponList],
        valuePirce: this.faceValue,
        dataList: this.$refs.list.dataList,
      });

      this.couponShow = false;
    },
    closeCoupon(val) {
      console.log(val);
    },
    resetCoupon() {
      this.checkCouponList = [];
      this.$refs.list.checkCouponList = [];
      this.$refs.list.faceValue = 0;
      this.faceValue = 0;
    },
  },
  computed: {
    studentIds() {
      return this.studentId;
    },
    iconSrcUrl() {
      if (this.iconSrc) {
        return this.iconSrc;
      } else {
        return require("@/assets/images/balance.png");
      }
    },
  },
};
</script>
<style lang="less" scoped>
.coupon-title {
  font-size: 0.15rem;
}
/depp/.van-popup__close-icon {
  position: fixed !important;
}
/deep/.van-popup--bottom.van-popup--round {
  border-radius: 0.08rem 0.08rem 0 0;
}
.pay-section {
  margin: 0 0.15rem 0.1rem;
  // margin-bottom: 0.1rem;
  padding: 0.05rem 0rem;
  border-radius: 0.1rem;
  /deep/.van-cell {
    padding: 0.1rem 0.12rem;
  }

  .van-cell__value {
    display: flex;
    justify-content: flex-end;
  }
}
.pay-name {
  padding-left: 0.1rem;
  flex: 1 auto;
  font-weight: bold;
  font-size: 0.14rem !important;
}
.pay-value {
  width: 0.2rem !important;
}

.logo {
  width: 0.24rem;
  height: 0.24rem;
}
.couponList {
  min-height: 350px;
  background-color: rgb(245, 245, 245);
}
.list {
  height: 220px;
  overflow-y: scroll;
}

.title {
  font-size: 0.16rem;
  line-height: 0.28rem;
  font-weight: 400;
  color: #333333;
  padding: 0.1rem 0.16rem 0;
  &::before {
    content: " ";
    width: 0.04rem;
    height: 0.15rem;
    background: #01c1b5;
    display: inline-block;
    margin-right: 0.07rem;
    border-radius: 8px;
    position: relative;
    top: 0.01rem;
  }
}
.checkbox_img {
  width: 0.18rem;
  height: 0.18rem;
}
</style>
