<template>
  <transition name="fade">
    <div class="LablesMember" v-if="isShow">
      <div class="mask"></div>
      <div class="LablesMember-wrapper">
        <i class="el-icon-close" @click="hide"></i>
        <div class="top">
          <img src="../assets/images/avatar.png" />
          <div class="top-right">
            <div class="top-user">
              <h2>用户：嫣然</h2>
              <span>正式版</span>
            </div>
            <p>开通SVIP，享黑胶VIP、数字专辑、有声书等特权</p>
          </div>
        </div>
        <div class="middle">
          <div class="left">
            <div class="tab">
              <div @click="tabIndex = 0" :class="[tabIndex === 0 ? 'active' : '']">
                <span>VIP</span>
              </div>
              <div @click="tabIndex = 1" :class="[tabIndex === 1 ? 'active' : '']">
                <span>SVIP</span>
              </div>
              <div @click="tabIndex = 2" :class="[tabIndex === 2 ? 'active' : '']">
                <span>超级VIP</span>
              </div>
            </div>
            <div class="tab-content"
              :class="[tabIndex === index ? 'active' : '']"
              v-for="(item, index) in 3"
              :key="index">
              <div
                class="tab-content__item"
                :class="[currIndex === i ? 'active' : '']"
                v-for="(price, i) in 4"
                :key="i"
                @click="currIndex = i">
                <h3>12个月</h3>
                <div class="price">
                  <i>¥</i>
                  <span>88</span>
                </div>
                <div class="original-price">
                  <i>¥</i>
                  <span>88</span>
                </div>
              </div>
            </div>
          </div>
          <div class="right">
            <div class="right-price">
              <i>¥</i>
              <span class="price">88</span>
            </div>
            <div class="code">
              <img src="../assets/code.png" />
            </div>
            <div class="paytype">
              <svg width="13" height="13" viewBox="0 0 13 13" xmlns="http://www.w3.org/2000/svg">
                <path d="M12.11 0H.89A.89.89 0 0 0 0 .89v11.22c0 .491.399.89.89.89h11.22a.89.89 0 0 0 .89-.89V.89a.89.89 0 0 0-.89-.89zM6.5 10.65a5.592 5.592 0 0 1-1.848-.311c-.364.241-.975.639-1.215.75-.352.162-.25-.188-.25-.188L3.395 9.7C2.24 8.895 1.499 7.654 1.499 6.26c0-2.426 2.239-4.392 5-4.392 1.693 0 3.188.74 4.093 1.869l-4.905 2.27s-.4.152-.75-.062c-.35-.213-.813-.564-.813-.564s-.538-.458-.25.376l.751 1.756s.089.524.687.189c.468-.262 4.103-2.454 5.666-3.397a3.94 3.94 0 0 1 .523 1.954c0 2.425-2.239 4.391-5.001 4.391z" fill="#09BB07" fill-rule="nonzero"></path>
              </svg>
              <span>微信支付</span>
            </div>
            <div class="pay-btn">
              <el-button round size="mini" style="margin-right: 10px;" @click="isShow = false">取消支付</el-button>
              <el-button round size="mini" type="warning">我已支付</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
  export default {
    data() {
      return {
        isShow: false,
        tabIndex: 0,
        currIndex: 0
      }
    },

    methods: {
      show () {
        this.isShow = true
      },

      hide () {
        this.isShow = false
      }
    }
  }
</script>

<style lang="scss" scoped>
  .LablesMember {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1111;
    width: 100%;
    height: 100%;

    .mask {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
      background: rgba($color: #000000, $alpha: 0.8);
    }

    .LablesMember-wrapper {
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 11;
      width: 900px;
      padding: 40px 40px;
      transform: translate(-50%, -50%);
      border-radius: 12px;
      overflow: hidden;
      background: linear-gradient(41deg, #ffebd3, #fff8e3 61%, #fae2c4 99%);

      .top {
        display: flex;
        align-items: center;
        margin-bottom: 30px;

        img {
          width: 40px;
          height: 40px;
          margin-right: 10px;
        }


        p {
          color: #632e2e;
          opacity: 0.8;
        }

        .top-user {
          display: flex;
          align-items: center;
          margin-bottom: 10px;

          h2 {
            margin-right: 6px;
            font-size: 16px;
            color: #333;
          }

          span {
            font-size: 12px;
            color: #666;
          }
        }
      }

      .el-icon-close {
        position: absolute;
        top: 12px;
        right: 12px;
        z-index: 11;
        font-size: 32px;
        color: #333;
        cursor: pointer;
        transform-origin: center center;

        &:hover {
          opacity: 0.6;
          // transform: translate(50%, -50%) rotate(180deg);
        }
      }

      .middle {
        display: flex;

        .left {
          flex: 1;
          padding: 0 0;
          border-radius: 20px;
          overflow: hidden;
          background-color: #fff;
          box-shadow: 0 0 20px 0 hsla(0, 39%, 56%, .1), 0 0 16px 0 rgba(0, 0, 0, .08);

          .tab {
            display: flex;
            align-items: center;
            height: 50px;
            margin-bottom: 40px;
            background: #fff3ee;

            div {
              position: relative;
              flex: 1;
              height: 50px;
              line-height: 50px;
              text-align: center;
              font-size: 22px;
              font-weight: 600;
              cursor: pointer;
              color: #b69593;

              span {
                position: relative;
                z-index: 2;
              }

              &.active {
                color: #6f3333;

                &::after {
                  position: absolute;
                  left: 0;
                  top: 0;
                  z-index: 1;
                  width: 100%;
                  height: 100%;
                  background: url(../assets/tab_middle.png) no-repeat center;
                  background-size: contain;
                  content: '';
                }
              }
            }
          }

          .tab-content {
            display: none;
            align-items: center;
            padding: 0 20px;

            &.active {
              display: flex;
            }

            &__item {
              display: flex;
              align-items: center;
              flex-direction: column;
              width: 140px;
              height: 190px;
              margin-right: 14px;
              padding-top: 40px;
              background-color: #fff;
              border-radius: 10px;
              cursor: pointer;
              border: 1px solid rgba(0, 0, 0, .08);

              &.active {
                border: 1px solid #ff7548;
                background: linear-gradient(33deg, #ffd1c5 -10%, #ffd1c5 21%, #ffe8e5 85%);
              }

              &:last-child {
                margin-right: 0;
              }

              h3 {
                margin-bottom: 20px;
                font-size: 15px;
                font-weight: 600;
              }

              .original-price {
                display: flex;
                align-items: center;
                font-size: 12px;
                color: #888;
                text-decoration: line-through;
              }

              .price {
                display: flex;
                align-items: baseline;
                margin-bottom: 6px;
                color: #f13d3d;
                font-size: 16px;

                span {
                  font-weight: 700;
                  font-size: 36px;
                }
              }
            }
          }
        }

        .right {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-left: 40px;
          padding: 20px 0 20px 0;

          .paytype {
            display: flex;
            align-items: center;

            span {
              margin-left: 8px;
              font-size: 14px;
              color: #666;
            }
          }

          .pay-btn {
            display: flex;
            align-items: center;
            margin-top: 40px;
          }

          .right-price {
            display: flex;
            align-items: baseline;
            margin-bottom: 16px;
            color: #f13d3d;
            font-size: 18px;
            font-weight: 600;

            span {
              margin-left: 4px;
              font-size: 30px;
              font-weight: 900;
            }
          }

          .code img {
            width: 150px;
            height: 150px;
            margin: 14px 0;
          }
        }
      }
    }
  }
</style>
