<template>
  <my-layout>
    <layout-main>
      <el-card>
        <template #header>
          <div active-title-bar class="font-semibold">咨询规则设置</div>
        </template>
        <el-form label-suffix="：">
          <el-form-item label="订单支付时长">
            <el-input-number :model-value="form.payDuration" :min="0" :max="60" controls-position="right"
              @update:model-value="change($event, 'payDuration')" />
            <span class="ml-10px text-gray-500">分钟</span>
          </el-form-item>
          <el-form-item label="订单接诊时长">
            <el-input-number :model-value="form.acceptDuration" :min="0" :max="120" controls-position="right"
              @update:model-value="change($event, 'acceptDuration')" />
            <span class="ml-10px text-gray-500">分钟</span>
          </el-form-item>
          <el-form-item label="订单持续时长">
            <el-input-number :model-value="form.consultationDuration" :min="0" :max="480" controls-position="right"
              @update:model-value="change($event, 'consultationDuration')" />
            <span class="ml-10px text-gray-500">分钟</span>
          </el-form-item>
          <el-form-item label="配药处方持续时长">
            <el-input-number :model-value="form.medicinePurchaseRxDuration" :min="0" :max="480"
              controls-position="right" @update:model-value="change($event, 'medicinePurchaseRxDuration')" />
            <span class="ml-10px text-gray-500">分钟</span>
          </el-form-item>
          <el-form-item label="邮政配送费用">
            <div class="flex items-center flex-grow">
              <el-input :model-value="form.emsExpressFee" class="text-right w-160px" placeholder="请输入配送费"
                @update:model-value="change($event, 'emsExpressFee', 'emsExpressDiscountFee')">
                <template #prefix>
                  <span class="pr-5px">¥</span>
                </template>
              </el-input>
              <span class="mx-12px"> - </span>
              <el-input :model-value="form.emsExpressDiscountFee" class="w-160px" placeholder="请输入优惠金额"
                @update:model-value="change($event, 'emsExpressDiscountFee', 'emsExpressFee')">
                <template #prefix>
                  <span class="pr-5px">¥</span>
                </template>
              </el-input>
              <span class="mx-12px"> = </span>
              <el-input readonly :model-value="emsFee" class="w-160px" placeholder="最终金额">
                <template #prefix>
                  <span class="pr-5px">¥</span>
                </template>
              </el-input>
            </div>
          </el-form-item>
          <el-form-item label="蜂鸟配送费用">
            <div class="flex items-center flex-grow">
              <el-input :model-value="form.fengNiaoExpressFee" class="w-160px" placeholder="请输入配送费"
                @update:model-value="change($event, 'fengNiaoExpressFee', 'fengNiaoExpressDiscountFee')">
                <template #prefix>
                  <span class="pr-5px">¥</span>
                </template>
              </el-input>
              <span class="mx-12px"> - </span>
              <el-input :model-value="form.fengNiaoExpressDiscountFee" class="w-160px" placeholder="请输入优惠金额"
                @update:model-value="change($event, 'fengNiaoExpressDiscountFee', 'fengNiaoExpressFee')">
                <template #prefix>
                  <span class="pr-5px">¥</span>
                </template>
              </el-input>
              <span class="mx-12px"> = </span>
              <el-input readonly :model-value="fengNiaoFee" class="w-160px" placeholder="最终金额">
                <template #prefix>
                  <span class="pr-5px">¥</span>
                </template>
              </el-input>
            </div>
          </el-form-item>
        </el-form>
      </el-card>
    </layout-main>
    <layout-item>
      <div v-if="changed" text-center class="py-10px">
        <el-button plain class="w-100px" type="primary" @click="cancel()">取消</el-button>
        <el-button class="w-100px" :loading="loading" type="primary" @click="confirm()">
          保存
        </el-button>
      </div>
    </layout-item>
  </my-layout>
</template>
<script setup>
import { computed, ref, onMounted } from "vue";
import { getHlwOrderConfig, updateHlwOrderConfig } from '@/api/hlw'
import MyLayout, { LayoutMain, LayoutItem } from "@/components/layout";
import { ElMessage } from "element-plus";

const editForm = ref({})
const data = ref({
  payDuration: 0,
  acceptDuration: 0,
  consultationDuration: 0,
  medicinePurchaseRxDuration: 0,
  emsExpressDiscountFee: '',
  emsExpressFee: '',
  fengNiaoExpressDiscountFee: '',
  fengNiaoExpressFee: ''
});

function getCent(val) {
  if (typeof val === 'string' && val.trim() === '') {
    return '';
  }
  return Number(val) * 100;
}

