<template>
  <div class="price-page">
    <div class="header-banner">
      <div class="image">
        <img
          src="../../assets/images/footer.jpg"
          style="width: 100%; height: 100%; object-fit: cover" />
      </div>
      <div class="text">
        <h2>专业化的服务团队，让您物超所值</h2>
        <hr />
        <ul>
          <li>
            <i class="i1"></i>
            <span>与时俱进</span>
          </li>
          <li>
            <i class="i2"></i>
            <span>客户至上</span>
          </li>
          <li>
            <i class="i3"></i>
            <span>人尽奇才</span>
          </li>
          <li>
            <i class="i4"></i>
            <span>互利共赢</span>
          </li>
        </ul>
      </div>
    </div>
    <div class="content-body">
      <div class="price-container">
        <div class="price-columns">
          <div
            v-for="(c, i) in priceColumns"
            :key="i"
            class="price-column"
            :class="`${c.labelClass || ''} ${c.class || ''}`">
            {{ c.label }}
          </div>
        </div>
        <div class="price-items">
          <div v-for="(p, i) in prices" :key="i" class="price-item">
            <div
              v-for="(c, j) in priceColumns"
              :key="j"
              class="price-value"
              :class="`${c.valueClass || ''} ${c.class || ''}`"
              v-html="value(c, p)"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'pricePage',
  data() {
    return {
      priceColumns: [
        {
          label: '版本',
          value: 'name',
          class: 'h-2x',
          valueClass: 'fs-20 fw-b',
        },
        {
          label: '适用范围',
          value: 'radius'
        },
        {
          label: '收费方式',
          value: (d) => {
            d = d.chargeType
            if (Array.isArray(d)) return d.map((e) => `<p>${e}</p>`).join('')
            return d
          },
          valueClass: 'list',
        },
        {
          label: '价格',
          value: (d) => {
            d = d.price
            if (d && typeof d === 'number') return d + '元'
            return d
          },
        },
        { label: '账号数量', value: 'accountsCount' },
        { label: '充值金额', value: 'rechargeAmount' },
        { label: '部署方式', value: 'deploymentType' },
        { label: '功能定制', value: 'featureCustomization' },
        { label: '权限管理', value: 'permissionManage' },
        { label: '财务管理', value: 'financialManage' },
        { label: '统计报表', value: 'statisticalReport' },
        { label: '订单管理', value: 'orderManage' },
        { label: '物流管理', value: 'logisticsManage' },
        { label: '订单数据存储', value: 'orderStorage' },
        { label: '操作日志查看天数', value: 'logsRetainDays' },
        { label: '店铺数量', value: 'shopCount' },
        { label: '图片空间', value: 'imageStorage' },
        {
          label: '培训方式',
          value: (d) => {
            d = d.trainingType
            if (Array.isArray(d)) return d.map((e) => `<p>${e}</p>`).join('')
            return d
          },
          class: 'h-3x',
          valueClass: 'list',
        },
        { label: '专属产品经理', value: 'exclusivePM' },
      ],

      prices: [
        {
          name: 'shopify版',
          chargeType: '一次性收费',
          price: '10$',
          radius: 'shopify',
          accountsCount: '不限',
          deploymentType: 'SaaS',
          rechargeAmount: '0',//充值金额
          featureCustomization: false, // 功能定制
          permissionManage: true, // 权限管理
          financialManage: true, // 财务管理
          statisticalReport: true, // 统计报表
          orderManage: true, // 订单管理
          logisticsManage: true, // 物流管理
          orderStorage: '180天', // 订单数据存储
          logsRetainDays: '90天', // 操作日志查看天数
          shopCount: 50, // 店铺数量
          imageStorage: '4G', // 图片空间
          trainingType: '线上培训', // 培训方式
          exclusivePM: true, // 专属产品经理
        },
        {
          name: '试用版',

          chargeType: ['免费3个月', '或3000单'], // 收费方式
          price: 0, // 价格
          radius: 'other',
          accountsCount: 10, // 账号数量
          rechargeAmount: '0', // 充值金额
          deploymentType: 'SaaS', // 部署方式
          featureCustomization: false, // 功能定制
          permissionManage: true, // 权限管理
          financialManage: true, // 财务管理
          statisticalReport: true, // 统计报表
          orderManage: true, // 订单管理
          logisticsManage: true, // 物流管理
          orderStorage: '3个月或试用套餐结束', // 订单数据存储
          logsRetainDays: '3个月或试用套餐结束', // 操作日志查看天数
          shopCount: 20, // 店铺数量
          imageStorage: '2G', // 图片空间
          trainingType: '线上培训', // 培训方式
          exclusivePM: false, // 专属产品经理
        },
        {
          name: '基础版',

          chargeType: '按单收费', // 收费方式
          price: '0.2元/单', // 价格
          radius: 'other',
          accountsCount: 100, // 账号数量
          rechargeAmount: '首充10000元', // 充值金额
          deploymentType: 'SaaS', // 部署方式
          featureCustomization: false, // 功能定制
          permissionManage: true, // 权限管理
          financialManage: true, // 财务管理
          statisticalReport: true, // 统计报表
          orderManage: true, // 订单管理
          logisticsManage: true, // 物流管理
          orderStorage: '180天', // 订单数据存储
          logsRetainDays: '90天', // 操作日志查看天数
          shopCount: 50, // 店铺数量
          imageStorage: '4G', // 图片空间
          trainingType: '线上培训', // 培训方式
          exclusivePM: true, // 专属产品经理
        },

        {
          name: '进阶版',

          chargeType: '按单收费', // 收费方式
          price: '0.16元/单', // 价格
          radius: 'other',
          accountsCount: '不限', // 账号数量
          rechargeAmount: '首充30000元', // 充值金额
          deploymentType: 'SaaS', // 部署方式
          featureCustomization: '优化', // 功能定制
          permissionManage: true, // 权限管理
          financialManage: true, // 财务管理
          statisticalReport: true, // 统计报表
          orderManage: true, // 订单管理
          logisticsManage: true, // 物流管理
          orderStorage: '360天', // 订单数据存储
          logsRetainDays: '180天', // 操作日志查看天数
          shopCount: 100, // 店铺数量
          imageStorage: '10G', // 图片空间
          trainingType: ['每周线上回访', '每年3次上门回访', '每年3次上门实施'], // 培训方式
          exclusivePM: true, // 专属产品经理
        },

        {
          name: '尊享版',

          chargeType: '按月收费', // 收费方式
          price: 9800, // 价格
          radius: 'other',
          accountsCount: '不限', // 账号数量
          rechargeAmount: '季付', // 充值金额
          deploymentType: 'SaaS', // 部署方式
          featureCustomization: '优化+通用定制', // 功能定制
          permissionManage: true, // 权限管理
          financialManage: true, // 财务管理
          statisticalReport: true, // 统计报表
          orderManage: true, // 订单管理
          logisticsManage: true, // 物流管理
          orderStorage: '一直存储', // 订单数据存储
          logsRetainDays: '360天', // 操作日志查看天数
          shopCount: '不限', // 店铺数量
          imageStorage: '50G', // 图片空间
          trainingType: ['每周线上回访', '每年6次上门回访', '每年4次上门实施'], // 培训方式
          exclusivePM: true, // 专属产品经理
        },

        {
          name: '至尊版',

          chargeType: '按月收费', // 收费方式
          price: 29800, // 价格
          radius: 'other',
          accountsCount: '不限', // 账号数量
          rechargeAmount: '季付', // 充值金额
          deploymentType: 'SaaS或阿里云独立部署', // 部署方式
          featureCustomization: '支持个性化定制', // 功能定制
          permissionManage: true, // 权限管理
          financialManage: true, // 财务管理
          statisticalReport: true, // 统计报表
          orderManage: true, // 订单管理
          logisticsManage: true, // 物流管理
          orderStorage: '一直存储', // 订单数据存储
          logsRetainDays: '360天', // 操作日志查看天数
          shopCount: '不限', // 店铺数量
          imageStorage: '100G', // 图片空间
          trainingType: ['每周线上回访', '每年3次上门回访', '每年6次上门实施'], // 培训方式
          exclusivePM: true, // 专属产品经理
        },
      ],
    }
  },
  methods: {
    value(col, val) {
      if (!val) return
      let value
      const key = col.value
      if (typeof key === 'function') value = key(val)
      else value = val[key]

      if (typeof value === 'boolean') {
        return `<span class="${value ? 'yes' : 'no'}"></span>`
      }
      if (typeof value === 'number') {
        value = `${value}`
      }
      if (typeof value === 'string') {
        value = value.replaceAll(
          /((\d+)(\.\d+)?)/g,
          '<span class="number">$1</span>'
        )
      }
      return value
    },
  },
}
</script>
<style scoped>
.header-banner {
  position: relative;
  overflow: hidden;
  text-align: center;
}

