<template>
  <el-row class="TT-user">
    <el-col class="nav">
      <router-link :to="{name: 'register'}">
        <img src="../../../../static/img/mine/icon_0.png" alt="">
        <p>免费用户可以使用所有收费方式是免费的功能，包括淘宝词库、指数转换等功能。虽然免费，但是功能非常多哦！</p>
        <button class="default">免费注册</button>
      </router-link>
      <a href="javascript:;" v-for="(item, index) in vipList" :key="index">
        <img :src="item.vipImg" alt="">
        <p>{{ item.vipDesc }}</p>
        <button class="primary" @click="handleDialog(index)">立即购买</button>
      </a>
    </el-col>
    <template v-if="vipList.length">
      <el-dialog :title="vipList[activeVipIndex].vipName"
                 :visible.sync="dialogTableVisible"
                 :show-close="true"
                 center
                 top="25vh">
        <p class="TT-title">
          <span>Hi，用户{{ userPhone }}</span>
          <span>您正在开通</span>
          <span>{{ vipList[activeVipIndex].vipName }}</span>
        </p>
        <p class="TT-price">
          <span>应付金额：</span>
          <span>{{ vipList[activeVipIndex].vipPrice }}</span>
          <span>金币</span>
        </p>
        <p class="TT-desc">权益：{{ vipList[activeVipIndex].vipDesc }}</p>
        <p slot="footer" class="dialog-footer">
          <el-button class="TT-btn-group" type="primary" @click="buyVip">确认购买</el-button>
        </p>
      </el-dialog>
    </template>
  </el-row>
</template>

<script>
import Crypto from '@/utils/crypto'
import Vue from 'vue'

export default {
  name: 'user',
  data () {
    return {
      vipList: [],
      activeVipIndex: 0,
      dialogTableVisible: false
    }
  },
  computed: {
    userPhone () {
      const userPhone = this.$store.state.user.userPhone || Vue.cookie.get('userPhone')
      return Crypto.decrypt(userPhone)
    }
  },
  activated () {
    if (!this.$route.meta.isUseCache) {
      this.vipList = []
      this.activeVipIndex = 0
      this.funInit()
    }
  },
  methods: {
    handleDialog (index) {
      this.activeVipIndex = index
      this.dialogTableVisible = true
    },
    funInit () {
      this.$http({
        url: this.$http.adornUrl('/user/viplist'),
        method: 'get',
        params: this.$http.adornParams({})
      }).then(({ data }) => {
        if (data.status) {
          this.vipList = data.data
          this.$route.meta.isUseCache = true
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    buyVip () {
      const { id, vipType } = this.vipList[this.activeVipIndex]
      this.$http({
        url: this.$http.adornUrl('/user/buyvip'),
        method: 'post',
        data: this.$http.adornData({
          'id': id,
          'vipType': vipType // vip类型(1普通会员2包月会员3包年会员)
        })
      }).then(({ data }) => {
        if (data.status) {
          this.$message({
            message: '购买成功',
            type: 'success',
            duration: 1500
          })
          this.dialogTableVisible = false
        } else {
          if (data.msg === '点券不足请充值') {
            this.$router.replace({ name: 'payCheck' })
          } else {
            this.$message.error(data.msg)
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.TT-user {
  width: 100%;
  padding-top: 118px;
  background: url("../../../../static/img/mine/bg.png") center 0/1060px 231px no-repeat;

  .nav {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  a {
    position: relative;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 180px;
    height: 301px;
    margin-left: 12px;
    border-radius: 13px;
    text-decoration: none;
    box-shadow: 0 2px 17px 0 rgba(0, 0, 0, 0.2);
    background: #FFFFFF;

    &:nth-of-type(1) {
      margin-left: 0;
    }

    img {
      display: block;
      width: 180px;
      height: 114px;
    }

    p {
      width: 141px;
      margin-top: 20px;
      line-height: 17px;
      font-size: 12px;
      color: #666666;
    }

    button {
      position: absolute;
      left: 50%;
      bottom: 20px;
      width: 136px;
      height: 33px;
      margin-top: 31px;
      margin-left: -68px;
      border-radius: 3px;
      outline: none;
      line-height: 31px;
      font-size: 13px;
      cursor: pointer;
      background: transparent;

      &.default {
        color: #999999;
        border: 1px solid #999999;
      }

      &.primary {
        color: #332C2B;
        border: 1px solid #332C2B;
      }
    }
  }
}

/deep/ .el-dialog__wrapper {
  .el-dialog--center {
    box-shadow: 0 2px 18px 0 rgba(0, 0, 0, 0.1);
    border-radius: 7px;

    .el-dialog__header {
      padding: 9px 0;
      border-radius: 7px 7px 0 0;
      background: linear-gradient(180deg, #FBF9F1 0%, #F6F0DE 100%);

      .el-dialog__title {
        line-height: 30px;
        font-size: 22px;
        font-weight: 800;
        color: #C1AE70;
      }
    }

    .TT-title {
      display: flex;
      align-items: flex-end;

      span {
        color: #333333;

        &:nth-of-type(1) {
          font-size: 17px;
        }

        &:nth-of-type(2) {
          margin-left: 6px;
          font-size: 18px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
        }

        &:nth-of-type(3) {
          font-size: 17px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #DE4E24;
        }
      }
    }

    .TT-price {
      display: flex;
      align-items: flex-end;
      margin-top: 12px;

      span {
        font-size: 15px;
        font-family: PingFangSC-Semibold, PingFang SC;

        &:nth-of-type(1) {
          color: #9B9B9B;
        }

        &:nth-of-type(2) {
          color: #DE4E24;
        }

        &:nth-of-type(3) {
          color: #333;
        }
      }
    }

    .TT-desc {
      margin-top: 12px;
      line-height: 18px;
      font-size: 13px;
      color: #666;
    }

    .TT-btn-group {
      margin-top: 40px;
      text-align: center;
    }
  }
}
</style>
