<template>
  <div class="orderDiv">
    <div class="orderForm">
      <el-form :model="form" label-width="150px" :rules="formRules" ref="formRef">
        <el-form-item label="订单号" prop="orderNo">
          <el-input v-model="form.orderNo" />
        </el-form-item>
        <el-form-item label="旺旺号" prop="wangNo">
          <el-input v-model="form.wangNo" />
        </el-form-item>
        <el-form-item label="微信账号" prop="wechatNo">
          <el-input v-model="form.wechatNo" />
        </el-form-item>
        <el-form-item label="支付宝账号" prop="alipayNo">
          <el-input v-model="form.alipayNo" />
        </el-form-item>
        <el-form-item label="付款金额" prop="payAmt">
          <el-input v-model.number="form.payAmt" type="number" />
        </el-form-item>
        <el-form-item label="店铺" prop="storeId">
          <el-select v-model="form.storeId" filterable>
            <el-option v-for="store of stores" :label="store.name" :value="store.id" :key="store.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="支付宝收款名称" prop="alipayName">
          <el-input v-model="form.alipayName" />
        </el-form-item>
        <el-form-item label="负责人" prop="rpName">
          <el-input v-model="form.rpName" />
        </el-form-item>
        <el-form-item label="负责放单人微信名" prop="rpWechatName">
          <el-input v-model="form.rpWechatName" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" />
        </el-form-item>
        <el-form-item label="买家电话" prop="phoneNumber">
          <el-input v-model="form.phoneNumber" />
        </el-form-item>
        <el-form-item label="银行卡号" prop="cardNo">
          <el-input v-model="form.cardNo" />
        </el-form-item>
        <el-form-item label="收货地址" prop="address">
          <el-input v-model="form.address" />
        </el-form-item>
      </el-form>
    </div>
    <div class="orderAction">
      <el-button type="warning" @click="submit">添加</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, watch } from "vue"
import { IOrder } from "@/api/order/types/order"
import { ElLoading, ElMessage, FormInstance, FormRules } from "element-plus"
import { addOrderApi, getOrderUserInfoApi } from "@/api/order"
import { LoadingInstance } from "element-plus/es/components/loading/src/loading"
import { IStore } from "@/api/store/types/store"
import { getAllStoreApi } from "@/api/store"
const loading = ref<LoadingInstance>()
const form = ref<IOrder>({
  orderNo: "",
  wangNo: "",
  payAmt: 0,
  storeId: 1,
  address: ""
})
watch(form.value, () => {
  confirmUpload.value = false
})
const formRules: FormRules = {
  orderNo: [
    { required: true, message: "请输入订单号！" },
    { max: 30, message: "订单号长度在30位以内！" }
  ],
  wangNo: [
    { required: true, message: "请输入旺旺号" },
    { max: 30, message: "旺旺号长度在30位以内！" }
  ],
  wechatNo: [{ max: 30, message: "微信号长度在30位以内！" }],
  alipayNo: [{ max: 30, message: "支付宝账号长度在30位以内！" }],
  payAmt: [{ required: true, message: "请输入付款金额" }],
  shopTownName: [
    { required: true, message: "请输入店铺名称" },
    { max: 255, message: "店铺长度应在255位以内！" }
  ],
  alipayName: [{ max: 30, message: "支付宝用户名长度在30位以内！" }],
  rpName: [{ max: 20, message: "负责人姓名长度应在20位以内！" }],
  rpWeChatName: [{ max: 255, message: "放单人微信名长度在255位以内！" }],
  remark: [{ max: 255, message: "备注长度在255位以内！" }],
  phoneNumber: [{ max: 11, message: "卖家电话长度应在11位以内" }],
  cardNo: [{ max: 20, message: "银行卡长度在20位以内！" }],
  address: [
    { required: true, message: "请输入收货地址" },
    { max: 255, message: "收货地址长度在255位以内！" }
  ]
}
const formRef = ref<FormInstance>()
const confirmUpload = ref<boolean>(false)
const stores = ref<IStore[]>([])
const submit = () => {
  formRef.value
    ?.validate()
    .then(async () => {
      loading.value = ElLoading.service({ fullscreen: true })
      let canUpload = true
      const check = async (content?: string) => {
        if (content) {
          await getOrderUserInfoApi(content).then((response) => {
            if (canUpload) {
              canUpload = !response.data.data
            }
          })
        }
      }
      if (!confirmUpload.value) {
        await check(form.value.wangNo)
        await check(form.value.wechatNo)
        await check(form.value.alipayNo)
        await check(form.value.alipayName)
        await check(form.value.phoneNumber)
      } else {
        confirmUpload.value = false
        canUpload = true
      }
      if (canUpload) {
        addOrderApi(form.value)
          .then(() => {
            ElMessage.success("提交成功！")
            form.value = {
              orderNo: "",
              wangNo: "",
              payAmt: 0,
              storeId: 0,
              address: ""
            }
          })
          .catch((err) => {
            ElMessage.error("提交失败，请重试！")
            console.log(err)
          })
      } else {
        ElMessage.warning("有重复项，请确定是否提交，若确认提交请再次点击提交按钮")
        confirmUpload.value = true
      }
      loading.value?.close()
      loading.value = undefined
    })
    .catch(() => {
      ElMessage.error("有错误的数据！")
    })
}
onMounted(() => {
  getAllStoreApi()
    .then((response) => {
      stores.value = response.data.data
    })
    .catch((err) => {
      console.log(err)
      ElMessage.error("获取店铺失败！")
    })
})
</script>

<style scoped>
.orderDiv {
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  margin: 10px 10px 10px 10px;
}
.orderForm {
  width: 100%;
  height: 95%;
}
.orderAction {
  width: max-content;
  height: 5%;
  margin-top: 10px;
}
</style>
