<script lang="ts">
import Vue from 'vue'
import { getVerList, getPackList } from '@/api/system'
export default Vue.extend({
  name: 'PacketList',
  data() {
    return {
      cycle: 'month',
      showDetail: false,
      type: 'expoReg',
      verList: [],
      packetList: [],
      payCenterUrl: '',
      renderInfo: {
        STARTER: {
          price: 0,
          url: '',
          button: '立即订购'
        },
        PRO: {
          price: 0,
          url: '',
          button: '立即订购'
        }
      }
    }
  },
  computed: {
    user() { return this.$store.state.user.user }
  },
  mounted() {
    this.init()
  },
  methods: {
    close() {
      this.$emit('close')
    },
    init() {
      this.payCenterUrl = process.env.VUE_APP_PAY_CENTER_URL
      getVerList().then(res => {
        this.verList = res.data
        return getPackList('')
      }).then(res2 => {
        this.packetList = res2.data
        this.computeInfo()
      })
    },
    computeInfo() {
      const basePacket = this.user.app_list[0].ver_key.replace(/_STARTER|_PRO|_MONTH|_YEAR/gi, '')
      const FullBasePacket = this.user.app_list[0].ver_key.replace(/_MONTH|_YEAR/gi, '')
      console.log(basePacket)
      if (this.type === 'expoReg') {
        if (basePacket === 'EXPOREG_INVITATION') {
          if (this.cycle === 'month') {
            this.renderInfo.STARTER.price = this.getPacketByPKey('EXPOREG_STARTER_MONTH').price
            this.renderInfo.STARTER.button = FullBasePacket !== 'EXPOREG_STARTER' ? '升级权益' : '续费'
            this.renderInfo.STARTER.url = this.payCenterUrl + '/packet/info?app_code=EXPOREG&key=&packet_key=EXPOREG_STARTER_MONTH&type=2'
            this.renderInfo.PRO.price = this.getPacketByPKey('EXPOREG_PRO_MONTH').price
            this.renderInfo.PRO.button = FullBasePacket !== 'EXPOREG_PRO' ? '升级权益' : '续费'
            this.renderInfo.PRO.url = this.payCenterUrl + '/packet/info?app_code=EXPOREG&key=&packet_key=EXPOREG_PRO_MONTH&type=2'
          } else {
            this.renderInfo.STARTER.price = this.getPacketByPKey('EXPOREG_STARTER_YEAR').price
            this.renderInfo.STARTER.button = FullBasePacket !== 'EXPOREG_STARTER' ? '升级权益' : '续费'
            this.renderInfo.STARTER.url = this.payCenterUrl + '/packet/info?app_code=EXPOREG&key=&packet_key=EXPOREG_STARTER_YEAR&type=2'
            this.renderInfo.PRO.price = this.getPacketByPKey('EXPOREG_PRO_YEAR').price
            this.renderInfo.PRO.button = FullBasePacket !== 'EXPOREG_PRO' ? '升级权益' : '续费'
            this.renderInfo.PRO.url = this.payCenterUrl + '/packet/info?app_code=EXPOREG&key=&packet_key=EXPOREG_PRO_YEAR&type=2'
          }
        } else {
          if (this.cycle === 'month') {
            this.renderInfo.STARTER.price = this.getPacktByKey('EXPOREG_STARTER_MONTH').price
            this.renderInfo.STARTER.button = FullBasePacket !== 'EXPOREG_STARTER' ? '立即订购' : '续费'
            this.renderInfo.STARTER.url = this.payCenterUrl + '/packet/info?app_code=EXPOREG&key=EXPOREG_STARTER_MONTH&packet_key=&type=1'
            this.renderInfo.PRO.price = this.getPacktByKey('EXPOREG_PRO_MONTH').price
            this.renderInfo.PRO.button = FullBasePacket !== 'EXPOREG_PRO' ? '立即订购' : '续费'
            this.renderInfo.PRO.url = this.payCenterUrl + '/packet/info?app_code=EXPOREG&key=EXPOREG_PRO_MONTH&packet_key=&type=1'
          } else {
            this.renderInfo.STARTER.price = this.getPacktByKey('EXPOREG_STARTER_YEAR').price
            this.renderInfo.STARTER.button = FullBasePacket !== 'EXPOREG_STARTER' ? '立即订购' : '续费'
            this.renderInfo.STARTER.url = this.payCenterUrl + '/packet/info?app_code=EXPOREG&key=EXPOREG_STARTER_YEAR&packet_key=&type=1'
            this.renderInfo.PRO.price = this.getPacktByKey('EXPOREG_PRO_YEAR').price
            this.renderInfo.PRO.button = FullBasePacket !== 'EXPOREG_PRO' ? '立即订购' : '续费'
            this.renderInfo.PRO.url = this.payCenterUrl + '/packet/info?app_code=EXPOREG&key=EXPOREG_PRO_YEAR&packet_key=&type=1'
          }
        }
      } else {
        if(basePacket === 'EXPOREG_INVITATION') {
          if (this.cycle === 'month') {
            this.renderInfo.STARTER.price = this.getPacketByPKey('EXPOREG_INVITATION_STARTER_MONTH').price
            this.renderInfo.STARTER.button = FullBasePacket !== 'EXPOREG_INVITATION_STARTER' ? '立即订购' : '续费'
            this.renderInfo.STARTER.url = this.payCenterUrl + '/packet/info?app_code=EXPOREG&key=&packet_key=EXPOREG_INVITATION_STARTER_MONTH&type=2'
            this.renderInfo.PRO.price = this.getPacketByPKey('EXPOREG_INVITATION_PRO_MONTH').price
            this.renderInfo.PRO.button = FullBasePacket !== 'EXPOREG_INVITATION_PRO' ? '立即订购' : '续费'
            this.renderInfo.PRO.url = this.payCenterUrl + '/packet/info?app_code=EXPOREG&key=&packet_key=EXPOREG_INVITATION_PRO_MONTH&type=2'
          } else {
            this.renderInfo.STARTER.price = this.getPacketByPKey('EXPOREG_INVITATION_STARTER_YEAR').price
            this.renderInfo.STARTER.button = FullBasePacket !== 'EXPOREG_INVITATION_STARTER' ? '立即订购' : '续费'
            this.renderInfo.STARTER.url = this.payCenterUrl + '/packet/info?app_code=EXPOREG&key=&packet_key=EXPOREG_INVITATION_STARTER_YEAR&type=2'
            this.renderInfo.PRO.price = this.getPacketByPKey('EXPOREG_INVITATION_PRO_YEAR').price
            this.renderInfo.PRO.button = FullBasePacket !== 'EXPOREG_INVITATION_PRO' ? '立即订购' : '续费'
            this.renderInfo.PRO.url = this.payCenterUrl + '/packet/info?app_code=EXPOREG&key=&packet_key=EXPOREG_INVITATION_PRO_YEAR&type=2'
          }
        } else {
          if (this.cycle === 'month') {
            this.renderInfo.STARTER.price = this.getPacktByKey('EXPOREG_INVITATION_STARTER_MONTH').price
            this.renderInfo.STARTER.button = FullBasePacket !== 'EXPOREG_INVITATION_STARTER' ? '立即订购' : '续费'
            this.renderInfo.STARTER.url = this.payCenterUrl + '/packet/info?app_code=EXPOREG&key=EXPOREG_INVITATION_STARTER_MONTH&packet_key=&type=1'
            this.renderInfo.PRO.price = this.getPacktByKey('EXPOREG_INVITATION_PRO_MONTH').price
            this.renderInfo.PRO.button = FullBasePacket !== 'EXPOREG_INVITATION_PRO' ? '立即订购' : '续费'
            this.renderInfo.PRO.url = this.payCenterUrl + '/packet/info?app_code=EXPOREG&key=EXPOREG_INVITATION_PRO_MONTH&packet_key=&type=1'
          } else {
            this.renderInfo.STARTER.price = this.getPacktByKey('EXPOREG_INVITATION_STARTER_YEAR').price
            this.renderInfo.STARTER.button = FullBasePacket !== 'EXPOREG_INVITATION_STARTER' ? '立即订购' : '续费'
            this.renderInfo.STARTER.url = this.payCenterUrl + '/packet/info?app_code=EXPOREG&key=EXPOREG_INVITATION_STARTER_YEAR&packet_key=&type=1'
            this.renderInfo.PRO.price = this.getPacktByKey('EXPOREG_INVITATION_PRO_YEAR').price
            this.renderInfo.PRO.button = FullBasePacket !== 'EXPOREG_INVITATION_PRO' ? '立即订购' : '续费'
            this.renderInfo.PRO.url = this.payCenterUrl + '/packet/info?app_code=EXPOREG&key=EXPOREG_INVITATION_PRO_YEAR&packet_key=&type=1'
          }
        }
      }
    },
    getPacktByKey(key) {
      return this.verList.find(item => item.ver_key === key)
    },
    getPacketByPKey(Key) {
      return this.packetList.find(item => item.packet_key === Key)
    },
    changeCycle(cycle) {
      this.cycle = cycle
      this.computeInfo()
    },
    changeType(type) {
      this.type = type
      this.computeInfo()
    },
    changeDetail() {
      this.showDetail = !this.showDetail
    }
  }
})
</script>

