<template>
  <div class="mt-4">
    <FormItem required :label="t('关联意见')">
      <a-switch v-model:checked="formInfo.opinionConfig.enabled" />
    </FormItem>

    <template v-if="formInfo.opinionConfig.enabled">
      <FormItem required :label="t('显示类型')">
        <a-select
          v-model:value="formInfo.opinionConfig.showType"
          :placeholder="t('点击选择显示类型')"
          style="width: 100%"
        >
          <a-select-option :title="t('显示所有审批意见')" :value="ApprovalOpinionDisplayType.ALL">
            {{ t('显示所有审批意见') }}
          </a-select-option>
          <a-select-option
            :title="t('显示最终审批意见')"
            :value="ApprovalOpinionDisplayType.SHOW_FINAL_RESULTS"
          >
            {{ t('显示最终审批意见') }}
          </a-select-option>
        </a-select>
      </FormItem>
      <FormItem required :label="t('电子签章')">
        <a-select
          v-model:value="formInfo.opinionConfig.signature"
          :placeholder="t('点击选择电子签章')"
          style="width: 100%"
        >
          <a-select-option :title="t('不使用签章')" :value="ElectronicSignatureVerification.NONE">
            {{ t('不使用签章') }}
          </a-select-option>
          <a-select-option
            :title="t('直接使用签章')"
            :value="ElectronicSignatureVerification.NO_PASSWORD_REQUIRED"
          >
            {{ t('直接使用签章') }}
          </a-select-option>
          <a-select-option
            :title="t('需要填写密码')"
            :value="ElectronicSignatureVerification.PASSWORD_REQUIRED"
          >
            {{ t('需要填写密码') }}
          </a-select-option>
        </a-select>
      </FormItem>
      <FormItem required :label="t('关联组件')">
        <a-tree-select
          v-model:value="formInfo.opinionConfig.component"
          autoExpandParent
          multiple
          defaultExpandAll
          :tree-data="opinionConfigTree"
          style="width: 100%"
          :field-names="{
            children: 'children',
            label: 'title',
            value: 'key',
          }"
        />
      </FormItem>
    </template>
  </div>
</template>

<script setup lang="ts">
  import { useBpmnStore } from '/@bpmn/store/bpmn';
  import { storeToRefs } from 'pinia';
  import { computed, ref } from 'vue';
  import FormItem from '/@bpmn/layout/FormItem.vue';
  import {
    ApprovalOpinionDisplayType,
    ElectronicSignatureVerification,
  } from '/@/enums/workflowEnum';
  import { getOpinionConfigTree } from '/@bpmn/config/info';
  import { useI18n } from '/@/hooks/web/useI18n';
  const { t } = useI18n();
  const store = useBpmnStore();
  const { infoId } = store;
  const { info } = storeToRefs(store);
  const formInfo = ref();

  formInfo.value = info.value.get(infoId);
  //意见簿
  const opinionConfigTree = computed(() => {
    const { info, infoId } = store;
    if (infoId && info.has(infoId)) {
      let value = info.get(infoId);
      if (value) return getOpinionConfigTree(value.formConfigs);
      else return [];
    }
    return [];
  });
</script>

<style scoped></style>
