<template>
  <div class="wh100">
    <div class="describe">说明：流程摘要字段，可以在展示待办任务列表时，显示任务的摘要信息，从而更直观的了解流程详情。</div>
    <div class="add">
      <a-button type="primary" class="border-radius" @click="addMake"><PlusOutlined />新增</a-button>
    </div>
    <a-table :dataSource="modelSummaryFieldList" :columns="columns" bordered size="small" :pagination="false">
      <template #bodyCell="{ column, record, index }">
        <template v-if="column.dataIndex == 'index'">
          {{ index + 1 }}
        </template>
        <!-- 摘要来源 -->
        <template v-if="column.dataIndex == 'summarySource'">
          <a-select v-model:value="record.summarySource" style="width: 100%" placeholder="请选择" @change="summarySourceChange(record)">
            <a-select-option :value="1">来自表单字段</a-select-option>
            <a-select-option :value="2">来自流程变量</a-select-option>
          </a-select>
        </template>
        <template v-if="column.dataIndex == 'attribute'">
          <div class="wh100" v-if="record.summarySource == 1">
            <a-select
              v-model:value="record.sumFieldFormDefinitionId"
              style="width: 49%"
              placeholder="请选择"
              @change="sumFieldFormDefinitionIdChange($event, record)"
            >
              <a-select-option :value="fItem.formDefinitionId" v-for="(fItem, fIndex) in props.formDefinitionList" :key="fIndex">{{
                fItem.formName
              }}</a-select-option>
            </a-select>
            <a-select
              v-model:value="record.sumFormVariableCode"
              style="width: 49%; margin-left: 2%"
              placeholder="请选择"
              @change="sumFormVariableCodeChange(record)"
            >
              <a-select-option :value="fieItem.fieldCode" v-for="(fieItem, fieIndex) in record.fieldList" :key="fieIndex">{{
                fieItem.itemLabelName
              }}</a-select-option>
            </a-select>
          </div>
          <div class="wh100" v-if="record.summarySource == 2">
            <a-select
              v-model:value="record.sumModelVariableCode"
              style="width: 100%"
              placeholder="请选择"
              @change="sumModelVariableCodeChange(record)"
            >
              <a-select-option :value="mItem.variableCode" v-for="(mItem, mIndex) in props.modelVariableList" :key="mIndex">{{
                mItem.variableName
              }}</a-select-option>
            </a-select>
          </div>
        </template>
        <template v-if="column.dataIndex == 'parserName'">
          <a-input
            v-if="record.summarySource == 2"
            v-model:value="record.parserName"
            placeholder="请选择"
            @focus="parserNameClick(record, index)"
            allowClear
            @change="parserNameChange(event, record)"
          ></a-input>
        </template>
        <template v-if="column.dataIndex == 'action'">
          <icon-font iconClass="icon-opt-shanchu" font-size="24px" title="删除" color="#60666b" @click="remove(index)"></icon-font>
        </template>
      </template>
    </a-table>
    <div class="add"><a-button type="primary" class="border-radius" @click="onSave">保存</a-button></div>

    <!-- 选择转化器 -->
    <Exchange v-model:visible="showChange" v-if="showChange" @done="closeChange" :data="current" />
  </div>
</template>

<script setup name="FlowMakeDrawer">
import { ref } from 'vue';
import { useWorkflowStore } from '@/store/modules/workflow';
import { deepClone } from '@/utils/common/util';
import Exchange from '../../../../mid/app/view/components/exchange.vue';
import { FlowDesignApi } from '../../../../mid/workflow/design/api/FlowDesignApi';

const props = defineProps({
  //  流程变量列表
  modelVariableList: {
    type: Array,
    default: []
  },
  // 流程表单列表
  formDefinitionList: {
    type: Array,
    default: []
  }
});

const emits = defineEmits(['save']);

// Store
const flowStore = useWorkflowStore();

// 摘要字段列表
const modelSummaryFieldList = ref([]);

// 表格配置
const columns = ref([
  {
    title: '序号',
    width: 60,
    dataIndex: 'index'
  },
  {
    title: '摘要来源',
    width: 150,
    ellipsis: true,
    dataIndex: 'summarySource'
  },
  {
    title: '选择属性',
    width: 300,
    ellipsis: true,
    dataIndex: 'attribute'
  },
  {
    title: '选择转化器',
    width: 100,
    ellipsis: true,
    dataIndex: 'parserName'
  },
  {
    title: '操作',
    width: 60,
    dataIndex: 'action'
  }
]);

// 当前行数据
const current = ref(null);
// 当前行索引
const currentIndex = ref(0);

// 是否显示转化器弹框
const showChange = ref(false);

// 是否有选中事件
const isInputFocus = ref(true);

// 显示侧边
const show = async () => {
  if (flowStore.flowGlobalConfig?.modelSummaryFieldList) {
    modelSummaryFieldList.value = deepClone(flowStore.flowGlobalConfig.modelSummaryFieldList);
    if (modelSummaryFieldList.value?.length > 0) {
      modelSummaryFieldList.value.forEach(item => {
        item.fieldList = [];
        if (item.sumFieldFormDefinitionId) {
          sumFieldFormDefinitionIdChange(item.sumFieldFormDefinitionId, item, true);
        }
      });
    }
  }
};

// 侧边保存
const onSave = () => {
  emits('save');
};

// 新增摘要
const addMake = () => {
  let obj = {
    summarySource: 1,
    sumModelVariableCode: null,
    sumModelVariableName: null,
    fieldList: [],
    sumFieldFormDefinitionId: null,
    sumFormVariableCode: null,
    sumFormVariableName: null,
    parserName: null
  };
  modelSummaryFieldList.value.push(obj);
};

// 删除
const remove = index => {
  modelSummaryFieldList.value.splice(index, 1);
};

// 来源改变
const summarySourceChange = (record) => {
  record.parserName = null;
}

// 表单改变
const sumFieldFormDefinitionIdChange = (e, record, init = false) => {
  if (!init) {
    record.sumFormVariableCode = null;
  }
  getFormFieldList(e, record);
};

// 获取表单字段列表
const getFormFieldList = async (formDefinitionId, record) => {
  const res = await FlowDesignApi.getFormFieldList({ formDefinitionId: formDefinitionId });
  record.fieldList = res.data;
};

// 表单字段改变
const sumFormVariableCodeChange = record => {
  const current = record.fieldList.find(item => item.fieldCode == record.sumFormVariableCode);
  if (current) {
    record.sumFormVariableName = current.itemLabelName;
  }
};

// 流程变量改变
const sumModelVariableCodeChange = record => {
  const current = props.modelVariableList.find(item => item.variableCode == record.sumModelVariableCode);
  if (current) {
    record.sumModelVariableName = current.variableName;
  }
};

// 选择转化器
const parserNameClick = (record, index) => {
  if (isInputFocus.value) {
    current.value = record;
    currentIndex.value = index;
    showChange.value = true;
  }
  isInputFocus.value = true;
};

// 关闭选择转化器弹框
const closeChange = data => {
  modelSummaryFieldList.value[currentIndex.value].parserName = data;
};

// 清空转化器
const parserNameChange = (e, record) => {
  isInputFocus.value = false;
  record.parserName = null;
};

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

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