const form = computed(() => ({ ...data.value, ...editForm.value }));
const changed = computed(() => {
  const keys = Object.keys(data.value);
  const key = keys.find(key => (key in editForm.value) && (data.value[key] !== editForm.value[key]));
  return Boolean(key);
})

const emsFee = computed(() => {
  const emsExpressFee = getCent(form.value.emsExpressFee);
  const emsExpressDiscountFee = getCent(form.value.emsExpressDiscountFee);
  if (Number.isInteger(emsExpressFee) && Number.isInteger(emsExpressDiscountFee) && emsExpressFee >= emsExpressDiscountFee) {
    return (emsExpressFee - emsExpressDiscountFee) / 100;
  }
  return '';
})

const fengNiaoFee = computed(() => {
  const fengNiaoExpressFee = getCent(form.value.fengNiaoExpressFee);
  const fengNiaoExpressDiscountFee = getCent(form.value.fengNiaoExpressDiscountFee);
  if (Number.isInteger(fengNiaoExpressFee) && Number.isInteger(fengNiaoExpressDiscountFee) && fengNiaoExpressFee >= fengNiaoExpressDiscountFee) {
    return (fengNiaoExpressFee - fengNiaoExpressDiscountFee) / 100;
  }
  return '';
})

function cancel() {
  editForm.value = {};
}

function change(value, prop, relatedProp) {
  editForm.value[prop] = value;
  if (relatedProp) {
    editForm.value[relatedProp] = form.value[relatedProp];
  }
}

async function confirm(params) {
  if ('payDuration' in editForm.value && editForm.value.payDuration < 5) {
    ElMessage.error('支付时长不能小于5分钟');
    return;
  }
  if ('acceptDuration' in editForm.value && editForm.value.acceptDuration < 5) {
    ElMessage.error('接诊时长不能小于5分钟');
    return;
  }
  if ('consultationDuration' in editForm.value && editForm.value.consultationDuration < 10) {
    ElMessage.error('订单持续时长不能小于10分钟');
    return;
  }
  if ('medicinePurchaseRxDuration' in editForm.value && editForm.value.medicinePurchaseRxDuration < 10) {
    ElMessage.error('配药处方持续时长不能小于10分钟');
    return;
  }

  if ('emsExpressFee' in editForm.value && typeof emsFee.value === 'string') {
    ElMessage.error('邮政配送费用配置不正确');
    return;
  }
  if ('fengNiaoExpressFee' in editForm.value && typeof fengNiaoFee.value === 'string') {
    ElMessage.error('邮政配送费用配置不正确');
    return;
  }
  if ('emsExpressFee' in editForm.value) {
    editForm.value.emsExpressFee = Number(editForm.value.emsExpressFee);
    editForm.value.emsExpressDiscountFee = Number(editForm.value.emsExpressDiscountFee);
  }
  if ('fengNiaoExpressFee' in editForm.value) {
    editForm.value.fengNiaoExpressFee = Number(editForm.value.fengNiaoExpressFee);
    editForm.value.fengNiaoExpressDiscountFee = Number(editForm.value.fengNiaoExpressDiscountFee);
  }
  const { success, message } = await updateHlwOrderConfig(editForm.value);
  if (success) {
    ElMessage.success('保存成功');
    data.value = { ...data.value, ...editForm.value };
    editForm.value = {};
  } else {
    ElMessage.error(message);
  }
}

async function getData() {
  const { success, message, data: res } = await getHlwOrderConfig();
  if (!success) {
    ElMessage.error(message);
  }
  const config = res.data || {};
  data.value.payDuration = typeof config.payDuration === 'number' ? config.payDuration : 0;
  data.value.acceptDuration = typeof config.acceptDuration === 'number' ? config.acceptDuration : 0;
  data.value.consultationDuration = typeof config.consultationDuration === 'number' ? config.consultationDuration : 0;
  data.value.medicinePurchaseRxDuration = typeof config.medicinePurchaseRxDuration === 'number' ? config.medicinePurchaseRxDuration : 0;
  data.value.presOpen = typeof config.presOpen === 'boolean' ? config.presOpen : false;
  data.value.emsExpressFee = typeof config.emsExpressFee === 'number' ? config.emsExpressFee : '';
  data.value.emsExpressDiscountFee = typeof config.emsExpressDiscountFee === 'number' ? config.emsExpressDiscountFee : '';
  data.value.fengNiaoExpressFee = typeof config.fengNiaoExpressFee === 'number' ? config.fengNiaoExpressFee : '';
  data.value.fengNiaoExpressDiscountFee = typeof config.fengNiaoExpressDiscountFee === 'number' ? config.fengNiaoExpressDiscountFee : '';
}

onMounted(() => {
  getData();
});

</script>
