<!-- 编辑弹窗 -->
<template>
  <ele-modal
    :width="1000"
    :visible="visible"
    :maskClosable="false"
    :maxable="maxable"
    :title="isUpdate ? '编辑提现申请' : '新增提现申请'"
    :body-style="{ paddingBottom: '28px' }"
    @update:visible="updateVisible"
    @ok="save"
  >
    <a-form
      ref="formRef"
      :model="form"
      :rules="rules"
      :label-col="{ span: 6 }"
      :wrapper-col="{ span: 18 }"
    >
      <!-- 基本信息 -->
      <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="comments">
            <div class="text-red-500">{{ form.comments }}</div>
          </a-form-item>
        </a-col>
      </a-row>

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

      <!-- 微信收款信息 -->
      <div v-if="form.payType === 10" class="payment-info wechat-info">
        <a-alert
          message="微信收款信息"
          description="请确保微信账号信息准确，以免影响到账"
          type="success"
          show-icon
          style="margin-bottom: 16px"
        />
        <a-form-item label="微信号" name="wechatAccount">
          <a-input
            placeholder="请输入微信号"
            v-model:value="form.wechatAccount"
          />
        </a-form-item>
        <a-form-item label="微信昵称" name="wechatName">
          <a-input
            placeholder="请输入微信昵称"
            v-model:value="form.wechatName"
          />
        </a-form-item>
      </div>

      <!-- 支付宝收款信息 -->
      <div v-if="form.payType === 20" class="payment-info alipay-info">
        <a-alert
          message="支付宝收款信息"
          description="请确保支付宝账号信息准确，姓名需与实名认证一致"
          type="info"
          show-icon
          style="margin-bottom: 16px"
        />
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="支付宝姓名" name="alipayName">
              <a-input
                placeholder="请输入支付宝实名姓名"
                disabled
                v-model:value="form.alipayName"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="支付宝账号" name="alipayAccount">
              <a-input
                placeholder="请输入支付宝账号"
                disabled
                v-model:value="form.alipayAccount"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </div>

      <!-- 银行卡收款信息 -->
      <div v-if="form.payType === 30" class="payment-info bank-info">
        <a-alert
          message="银行卡收款信息"
          description="请确保银行卡信息准确，开户名需与身份证姓名一致"
          type="warning"
          show-icon
          style="margin-bottom: 16px"
        />
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="开户行名称" name="bankName">
              {{ form.bankName }}
            </a-form-item>
            <a-form-item label="银行开户名" name="bankAccount">
              {{ form.bankAccount }}
            </a-form-item>
            <a-form-item label="银行卡号" name="bankCard">
              {{ form.bankCard }}
            </a-form-item>
          </a-col>
        </a-row>
      </div>

      <!-- 审核信息 -->
      <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="applyStatus">
            <a-select v-model:value="form.applyStatus" :disabled="form.applyStatus == 40 || form.applyStatus == 30"
                      placeholder="请选择申请状态">
              <a-select-option :value="10">
                <div class="status-option">
                  <a-tag color="orange">待审核</a-tag>
                  <span>等待审核</span>
                </div>
              </a-select-option>
              <a-select-option :value="20">
                <div class="status-option">
                  <a-tag color="success">审核通过</a-tag>
                  <span>审核通过</span>
                </div>
              </a-select-option>
              <a-select-option :value="30">
                <div class="status-option">
                  <a-tag color="error">审核驳回</a-tag>
                  <span>审核驳回</span>
                </div>
              </a-select-option>
              <a-select-option :value="40">
                <div class="status-option">
                  <a-tag>已打款</a-tag>
                  <span>已完成打款</span>
                </div>
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="驳回原因" name="rejectReason" v-if="form.applyStatus === 30">
            <a-textarea
              v-model:value="form.rejectReason"
              placeholder="请输入驳回原因"
              :rows="3"
              :maxlength="200"
              show-count
            />
          </a-form-item>
          <a-form-item label="上传支付凭证" name="image" v-if="form.applyStatus === 40">
            <SelectFile
              :placeholder="`请选择图片`"
              :limit="2"
              :data="files"
              @done="chooseFile"
              @del="onDeleteFile"
            />
          </a-form-item>
        </a-col>
      </a-row>

      <!-- 提现预览 -->
      <div class="withdraw-preview" v-if="form.money && form.payType">
        <a-alert
          :type="getPreviewAlertType()"
          :message="getPreviewText()"
          show-icon
          style="margin-top: 16px"
        />
      </div>
    </a-form>
  </ele-modal>
</template>

<script lang="ts" setup>
import {ref, reactive, watch} from 'vue';
import {Form, message} from 'ant-design-vue';
import {assignObject, uuid} from 'ele-admin-pro';
import {addShopDealerWithdraw, updateShopDealerWithdraw} from '@/api/shop/shopDealerWithdraw';
import {ShopDealerWithdraw} from '@/api/shop/shopDealerWithdraw/model';
import {FormInstance} from 'ant-design-vue/es/form';
import {ItemType} from 'ele-admin-pro/es/ele-image-upload/types';
import dayjs from 'dayjs';
import {FileRecord} from "@/api/system/file/model";

