<template>
  <div class="full-width relative product-bg column">
    <el-scrollbar class="full-width full-scroll col">
      <div class="column flex-center items-center" style="min-height: 100%; padding-bottom: 30px;">
        <div class="text-weight-bold" style="font-size: 36px">
          <span class="product-cn" >全新Travel Design</span>
          <span class="product-subtitle q-ml-lg">一站式协同行程设计平台</span>
        </div>
        <div style="font-size: 40px;color:#000;" class="q-mt-lg text-weight-bolder">
          开启企业版会员，全组织，多场景协同
        </div>

        <div style="margin-top: 50px;" class="row" v-loding="loading">
          <div class="product-item" :class="{ active: choosenVersion && x.priceid == choosenVersion.priceid }" v-for="(x, i) in products" :key="i" @click="choosenVersionHandler(x)" >
            <div class="rounded row items-center" style="height:90px;padding: 0 25px;" :style="{backgroundColor:colors[i]}">
              <span class="text-white text-weight-bold col" style="font-size: 24px;">{{ x.vipname }}</span>
              <img :src="imgs[i]" style="width:63px;">
            </div>
            <div class="q-px-md">
              <div class="row items-center text-info q-mt-lg">
                <div class="col">可用人数</div>
                <div class="text-dark">
                  {{ x.maxuser != 0 ? x.maxuser : "定制" }}
                </div>
              </div>
              <div class="row items-center text-info q-mt-lg">
                <div class="col">云盘空间</div>
                <div class="text-dark">{{ space[i] }}</div>
              </div>
              <div class="row items-center text-info q-mt-lg">
                <div class="col">预制POI信息</div>
                <div class="text-dark">
                  <img src="../../assets/img/gou.png" style="width: 15px" />
                </div>
              </div>
              <div class="row items-center text-info q-mt-lg">
                <div class="col">PDF与图片输出</div>
                <div class="text-dark">
                  <img src="../../assets/img/gou.png" style="width: 15px" />
                </div>
              </div>
              <div class="row items-center text-info q-mt-lg">
                <div class="col">所有模板通用</div>
                <div class="text-dark">
                  <img src="../../assets/img/gou.png" style="width: 15px" />
                </div>
              </div>
              <div class="row items-center text-info q-mt-lg">
                <div class="col">组织内部共享行程</div>
                <div class="text-dark">
                  <img src="../../assets/img/gou.png" style="width: 15px" />
                </div>
              </div>
              <div class="row items-center text-info q-mt-lg">
                <div class="col">上传自定义模板</div>
                <div class="text-dark">
                  <img src="../../assets/img/gou.png" style="width: 15px" />
                </div>
              </div>
              <div class="row items-center text-info q-mt-lg">
                <div class="col">急速创建行程</div>
                <div class="text-dark">
                  <img src="../../assets/img/gou.png" style="width: 15px" />
                </div>
              </div>
              <div class="row items-center text-info q-mt-lg">
                <div class="col">AI报价工具</div>
                <div class="text-dark">
                  <img src="../../assets/img/gou.png" style="width: 15px" />
                </div>
              </div>
              <div class="text-center q-mt-lg text-weight-bold" style="color: #000000;font-size: 30px;">
                <template  v-if="x.price > 0">
                  <span>{{ x.price.toFixed(2) }}</span><span style="font-size: 14px;color: #959595;">/年</span>
                </template>
                <span v-else>面议</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-scrollbar>
    <div class="light-shadow rounded q-pa-lg bg-white row items-center q-ma-md" style="margin-top: 0;">
        <div class="text-info text-small col" >
            当前选中产品：
            <span class="text-dark">{{ choosenVersion?choosenVersion.vipname:'未选择企业产品' }}</span>
        </div>
        <div class="text-info text-small" v-if="choosenVersion && choosenVersion.price>0">价格信息：</div>
        <div v-if="choosenVersion && choosenVersion.price>0">
            <span style="font-size: 24px">{{ choosenVersion.price.toFixed(2) }}</span>
            /年
        </div>
        <div class="q-ml-lg">
            <el-button type="primary" v-if="choosenVersion" :loading="creating" @click="createOrderHandler">{{ choosenVersion.price > 0?'确认购买':'联系客服' }}</el-button>
        </div>
    </div>
  </div>
  <!-- <WePay v-if="showPay"></WePay> -->
