<!-- 编辑弹窗 -->
<template>
  <ele-modal
    :width="900"
    :visible="visible"
    :maskClosable="false"
    :maxable="maxable"
    :title="isUpdate ? '分销订单' : '分销订单'"
    :body-style="{ paddingBottom: '28px' }"
    @update:visible="updateVisible"
    :okText="`立即结算`"
    @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="title">
            {{ form.title }}
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="订单编号" name="orderNo">
            {{ form.orderNo }}
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="结算电量" name="orderPrice">
            {{ parseFloat(form.orderPrice || 0).toFixed(2) }}
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="换算成度" name="dealerPrice">
            {{ parseFloat(form.degreePrice || 0).toFixed(2) }}
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="税率" name="rate">
            {{ form.rate }}
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="单价" name="price">
            {{ form.price }}
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="结算金额" name="payPrice">
            {{ parseFloat(form.settledPrice || 0).toFixed(2) }}
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="实发金额" name="payPrice">
            {{ parseFloat(form.payPrice || 0).toFixed(2) }}
          </a-form-item>
        </a-col>
      </a-row>
      <div class="font-bold text-gray-400 bg-gray-50">开发调试</div>
      <div class="text-gray-400 bg-gray-50">
        <div>业务员({{ form.userId }})：{{ form.nickname }}</div>
        <div>一级分销商({{ form.firstUserId }})：{{ form.firstNickname }}，一级佣金30%：{{ form.firstMoney }}</div>
        <div>二级分销商({{ form.secondUserId }})：{{ form.secondNickname }}，二级佣金10%：{{ form.secondMoney }}</div>
        <div>三级分销商({{ form.thirdUserId }})：{{ form.thirdNickname }}，三级佣金60%：{{ form.thirdMoney }}</div>
      </div>
      <!-- 分销商信息 -->
      <a-divider orientation="left">
        <span style="color: #1890ff; font-weight: 600;">收益计算</span>
      </a-divider>

      <!-- 一级分销商 -->
      <div class="dealer-section">
        <h4 class="dealer-title">
          <a-tag color="orange">一级佣金30%</a-tag>
        </h4>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="用户ID" name="firstUserId">
              {{ form.firstUserId }}
            </a-form-item>
            <a-form-item label="昵称" name="firstNickname">
              {{ form.firstNickname }}
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="占比" name="rate">
              {{ '30%' }}
            </a-form-item>
            <a-form-item label="获取收益" name="firstMoney">
              {{ form.firstMoney }}
            </a-form-item>
          </a-col>
        </a-row>
      </div>

      <!-- 二级分销商 -->
      <div class="dealer-section">
        <h4 class="dealer-title">
          <a-tag color="orange">二级佣金10%</a-tag>
        </h4>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="用户ID" name="secondUserId">
              {{ form.secondUserId }}
            </a-form-item>
            <a-form-item label="昵称" name="nickname">
              {{ form.secondNickname }}
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="占比" name="rate">
              10%
            </a-form-item>
            <a-form-item label="获取收益" name="firstMoney">
              {{ form.secondMoney }}
            </a-form-item>
          </a-col>
        </a-row>
      </div>

      <!-- 三级分销商 -->
      <div class="dealer-section" v-if="form.thirdUserId > 0">
        <h4 class="dealer-title">
          <a-tag color="orange">三级佣金60%</a-tag>
        </h4>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="用户ID" name="thirdUserId">
              {{ form.thirdUserId }}
            </a-form-item>
            <a-form-item label="昵称" name="thirdNickname">
              {{ form.thirdNickname }}
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="占比" name="rate">
              {{ '60%' }}
            </a-form-item>
            <a-form-item label="获取收益" name="thirdMoney">
              {{ form.thirdMoney }}
            </a-form-item>
          </a-col>
        </a-row>
      </div>

      <a-form-item label="结算时间" name="settleTime" v-if="form.isSettled === 1">
        {{ form.settleTime }}
      </a-form-item>
    </a-form>

  </ele-modal>
</template>

<script lang="ts" setup>
import {ref, reactive, watch} from 'vue';
import {Form, message} from 'ant-design-vue';
import {assignObject} from 'ele-admin-pro';
import {ShopDealerOrder} from '@/api/shop/shopDealerOrder/model';
import {FormInstance} from 'ant-design-vue/es/form';
import {updateSdyDealerOrder} from "@/api/sdy/sdyDealerOrder";

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

const props = defineProps<{
  // 弹窗是否打开
  visible: boolean;
  // 修改回显的数据
  data?: ShopDealerOrder | 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 form = reactive<ShopDealerOrder>({
  id: undefined,
  userId: undefined,
  nickname: undefined,
  orderNo: undefined,
  title: undefined,
  orderPrice: undefined,
  settledPrice: undefined,
  degreePrice: undefined,
  price: undefined,
  month: undefined,
  payPrice: undefined,
  firstUserId: undefined,
  secondUserId: undefined,
  thirdUserId: undefined,
  firstMoney: undefined,
  secondMoney: undefined,
  thirdMoney: undefined,
  firstNickname: undefined,
  secondNickname: undefined,
  thirdNickname: undefined,
  rate: undefined,
  comments: undefined,
  isInvalid: 0,
  isSettled: 0,
  settleTime: undefined,
  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'
    }
  ],
});


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

/* 保存编辑 */
const save = () => {
  if (!formRef.value) {
    return;
  }
  if (form.isSettled == 1) {
    message.error('请勿重复结算');
    return;
  }
  if (form.userId == 0) {
    message.error('未签约');
    return;
  }
  formRef.value
    .validate()
    .then(() => {
      loading.value = true;
      const formData = {
        ...form,
        isSettled: 1
      };
      updateSdyDealerOrder(formData)
        .then((msg) => {
          loading.value = false;
          message.success(msg);
          updateVisible(false);
          emit('done');
        })
        .catch((e) => {
          loading.value = false;
          message.error(e.message);
        });
    })
    .catch(() => {
    });
};

console.log(localStorage.getItem(''))
watch(
  () => props.visible,
  (visible) => {
    if (visible) {
      if (props.data) {
        assignObject(form, props.data);
        isUpdate.value = true;
      } else {
        // 重置为默认值
        Object.assign(form, {
          id: undefined,
          userId: undefined,
          orderNo: undefined,
          orderPrice: undefined,
          firstUserId: undefined,
          secondUserId: undefined,
          thirdUserId: undefined,
          firstMoney: undefined,
          secondMoney: undefined,
          thirdMoney: undefined,
          isInvalid: 0,
          isSettled: 0,
          settleTime: undefined
        });
        isUpdate.value = false;
      }
    } else {
      resetFields();
    }
  },
  {immediate: true}
);
</script>

<style lang="less" scoped>
.dealer-section {
  margin-bottom: 24px;
  padding: 16px;
  background: #fafafa;
  border-radius: 6px;
  border-left: 3px solid #1890ff;

  .dealer-title {
    margin: 0 0 16px 0;
    font-size: 14px;
    font-weight: 600;
    color: #333;

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

: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-input-number) {
  width: 100%;
}
</style>