.text {
  position: absolute;
  width: 100%;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.text h2 {
  font-size: 36px;
  text-align: center;
  color: #fff;
  font-weight: bold;
  user-select: none;
}
.image {
  height: 26vw;
}

.text hr {
  border: none;
  width: 30%;
  height: 2px;
  margin: 20px auto;
  background: url(../../assets/images/banner-line.png) no-repeat;
  background-size: 100% 100%;
}

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

.text ul li:not(:last-child) {
  margin-right: 40px;
}
.text li i {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: 10px;
  vertical-align: top;
}

.text li span {
  display: inline-block;
  line-height: 24px;
  vertical-align: top;
  color: #fff;
}

.text li .i1 {
  background: url(../../assets/images/banner-icon-01.png);
  background-size: 100% 100%;
}

.text li .i2 {
  background: url(../../assets/images/banner-icon-02.png);
  background-size: 100% 100%;
}

.text li .i3 {
  background: url(../../assets/images/banner-icon-03.png);
  background-size: 100% 100%;
}

.text li .i4 {
  background: url(../../assets/images/banner-icon-04.png);
  background-size: 100% 100%;
}

.content-body {
  width: 1400px;
  margin: 0 auto;
  padding: 100px 0;
}

.price-container {
  display: flex;
  border-radius: 8px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
  user-select: none;
  overflow: hidden;
  font-size: 16px;
  --item-height: 40px;
}

.price-column,
.price-value {
  box-sizing: border-box;
  height: var(--item-height);
  padding: 0 30px;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.price-column {
  border-right: solid 1px #eee;
  color: #787878;
}

.price-value {
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1.5;
}

.price-items {
  display: flex;
  flex: 1;
}

.price-item {
  transition: 0.15s;
  padding-bottom: 20px;
  flex: 1;
}

.price-item:hover {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  background-color: #a0cfff;
  border-right: none;
}

.price-item:not(:last-child) {
  border-right: solid 1px #eee;
}
</style>
<style scoped lang="scss">
.price-container .fs-20 {
  font-size: 20px;
}

.price-container .fw-b {
  font-weight: bold;
}

.price-container .h-2x {
  height: calc(var(--item-height) * 2);
}

.price-container .h-3x {
  height: calc(var(--item-height) * 3);
}

.price-container::v-deep .number {
  margin: 0 4px;
  color: red;
}

.price-container .list {
  white-space: normal;
  flex-direction: column;
}

.price-container .list p {
  margin: 0;
}

.price-container .yes {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-size: 100%;
  background-image: url("data:image/svg+xml,%0A%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16.4122 5.66876L17.2065 6.33527C17.6454 6.70315 17.7026 7.35718 17.3345 7.79587C17.3345 7.79594 17.3344 7.79602 17.3341 7.79591L10.3994 16.0559C10.031 16.4942 9.37711 16.5513 8.93832 16.1835L7.3497 14.8505L14.9512 5.79638C15.3196 5.35806 15.9734 5.30094 16.4122 5.66876Z' fill='%2334D98A'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.69383 11.1494L5.38955 10.3767C5.76669 9.95781 6.40934 9.91692 6.83653 10.2846L11.7137 14.4824L10.3868 16.0791C10.0208 16.5195 9.367 16.5798 8.92658 16.2138C8.92115 16.2093 8.91576 16.2047 8.91043 16.2001L4.78549 12.6269C4.35264 12.252 4.3057 11.5971 4.68065 11.1643C4.68499 11.1593 4.68939 11.1543 4.69383 11.1494Z' fill='%2334D98A'/%3E%3C/svg%3E%0A");
}

.price-container .no {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-size: 100%;
  background-image: url("data:image/svg+xml,%0A%3Csvg width='23' height='22' viewBox='0 0 23 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16.1735 5.25388L17.2461 6.32649C17.5846 6.66499 17.5846 7.21382 17.2461 7.55233L13.7974 11.0004L17.2461 14.4489C17.5846 14.7874 17.5846 15.3363 17.2461 15.6748L16.1735 16.7474C15.835 17.0859 15.2862 17.0859 14.9477 16.7474L11.4983 13.2974L8.05233 16.7461C7.71382 17.0846 7.16499 17.0846 6.82649 16.7461L5.75388 15.6735C5.41537 15.335 5.41537 14.7862 5.75388 14.4477L9.19907 11.0004L5.75388 7.55358C5.41537 7.21507 5.41537 6.66625 5.75388 6.32774L6.82649 5.25513C7.16499 4.91663 7.71382 4.91663 8.05233 5.25513L11.4983 8.70123L14.9477 5.25388C15.2862 4.91537 15.835 4.91537 16.1735 5.25388Z' fill='%23FF4930'/%3E%3C/svg%3E%0A");
}

@media screen and (max-width: 1100px) {
  .image {
    height: 33vw !important;
  }
  .text h2 {
    font-size: 20px !important;
  }

  .text hr {
    width: 80vw !important;
    margin: 10px auto !important;
  }

  .text ul li:not(:last-child) {
    margin-right: 20px !important;
  }

  .text li i {
    width: 16px !important;
    height: 16px !important;
  }

  .text li span {
    font-size: 12px !important;
    line-height: 16px !important;
  }

  .content-body {
    padding: 40px 0 !important;
    width: 100%;
    overflow: hidden;
    position: relative;
  }

  .price-container {
    box-shadow: none;
    overflow: auto hidden;
    --item-height: 50px;
  }

  .price-columns {
    position: sticky;
    left: 0;
    background-color: #fff;
  }

  .price-column {
    width: 100px;
    padding: 10px;
    white-space: normal;
    border-bottom: solid 1px #eee;

    &:first-child {
      border-top: solid 1px #eee;
    }
  }

  .price-value {
    border-bottom: solid 1px #eee;
    padding: 0 10px;

    &:first-child {
      border-top: solid 1px #eee;
    }

    &::v-deep > p {
      white-space: nowrap;
    }
  }

  .price-item {
    padding-bottom: 0;
  }
}
</style>
