<template>
  <ElDialog v-model="showDialog" :close-on-click-modal="false" destroy-on-close width="fit-content" @close="dialogCloseHandler">
    <ElForm :model="formData" :rules="rules" ref="salesOrderForm" class="form-panel" label-width="auto">
      <!-- <ElFormItem label="编号" prop="sn">
        <ElInput v-model="formData.sn" :disabled="status === 'view'" placeholder="编号" />
      </ElFormItem> -->
      <ElFormItem label="状态" prop="salesOrderStatus">
        <ElSelect v-model="formData.salesOrderStatus" :disabled="status === 'view'" placeholder="身份类型">
          <ElOption v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value" />
        </ElSelect>
        <!-- <ElInput v-model="formData.salesOrderStatus" :disabled="status === 'view'" placeholder="状态" /> -->
      </ElFormItem>

      <ElFormItem label="购买方客户" prop="customerId">
        <ASelect labelKey="customerName" :tableColumn="customerColumn" v-model="formData.customerId" :api="CustomerApi.paging" :disabled="status === 'view'" placeholder="购买方客户" />

        <!-- <ElInput v-model="formData.customerId" :disabled="status === 'view'" placeholder="购买方客户 Id" /> -->
      </ElFormItem>
      <ElFormItem label="下单日期" prop="orderDate">
        <ElDatePicker v-model="formData.orderDate" :disabled="status === 'view'" format="YYYY-MM-DD" value-format="YYYY-MM-DD" type="date" placeholder="请选择采购日期" />

        <!-- <ElInput v-model="formData.orderDate" :disabled="status === 'view'" placeholder="下单日期" /> -->
      </ElFormItem>
      <ElFormItem label="发货日期" prop="shipmentDate">
        <!-- <ElDatePicker v-model="formData.shipmentDate" :disabled="status === 'view'" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" type="datetime" placeholder="请选择发货日期" /> -->
        <ElDatePicker v-model="formData.shipmentDate" :disabled="status === 'view'" format="YYYY-MM-DD" value-format="YYYY-MM-DD" type="date" placeholder="请选择发货日期" />

        <!-- <ElInput v-model="formData.shipmentDate" :disabled="status === 'view'" placeholder="发货日期" /> -->
      </ElFormItem>
      <!-- <ElFormItem label="产品分类 Id" prop="goodsCategoryId">
        <ElInput v-model="formData.goodsCategoryId" :disabled="status === 'view'" placeholder="产品分类 Id" />
      </ElFormItem> -->
      <!-- <ElFormItem label="分类名称" prop="goodsCategoryName">
        <ElInput v-model="formData.goodsCategoryName" :disabled="status === 'view'" placeholder="分类名称" />
      </ElFormItem> -->
      <ElFormItem label="产品" prop="goodsId">
        <ASelect labelKey="goodsName" v-model="formData.goodsId" :tableColumn="goodColumn" @change="goodsChange" :api="GoodsApi.paging" :disabled="status === 'view'" placeholder="选择产品" />
        <!-- <ElInput v-model="formData.goodsId" :disabled="status === 'view'" placeholder="产品 Id" /> -->
      </ElFormItem>
      <ElFormItem label="商品编码" prop="goodSn">
        <ElInput v-model="formData.goodSn" :disabled="status === 'view'" placeholder="商品编码" />
      </ElFormItem>
      <ElFormItem label="数量" prop="quantity">
        <ElInput v-model="formData.quantity" :disabled="status === 'view'" placeholder="数量" />
      </ElFormItem>
      <!-- <ElFormItem label="计量单位" prop="unit">
        <ElInput v-model="formData.unit" readonly :disabled="status === 'view'" placeholder="计量单位；字典代码：unit" />
      </ElFormItem> -->
      <ElFormItem label="总金额(元)" prop="totalMoney">
        <ElInput v-model="formData.totalMoney" :disabled="status === 'view'" placeholder="总金额；单位：元" />
      </ElFormItem>
      <ElFormItem label="备注" prop="memo">
        <ElInput v-model="formData.memo" :disabled="status === 'view'" placeholder="备注" />
      </ElFormItem>
      <!-- <ElFormItem label="创建时间" prop="createTime">
        <ElInput v-model="formData.createTime" :disabled="status === 'view'" placeholder="创建时间" />
      </ElFormItem>
      <ElFormItem label="修改时间" prop="modifyTime">
        <ElInput v-model="formData.modifyTime" :disabled="status === 'view'" placeholder="修改时间" />
      </ElFormItem> -->
    </ElForm>
    <template #footer>
      <ElButton @click="showDialog = false">{{ status === "view" ? "关闭" : "取消" }}</ElButton>
      <ElButton v-if="status !== 'view'" :loading="submiting" type="primary" @click="submitHandler">提交</ElButton>
    </template>
  </ElDialog>
</template>

