<template>
  <div class="page">
    <div class="commoditylIst">
      <div class="item" v-for="item in packageList" :key="item.title">
        <div @click="clickPayDialog(item)">
          <div class="line" :style="`background-color:${item.color} ;`"></div>
          <div class="info">
            <!-- 商品信息 -->
            <div class="content">
              <div class="title">
                <el-icon><i-ep-edit /></el-icon>
                {{ $t(item.title) }}
              </div>
              <div class="money">
                <span class="price">{{ item.price }}元</span>/{{
                  item.priceTime
                }}
              </div>
              <div class="time">
                <span>{{ item.time }}</span
                >分钟/月
              </div>
              <div class="button" :style="`background-color:${item.color} ;`">
                {{ $t("shop.selectPlan") }}
              </div>
            </div>
            <!-- 商品权益 -->
            <div class="authority">
              <div
                class="authority-item"
                v-for="items in item.authority"
                :key="items"
              >
                <span>✔</span>{{ items }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 对话框 -->
    <el-dialog v-model="showPayDialog" width="60%" center>
      <div class="payDialog">
        <div class="left">
          <div class="title">{{ $t(presentItme.value.title) }}</div>
          <div class="price">
            <span>{{ presentItme.value.price }}</span>
            元/{{ presentItme.value.priceTime }}
          </div>
          <div
            class="authority"
            v-for="item in presentItme.value.authority"
            :key="item"
          >
            {{ item }}
          </div>
        </div>
        <div class="right">
          <div
            style="background-color: #07c160; cursor: pointer"
            @click="showOrderCode(1)"
          >
            {{ $t("shop.WeChatPay") }}
          </div>
          <div
            style="background-color: #1378fe; cursor: pointer"
            @click="showOrderCode(2)"
          >
            {{ $t("shop.Alipay") }}
          </div>
          <div
            style="background-color: #0070ba; cursor: pointer"
            @click="showOrderCode(3)"
          >
            Paypal
          </div>
        </div>
      </div>
      <!-- 二维码弹出框 -->
      <el-dialog
        v-model="orderCodeDialogShow"
        width="30%"
        append-to-body
        destroy-on-close
      >
        <div class="orderCodeDialog">
          <div class="codeImg">
            <my-Loading-Icon v-if="!orderCodeUrl"></my-Loading-Icon>
            <img v-if="orderCodeUrl" src="../../assets/img/false1.png" alt="" />
          </div>
          <div class="tips">扫描二维码进行付款</div>
          <div class="btnBox">
            <div>刷新二维码</div>
          </div>
        </div>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script setup>
//#region 导入
import { getCurrentInstance } from "vue";
import { packageInfoApi } from "@/apis/myStore";
import { useI18n } from "vue-i18n";

import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
const { locale } = useI18n();
const lanChange = ref(locale);

const AccessToken = localStorage.getItem("AccessToken"); // 判断有没有登录
//#endregion ------------------------------------

//#region 各个套餐的逻辑
const packageList = ref([
  {
    color: "#f3af00",
    title: "shop.Lite",
    icon: "",
    price: "0",
    priceTime: "14天",
    time: "5",
    authority: [
      "Metavatar 水印",
      "高级和标准演示器",
      "15 个 AI 演示提示",
      "AI 脚本世代",
    ],
  },
  {
    color: "#c971ff",
    title: "shop.Pro",
    icon: "",
    price: "10",
    priceTime: "30天",
    time: "10",
    authority: [
      "Metavatar 水印",
      "高级和标准演示器",
      "15 个 AI 演示提示",
      "AI 脚本世代",
      "API访问",
    ],
  },
  {
    color: "#7b61ff",
    title: "shop.Adv",
    icon: "",
    price: "20",
    priceTime: "30天",
    time: "15",
    authority: [
      "Metavatar 水印",
      "高级和标准演示器",
      "15 个 AI 演示提示",
      "AI 脚本世代",
      "API访问",
      "商业用途",
    ],
  },
  {
    color: "#000",
    title: "shop.Ent",
    icon: "",
    price: "50",
    priceTime: "30天",
    time: "40",
    authority: [
      "Metavatar 水印",
      "高级和标准演示器",
      "15 个 AI 演示提示",
      "AI 脚本世代",
      "API访问",
      "商业用途",
      "PowerPoint 插件",
    ],
  },
]);

async function getPackageList() {
  const res = await packageInfoApi();
}
const showPayDialog = ref(false); //套餐信息dialog显示隐藏
const presentItme = reactive({}); //点击的套餐项
function clickPayDialog(item) {
  presentItme.value = item;
  showPayDialog.value = true;
}
function showOrderCode(type) {
  orderCodeDialogShow.value = true;
}
//#endregion ------------------------------------

//#region 点击套餐内的支付
const orderCodeDialogShow = ref(false);
const orderCodeUrl = ref(null);
//#endregion ------------------------------------

//#region $t在script中的使用
// const {
//   appContext: {
//     config: { globalProperties },
//   },
// } = getCurrentInstance();

// const string = "createVideo.typeScript";
// const t = globalProperties.$t(string);
//#endregion ------------------------------------

//#region 页面初始化
onMounted(async () => {
  getPackageList();
});
//#endregion ------------------------------------

//#region

//#endregion ------------------------------------

//#region

//#endregion ------------------------------------
</script>

<style lang="scss" scoped>
.page {
  min-width: calc(100vw - 210px);
  height: calc(100vh - 80px);
  padding: 20px 20px 0 20px;
  background-color: #fff;
  border-radius: 25px 0 0;
  padding: 20px;
}
.commoditylIst {
  display: flex;
  justify-content: flex-start;
  // overflow-x: auto;
  padding: 20px 20px 20px 50px;
  // width: 100%;
  // height: 75%;
  overflow: hidden;
  overflow-x: scroll;
  // scrollbar-width: none; /* 隐藏滚动条（Chrome、Firefox） */
  // -ms-overflow-style: none; /* 隐藏滚动条（IE、Edge） */
  // &::-webkit-scrollbar {
  //   display: none; /* 隐藏滚动条（Safari、Chrome） */
  // }
  .item {
    width: 350px;
    height: 780px;
    margin-right: 50px;
    background-color: #fffefd;
    flex-shrink: 0; /* 防止缩小宽度 */
    border: 1px solid #c0bfbd;
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.2s;
    cursor: pointer;
    .line {
      height: 20px;
      background-color: pink;
      cursor: pointer;
    }
    .info {
      padding: 20px;
      cursor: pointer;
      .content {
        height: 300px;
        padding: 20px;
        border-bottom: 1px solid #c0bfbd;
        cursor: pointer;
        .title {
          font-size: 30px;
          font-weight: 700;
          line-height: 25px;
          margin-bottom: 30px;
          cursor: pointer;
          .el-icon {
            line-height: 30px;
            width: 40px;
            height: 40px;
            font-size: 40px;
            color: #000;
            text-align: center;
            vertical-align: sub;
            cursor: pointer;
          }
        }
        .money {
          margin-bottom: 30px;
          font-size: 20px;
          color: #7c7c7a;
          cursor: pointer;
          .price {
            font-size: 30px;
            font-weight: 700;
            color: #242625;
            cursor: pointer;
          }
        }
        .time {
          margin-bottom: 30px;
          font-size: 20px;
          color: #7c7c7a;
          cursor: pointer;
          span {
            font-weight: 700;
            color: #242625;
            cursor: pointer;
          }
        }
        .button {
          width: 100%;
          height: 40px;
          border-radius: 10px;
          text-align: center;
          line-height: 40px;
          color: #fff;
          font-weight: 700;
          background-color: yellow;
          cursor: pointer;
        }
      }
      .authority {
        cursor: pointer;
        &-item {
          cursor: pointer;
          padding: 20px 10px;
          span {
            cursor: pointer;
            color: #7c7c7a;
            margin-right: 30px;
          }
        }
      }
    }
    &:hover {
      cursor: pointer;
      transform: translateY(-20px);
      box-shadow: #00000026 2px 2px 2px 2px;
    }
  }
}

.payDialog {
  display: flex;
  position: relative;
  min-height: 500px;
  .left {
    width: 35%;
    border-right: 1px solid #7c7c7a;
    .title {
      color: #242625;
      font-weight: 700;
      font-size: 30px;
      text-align: center;
    }
    .price {
      span {
        font-size: 30px;
        font-weight: 700;
        color: #242625;
      }
    }
    .authority {
      padding: 10px 20px;
    }
  }
  .right {
    width: 65%;
    position: absolute;
    top: 20%;
    right: 0%;
    padding-left: 20%;
    > div {
      width: 200px;
      height: 40px;
      // border: 1px solid #242625;
      border-radius: 10px;
      text-align: center;
      line-height: 40px;
      margin: 30px;
      color: #fff;
    }
  }
}
.orderCodeDialog {
  width: 100%;
  .codeImg {
    display: flex;
    margin: auto;
    justify-content: space-evenly;
    align-items: center;
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    border-radius: 15px;
    overflow: hidden;
    padding: 10px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .tips {
    padding-top: 10px;
    text-align: center;
  }
  .btnBox {
    padding: 15px 40px;
    display: flex;
    justify-content: space-evenly;
    > div {
      padding: 10px 20px;
      color: #000;
      background-color: #fff;
      border: #000 solid 1px;
      border-radius: 10px;
      transition: all 0.3s;
      cursor: pointer;
      &:hover {
        color: #fff;
        background-color: #000;
      }
    }
  }
}
</style>
