<template>
    <div class="user-task">
        <a-form ref="formRef" :rules="rules" :model="node" labelAlign="left" :label-col="labelCol"
            :wrapper-col="wrapperCol" :disabled="data.componentDisabled">
            <a-form-item label="节点标识">
                <a-input v-model:value="node.id" placeholder="请输入" readonly />
            </a-form-item>
            <a-alert message="排他网关说明"
                description="排他网关不会等待所有分支汇入才往下执行，只要有分支汇入就会往下执行，出口分支只会执行一条（条件为true，如果多条出口分支条件为true也执行一条）" type="info"
                show-icon />
            <a-space>
                <a-radio-group>
                    <a-radio-button value="1" @click="handleFormulaClick">公式</a-radio-button>
                    <a-radio-button value="2" @click="handleSQlClick">sql语句</a-radio-button>
                </a-radio-group>
                <a-button danger :size="size" @click="handleClearClick">清空</a-button>
            </a-space>
            <a-table :columns="data.columns" :data-source="node.conditions" bordered :pagination="false">
                <template #bodyCell="{ column, text, record }">
                    <template v-if="['name'].includes(column.dataIndex)">
                        <div>
                            {{ text }}
                        </div>
                    </template>
                    <template v-else-if="['type'].includes(column.dataIndex)">
                        <div>
                            {{ typeFormat(text) }}
                        </div>
                    </template>
                    <template v-else-if="column.dataIndex === 'operation'">
                        <a-button @click="onEdit(record)" size="small">编辑</a-button>
                        <a-button danger @click='onDelete(record.id)' size="small" class="ml-2">删除</a-button>
                    </template>
                </template>
            </a-table>
        </a-form>
        <a-modal width="40%" v-model:open="data.formulaVisible" title="添加公式条件" @ok="handleFormulaOk">
            <conditionFormula ref="conditionFormulaRef"></conditionFormula>
        </a-modal>
        <a-modal width="40%" v-model:open="data.sqlVisible" title="添加sql条件" @ok="handleSqlOk">
            <conditionSql ref="conditionSqlRef"></conditionSql>
        </a-modal>
    </div>
</template>

<script lang="ts" setup>
    import conditionFormula from './src/conditionFormula.vue'
    import conditionSql from './src/conditionSql.vue'
    import { getDetail } from '@/api/sys/WFSchemeInfo'
    import { reactive, ref, onMounted, nextTick, unref, h, watch, defineProps } from 'vue';
    import { buildGUID } from '@/utils/uuid';
    import { flowStore } from '@/store/modules/flow';
    const flowWfDataStore = flowStore();
    const labelCol = { span: 7 };
    const wrapperCol = { span: 17 };
    const conditionFormulaRef = ref < any > ()
    const conditionSqlRef = ref < any > ()
    const props = defineProps({
        element: Object,
        pageType: String,
    })
    const node = ref({})
    watch(
        () => props.element,
        (newVal, oldVal) => {
            if (newVal.type == "bpmn:ExclusiveGateway") {
                const currentNode = flowWfDataStore.getWfDataNode(newVal.id)
                if (currentNode) {
                    node.value = currentNode
                } else {
                    node.value = newVal
                }
            }
        }
    )

    const data = reactive({
        columns: [
            { title: '类型', dataIndex: 'type' },
            { title: '名称', dataIndex: 'name', width: '40%' },
            { title: '操作', dataIndex: 'operation' }
        ],
        tableData: [],
        formulaVisible: false,
        sqlVisible: false,
        editRow: null,
        isEdit: false,
        rowIndex: 0,
        componentDisabled: props.pageType == 'detail' ? true : false

    })
    function updateWfData(key) {
        flowWfDataStore.updataWfDataNode(node.value.id, key, node.value[key])
    }
   
    onMounted(() => {
      
    })
    function typeFormat(type) {
        switch (type) {
            case '1':
                return '表达式'
            case '2':
                return 'sql语句'
        }
    }

    function handleFormulaClick() {
        data.formulaVisible = true;
        data.isEdit = false
        conditionFormulaRef.value.setForm({
            dbCode: '',
            table: '',
            columns: [],
            rfield: '',
            cfield: '',
            compareType: '',
            value: '',
            name: ''
        })
    }
    function handleSQlClick() {
        data.sqlVisible = true;
        data.isEdit = false
        conditionSqlRef.value.setForm({
            name: '',
            dbCode: '',
            sql: '',
        })
    }
    function handleClearClick() {
        node.value.conditions = [];
    }
    async function handleFormulaOk() {
        conditionFormulaRef.value.validateForm()
        let obj = conditionFormulaRef.value.getForm()
        obj.type = '1';
        if (obj.name == '' || obj.table == '' || obj.value == '' || obj.rfield == '' || obj.cfield == '' || obj.compareType == '') {
            data.formulaVisible = true;
        } else {
            if (data.isEdit) {
                node.value.conditions[data.rowIndex] = obj;
            } else {
                obj.code = buildGUID();
                node.value.conditions.push(obj);
            }
            data.formulaVisible = false;
        }

    }
    function handleSqlOk() {
        conditionSqlRef.value.validateForm()
        let obj = conditionSqlRef.value.getForm()
        obj.type = '2';
        if (obj.name == '' || obj.dbCode == '' || obj.sql == '') {
            data.sqlVisible = true;
        } else {
            if (data.isEdit) {
                node.value.conditions[data.rowIndex] = obj;
            } else {
                obj.code = buildGUID();
                node.value.conditions.push(obj);
            }
            data.sqlVisible = false;
        }
    }
    function onEdit(record) {
        data.isEdit = true
        if (data.type == 1) {
            data.formulaVisible = true;
            conditionFormulaRef.value.setForm(record)
        } else {
            data.sqlVisible = true;
            conditionSqlRef.value.setForm(record)
        }
    }
    function onDelete(id) {
        let list = node.value.conditions
        var currentIndex = (list || []).findIndex((element) => element.id == id);
        node.value.conditions.splice(currentIndex, 1)
    }
   
    defineExpose({
    })
</script>

<style scoped>
    ::v-deep .ant-alert-info {
        margin-bottom: 20px;
    }

    ::v-deep .ant-table-wrapper {
        margin-top: 20px;
    }
</style>