<template>
  <common-drawer :width="drawerWidth()" mask :visible="visible" @close="onClose" title="流程属性配置" :z-index="props.zIndex">
    <a-tabs v-model:activeKey="tabsActiveKey">
      <a-tab-pane forceRender key="1" tab="流程变量">
        <FlowVariableDrawer ref="flowVariableDrawerRef" @save="onSave" />
      </a-tab-pane>
      <a-tab-pane forceRender key="2" tab="流程标题">
        <FlowTitleDrawer
          ref="flowTitleDrawerRef"
          @save="onSave"
          :modelVariableList="modelVariableList"
          :formDefinitionList="formDefinitionList"
        />
      </a-tab-pane>
      <a-tab-pane forceRender key="3" tab="摘要字段">
        <FlowMakeDrawer
          ref="flowMakeDrawerRef"
          @save="onSave"
          :modelVariableList="modelVariableList"
          :formDefinitionList="formDefinitionList"
        />
      </a-tab-pane>
    </a-tabs>
  </common-drawer>
</template>

<script setup name="FlowAttrDrawer">
import { ref, computed } from 'vue';
import { useWorkflowStore } from '@/store/modules/workflow';
import { isMobile } from '@/utils/common/util';
import FlowTitleDrawer from './components/FlowTitle.vue';
import FlowMakeDrawer from './components/FlowMake.vue';
import FlowVariableDrawer from './components/FlowVariableDrawer.vue';
import { message } from 'ant-design-vue';

const props = defineProps({
  zIndex: {
    type: Number,
    default: 1000
  }
});

// Store
const flowStore = useWorkflowStore();

// 侧边显示隐藏
const visible = ref(false);

// tab选中
const tabsActiveKey = ref('1');

// 绑定表单列表
const formDefinitionList = computed(() => {
  return flowStore.flowGlobalConfig.formDefinitionList.filter(item => item.formType == 1);
});

// 流程变量列表
const modelVariableList = computed(() => {
  return flowStore.flowGlobalConfig.modelVariableList;
});

// ref
const flowVariableDrawerRef = ref(null);
const flowTitleDrawerRef = ref(null);
const flowMakeDrawerRef = ref(null);

/**
 * 侧边宽度
 * @returns
 */
const drawerWidth = computed(() => {
  return width => {
    if (!width) {
      width = '40%';
    }
    return isMobile() ? '100%' : width;
  };
});

// 显示侧边
const show = async () => {
  flowVariableDrawerRef.value.show();
  flowTitleDrawerRef.value.show();
  flowMakeDrawerRef.value.show();
  visible.value = true;
};

// 事件
const emit = defineEmits(['close']);

// 关闭侧边
const onClose = () => {
  visible.value = false;
  emit('close');
};

// 侧边保存
const onSave = async () => {
  flowTitleDrawerRef.value.$refs.formRef
    .validate()
    .then(() => {
      flowStore.setModelVariableList(flowVariableDrawerRef.value.modelVariableList);
      flowStore.setModelTitleConfig(flowTitleDrawerRef.value.modelTitleConfig);
      flowStore.setModelSummaryFieldList(flowMakeDrawerRef.value.modelSummaryFieldList);
      message.success('保存成功');
    })
    .catch(e => {
      message.warning(e.errorFields[0].errors[0]);
    });
};

defineExpose({
  show,
  onSave
});
</script>

<style scoped lang="less">
.describe {
  color: #a6a6a6;
}
.m-20 {
  margin: 20px 0;
}
</style>
