<template>
    <l-layout :top="180" >
        <template #top>
            <el-form
                class="l-form-config"
                label-width="88px"
                label-position="left"
                size="mini"
            >
                <el-form-item label="节点标识">
                    <el-input v-model="node.id" readonly ></el-input>
                </el-form-item>
                <div style="padding:0 16px;">
                    <el-alert
                        title="包容网关说明"
                        type="info"
                        description="包容网关会等待所有分支汇入才往下执行，出口分支能执行多条（条件为true）"
                        show-icon
                        :closable="false"
                        >
                    </el-alert>
                </div>
            </el-form>
        </template>
        <l-layout :top="40">
            <template #top v-if="!disabled">
                <div style="padding-left:8px;float:left;" >
                    <el-button-group>
                        <el-button size="mini" icon="el-icon-plus" @click="handleFormulaClick">{{$t('公式')}}</el-button>
                        <el-button size="mini" icon="el-icon-plus" @click="handleSQlClick">{{$t('sql语句')}}</el-button>
                    </el-button-group>
                </div>
                <div style="padding-right:8px;float:right;">
                    <el-button size="mini" type="danger" icon="el-icon-delete" @click="handleClearClick">{{$t('清空')}}</el-button>
                </div>
            </template>
            <l-table :columns="columns" :dataSource="node.conditions" >
                <template v-slot:type="scope" >
                    {{typeFormat(scope.row.type)}}
                </template>
                <l-table-btns v-if="!disabled" :btns="tableBtns" @click="handleTableBtnClick" ></l-table-btns>
            </l-table>
        </l-layout>


        <l-dialog
            :title="$t('添加公式条件')"
            :visible.sync="formulaVisible"
            :height="480"

            @ok="handleFormulaOk"
            @closed="handleFormulaClosed"
            @opened="handleFormulaOpened"
        >
            <condition-formula ref="conditionFormula" ></condition-formula>
        </l-dialog>

        <l-dialog
            :title="$t('添加sql条件')"
            :visible.sync="sqlVisible"
            :height="480"

            @ok="handleSqlOk"
            @closed="handleSqlClosed"
            @opened="handleSqlOpened"
        >
            <condition-sql ref="conditionSql" ></condition-sql>
        </l-dialog>
           
        
    </l-layout>
</template>

<script>
import conditionFormula from './conditionFormula.vue'
import conditionSql from './conditionSql.vue'

export default {
    name:'gateway-inclusive-option',
    props:{
      disabled:{
          type:Boolean,
          default:false
      }
    },
    components: {
        conditionFormula,
        conditionSql
    },
    data () {
        return {
            tableBtns:[
                {prop:'Edit',label:'编辑'},
                {prop:'Delete',label:'删除'}
            ],
            columns:[
                {label:'类型',prop:'type',width:'80', align: 'center'},
                {label:'名称',prop:'name',minWidth:'100'},
            ],
            tableData:[],

            formulaVisible:false,
            sqlVisible:false,

            editRow:null,
            isEdit:false,
            rowIndex:0,
        }
    },
    computed: {
        node(){
          return this.wfdesign.currentWfNode;
        }
    },
    inject: ["wfdesign"],
    methods:{
        typeFormat(type){
            switch(type){
                case '1':
                    return '表达式'
                case '2':
                    return 'sql语句'
            }
        },
        handleTableBtnClick(btn){
            switch(btn.type){
                case 'Edit':
                    this.isEdit = true;
                    this.editRow = btn.row;
                    this.rowIndex = btn.rowIndex;
                    if(this.editRow.type == '1'){
                        this.formulaVisible = true;
                    }
                    else{
                        this.sqlVisible = true;
                    }
                    break;
                case 'Delete':
                    this.node.conditions.splice(btn.rowIndex,1);
                    break;
            }
            console.log(btn);
            //this.tableData.splice(btn.rowIndex,1);
        },
        handleFormulaClick(){
            this.isEdit = false;
            this.formulaVisible = true;
        },
        handleSQlClick(){
            this.isEdit = false;
            this.sqlVisible = true;
        },
        handleClearClick(){
            this.node.conditions = [];
        },
        handleFormulaOk(){
            this.$refs.conditionFormula.validateForm(()=>{
                let formData = this.$refs.conditionFormula.getForm();
                formData.type = '1';

                if(this.isEdit){
                    this.node.conditions[this.rowIndex] = formData;
                }
                else{
                    formData.code = this.$uuid();
                    this.node.conditions.push(formData);
                }
                

                this.formulaVisible = false;
            })
        },
        handleFormulaOpened(){
            if(this.isEdit){
                this.$refs.conditionFormula.setForm(this.editRow);
            }
            
        },
        handleFormulaClosed(){
            this.$refs.conditionFormula.resetForm();
        },
        handleSqlOk(){
            this.$refs.conditionSql.validateForm(()=>{
                let formData = this.$refs.conditionSql.getForm();
                formData.type = '2';

                if(this.isEdit){
                    this.node.conditions[this.rowIndex] = formData;
                }
                else{
                    formData.code = this.$uuid();
                    this.node.conditions.push(formData);
                }
                
                this.sqlVisible = false;
            })
        },
        handleSqlOpened(){
            if(this.isEdit){
                this.$refs.conditionSql.setForm(this.editRow);
            }
        },
        handleSqlClosed(){
            this.$refs.conditionSql.resetForm();
        },
    }
}
</script>

<style>
</style>