// 是否是修改
const isUpdate = ref(false);
const useForm = Form.useForm;

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

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

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

// 表单数据
const form = reactive<ShopDealerWithdraw>({
  id: undefined,
  userId: undefined,
  realName: undefined,
  nickname: undefined,
  phone: undefined,
  avatar: undefined,
  money: undefined,
  payType: undefined,
  // 微信相关
  wechatAccount: '',
  wechatName: '',
  // 支付宝相关
  alipayName: '',
  alipayAccount: '',
  // 银行卡相关
  bankName: '',
  bankAccount: '',
  bankCard: '',
  // 审核相关
  applyStatus: 10,
  auditTime: undefined,
  rejectReason: '',
  platform: '',
  comments: '',
  tenantId: undefined,
  createTime: undefined,
  updateTime: undefined
});

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

// 表单验证规则
const rules = reactive({
  userId: [
    {
      required: true,
      message: '请输入分销商用户ID',
      trigger: 'blur'
    }
  ],
  money: [
    {
      required: true,
      message: '请输入提现金额',
      trigger: 'blur'
    },
    {
      validator: (rule: any, value: any) => {
        if (value && value <= 0) {
          return Promise.reject('提现金额必须大于0');
        }
        return Promise.resolve();
      },
      trigger: 'blur'
    }
  ],
  payType: [
    {
      required: true,
      message: '请选择打款方式',
      trigger: 'change'
    }
  ],
  platform: [
    {
      required: true,
      message: '请选择来源平台',
      trigger: 'change'
    }
  ],
  // 微信验证
  wechatAccount: [
    {
      validator: (rule: any, value: any) => {
        if (form.payType === 10 && !value) {
          return Promise.reject('请输入微信号');
        }
        return Promise.resolve();
      },
      trigger: 'blur'
    }
  ],
  wechatName: [
    {
      validator: (rule: any, value: any) => {
        if (form.payType === 10 && !value) {
          return Promise.reject('请输入微信昵称');
        }
        return Promise.resolve();
      },
      trigger: 'blur'
    }
  ],
  // 支付宝验证
  alipayName: [
    {
      validator: (rule: any, value: any) => {
        if (form.payType === 20 && !value) {
          return Promise.reject('请输入支付宝姓名');
        }
        return Promise.resolve();
      },
      trigger: 'blur'
    }
  ],
  alipayAccount: [
    {
      validator: (rule: any, value: any) => {
        if (form.payType === 20 && !value) {
          return Promise.reject('请输入支付宝账号');
        }
        return Promise.resolve();
      },
      trigger: 'blur'
    }
  ],
  // 银行卡验证
  bankName: [
    {
      validator: (rule: any, value: any) => {
        if (form.payType === 30 && !value) {
          return Promise.reject('请输入开户行名称');
        }
        return Promise.resolve();
      },
      trigger: 'blur'
    }
  ],
  bankAccount: [
    {
      validator: (rule: any, value: any) => {
        if (form.payType === 30 && !value) {
          return Promise.reject('请输入银行开户名');
        }
        return Promise.resolve();
      },
      trigger: 'blur'
    }
  ],
  bankCard: [
    {
      validator: (rule: any, value: any) => {
        if (form.payType === 30 && !value) {
          return Promise.reject('请输入银行卡号');
        }
        if (form.payType === 30 && value && !/^\d{16,19}$/.test(value)) {
          return Promise.reject('银行卡号格式不正确');
        }
        return Promise.resolve();
      },
      trigger: 'blur'
    }
  ],
  applyStatus: [
    {
      required: true,
      message: '请选择申请状态',
      trigger: 'change'
    }
  ],
  rejectReason: [
    {
      validator: (rule: any, value: any) => {
        if (form.applyStatus === 30 && !value) {
          return Promise.reject('驳回时必须填写驳回原因');
        }
        return Promise.resolve();
      },
      trigger: 'blur'
    }
  ],
  image: [
    {
      required: true,
      message: '请上传打款凭证',
      trigger: 'change'
    }
  ]
});

/* 打款方式改变时的处理 */
const onPayTypeChange = (e: any) => {
  const payType = e.target.value;

  // 清空其他支付方式的信息
  if (payType !== 10) {
    form.alipayAccount = '';
    form.alipayName = '';
  }
  if (payType !== 20) {
    form.alipayName = '';
    form.alipayAccount = '';
  }
  if (payType !== 30) {
    form.bankName = '';
    form.bankAccount = '';
    form.bankCard = '';
  }
};