<template>
  <div class="packet-list">
    <div class="close el-icon-close" @click="close" />
    <div class="tab-list">
      <div class="cycle-tab">
        <div :class="['cycle-item',cycle==='month'?'active':'']" @click="changeCycle('month')">按月支付</div>
        <div :class="['cycle-item',cycle==='year'?'active':'']" @click="changeCycle('year')">按年支付</div>
      </div>
      <template>
        <div class="hr" />
        <div class="cycle-tab">
          <div :class="['cycle-item',type==='expoReg'?'active':'']" @click="changeType('expoReg')">展会预登记</div>
          <div :class="['cycle-item',type==='invitation'?'active':'']" @click="changeType('invitation')">签证邀请函</div>
        </div>
      </template>
    </div>
    <div class="packet-outer">
      <div :class="['packet',showDetail?'':'hide']">
        <div class="list-head list">
          <div class="detail" />
          <div class="head">
            <div class="name">标准版</div>
            <div class="info">快速轻松地创建高转化率的落地页</div>
          </div>
          <div class="head">
            <div class="name">专业版</div>
            <div class="info">最受欢迎</div>
          </div>
          <div class="head">
            <div class="name">定制版</div>
            <div class="info">根据您组织的独特结构、工作流程和客户需求定制方案</div>
          </div>
        </div>
        <div class="list-price list">
          <div class="detail" />
          <div class="price-cont">
            <div class="price">
              ¥<span>{{ renderInfo.STARTER.price }}</span>/{{ cycle==='month'?'月':'年' }}
            </div>
            <a :href="renderInfo.STARTER.url" target="_blank" class="button">{{ renderInfo.STARTER.button }}</a>
          </div>
          <div class="price-cont">
            <div class="price">
              ¥<span>{{ renderInfo.PRO.price }}</span>/{{ cycle==='month'?'月':'年' }}
            </div>
            <a :href="renderInfo.PRO.url" target="_blank" class="button">{{ renderInfo.PRO.button }}</a>
          </div>
          <div class="price-cont">
            <div class="price">联系我们获取定制价格</div>
            <div class="button">立即联系</div>
          </div>
        </div>
        <div class="list-func list">
          <div class="detail">
            <div class="title">功能介绍</div>
          </div>
          <div class="func-cont">
            <div class="title">核心功能：</div>
          </div>
          <div class="func-cont">
            <div class="title">核心功能：</div>
          </div>
          <div class="func-cont">
            <div class="title">核心功能：</div>
          </div>
        </div>
        <div class="list-func list">
          <div class="detail">
            <div class="text">快速构建高转化率、移动响应式落地页，提升潜在客户、注册量和销售额，无需开发人员。</div>
          </div>
          <div class="func-cont">
            <div class="text">5个预登记落地页</div>
          </div>
          <div class="func-cont">
            <div class="text">无限预登记落地页</div>
          </div>
          <div class="func-cont">
            <div class="text">无限预登记落地页</div>
          </div>
        </div>
        <div class="list-func list">
          <div class="detail">
            <div class="text">您可以将美页易搭落地页发布到任何自定义域名或 URL，并与您现有的广告系列或 URL 结构无缝集成。</div>
          </div>
          <div class="func-cont">
            <div class="text">可选3个模板</div>
          </div>
          <div class="func-cont">
            <div class="text">可选模板不限</div>
          </div>
          <div class="func-cont">
            <div class="text">可选模板不限</div>
          </div>
        </div>
        <div class="list-func list">
          <div class="detail">
            <div class="text">美页易搭不会限制您的增长——每个方案都包含无限流量和转化次数。每次访客完成您的目标（例如，在落地页、网站、弹出窗口或提醒栏上点击号召性用语或提交潜在客户表单）时，都会计为一次转化。</div>
          </div>
          <div class="func-cont">
            <div class="text">无限流量和潜在客户</div>
          </div>
          <div class="func-cont">
            <div class="text">无限流量和潜在客户</div>
          </div>
          <div class="func-cont">
            <div class="text">无限流量和潜在客户</div>
          </div>
        </div>
        <div class="list-func list">
          <div class="detail">
            <div class="text">您可以将美页易搭落地页发布到任何自定义域名或 URL，并与您现有的广告系列或 URL 结构无缝集成。</div>
          </div>
          <div class="func-cont">
            <div class="text">连接1个自定义域名</div>
          </div>
          <div class="func-cont">
            <div class="text">连接3个自定义域名</div>
          </div>
          <div class="func-cont">
            <div class="text">更多自定义域名</div>
          </div>
        </div>
        <div class="list-func list">
          <div class="detail">
            <div class="text">您可以将美页易搭落地页发布到任何自定义域名或 URL，并与您现有的广告系列或 URL 结构无缝集成。</div>
          </div>
          <div class="func-cont">
            <div class="text">标准集成</div>
          </div>
          <div class="func-cont">
            <div class="text">高级集成</div>
          </div>
          <div class="func-cont">
            <div class="text">高级集成</div>
          </div>
        </div>
        <div class="list-func list">
          <div class="detail">
            <div class="text">您可以将美页易搭落地页发布到任何自定义域名或 URL，并与您现有的广告系列或 URL 结构无缝集成。</div>
          </div>
          <div class="func-cont">
            <div class="text">社媒分享</div>
          </div>
          <div class="func-cont">
            <div class="text">社媒分享</div>
          </div>
          <div class="func-cont">
            <div class="text">社媒分享</div>
          </div>
        </div>
        <div class="list-func list">
          <div class="detail">
            <div class="text">您可以将美页易搭落地页发布到任何自定义域名或 URL，并与您现有的广告系列或 URL 结构无缝集成。</div>
          </div>
          <div class="func-cont">
            <div class="text">UTM追踪</div>
          </div>
          <div class="func-cont">
            <div class="text">UTM追踪</div>
          </div>
          <div class="func-cont">
            <div class="text">UTM追踪</div>
          </div>
        </div>
        <div class="list-func list">
          <div class="detail">
            <div class="text">您可以将美页易搭落地页发布到任何自定义域名或 URL，并与您现有的广告系列或 URL 结构无缝集成。</div>
          </div>
          <div class="func-cont">
            <div class="text">1个用户</div>
          </div>
          <div class="func-cont">
            <div class="text">2个用户</div>
          </div>
          <div class="func-cont">
            <div class="text">定制</div>
          </div>
        </div>
        <div class="list-func list">
          <div class="detail">
            <div class="text">您可以将美页易搭落地页发布到任何自定义域名或 URL，并与您现有的广告系列或 URL 结构无缝集成。</div>
          </div>
          <div class="func-cont">
            <div class="text">AI翻译功能：❌</div>
          </div>
          <div class="func-cont">
            <div class="text">AI翻译功能：✔️</div>
          </div>
          <div class="func-cont">
            <div class="text">AI翻译功能：✔️</div>
          </div>
        </div>
        <div class="list-func list">
          <div class="detail">
            <div class="text">您可以将美页易搭落地页发布到任何自定义域名或 URL，并与您现有的广告系列或 URL 结构无缝集成。</div>
          </div>
          <div class="func-cont">
            <div class="text">去除易搭标识：❌</div>
          </div>
          <div class="func-cont">
            <div class="text">去除易搭标识：✔️</div>
          </div>
          <div class="func-cont">
            <div class="text">去除易搭标识：✔️</div>
          </div>
        </div>
        <div class="list-func list">
          <div class="detail">
            <div class="text">识别您的匿名流量——他们是谁、他们来自哪里，以及他们如何与您的网站和落地页互动，这样您就可以了解哪些人访问了您的页面但尚未转化。使用 Audience Insights，您可以定制您的信息传递方式、检查广告定位，并更好地了解您的受众。</div>
          </div>
          <div class="func-cont">
            <div class="text">受众洞察：❌</div>
          </div>
          <div class="func-cont">
            <div class="text">受众洞察：✔️</div>
          </div>
          <div class="func-cont">
            <div class="text">受众洞察：✔️</div>
          </div>
        </div>
        <div class="list-func list">
          <div class="detail">
            <div class="text">如果您是服务于多个客户的代理机构或顾问，美页易搭可让您轻松通过单个帐户管理多个品牌。您可以对广告系列进行分组，授予客户子帐户访问权限，并在帐户之间复制落地页、网站、弹窗和警报栏。</div>
          </div>
          <div class="func-cont">
            <div class="text" />
          </div>
          <div class="func-cont">
            <div class="text" />
          </div>
          <div class="func-cont">
            <div class="text">添加客户子账户</div>
          </div>
        </div>
      </div>
    </div>
    <div class="button-cont">
      <div class="button" @click="changeDetail">{{ showDetail?'显示更少':'显示更多' }}</div>
    </div>
  </div>
