<template>

  <!-- Banner -->
  <Banner :layout="layout"/>
  <!-- 主体部分 -->
  <div class="xl:w-screen-xl m-auto py-4 mt-12 px-4 sm:px-0 sm:mt-[220px]">
    <el-page-header :icon="ArrowLeft" @back="goBack">
      <template #content>
        <span class="text-large font-600"> {{ page.title }} </span>
      </template>
      <template #extra>
      </template>
      <el-card class="my-5 sm:my-10 sm:px-2" shadow="hover">
        <div class="grid grid-cols-1 sm:grid-cols-3 gap-8">
          <div class="col-span-2">
            <div class="my-2">
              <el-alert title="填写您的需求，为您量身定制." type="warning"/>
            </div>
            <el-form
              ref="formRef"
              :model="form"
              :rules="rules"
              label-position="left"
              label-width="80"
              status-icon
            >
              <el-form-item :label="$t('order.title')" class="hover:bg-gray-50 p-2" prop="title">
                <el-select
                  v-model="form.title"
                  filterable
                  placeholder="选择产品"
                  @change="onWebsite"
                >
                  <el-option
                    v-for="item in siteList"
                    :key="item.websiteId"
                    :label="item.websiteName"
                    :value="item.websiteId"
                  >
                    <div class="flex justify-between">
                      <span>{{ item.websiteName }}</span>
                      <span class="text-gray-300">
                      {{ `${item.websiteCode}.websoft.top` }}
                    </span>
                    </div>
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item :label="$t('order.content')" class="hover:bg-gray-50 p-2" prop="content">
                <el-input v-model="form.content" :rows="5" cols="80" placeholder="填写您的开发需求"
                          type="textarea"/>
              </el-form-item>
              <el-form-item :label="$t('order.realName')" class="hover:bg-gray-50 p-2" prop="realName">
                <el-input v-model="form.realName" :placeholder="$t('order.realName')"/>
              </el-form-item>
              <el-form-item :label="$t('order.phone')" class="hover:bg-gray-50 p-2" prop="phone">
                <el-input v-model="form.phone" :maxlength="11" :placeholder="$t('order.phone')"/>
              </el-form-item>
              <el-form-item :label="$t('order.email')" class="hover:bg-gray-50 p-2" prop="email">
                <el-input v-model="form.email" :placeholder="$t('order.email')"/>
              </el-form-item>
              <el-form-item :label="$t('order.code')" class="hover:bg-gray-50 p-2" prop="code">
                <el-space class="flex">
                  <el-input v-model="form.code" :placeholder="$t('order.imgCode')" maxlength="5" size="large"/>
                  <el-image v-if="captcha" :alt="$t('order.imgCode')" :src="captcha" @click="changeCaptcha"/>
                </el-space>
              </el-form-item>
              <el-form-item>
                <div class="submitForm ml-2">
                  <el-button size="large" type="primary" @click.stop="submitForm(formRef)">
                    {{ $t('order.submit') }}
                  </el-button>
                </div>
              </el-form-item>
            </el-form>
          </div>
          <div class="hidden-sm-and-down">
            <el-image v-if="page.icon" :src="page.icon" class="py-2"/>
          </div>
        </div>
      </el-card>
    </el-page-header>
  </div>

  <el-dialog v-model="dialogVisible">
    <div class="flex justify-center">
      <el-image :src="dialogImageUrl" alt="查看证件" w-full/>
    </div>
  </el-dialog>
</template>
<script lang="ts" setup>
import {ArrowLeft, View, Search} from '@element-plus/icons-vue'
import {useLayout, usePage, useUser} from "~/composables/configState";
import {getNavIdByParamsId} from "~/utils/common";
import type {FormInstance, FormRules} from 'element-plus'
import type {CmsOrder} from "~/api/cms/cmsOrder/model";
import useFormData from "~/utils/use-form-data";
import {addCmsOrder} from "~/api/cms/cmsOrder";
import {getCaptcha} from "~/api/passport/login";
import {getCmsNavigation, listCmsNavigation} from "~/api/cms/cmsNavigation";
import {listCmsWebsite, pageCmsWebsiteAll} from "~/api/cms/cmsWebsite";
import type {CmsWebsite} from "~/api/cms/cmsWebsite/model";

