<script setup lang="ts">
import { useElementsInfoStore } from '../../stores/elementsInfo.ts';
import { useSelectedInfoStore } from '../../stores/selectedInfo.ts';

defineOptions({ name: 'ApprovalMode' });

const lf: any = inject('lf');
const elementsInfoStore = useElementsInfoStore();
const selectedInfoStore = useSelectedInfoStore();

const radioStyle = reactive({
  display: 'flex',
  lineHeight: '40px',
});
// approveMethod初始数据无效 使用elementInfo里面的数据
// 默认是1 认领审批
const approveMethod = ref<number>(1);
const approvalModePrecent = ref<number>(100);
const elementInfo = elementsInfoStore.getElementById(selectedInfoStore.selectId) || {};
onMounted(() => {
  approveMethod.value = elementInfo.approveMethod || 1;
  approvalModePrecent.value = elementInfo.approvalModePrecent || 100;
  lf.value.setProperties(selectedInfoStore.selectId, {
    approveMethod: approveMethod.value,
  });
  lf.value.setProperties(selectedInfoStore.selectId, {
    approvalModePrecent: approvalModePrecent.value,
  });
});

watch(approveMethod, (newVal) => {
  // console.log('approveMethod changed:', newVal);
  elementsInfoStore.updateElement(selectedInfoStore.selectId, {
    approveMethod: newVal,
  });
  lf.value.setProperties(selectedInfoStore.selectId, {
    approveMethod: newVal,
  });
});

watch(approvalModePrecent, (newVal) => {
  // console.log('approvalModePrecent changed:', newVal);
  elementsInfoStore.updateElement(selectedInfoStore.selectId, {
    approvalModePrecent: newVal,
  });
  lf.value.setProperties(selectedInfoStore.selectId, {
    approvalModePrecent: newVal,
  });
});
</script>

<template>
  <a-radio-group v-model:value="approveMethod" :disabled="elementInfo.type === 'normal-task-node'">
    <a-radio :style="radioStyle" :value="4">
      按顺序依次审批
    </a-radio>
    <a-radio :style="radioStyle" :value="2">
      会签（可同时审批，至少%人必须审批通过）
    </a-radio>
    <a-input-number v-if="approveMethod === 2" v-model:value="approvalModePrecent" size="small" style="margin-left: 24px;" :min="10" :max="100" :step="10" />
    <a-radio :style="radioStyle" :value="3">
      或签（可同时审批，有一人通过即可）
    </a-radio>
    <a-radio :style="radioStyle" :value="1">
      认领审批
    </a-radio>
  </a-radio-group>
</template>
