<!-- 编辑弹窗 -->
<template>
  <ele-modal
    :width="1000"
    :visible="visible"
    :maskClosable="false"
    :maxable="maxable"
    :title="isUpdate ? '支付结算' : '支付结算'"
    okText="确定收款"
    :ok-button-props="{ disabled: !user }"
    :body-style="{
      padding: '0',
      paddingBottom: '0',
      backgroundColor: '#f3f3f3'
    }"
    @update:visible="updateVisible"
    @ok="save"
  >
    <!--    {{ form }}-->
    <div class="flex justify-between py-3 px-4 columns-3 gap-3">
      <div class="payment flex flex-col bg-white px-4 py-2">
        <div class="title text-gray-500 leading-10">请选择支付方式</div>
        <template v-for="(item, index) in payments" :key="index">
          <div
            class="item border-2 border-solid px-3 py-1 flex items-center mb-2 cursor-pointer"
            :class="
              form.type === item.type
                ? 'active border-red-300'
                : 'border-gray-200'
            "
            @click="onType(item)"
          >
            <a-avatar :src="item.image" />
            <text class="pl-1">{{ item.name }}</text>
          </div>
        </template>
      </div>
      <div class="settlement flex flex-col bg-white px-4 py-2 flex-1">
        <div class="title text-gray-500 leading-10">结算信息</div>
        <div class="comments">
          <a-textarea
            :rows="4"
            :maxlength="200"
            placeholder="备注信息"
            v-model:value="form.comments"
          />
        </div>
        <div class="discount flex mt-3">
          <div class="item w-1/2">
            折扣(折)
            <div class="input">
              <a-input-number
                allow-clear
                min="0"
                max="10"
                placeholder="请输入折扣"
                style="width: 200px"
                v-model:value="form.discount"
                @input="onDiscount"
              />
            </div>
          </div>
          <div class="item w-1/2">
            立减
            <div class="input">
              <a-input-number
                allow-clear
                placeholder="请输入立减金额"
                style="width: 200px"
                v-model:value="form.reducePrice"
              />
            </div>
          </div>
        </div>
        <div class="discount flex mt-8 items-center h-20 leading-10">
          <div class="item w-1/2"> 优惠金额：￥0.00</div>
          <div class="item w-1/2 text-xl">
            实付金额：￥<span class="text-red-500 text-2xl">{{
              formatNumber(data.totalPrice)
            }}</span>
          </div>
        </div>
      </div>
      <div class="user-bar flex flex-col bg-white px-4 py-2">
        <div class="title text-gray-500 leading-10">会员信息</div>
        <div class="user-info text-center" v-if="!user">
          <a-empty :description="`当前为游客`" class="text-gray-300" />
          <SelectUserByButton @done="selectUser" />
        </div>
        <view class="tox-user" v-if="user">
          <div class="mb-2 flex justify-between items-center">
            <div class="avatar">
              <a-avatar :src="user.avatar" :size="40" />
              <text class="ml-1 text-gray-500">{{ user.nickname }}</text>
            </div>
            <CloseOutlined @click="removeUser" />
          </div>
          <div
            class="border-dashed py-1 px-2 border-gray-300 text-gray-500 mt-2"
            >名称：{{ user.realName }}
          </div>
          <div
            class="border-dashed py-1 px-2 border-gray-300 text-gray-500 mt-2"
            >手机号：{{ user.mobile || '未绑定' }}
          </div>
          <div
            class="border-dashed py-1 px-2 border-gray-300 text-gray-500 mt-2"
            >可用余额：{{ user.balance }}
          </div>
          <div
            class="border-dashed py-1 px-2 border-gray-300 text-gray-500 mt-2"
            >可用积分：{{ user.points }}
          </div>
        </view>
      </div>
    </div>
    <UserForm v-model:visible="showUserForm" :type="type" @done="reload" />
  </ele-modal>
</template>

<script lang="ts" setup>
  import { CloseOutlined } from '@ant-design/icons-vue';
  import { ref, watch, reactive } from 'vue';
  import { message } from 'ant-design-vue';
  import { FormInstance } from 'ant-design-vue/es/form';
  import { formatNumber } from 'ele-admin-pro/es';
  import { listPayment } from '@/api/system/payment';
  import { Payment } from '@/api/system/payment/model';
  import { User } from '@/api/system/user/model';
  import { Cashier } from '@/api/shop/cashier/model';
  import { addOrder, updateOrder } from '@/api/shop/order';
  import { Order } from '@/api/shop/order/model';

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

  const props = defineProps<{
    // 弹窗是否打开
    visible: boolean;
    // 类型 0服务 1订单
    type?: number;
    // 修改回显的数据
    data?: Cashier | null;
  }>();

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

  // 用户信息
  const form = reactive<Order>({
    // ID
    // 类型 0商城 1外卖
    type: 4,
    // 唯一标识
    // 商品价格
    price: undefined,
    // 单商品合计
    totalPrice: undefined,
    // 商户ID
    merchantId: undefined,
    // 用户ID
    userId: undefined,
    // 租户id
    tenantId: undefined,
    // 创建时间
    createTime: undefined,
    // 修改时间
    updateTime: undefined
  });

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

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

  const selectUser = (item: User) => {
    user.value = item;
  };

  const onType = (item: Payment) => {
    form.type = item.type;
  };

  const removeUser = () => {
    user.value = null;
  };

  /* 保存编辑 */
  const save = () => {
    loading.value = true;
    const formData = {
      ...form
    };
    const saveOrUpdate = isUpdate.value ? updateOrder : addOrder;
    saveOrUpdate(formData)
      .then((msg) => {
        loading.value = false;
        message.success(msg);
        updateVisible(false);
        emit('done');
      })
      .catch((e) => {
        loading.value = false;
        message.error(e.message);
      });
  };

  const reload = () => {
    listPayment({}).then((data) => {
      payments.value = data;
    });
  };

  watch(
    () => props.visible,
    (visible) => {
      if (visible) {
        reload();
      }
    },
    { immediate: true }
  );
</script>
<style lang="less" scoped>
  .active {
    position: relative;
    border: 2px solid #007cec;
    &:before {
      content: '';
      position: absolute;
      right: 0;
      bottom: 0;
      border: 11px solid #007cec;
      border-top-color: transparent;
      border-left-color: transparent;
    }
    &:after {
      content: '';
      width: 4px;
      height: 8px;
      position: absolute;
      right: 3px;
      bottom: 4px;
      border: 1px solid #fff;
      border-top-color: transparent;
      border-left-color: transparent;
      transform: rotate(45deg);
    }
  }
</style>
