<!-- 编辑弹窗 -->
<template>
  <ele-modal
    :width="900"
    :visible="visible"
    :maskClosable="false"
    :maxable="maxable"
    :confirm-loading="loading"
    :title="isUpdate ? '编辑分销商用户' : '添加分销商用户'"
    :body-style="{ paddingBottom: '28px' }"
    @update:visible="updateVisible"
    @ok="save"
  >
    <a-form
      ref="formRef"
      :model="form"
      :rules="rules"
      :label-col="styleResponsive ? { md: 4, sm: 5, xs: 24 } : { flex: '90px' }"
      :wrapper-col="
        styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
      "
    >
      <a-divider orientation="left">
        <span style="color: #1890ff; font-weight: 600">基础信息</span>
      </a-divider>

      <a-row :gutter="16">
        <a-col :span="24" v-if="!isUpdate">
          <a-form-item label="关联用户" name="userId">
            <SelectUser
              :key="selectedUserText"
              :value="selectedUserText"
              :placeholder="`选择用户`"
              @done="onChooseUser"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="类型" name="type">
            <a-select v-model:value="form.type" placeholder="请选择类型">
              <a-select-option :value="0">经销商</a-select-option>
              <a-select-option :value="1">门店</a-select-option>
<!--              <a-select-option :value="2">集团</a-select-option>-->
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="手机号" name="mobile">
            <a-input
              allow-clear
              :maxlength="11"
              placeholder="请输入手机号"
              :disabled="true"
              v-model:value="form.mobile"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="真实姓名" name="realName">
            <a-input
              allow-clear
              :maxlength="20"
              placeholder="请输入真实姓名"
              v-model:value="form.realName"
            />
          </a-form-item>
        </a-col>
<!--        <a-col :span="12">-->
<!--          <a-form-item-->
<!--            label="支付密码"-->
<!--            name="payPassword"-->
<!--            :help="isUpdate ? '留空表示不修改' : undefined"-->
<!--          >-->
<!--            <a-input-password-->
<!--              allow-clear-->
<!--              :maxlength="20"-->
<!--              placeholder="请输入支付密码"-->
<!--              v-model:value="form.payPassword"-->
<!--            />-->
<!--          </a-form-item>-->
<!--        </a-col>-->
        <a-col :span="12">
          <a-form-item label="头像" name="image">
            <a-image :src="form.avatar" :width="50" :preview="false" />
          </a-form-item>
        </a-col>
      </a-row>

      <a-divider orientation="left">
        <span style="color: #1890ff; font-weight: 600">佣金信息</span>
      </a-divider>

      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="可提现" name="money">
            <a-input-number
              class="ele-fluid"
              :min="0"
              :precision="2"
              stringMode
              placeholder="0.00"
              :disabled="true"
              v-model:value="form.money"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="已冻结" name="freezeMoney">
            <a-input-number
              class="ele-fluid"
              :min="0"
              :precision="2"
              stringMode
              placeholder="0.00"
              :disabled="true"
              v-model:value="form.freezeMoney"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="累积提现" name="totalMoney">
            <a-input-number
              class="ele-fluid"
              :min="0"
              :precision="2"
              stringMode
              placeholder="0.00"
              :disabled="true"
              v-model:value="form.totalMoney"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="佣金比例" name="rate">
            <a-input-number
              class="ele-fluid"
              :min="0"
              :max="1"
              :precision="4"
              stringMode
              :disabled="true"
              placeholder="例如 0.007"
              v-model:value="form.rate"
            />
          </a-form-item>
        </a-col>
<!--        <a-col :span="12">-->
<!--          <a-form-item label="单价" name="price">-->
<!--            <a-input-number-->
<!--              class="ele-fluid"-->
<!--              :min="0"-->
<!--              :precision="2"-->
<!--              stringMode-->
<!--              placeholder="0.00"-->
<!--              v-model:value="form.price"-->
<!--            />-->
<!--          </a-form-item>-->
<!--        </a-col>-->
      </a-row>

<!--      <a-row :gutter="16">-->
<!--        <a-col :span="12">-->
<!--          <a-form-item label="排序号" name="sortNumber">-->
<!--            <a-input-number-->
<!--              :min="0"-->
<!--              :max="9999"-->
<!--              class="ele-fluid"-->
<!--              placeholder="请输入排序号"-->
<!--              v-model:value="form.sortNumber"-->
<!--            />-->
<!--          </a-form-item>-->
<!--        </a-col>-->
<!--        <a-col :span="12">-->
<!--          <a-form-item label="备注" name="comments">-->
<!--            <a-textarea-->
<!--              :rows="3"-->
<!--              :maxlength="200"-->
<!--              show-count-->
<!--              placeholder="请输入备注"-->
<!--              v-model:value="form.comments"-->
<!--            />-->
<!--          </a-form-item>-->
<!--        </a-col>-->
<!--      </a-row>-->
    </a-form>
  </ele-modal>
</template>

