<script setup lang="ts">
import { message } from 'ant-design-vue';
import { VxeUI } from 'vxe-pc-ui';
import type { SystemItemModel } from '@/model/care.model';
import { useRequest } from 'alova/client';
import { systemCpEditMethod, getConditioningSchemeDetailMethod, confirmOrgConfirmMethod } from '@/request/api/care.api';
import { ref, watch } from 'vue';

type FollowModel = Partial<SystemItemModel>;
const props = defineProps<{ data: FollowModel; isType: string }>();

const emits = defineEmits<{
  submit: [data?: SystemItemModel];
}>();

const { loading: submitting, send: onOkSubmit } = useRequest(systemCpEditMethod, {
  immediate: false,
}).onSuccess(({ data }) => {
  console.log(data, 'data提及爱哦');
  emits('submit');
  message.success('已提交');
  VxeUI.modal.close(`health-consultation-modal`);
});

const pricingUnit = ref(props.data.cpFixedPricingRule.pricingUnit);

function onCancel() {
  // 关闭弹窗或返回
  VxeUI.modal.close(`health-consultation-modal`);
}
function onOk() {
  if (props.data.addType === 'confirm') {
    // 去确认
    confirmOrgConfirmMethod(props.data).then(() => {
      VxeUI.modal.close('health-consultation-modal');
      message.success('提交成功');
      emits('change');
    });
  } else {
    // 提交逻辑
    onOkSubmit(props.data);
  }
}

function validatePricingUnit(value: string) {
  // Update the local variable
  pricingUnit.value = value;
}

// Sync the local variable back to props.data when needed
watch(pricingUnit, (newValue) => {
  props.data.cpFixedPricingRule.pricingUnit = newValue;
});

onMounted(async () => {
  console.log('onMounted', props.data.isType);
  if (props.data.isType === 'itemsList') {
    console.log(props.data, 'itemsList111');
    delete props.data.id;
  }
  console.log(props.data.id, 'props.data222');
  if (props.data.id) {
    console.log(props.data.id, 'props.data333');
    const res: any = await getConditioningSchemeDetailMethod(props.data);
    Object.assign(props.data, res);
  }
});
</script>

<template>
  <div style="padding: 32px 0 0 32px; min-height: 400px">
    <div style="margin-bottom: 24px">
      <span style="font-weight: bold">项目名称：</span>
      <span>{{ props.data?.name }}</span>
    </div>
    <div style="display: flex; align-items: center; margin-bottom: 24px">
      <span style="width: 80px">单价：</span>
      <a-input v-model:value="props.data.cpFixedPricingRule.unitPrice" placeholder="请输入" style="width: 180px; margin-right: 8px" />
      <span style="margin-right: 8px">元</span>
    </div>
    <div style="display: flex; align-items: center; margin-bottom: 24px">
      <span style="width: 80px">计价单位：</span>
      <a-input v-model:value="pricingUnit" placeholder="请输入" style="width: 180px" @input="(e) => validatePricingUnit(e.target.value)" />
    </div>
    <div style="margin-bottom: 24px">
      <span style="font-weight: bold">机构：</span>
      <span>{{ props.data?.institutionName }}</span>
    </div>
    <div style="display: flex; justify-content: center; margin-top: 80px">
      <a-button style="margin-right: 48px" @click="onCancel">取消</a-button>
      <a-button type="primary" style="background: #faad14; border: none" @click="onOk">确定</a-button>
    </div>
  </div>
</template>

<style scoped>
/* 可根据需要自定义样式 */
</style>
