<template>
  <view class="open">
    <u-navbar
      title="会员中心"
      placeholder
      autoBack
      bg-color="transparent"
    ></u-navbar>
    <view class="open-header">
      <MineHeader></MineHeader>
    </view>
    <view class="open-inner">
      <view class="open-title">
        开通会员即可享受包月或按次服务，最高可省88.8元
      </view>
      <view class="open-content">
        <!-- tab -->
        <u-tabs
          :list="tabList"
          lineColor="#E39B46"
          lineHeight="12rpx"
          :activeStyle="{
            color: '#333333',
            fontSize: '26rpx',
            fontWeight: 'bold',
          }"
          @click="changeTab"
        >
        </u-tabs>
        <view class="open-content-inner">
          <!-- 付款信息 -->
          <view class="open-content-inner-bd">
            <!-- 月份 -->
            <view class="open-month" v-if="currentType === 'date'">
              <!-- <u-scroll-list :indicator="false" style="overflow-x: auto;"> -->
              <view
                class="v-item"
                :class="selectMeal === item.id ? 'select' : ''"
                v-for="(item, index) in list['date']"
                :key="index"
                @click="switchMeal(item.id)"
              >
                <image
                  class="bg-img"
                  v-show="selectMeal === item.id"
                  src="@/static/mine/m_open_select.png"
                  mode=""
                ></image>
                <image
                  class="bg-img"
                  v-show="selectMeal !== item.id"
                  src="@/static/mine/m_open_not_select.png"
                  mode=""
                ></image>
                <view class="v-item-inner">
                  <view class="v-item-title">
                    {{ item.title }}
                  </view>
                  <view class="v-item-dec">
                    {{ item.content }}
                  </view>
                  <view class="v-item-amount">
                    <view class="v-item-amount-label"> 金额 </view>
                    <view class="v-item-amount-value">
                      ￥{{ item.balance }}
                    </view>
                  </view>
                </view>
              </view>
              <!-- </u-scroll-list> -->
            </view>
            <!-- 次数 -->
            <view class="open-month" v-else>
              <view
                class="v-item"
                :class="selectMeal === item.id ? 'select' : ''"
                v-for="(item, index) in list['count']"
                :key="index"
                @click="switchMeal(item.id)"
              >
                <image
                  class="bg-img"
                  v-show="selectMeal === item.id"
                  src="@/static/mine/m_open_select.png"
                  mode=""
                ></image>
                <image
                  class="bg-img"
                  v-show="selectMeal !== item.id"
                  src="@/static/mine/m_open_not_select.png"
                  mode=""
                ></image>
                <view class="v-item-inner">
                  <view class="v-item-title">
                    {{ item.title }}
                  </view>
                  <view class="v-item-dec">
                    {{ item.content }}
                  </view>
                  <view class="v-item-amount">
                    <view class="v-item-amount-label"> 金额 </view>
                    <view class="v-item-amount-value">
                      ￥{{ item.balance }}
                    </view>
                  </view>
                </view>
              </view>
            </view>

            <view class="open-info">
              <view class="open-info-title">
                <text class="main"> 专属权益 </text>
                <text class="in"> 开通会员后将享受超多专属权益 </text>
              </view>

              <view class="open-info-content">
                <view
                  class="open-info-content-item"
                  v-for="(item, index) in infoList"
                  :key="index"
                >
                  <image :src="item.img" mode=""></image>
                  <view>{{ item.label }}</view>
                </view>
              </view>
            </view>
          </view>

          <!-- 底部支付 -->
          <view class="open-content-inner-ft">
            <view class="terms">
              <u-checkbox-group v-model="checkboxValue">
                <u-checkbox
                  shape="circle"
                  label="我已阅读并同意《会员使用协议》《隐私协议》"
                  inactiveColor="#E39B46"
                  labelColor="#111111"
                  activeColor="#E39B46"
                >
                </u-checkbox>
              </u-checkbox-group>
            </view>
            <view class="opera">
              <view class="amount">
                ￥ <text class="amount-price">{{ currentAmount }}</text>
                <!-- <text class="amount-text">开通立省</text>	
								<text class="save-text">88元</text> -->
              </view>
              <u-button
                :disabled="checkboxValue.length === 0 || !formData.id"
                @click="showPopup = true"
                >立即支付</u-button
              >
            </view>
          </view>
        </view>
      </view>
    </view>
    <u-popup
      :show="showPopup"
      mode="bottom"
      closeOnClickOverlay
      @close="showPopup = false"
      style="position: absolute"
    >
      <view class="popup-content">
        <PayType v-model="formData.platform"></PayType>
        <u-cell-group style="margin-top: 60rpx">
          <u-cell
            title="我的优惠券"
            isLink
            @click="
              $Router.push('/pages/coupon/coupon?amount=' + currentAmount)
            "
          >
            <template #value>
              <view style="width: 300rpx; text-align: right">
                {{ couponInfo ? couponInfo.title : "" }}
              </view>
            </template>
          </u-cell>
        </u-cell-group>
        <view class="popup-footer">
          <u-button class="v-default" shape="circle" @click="showPopup = false"
            >取消</u-button
          >
          <u-button
            class="v-primary"
            shape="circle"
            type="primary"
            @click="onPayment"
            >确认</u-button
          >
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import MineHeader from "./components/MineHeader.vue";
import PayType from "@/components/PayType/PayType.vue";
import { getPayList, onPayment, checkPayStatus } from "@/request/yyf.js";
export default {
  components: {
    MineHeader,
    PayType,
  },
  data() {
    return {
      tabList: [
        { name: "包月套餐", type: "date" },
        { name: "按次套餐", type: "count" },
      ],
      currentType: "date",
      checkboxValue: [],
      selectMeal: 0,
      list: {
        date: [],
        count: [],
      },
      infoList: [
        { label: "免费寄信", img: require("../../static/mine/m_member_1.png") },
        { label: "人工代写", img: require("../../static/mine/m_member_2.png") },
        { label: "专属客服", img: require("../../static/mine/m_member_3.png") },
        {
          label: "尊贵身份标识",
          img: require("../../static/mine/m_member_4.png"),
        },
      ],
      formData: {
        platform: "",
        coupon: "",
        id: "",
      },
      couponInfo: null,
      showPopup: false,
    };
  },
  computed: {
    currentAmount() {
      let { id } = this.formData;
      if (id) {
        let obj = this.list[this.currentType].find((item) => item.id === id);
        return obj.balance.toFixed(2);
      }
    },
  },
  onLoad() {
    this.onGetPay();

    uni.$on("selectCoupon", (data) => {
      console.log("selectCoupon", data);
      this.couponInfo = data;
      this.formData.coupon = data.id;
    });
  },
  methods: {
    changeTab({ type }) {
      this.currentType = type;

      if (this.list[type][0]) {
        let id = this.list[type][0].id;
        this.formData.id = id;
        this.selectMeal = id;
      }
    },
    switchMeal(id) {
      console.log(id);
      this.selectMeal = id;
      this.formData.id = id;
    },
    async onGetPay() {
      const { data } = await getPayList({});
      // console.log(data);
      if (data.code === 1) {
        data.data.forEach((item) => {
          this.list[item.key] = item.list;
        });
        this.formData.id = this.list["date"][0].id;
        this.selectMeal = this.list["date"][0].id;
        // console.log(this.formData.id);
      }
    },

    async onPayment() {
      let { platform } = this.formData;
      const { data } = await onPayment({
        ...this.formData,
        coupon: this.formData.coupon || undefined,
      });
      // console.log(data);
      this.showPopup = false;
      if (data.code === 1) {
        if (platform === 1) {
          uni.showToast({
            title: "支付成功",
          });
          this.$actionsMine.onGetuserInfo();
          setTimeout(() => {
            uni.navigateTo({
              url: "/pages/mine/mine",
            });
          }, 1000);
        } else {
          // #ifdef H5
          location.href = data.data.url;
          // #endif

          // #ifdef MP-WEIXIN
          uni.showToast({
            title: "小程序支付暂未配置",
            icon: "error",
          });
          // #endif
        }
      } else {
        uni.showToast({
          title: data.msg,
          icon: "error",
        });
      }
    },

    async onCheckPayStatus() {
      // const { data } = await checkPayStatus({
      // 	order_id: ''
      // });
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/.u-tabs__wrapper__nav__line {
  bottom: 0;
}

.open {
  height: 100vh;
  display: flex;
  flex-direction: column;
  .open-header {
    padding: 0 20rpx;
  }

  .open-inner {
    flex: 1;
    border-radius: 40rpx 40rpx 0 0;
    background-color: #ffdbac;
    .open-title {
      padding: 15rpx 0;
      border-radius: 40rpx 40rpx 0 0;
      text-align: center;
      font-size: 28rpx;
      line-height: 1;
      font-family: OPPOSans-Medium, OPPOSans;
      font-weight: 500;
      color: #de640a;
    }

    .open-content {
      box-sizing: border-box;
      padding-top: 20rpx;
      height: calc(100% - 58rpx);
      background-color: #fff;
      border-radius: 40rpx 40rpx 0 0;

      .open-content-inner {
        margin-top: 40rpx;
        height: calc(100% - 140rpx);
        padding: 0 20rpx;
        display: flex;
        flex-direction: column;
        &-bd {
          flex: 1;
          overflow-y: auto;

          .open-month {
            overflow-x: auto;
            white-space: nowrap;

            .v-item {
              display: inline-block;
              box-sizing: border-box;
              width: 250rpx;
              height: 330rpx;
              // background: url(../../static/mine/m_open_not_select.png) center/100% no-repeat;

              margin-right: 20rpx;

              position: relative;

              .v-item-inner {
                position: relative;
                z-index: 1;
                padding-top: 65rpx;
                padding-left: 30rpx;
              }

              .bg-img {
                position: absolute;
                left: 0;
                right: 0;
                width: 100%;
                height: 100%;
                z-index: 0;
              }

              &.select {
                width: 330rpx;
              }

              .v-item-title {
                font-size: 36rpx;
                font-family: OPPOSans-bold, OPPOSans;
                font-weight: bold;
                color: #011111;
              }

              .v-item-dec {
                padding-top: 10rpx;
                font-size: 24rpx;
                font-family: OPPOSans-Medium, OPPOSans;
                color: #ababab;
              }

              .v-item-amount {
                &-label {
                  padding: 27rpx 0 11rpx;
                  font-size: 18rpx;
                  color: #666;
                }
                &-value {
                  color: #ce7a2c;
                  font-size: 47rpx;
                  font-weight: bold;
                }
              }
            }
          }

          .open-info {
            .open-info-title {
              padding: 55rpx 0 45rpx;
              .main {
                font-size: 30rpx;
                font-family: OPPOSans-bold, OPPOSans;
                font-weight: bold;
                color: #111111;
              }
              .in {
                padding-left: 15rpx;
                font-size: 23rpx;
                font-family: OPPOSans-Medium, OPPOSans;
                font-weight: 500;
                color: #ababab;
              }
            }
            .open-info-content {
              display: flex;
              &-item {
                padding: 0 10rpx;
                width: 25%;
                text-align: center;
                image {
                  width: 124rpx;
                  height: 124rpx;
                }
                view {
                  padding-top: 20rpx;
                  font-size: 26rpx;
                  font-family: OPPOSans-Medium, OPPOSans;
                  font-weight: 500;
                  color: #111111;
                }
              }
            }
          }
        }
        &-ft {
          .opera {
            margin-top: 48rpx;
            display: flex;
            .amount {
              box-sizing: border-box;
              padding: 0 36rpx;
              width: 459rpx;
              height: 98rpx;
              line-height: 98rpx;
              background: #ffe4d9;
              border-radius: 20px 20px 20px 20px;
              color: #ce7a2c;

              .amount-price {
                font-size: 42rpx;
              }
              .amount-text {
                padding: 0 10rpx;
                color: #111;
              }
            }

            /deep/.u-button {
              width: 214rpx;
              height: 98rpx;
              background: linear-gradient(178deg, #e8b648 0%, #e08745 100%);
              border-radius: 20rpx 20rpx 20rpx 20rpx;
              color: #fff;

              font-size: 30rpx;
              font-family: OPPOSans-Medium, OPPOSans;
              font-weight: 500;
            }
          }
        }
      }
    }
  }
}

.popup-content {
  padding: 40rpx;
  .popup-footer {
    padding-top: 40rpx;
    display: flex;
    .v-default {
      margin-right: 20rpx;
    }
    .v-primary {
      background-color: #e39b46;
      border-color: #e39b46;
    }
  }
}
</style>