<script lang="ts" setup>
  import { computed, ref, reactive, watch } from 'vue';
  import { Form, message } from 'ant-design-vue';
  import { assignObject, toDateString, uuid } from 'ele-admin-pro';
  import { addShopDealerUser, updateShopDealerUser } from '@/api/shop/shopDealerUser';
  import { ShopDealerUser } from '@/api/shop/shopDealerUser/model';
  import { useThemeStore } from '@/store/modules/theme';
  import { storeToRefs } from 'pinia';
  import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
  import { FormInstance } from 'ant-design-vue/es/form';
  import { FileRecord } from '@/api/system/file/model';
  import type { User } from '@/api/system/user/model';

  // 是否是修改
  const isUpdate = ref(false);
  const useForm = Form.useForm;
  // 是否开启响应式布局
  const themeStore = useThemeStore();
  const { styleResponsive } = storeToRefs(themeStore);

  const props = defineProps<{
    // 弹窗是否打开
    visible: boolean;
    // 修改回显的数据
    data?: ShopDealerUser | null;
  }>();

  const emit = defineEmits<{
    (e: 'done'): void;
    (e: 'update:visible', visible: boolean): void;
  }>();

  // 提交状态
  const loading = ref(false);
  // 是否显示最大化切换按钮
  const maxable = ref(true);
  // 表格选中数据
  const formRef = ref<FormInstance | null>(null);
  const images = ref<ItemType[]>([]);

  // 用户信息
  const form = reactive<ShopDealerUser>({
    id: undefined,
    userId: undefined,
    avatar: undefined,
    type: 0,
    realName: undefined,
    mobile: undefined,
    payPassword: '',
    money: undefined,
    freezeMoney: undefined,
    totalMoney: undefined,
    rate: undefined,
    price: undefined,
    refereeId: undefined,
    firstNum: undefined,
    secondNum: undefined,
    thirdNum: undefined,
    qrcode: undefined,
    isDelete: undefined,
    tenantId: undefined,
    createTime: undefined,
    updateTime: undefined,
    status: 0,
    comments: '',
    sortNumber: 100
  });

  /* 更新visible */
  const updateVisible = (value: boolean) => {
    emit('update:visible', value);
  };

  const createTimeText = computed(() => {
    return form.createTime ? toDateString(form.createTime, 'yyyy-MM-dd HH:mm:ss') : '';
  });

  const updateTimeText = computed(() => {
    return form.updateTime ? toDateString(form.updateTime, 'yyyy-MM-dd HH:mm:ss') : '';
  });

  const selectedUserText = ref<string>('');

  // 表单验证规则
  const rules = reactive({
    userId: [
      {
        validator: (_rule: unknown, value: number | undefined) => {
          if (!isUpdate.value && !value) {
            return Promise.reject(new Error('请选择关联用户'));
          }
          return Promise.resolve();
        },
        trigger: 'change'
      }
    ],
    type: [
      {
        required: true,
        type: 'number',
        message: '请选择类型',
        trigger: 'change'
      }
    ],
    realName: [
      {
        required: true,
        type: 'string',
        message: '请填写真实姓名',
        trigger: 'blur'
      }
    ],
    // mobile: [
    //   {
    //     required: true,
    //     type: 'string',
    //     message: '请填写手机号',
    //     trigger: 'blur'
    //   },
    //   {
    //     pattern: /^1\\d{10}$/,
    //     message: '手机号格式不正确',
    //     trigger: 'blur'
    //   }
    // ],
    payPassword: [
      {
        validator: (_rule: unknown, value: string) => {
          if (!isUpdate.value && !value) {
            return Promise.reject(new Error('请输入支付密码'));
          }
          return Promise.resolve();
        },
        trigger: 'blur'
      }
    ]
  });

  const onChooseUser = (user?: User) => {
    if (!user) {
      selectedUserText.value = '';
      form.userId = undefined;
      return;
    }
    form.userId = user.userId;
    // 新增时尽量帮用户填充，避免重复输入
    if (!form.realName) {
      form.realName = user.realName ?? user.nickname;
    }
    if (!form.mobile) {
      form.mobile = user.phone ?? user.mobile;
    }
    const name = user.realName ?? user.nickname ?? '';
    const phone = user.phone ?? user.mobile ?? '';
    selectedUserText.value = phone ? `${name}（${phone}）` : name;
  };

  const chooseImage = (data: FileRecord) => {
    images.value.push({
      uid: data.id,
      url: data.path,
      status: 'done'
    });
    form.image = data.path;
  };

  const onDeleteItem = (index: number) => {
    images.value.splice(index, 1);
    form.image = '';
  };

  const { resetFields } = useForm(form, rules);

  /* 保存编辑 */
  const save = () => {
    if (!formRef.value) {
      return;
    }
    formRef.value
      .validate()
      .then(() => {
        loading.value = true;
        // 不在弹窗里编辑的字段不提交，避免误更新（如自增ID、删除标识等）
        const {
          isDelete,
          tenantId,
          createTime,
          updateTime,
          ...rest
        } = form;
        const formData: ShopDealerUser = { ...rest };
        // userId 新增需要，编辑不允许修改
        if (isUpdate.value) {
          delete formData.userId;
        }
        // 编辑时留空表示不修改密码
        if (isUpdate.value && !formData.payPassword) {
          delete formData.payPassword;
        }
        const saveOrUpdate = isUpdate.value ? updateShopDealerUser : addShopDealerUser;
        saveOrUpdate(formData)
          .then((msg) => {
            loading.value = false;
            message.success(msg);
            updateVisible(false);
            emit('done');
          })
          .catch((e) => {
            loading.value = false;
            message.error(e.message);
          });
      })
      .catch(() => {});
  };

  watch(
    () => props.visible,
    (visible) => {
      if (visible) {
        formRef.value?.clearValidate();
        images.value = [];
        if (props.data) {
          assignObject(form, props.data);
          // 不回显密码，避免误操作
          form.payPassword = '';
          selectedUserText.value = '';
          if(props.data.image){
            images.value.push({
              uid: uuid(),
              url: props.data.image,
              status: 'done'
            })
          }
          isUpdate.value = true;
        } else {
          // 新增时确保表单是干净的默认值
          resetFields();
          form.payPassword = '';
          form.type = 0;
          form.status = 0;
          form.comments = '';
          form.sortNumber = 100;
          selectedUserText.value = '';
          isUpdate.value = false;
        }
      } else {
        resetFields();
        formRef.value?.clearValidate();
        images.value = [];
        selectedUserText.value = '';
      }
    },
    { immediate: true }
  );
</script>