const chooseFile = (data: FileRecord) => {
  files.value.push({
    uid: data.id,
    url: data.url,
    status: 'done'
  });
  form.image = JSON.stringify(files.value.map((d) => d.url));
};

const onDeleteFile = (index: number) => {
  files.value.splice(index, 1);
};

/* 获取预览提示类型 */
const getPreviewAlertType = () => {
  if (!form.applyStatus) return 'info';

  switch (form.applyStatus) {
    case 10:
      return 'processing';
    case 20:
      return 'success';
    case 30:
      return 'error';
    case 40:
      return 'success';
    default:
      return 'info';
  }
};

/* 获取预览文本 */
const getPreviewText = () => {
  if (!form.money || !form.payType) return '';

  const amount = parseFloat(form.money.toString()).toFixed(2);
  const payTypeMap = {
    10: '微信',
    20: '支付宝',
    30: '银行卡'
  };
  const statusMap = {
    10: '待审核',
    20: '审核通过',
    30: '审核驳回',
    40: '已打款'
  };

  const payTypeName = payTypeMap[form.payType] || '未知方式';
  const statusName = statusMap[form.applyStatus] || '未知状态';

  return `提现金额：¥${amount}，打款方式：${payTypeName}，当前状态：${statusName}`;
};

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

/* 保存编辑 */
const save = () => {
  if (!formRef.value) {
    return;
  }
  if (isSuccess.value) {
    console.log('isSuccess')
    updateVisible(false);
    emit('done');
    return;
  }
  if (form.realName == '' || form.realName == null) {
    message.error('该用户未完成实名认证!');
    return;
  }
  formRef.value
    .validate()
    .then(() => {
      loading.value = true;
      const formData = {
        ...form
      };

      // 处理时间字段转换
      if (formData.auditTime && dayjs.isDayjs(formData.auditTime)) {
        formData.auditTime = formData.auditTime.valueOf();
      }

      // 根据支付方式清理不相关字段
      if (formData.payType !== 10) {
        delete formData.wechatAccount;
        delete formData.wechatName;
      }
      if (formData.payType !== 20) {
        delete formData.alipayName;
        delete formData.alipayAccount;
      }
      if (formData.payType !== 30) {
        delete formData.bankName;
        delete formData.bankAccount;
        delete formData.bankCard;
      }

      const saveOrUpdate = isUpdate.value ? updateShopDealerWithdraw : addShopDealerWithdraw;
      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) {
      files.value = [];
      if (props.data) {
        assignObject(form, props.data);
        // 处理时间字段
        if (props.data.auditTime) {
          form.auditTime = dayjs(props.data.auditTime);
        }
        if (props.data.image) {
          const arr = JSON.parse(props.data.image);
          arr.map((url: string) => {
            files.value.push({
              uid: uuid(),
              url: url,
              status: 'done'
            });
          });
          isSuccess.value = true;
        }
        isUpdate.value = true;
      } else {
        // 重置为默认值
        Object.assign(form, {
          id: undefined,
          userId: undefined,
          money: undefined,
          payType: undefined,
          wechatAccount: '',
          wechatName: '',
          alipayName: '',
          alipayAccount: '',
          bankName: '',
          bankAccount: '',
          bankCard: '',
          applyStatus: 10,
          auditTime: undefined,
          rejectReason: '',
          platform: '',
          image: '',
          tenantId: undefined,
          createTime: undefined,
          updateTime: undefined
        });
        isUpdate.value = false;
      }
    } else {
      resetFields();
    }
  },
  {immediate: true}
);
</script>

<style lang="less" scoped>
.platform-option,
.status-option {
  display: flex;
  align-items: center;

  .ant-tag {
    margin-right: 8px;
  }

  span {
    color: #666;
    font-size: 12px;
  }
}

.payment-info {
  background: #fafafa;
  padding: 16px;
  border-radius: 6px;
  margin-bottom: 16px;

  &.wechat-info {
    border-left: 3px solid #52c41a;
  }

  &.alipay-info {
    border-left: 3px solid #1890ff;
  }

  &.bank-info {
    border-left: 3px solid #faad14;
  }
}

.withdraw-preview {
  :deep(.ant-alert) {
    .ant-alert-message {
      font-weight: 600;
      font-size: 14px;
    }
  }
}

:deep(.ant-divider-horizontal.ant-divider-with-text-left) {
  margin: 24px 0 16px 0;

  .ant-divider-inner-text {
    padding: 0 16px 0 0;
  }
}

:deep(.ant-form-item) {
  margin-bottom: 16px;
}

:deep(.ant-radio) {
  display: flex;
  align-items: center;
  margin-bottom: 8px;

  .ant-radio-inner {
    margin-right: 8px;
  }
}

:deep(.ant-select-selection-item) {
  display: flex;
  align-items: center;
}

:deep(.ant-input-number) {
  width: 100%;
}

:deep(.ant-alert) {
  .ant-alert-message {
    font-weight: 600;
  }
}
</style>