</template>
<script lang="ts" setup>
import { ApiResult, VipType } from "@/configs/axios";
import UserServices from "@/services/UserService";
import OrderService from '@/services/OrderService'
import { ref } from "vue";
import { ElMessage } from "element-plus";
import { openCustomerService } from "@/utils/common";
import WePay from '@/components/Pay/WePay.vue'
import router from "@/router";

const loading = ref(false);
const products = ref<any[]>();
const space = ref<string[]>(["20G", "100G", "定制"]);
const choosenVersion = ref<any>(null);
const creating = ref(false)
const showPay = ref(true)
const imgs=ref<string[]>([
  'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713425444000_672.png',
  'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713425444000_689.png',
  'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713425444000_164.png'
])
const colors = ref<string[]>(['#3556F9','#46CDD9','#591EDB'])
const formatProductHandler = (data: any[]) => {
  if (Array.isArray(data)) {
    products.value = data.filter((x) => x.viptype == VipType.TEAM);
    console.log(products.value);
  }
};

const getProduct = async () => {
  loading.value = true;
  const response = await UserServices.GetProductAsync();

  if (response.data.resultCode == ApiResult.SUCCESS) {
    formatProductHandler(response.data.data.pageData);
  }
  loading.value = false;
}
const choosenVersionHandler = (item:any)=>{
    choosenVersion.value = item
}
const createOrderHandler = async ()=>{
    if(choosenVersion.value && !creating.value){
        if(choosenVersion.value.price>0){
            creating.value=true
            const parameters = {
                priceid:choosenVersion.value.priceid,
                vipid:choosenVersion.value.vipid,
                pricetype:1,
                price:choosenVersion.value.price,
                activedate:'2024-04-15',
                orderid:0
            }

            const response = await OrderService.CreateOrderAsync(parameters)

            if(response.data.resultCode == ApiResult.SUCCESS){
             
                ElMessage.success({message:'订单创建成功，正在调起支付'})
                creating.value = false
                return
            }
            ElMessage.error({message:response.data.message})
            creating.value = false
        }else{
            openCustomerService()
        }
    }
}

getProduct();
</script>
<style scoped>
.product-bg{
  background-image: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713424495000_472.png');
  background-size: 100% auto;
}
.product-cn{
  font-weight: 800;
  font-size: 27px;
  color: #000000;
  line-height: 1;
  background: linear-gradient(102deg, #649DED 0%, #570AD8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.product-subtitle{
  font-weight: 400;
  font-size: 27px;
  color: #5F65E5;
  line-height: 1;
}
.product-item {
  width: 20.833vw;
  padding:20px;
  margin-right: 3.125vw;
  border-radius: 8px;
  background: #FFF;
  border: 3px solid transparent;
  cursor: pointer;
  box-shadow: 0px 0px 27px 0px rgba(178,198,240,0.56);
}
.product-item:hover,
.product-item.active {
  /* box-shadow: 0px 0px 51px 0px rgba(103,130,249,0.99);
  border: 3px solid #3556F9; */
  animation: active-an .3s linear forwards;
}
@keyframes active-an {
    0%{
      margin-top: 0;
      box-shadow: 0px 0px 27px 0px rgba(178,198,240,0.56);
      border: 3px solid transparent;
    }
    100% {
      box-shadow: 0px 0px 51px 0px rgba(103,130,249,0.99);
      margin-top:-20px;
      border: 3px solid #3556F9;
    }
}
/* .product-item:hover .text-info,
.product-item.active .text-info {
  color: #efefef;
} */
/* .product-item:hover .text-dark,
.product-item.active .text-dark {
  color: #fff;
}
.product-item:hover img,
.product-item.active img {
  filter: grayscale(100%) brightness(200%);
} */
.absolute.botton{
    bottom: 20px;
    right: 20px;
    left: 20px;
}
</style>