</template>

<style scoped lang="scss">
  .packet-list{
    position: relative;
    padding: 16px;
    width: 90%;
    height: 90%;
    background-color: white;
    border-radius: 8px;
    grid-gap: 16px;
    display: grid;
    grid-template-rows: auto 1fr auto;
    .tab-list{
      margin-top: 36px;
      gap: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      .hr{
        width: 2px;
        height: 60%;
        background-color: lightgray;
      }
    }
    .button-cont{
      display: flex;
      justify-content: center;
      .button{
        user-select: none;
        color: #2563EB;
        cursor: pointer;
        transition-duration: 300ms;
        border-radius: 24px;
        border: 1px solid #2563EB;
        outline: 2px solid #2563EB00;
        padding: 8px 16px;
        &:hover{
          outline: 2px solid #2563EBFF;
        }
      }
    }
    .packet-outer{
      position: relative;
      .packet{
        height: 100%;
        width: 100%;
        left: 0;
        top: 0;
        overflow: hidden;
        overflow-y: auto;
        position: absolute;
        .list-head{
          z-index: 1;
          position: sticky;
          top: 0;
          background-color: white;
          .detail{

          }
        }
        &.hide{
          .list{
            grid-template-columns: 0fr 340px 340px 340px;
            .detail{
              grid-template-rows: 0fr;
              grid-template-columns: 0fr;
            }
          }
        }
        .list{
          transition-duration: 300ms;
          margin: auto;
          display: grid;
          gap: 16px;
          justify-content: center;
          grid-template-columns: 1fr 340px 340px 340px;
          &:last-child{
            .func-cont{
              border-bottom: 2px solid #E3E4E6;
              border-radius: 0 0 16px 16px;
            }
          }
          &.list-func:hover{
            div{
              background-color: #f8f8f8;
            }
          }
          .detail{
            transition-duration: 300ms;
            display: grid;
            grid-template-rows: 1fr;
            grid-template-columns: 1fr;
            overflow: hidden;
            .title{
              width: calc(90vw - 1100px);
              min-height: 0;
              font-weight: bold;
              text-align: center;
            }
            .text{
              width: calc(90vw - 1100px);
              min-height: 0;
              padding: 16px;
              font-size: 16px;
              border-bottom: 1px solid #E3E4E6;
            }
          }
          .func-cont{
            padding: 0 16px;
            border-left: 2px solid #E3E4E6;
            border-right: 2px solid #E3E4E6;
            .text{
              position: sticky;
              top: 136px;
              font-size: 16px;
            }
            .title{
              font-weight: bold;
            }
          }
          .price-cont{
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 16px;
            padding-top: 8px;
            border-left: 2px solid #E3E4E6;
            border-right: 2px solid #E3E4E6;
            .button{
              color: black;
              text-decoration: none;
              font-weight: bold;
              border-radius: 4px;
              border: 1px solid black;
              padding: 8px;
              text-align: center;
              transition-duration: 300ms;
              &:hover{
                cursor: pointer;
                border: 1px solid #2563EB;
                background-color: #2563EB;
                color: white;
              }
            }
            .price{
              margin-bottom: 8px;
              text-align: center;
              span{
                font-size: 48px;
                font-weight: bold;
              }
            }
          }
          .head{
            border: 2px solid #E3E4E6;
            border-radius: 16px 16px 0 0;
            padding: 16px;
            text-align: center;
            background-color: #F2F5FA;
            .name{
              font-size: 24px;
              font-weight: bold;
            }
            .info{
              margin-top: 8px;
              color: #7E7E7E;
              font-size: 16px;
            }
          }
        }
      }

    }
    .cycle-tab{
      gap: 16px;
      display: flex;
      justify-content: center;
      .cycle-item{
        color: #2563EB;
        cursor: pointer;
        transition-duration: 300ms;
        border-radius: 24px;
        border: 1px solid #2563EB;
        outline: 2px solid #2563EB00;
        padding: 8px 16px;
        &:hover{
          outline: 2px solid #2563EBFF;
        }
        &.active{
          font-weight: bold;
          background-color: #2563EB;
          color: white;
        }
      }
    }
    .close{
      font-size: 24px;
      right: 8px;
      top: 8px;
      position: absolute;
      padding: 8px;
      cursor: pointer;
      transition-duration: 300ms;
      &:hover{
        border-radius: 4px;
        background-color: #ededed;
      }
    }
  }
</style>
