<template>
  <ElDialog v-model="showDialog" :close-on-click-modal="false" destroy-on-close width="fit-content" @close="dialogCloseHandler">
    <ElForm :model="formData" :rules="rules" class="form-panel" label-width="auto" ref="customerForm">
      <!-- <ElFormItem label="Id" prop="id">
        <ElInput
          v-model="formData.id"
          :disabled="status === 'view'"
          placeholder="Id"/>
      </ElFormItem>
       <ElFormItem label="用户" prop="userId">
        <ElInput
          v-model="formData.userId"
          :disabled="status === 'view'"
          placeholder="用户"/>
      </ElFormItem> -->
      <ElFormItem label="身份类型" prop="identityCategory">
        <el-select v-model="formData.identityCategory" :disabled="status === 'view'" placeholder="身份类型" >
          <el-option v-for="item in bizList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </ElFormItem>
      <ElFormItem label="客户姓名" prop="customerName">
        <ElInput v-model="formData.customerName" :disabled="status === 'view'" placeholder="客户姓名" />
      </ElFormItem>
      <ElFormItem label="客户联系电话" prop="phone">
        <ElInput v-model="formData.phone" :disabled="status === 'view'" placeholder="客户联系电话" />
      </ElFormItem>
      <ElFormItem label="结算方式" prop="settlementWay">
        <el-select v-model="formData.settlementWay" :disabled="status === 'view'" placeholder="结算方式" style="width: 240px">
          <el-option v-for="item in payList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </ElFormItem>
      <!-- <ElFormItem label="是否管理员" prop="manager">
        <ElInput
          v-model="formData.manager"
          :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 CustomerApi from '@/pages/cst/customer/customer-api.ts'
import Strings from '@/common/utils/strings.ts'
import FormUtil from '@/common/utils/formUtil.ts'
import {
  ElMessage,
  type FormInstance,
  type FormRules,
} from 'element-plus'

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

const customerFormIns = useTemplateRef<FormInstance>("customerForm");

const formData = ref<CustomerTypes.SearchCustomerResult>({});
const rules = reactive<FormRules<CustomerTypes.SearchCustomerResult>>({
  id: [{ required: true, message: "请填写Id", trigger: "blur" }],
  userId: [{ required: true, message: "请填写用户", trigger: "blur" }],
  identityCategory: [{ required: true, message: "请填写身份类型", trigger: "blur" }],
  orgId: [{ required: true, message: "请填写组织信息", trigger: "blur" }],
  customerName: [{ required: true, message: "请填写客户姓名", trigger: "blur" }],
  phone: [{ required: true, message: "请填写客户联系电话", trigger: "blur" }],
  settlementWay: [{ required: true, message: "请填写结算方式", trigger: "blur" }],
  manager: [{ required: true, message: "请填写是否管理员", trigger: "blur" }],
  creatorId: [{ required: true, message: "请填写创建人", trigger: "blur" }],
  modifierId: [{ required: true, message: "请填写修改人", trigger: "blur" }],
  createTime: [{ required: true, message: "请填写创建时间", trigger: "blur" }],
  modifyTime: [{ required: true, message: "请填写修改时间", trigger: "blur" }],
  deleted: [{ required: true, message: "请填写是否删除", trigger: "blur" }],
});

const payList = [
  {
    value: "YueJie",
    label: "月结",
  },
  {
    value: "YuE",
    label: "余额",
  },
  {
    value: "XianFu",
    label: "现付",
  },
];

const bizList = [
  {
    value: "ChanFei",
    label: "产废方",
  },
  {
    value: "YunShu",
    label: "运输方",
  },
  {
    value: "XiaoNa",
    label: "消纳方",
  },
  {
    value: "CaiGou",
    label: "采购方",
  },
  {
    value: "SiJi",
    label: "司机",
  }
]

function dialogCloseHandler() {
  formData.value = {};
}

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

defineExpose({
  open(data: CustomerTypes.SearchCustomerResult = {}) {
    showDialog.value = true;
    if (!Strings.isBlank(data.id)) {
      status.value = "modify";
      CustomerApi.detail(data.id!).then((res) => {
        formData.value = res.data;
        console.log(formData.value);
      });
    } else {
      status.value = "add";
      formData.value = data;
    }
  },
});
</script>

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