// 引入状态管理
const route = useRoute();
const router = useRouter();
const navId = ref();
const layout = useLayout();
const user = useUser();
const page = usePage();
const siteList = ref<CmsWebsite[]>([]);
const dialogVisible = ref(false)
const formRef = ref<FormInstance>()
const dialogImageUrl = ref('')
// 验证码 base64 数据
const captcha = ref('');
const text = ref<string>('');


const {form, resetFields} = useFormData<CmsOrder>({
  // 订单号
  orderId: undefined,
  // 模型名称
  model: 'order',
  // 订单标题
  title: undefined,
  // 订单编号
  orderNo: undefined,
  // 订单类型，0商城 1询价 2留言
  type: undefined,
  // 关联项目ID，配合订单类型使用
  articleId: undefined,
  // 关联网站ID
  websiteId: undefined,
  // 真实姓名
  realName: undefined,
  // 手机号码
  phone: undefined,
  // 电子邮箱
  email: undefined,
  // 收货地址
  address: undefined,
  // 订单内容
  content: undefined,
  // 订单总额
  totalPrice: '0.00',
  // 实际付款
  payPrice: '0.00',
  // 报价询价
  price: '0.00',
  // 购买数量
  totalNum: undefined,
  // 二维码地址，保存订单号，支付成功后才生成
  qrcode: undefined,
  // 下单渠道，0网站 1小程序 2其他
  channel: undefined,
  // 过期时间
  expirationTime: undefined,
  // 订单是否已结算(0未结算 1已结算)
  isSettled: undefined,
  // 用户id
  userId: undefined,
  // 备注
  comments: undefined,
  // 排序号
  sortNumber: undefined,
  // 是否删除, 0否, 1是
  deleted: undefined,
  // 租户id
  tenantId: undefined,
  // 创建时间
  createTime: undefined,
  // 图像验证码
  code: '',
})

const rules = reactive<FormRules<CmsOrder>>({
  title: [
    {required: true, message: '请输入产品名称', trigger: 'blur'},
  ],
  phone: [
    {required: true, message: '请输入手机号码', trigger: 'blur'},
    {pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur'},
  ],
  realName: [
    {required: true, message: '请输入联系人姓名', trigger: 'blur'},
  ],
  content: [
    {required: true, message: '请输入您的项目需求', trigger: 'blur'},
  ]
})

/* 获取图形验证码 */
const changeCaptcha = async () => {
  getCaptcha().then(captchaData => {
    captcha.value = captchaData.base64;
    text.value = captchaData.text;
  })
};

// 请求数据
const reload = async () => {
  getCmsNavigation(navId.value).then(data => {
    page.value = data
    layout.value.banner = data.banner;
    // 二级栏目分类
    pageCmsWebsiteAll({
      official: true,
      sort: 'websiteId',
      order: 'asc'
    }).then(res => {
      siteList.value = res?.list || [];
    })
    // 用户信息
    if (user.value) {
      form.realName = user.value.realName;
      form.phone = user.value.phone;
      form.email = user.value.email;
    }
    // seo
    useSeoMeta({
      description: data.comments || data.title,
      keywords: data.title,
      titleTemplate: `${data?.title}` + ' - %s',
    })
    changeCaptcha();
  })
}

const onWebsite = (item: CmsWebsite) => {
  form.articleId = item.websiteId;
  form.websiteId = item.websiteId;
}

// 提交表单
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  if (form.code !== text.value) {
    changeCaptcha();
    ElMessage.error('验证码不正确！');
    return false;
  }
  formEl.validate((valid) => {
    if (valid) {
      addCmsOrder(form).then(res => {
        if (res.code == 0) {
          ElMessage.success(res.message)
          resetFields();
        } else {
          return ElMessage.error(res.message)
        }
      })
    }
  })
}

const goBack = () => {
  router.back();
}

watch(
  () => route.params.id,
  (id) => {
    navId.value = getNavIdByParamsId(id);
    reload();
  },
  {immediate: true}
);
</script>

<style lang="scss">
</style>
