<template>
  <div class="container">
    <div class="section privilege">
      <div class="title">会员特权</div>
      <div class="content">
        <div v-for="(item, index) in privilegeList" :key="index" class="item">
          <el-image :src="item.image" class="image" />
          <div class="name" v-text="item.name" />
          <div class="subname" v-text="item.subName" />
        </div>
      </div>
      <el-button
        class="open-vip"
        type="primary"
        :style="[themeStyle.border, themeStyle.background]"
        @click="toPayPage"
      >{{ themeText }}</el-button>
    </div>
    <div class="section benefits">
      <div class="title">会员权益对比</div>
      <div class="content">
        <member-benefits />
      </div>
    </div>
    <!-- 开通、续费会员 -->
    <div class="open-control" :style="themeStyle.border">
      <div class="tip"><i class="vip-icon" /><span>会员</span>享有机构授权认证、设备授权认证等特权</div>
      <el-button class="submit" type="primary" :style="[themeStyle.border, themeStyle.background]" @click="toPayPage">{{
        themeText
      }}</el-button>
    </div>
  </div>
</template>

<script>
import vipIcon1 from '@/assets/img/vip-icon-01.png'
import vipIcon2 from '@/assets/img/vip-icon-02.png'
import vipIcon3 from '@/assets/img/vip-icon-03.png'
import vipIcon4 from '@/assets/img/vip-icon-04.png'
import vipIcon5 from '@/assets/img/vip-icon-05.png'
import vipIcon6 from '@/assets/img/vip-icon-06.png'
import vipIcon7 from '@/assets/img/vip-icon-07.png'

import { MemberBenefits } from '@/views/components'
export default {
  components: {
    MemberBenefits
  },

  data() {
    return {
      privilegeList: [
        {
          image: vipIcon1,
          name: '机构授权认证',
          subName: '享认证数量不限'
        },
        {
          image: vipIcon2,
          name: '设备授权认证',
          subName: '享认证数量不限'
        },
        {
          image: vipIcon3,
          name: '人员资格认证',
          subName: '享认证数量不限'
        },
        {
          image: vipIcon4,
          name: '采美品牌背书',
          subName: '采美平台专属认证'
        },
        {
          image: vipIcon5,
          name: '专属服务',
          subName: '一对一'
        },
        {
          image: vipIcon6,
          name: '免费升级迭代',
          subName: '定期更新维护'
        },
        {
          image: vipIcon7,
          name: '更多订制服务',
          subName: '平台订制化需求'
        }
      ]
    }
  },
  computed: {
    vipStatus() {
      return this.$store.getters.vipInfo.vipStatus
    },
    themeText() {
      return this.vipStatus === 1 ? '续费会员' : '开通会员'
    },
    themeStyle() {
      return {
        border: {
          borderColor: this.vipStatus === 1 ? '#FF6D6D' : '#1890ff'
        },
        background: {
          backgroundColor: this.vipStatus === 1 ? '#FF6D6D' : '#1890ff'
        }
      }
    }
  },
  methods: {
    toPayPage() {
      this.$router.push('/vip/vip-pay')
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  min-width: 1200px;
  margin: 0 auto;
}

.section {
  .title {
    margin: 40px 0;
    font-size: 24px;
    font-weight: bold;
    color: #404040;
    text-align: center;
  }
}

.benefits {
  margin: 10px 0 20px;
  overflow: hidden;
}

.privilege {
  .open-vip {
    display: block;
    width: 260px;
    height: 48px;
    margin: 60px auto 20px;
    opacity: 1;
    border-radius: 4px;
  }
  .content {
    display: flex;
    justify-content: space-evenly;
    align-items: center;

    .item {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;

      .image {
        width: 50px;
        height: 50px;
      }

      .name {
        font-size: 18px;
        color: #101010;
        margin-top: 16px;
      }

      .subname {
        font-size: 14px;
        color: #909399;
        margin-top: 10px;
      }
    }
  }
}

.open-control {
  display: flex;
  justify-content: space-between;
  align-content: center;
  max-width: 1100px;
  margin: 90px auto;
  border: 1px solid #1890ff;

  .tip {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    color: #101010;
    font-size: 18px;

    span {
      color: #1890ff;
      font-weight: bold;
    }
  }

  .submit {
    width: 210px;
    height: 80px;
    font-size: 18px;
    border-radius: 0;
  }

  .vip-icon {
    margin-bottom: 10px;
  }
}
</style>
