<script setup lang="ts">
import {  h, getCurrentInstance, ref, watch } from "vue";
import BasicDescriptions from "/@/components/BasicDescriptions";
import { ElButton, ElDialog, ElInputNumber } from "element-plus";

import { useVModel } from "@vueuse/core"


const props = defineProps<{
  visible: boolean;
  index: number;
  data: any
}>()


const vm = getCurrentInstance();
const visible = useVModel(props, 'visible');
const emit = defineEmits(['save']);

const descriptionData = ref<Record<string, any>>({});

const columns = [
  { field: "sequenceNo", label: "销售单编号", span: 6 },
  { field: 'cxCode', label: '销售单主编号', span: 6 },
  { field: 'goodNo', label: '商品编码', span: 6 },
  { field: 'goodPrice', label: '商品单价' },
  { field: 'goodName', label: '商品名称', span: 24 },
  { field: 'goodNum', label: '商品总数量', span: 8 },
  { field: 'ainv_num', label: '已开票数量', span: 8 },
  { field: 'winv_num', label: '未开票数量', span: 8 },
  { field: 'totalPrice', label: '订单总金额', span: 8 },
  { field: 'apay_fee', label: '已付款金额', span: 8 },
  { field: 'wpay_fee', label: '未付款金额', span: 8 },
  { 
    span: 8, 
    label: '本次付款金额', 
    render() {
      return h(ElInputNumber, {
        precision: 2,
        min: 0,
        size: "small",
        'controls-position': 'right',
        max: descriptionData.value.wpay_fee,
        modelValue: descriptionData.value.currentTotal,
        onChange: total => descriptionData.value.currentTotal = total
      })
    }
  }
]

function accDiv(arg1, arg2) {
  var r1 = arg1.toString(), r2 = arg2.toString(), m, resultVal, d = arguments[2];
  m = (r2.split(".")[1] ? r2.split(".")[1].length : 0) - (r1.split(".")[1] ? r1.split(".")[1].length : 0);
  resultVal = Number(r1.replace(".", "")) / Number(r2.replace(".", "")) * Math.pow(10, m);
  return typeof d !== "number" ? Number(resultVal) : Number(resultVal.toFixed(parseInt(d)));
}

function handleSave() {
  emit('save', descriptionData.value, props.index)
  visible.value = false;
}

watch(() => props.visible, () => {
  if(!props.visible){ return }
  descriptionData.value = { ...props.data }
})
</script>


<template>
  <ElDialog 
    width="1024px" 
    v-model="visible" 
    title="修改付款金额" 
    center
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    >
    <BasicDescriptions :data="descriptionData" :columns="columns" />

    <div class="flex justify-end w-full">
      <ElButton type="primary" @click="handleSave">
        保存
      </ElButton>
    </div>
  </ElDialog>
</template>