<script lang="ts" setup>
import SalesOrderApi from "@/pages/wh/sales-order/sales-order-api.ts";
import Strings from "@/common/utils/strings.ts";
import FormUtil from "@/common/utils/formUtil.ts";
import Utils from "@/common/utils";
import { ElMessage, type FormInstance, type FormRules } from "element-plus";
import CustomerApi from "@/pages/cst/customer/customer-api.ts";
import GoodsApi from "@/pages/gds/goods/goods-api.ts";
import ASelect from "@/components/a-select/ASelect.vue";

const emits = defineEmits(["editSucc"]);
const showDialog = ref(false);
const submiting = ref(false);
const status = ref<"add" | "view" | "modify">("add");

const salesOrderFormIns = useTemplateRef<FormInstance>("salesOrderForm");

const formData = Utils.resetAble(reactive<SalesOrderTypes.SearchSalesOrderResult>({}));
const rules = reactive<FormRules<SalesOrderTypes.SearchSalesOrderResult>>({
  id: [{ required: true, message: "请填写Id", trigger: "blur" }],
  sn: [{ required: true, message: "请填写编号", trigger: "blur" }],
  salesOrderStatus: [{ required: true, message: "请填写状态", trigger: "blur" }],
  customerId: [{ required: true, message: "请填写购买方客户 Id", trigger: "blur" }],
  orderDate: [{ required: true, message: "请填写下单日期", trigger: "blur" }],
  shipmentDate: [{ required: true, message: "请填写发货日期", trigger: "blur" }],
  goodsCategoryId: [{ required: true, message: "请填写产品分类 Id", trigger: "blur" }],
  goodsCategoryName: [{ required: true, message: "请填写分类名称", trigger: "blur" }],
  goodsId: [{ required: true, message: "请填写产品 Id", trigger: "blur" }],
  goodsName: [{ required: true, message: "请填写产品名称", trigger: "blur" }],
  goodSn: [{ required: true, message: "请填写商品编码", trigger: "blur" }],
  quantity: [{ required: true, message: "请填写数量", trigger: "blur" }],
  unit: [{ required: true, message: "请填写计量单位；字典代码：unit", trigger: "blur" }],
  totalMoney: [{ required: true, message: "请填写总金额；单位：元", trigger: "blur" }],
  memo: [{ required: true, message: "请填写备注", trigger: "blur" }],
  creatorId: [{ required: true, message: "请填写创建人 Id； sys_user.id", trigger: "blur" }],
  modifierId: [{ required: true, message: "请填写修改人 Id； sys_user.id", trigger: "blur" }],
  createTime: [{ required: true, message: "请填写创建时间", trigger: "blur" }],
  modifyTime: [{ required: true, message: "请填写修改时间", trigger: "blur" }],
  deleted: [{ required: true, message: "请填写是否删除； 0-->未删除、1-->已删除", trigger: "blur" }],
});

const statusList = [
  {
    value: "JinXingZhong",
    label: "进行中",
  },
  {
    value: "YiFaHuo",
    label: "已发货",
  },
  {
    value: "YiChuKu",
    label: "已出库",
  },
  {
    value: "YiQuXiao",
    label: "已取消",
  },
];
const goodColumn = [
  {
    label: "名称",
    prop: "goodsName",
  },
  {
    label: "规格",
    prop: "specParams",
  },
  {
    label: "计量单位",
    prop: "unitTxt",
  },
];
const goodsChange = (val: any) => {
  // console.log(item, 'itemmm')
  formData.goodsCategoryName = val.goodsCategoryName;
  formData.goodsName = val.goodsName;
  formData.goodSn = val.sn;
  formData.unit = val.unit;
  formData.goodsCategoryId = val.goodsCategoryId;
};
const customerColumn = [
  {
    label: "公司",
    prop: "orgName",
  },
  {
    label: "地区",
    prop: "areaName",
  },
  {
    label: "负责人",
    prop: "customerName",
  },
];

function dialogCloseHandler() {
  formData.$reset();
}

function submitHandler() {
  if (status.value === "view") return;
  submiting.value = true;
  if (formData.id != null) {
    FormUtil.submit(salesOrderFormIns, () => SalesOrderApi.modify(formData))
      .then(() => {
        ElMessage.success("修改成功");
        emits("editSucc");
        showDialog.value = false;
      })
      .finally(() => {
        submiting.value = false;
      });
  } else {
    FormUtil.submit(salesOrderFormIns, () => SalesOrderApi.add(formData))
      .then(() => {
        ElMessage.success("添加成功");
        emits("editSucc");
        showDialog.value = false;
      })
      .finally(() => {
        submiting.value = false;
      });
  }
}

defineExpose({
  open(data: SalesOrderTypes.SearchSalesOrderResult = {}) {
    showDialog.value = true;
    if (!Strings.isBlank(data.id)) {
      status.value = "modify";
      SalesOrderApi.detail(data.id!).then((res) => {
        formData.$reset(res.data);
      });
    } else {
      status.value = "add";
      formData.$reset(data);
    }
  },
});
</script>

<style lang="stylus" scoped>
.form-panel {
  padding 20px
}
</style>
