<template>
  <div class="lg:w-screen-xl w-full m-auto">
    <Breadcrumb title="订单确认"/>
  </div>
  <div class="page-main md:w-screen-xl m-auto p-3">
    <el-row :gutter="24">
      <el-col :span="16" :xs="24">
        <el-card shadow="hover" class="mb-4">
          <template #header>
            <div class="card-header font-bold">
              <span>订单确认</span>
            </div>
          </template>
          <el-descriptions title="云·企业官网（SaaS交付）" :column="1" class="mb-4">
            <el-descriptions-item label="套餐版本：">标准版【需备案】</el-descriptions-item>
            <el-descriptions-item label="购买时长：">1年</el-descriptions-item>
          </el-descriptions>
          <el-descriptions title="设计服务" :column="1" class="mb-4">
            <el-descriptions-item label="是否需要设计：">需要</el-descriptions-item>
            <el-descriptions-item label="套餐版本：">标准版</el-descriptions-item>
          </el-descriptions>
          <el-descriptions title="合计：" :column="1" class="mb-4">
            <el-descriptions-item label="总价格：">￥3000.00</el-descriptions-item>
            <el-descriptions-item label="优惠价格：">￥1280.00</el-descriptions-item>
          </el-descriptions>
        </el-card>
        <el-card shadow="hover" class="mb-4">
          <template #header>
            <div class="card-header font-bold">
              <span>服务协议</span>
            </div>
          </template>
          <div class="flex items-center">
            <el-checkbox v-model="isAgree"></el-checkbox>
            <span class="ml-1">我已阅读并同意</span>
            <span class="text-blue-400 hover:text-blue-500 cursor-pointer" @click="openSpmUrl(`/article/374`, {}, 0, true)">计算机软件著作权登记服务（纸质登记）专属条款</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8" :xs="24">
        <el-card shadow="hover" class="mb-4">
          <template #header>
            <div class="card-header font-bold">
              <span>扫码支付</span>
            </div>
          </template>
          <div class="flex justify-center">
            <el-radio-group v-model="form.code">
              <el-radio-button value="1" border>微信支付</el-radio-button>
              <el-radio-button value="12" border>支付宝</el-radio-button>
              <el-radio-button value="24" border>余额支付</el-radio-button>
            </el-radio-group>
          </div>
          <div class="flex justify-center py-4">
            <el-avatar :size="250" src="https://oss.wsdns.cn/20240409/247a492abda94b08ace33fa5405628ca.jpeg"
                       shape="square" />
          </div>

          <el-form-item>
            <el-button type="danger" :disabled="!isAgree" class="w-full" size="large" @click="onSubmit">去支付</el-button>
          </el-form-item>
        </el-card>
      </el-col>
    </el-row>
  </div>
  <!--  <div class="login-layout mt-[100px] m-auto sm:w-screen-xl w-full">-->
  <!--    <div class="mt-[100px] m-auto flex sm:flex-row flex-col sm:p-0 p-3">-->
  <!--      <div class="flash bg-white rounded-lg px-7 py-4 w-full">-->
  <!--        <el-tabs class="flash bg-white ml-0">-->
  <!--          <el-tab-pane label="个人开发者">-->
  <!--            <el-form :model="form" label-width="auto" size="large" label-position="top" class="sm:w-screen-md w-full sm:py-2">-->
  <!--              <el-form-item label="商品类型">-->
  <!--                <el-input v-model="form.title" placeholder="请输入真实姓名" />-->
  <!--              </el-form-item>-->
  <!--              <el-form-item label="资源包类型">-->
  <!--                <el-input v-model="form.productId"  placeholder="请输入证件号码" />-->
  <!--              </el-form-item>-->
  <!--              <el-form-item label="身份证(正面)">-->
  <!--                <Upload />-->
  <!--              </el-form-item>-->
  <!--              <el-form-item label="身份证(反面)">-->
  <!--                <Upload />-->
  <!--              </el-form-item>-->
  <!--              <el-form-item>-->
  <!--                <el-button type="primary" size="large" @click="onSubmit">提交</el-button>-->
  <!--              </el-form-item>-->
  <!--            </el-form>-->
  <!--          </el-tab-pane>-->
  <!--        </el-tabs>-->
  <!--      </div>-->

  <!--    </div>-->
  <!--  </div>-->
</template>
<script setup lang="ts">
import {useConfigInfo, useToken, useWebsite} from "~/composables/configState";
import useFormData from '@/utils/use-form-data';
import type {User} from '@/api/system/user/model';
import {ref} from 'vue'
import {useServerRequest} from "~/composables/useServerRequest";
import type {ApiResult} from "~/api";
import type {Product} from "~/api/oa/product/model";
import Breadcrumb from "~/components/Breadcrumb.vue";

// 配置信息
const runtimeConfig = useRuntimeConfig();
const route = useRoute();
const activeIndex = ref('');
const website = useWebsite()
const isAgree = ref<boolean>(false);
const config = useConfigInfo();
const token = useToken();
const userInfo = ref<User>();

// 配置信息
const {form, assignFields} = useFormData<Product>({
  // 自增ID
  productId: undefined,
  // 类型 0软件产品 1实物商品 2虚拟商品
  type: undefined,
  // 产品编码
  code: undefined,
  // 产品标题
  title: undefined,
  // 封面图
  image: undefined,
  // 产品详情
  content: undefined,
  // 父级分类ID
  parentId: undefined,
  // 产品分类ID
  categoryId: undefined,
  // 产品规格 0单规格 1多规格
  specs: undefined,
  // 货架
  position: undefined,
  // 单位名称 (个)
  unitName: undefined,
  // 进货价格
  price: undefined,
  // 销售价格
  salePrice: undefined,
  // 库存计算方式(10下单减库存 20付款减库存)
  deductStockType: undefined,
  // 轮播图
  files: undefined,
  // 销量
  sales: undefined,
  // 库存
  stock: undefined,
  // 消费赚取积分
  gainIntegral: undefined,
  // 推荐
  recommend: undefined,
  // 商户ID
  merchantId: undefined,
  // 状态（0：未上架，1：上架）
  isShow: undefined,
  // 状态, 0上架 1待上架 2待审核 3审核不通过
  status: undefined,
  // 备注
  comments: undefined,
  // 排序号
  sortNumber: undefined,
  // 用户ID
  userId: undefined,
  // 是否删除, 0否, 1是
  deleted: undefined,
  // 租户id
  tenantId: undefined,
  // 创建时间
  createTime: undefined,
  // 修改时间
  updateTime: undefined,
});

const handleChange = (e) => {
  console.log(e)
}

const onSubmit = async () => {
  const {data: modify} = await useServerRequest<ApiResult<User>>('/auth/user', {
    baseURL: runtimeConfig.public.apiServer,
    method: 'put',
    body: form
  })
  if (modify.value?.code == 0) {
    ElMessage.success('修改成功')
  }
}

const reload = async () => {
  const {data: response} = await useServerRequest<ApiResult<Product>>(`/cms/cms-product/${getIdBySpm(5)}`, {baseURL: runtimeConfig.public.apiServer})
  if (response.value?.data) {
    assignFields(response.value?.data);
    form.categoryName = '立即开通'
    useHead({
      title: `${form.title}`,
      meta: [{name: website.value.keywords, content: website.value.comments}]
    });
  }
}

watch(
    () => route.path,
    (path) => {
      activeIndex.value = path;
      console.log(path, '=>Path')
      reload();
    },
    {immediate: true}
);
</script>

<style lang="scss">
.text-a123 {
  color: #f0f2f5;
}
</style>
