<template>
  <div class="flow-params-box">
    <a-row class="flow-row">
      <a-col class="flow-form">
        <WorkFlowForm
          :definitionId="definitionId"
          :taskId="props.data.id"
          :instanceId="props.data.instanceId"
          ref="workFlowFormRef"
          :key="key"
        />
      </a-col>
      <a-col class="flow-time">
        <ApprovalTimeLine :list="props.approverLogList" />
      </a-col>
    </a-row>
  </div>
</template>

<script setup name="FlowParams">
import { ref, watch, onMounted } from 'vue';
import ApprovalTimeLine from './approval-time-line.vue';
import WorkFlowForm from '../../../start/components/flow-form.vue';

const props = defineProps({
  // 模型定义id
  data: Object,
  // 审批日志列表
  approverLogList: {
    type: Array,
    default: []
  }
});

// ref
const workFlowFormRef = ref();

// 定义id
const definitionId = ref('');

const key = ref(0);

onMounted(() => {
  if (props.data.definitionId) {
    definitionId.value = props.data.definitionId;
  }
});

watch(
  () => props.data,
  val => {
    if (val) {
      key.value++;
      definitionId.value = props.data.definitionId;
    }
  }
);

defineExpose({});
</script>

<style scoped lang="less">
.flow-params-box {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.flow-row {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}
.flow-form {
  width: calc(100% - 385px);
  height: 100%;
  padding-right: 16px;
  border-right: 1px solid rgba(197, 207, 209, 0.6);
}
.flow-time {
  width: 384px;
  height: 100%;
  padding-left: 26px;
}
</style>
