<template>
    <div class="app-container">
        <div class="header-operator">
            <el-form label-width="40px" inline>
                <el-form-item>
                    <el-input v-model="queryParam.name" class="mr input" clearable placeholder="输入名称搜索"
                              prefix-icon="el-icon-search"
                              size="small"
                    />
                </el-form-item>
                <el-form-item label="类型">
                    <el-select v-model="queryParam.type" size="small" style="width: 160px">
                        <el-option label="全部" value=""/>
                        <el-option v-for="item in typeDict" :key="item" :label="item" :value="item"/>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" class="mr" icon="el-icon-search" size="mini" :loading="queryLoading"
                               @click="queryRuleList"
                    >
                        查询
                    </el-button>
                    <el-button type="success" class="mr" size="mini" @click="openAddruleDialog">
                        新增
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-table v-loading="queryLoading" :data="ruleList" stripe border>
            <el-table-column :show-overflow-tooltip="true" align="center" label="规则名称" prop="name"/>
            <el-table-column :show-overflow-tooltip="true" align="center" label="规则类型" prop="type"/>
            <el-table-column :show-overflow-tooltip="true" align="center" label="验证模式" prop="mode"/>
            <el-table-column :formatter="contentFormat" :show-overflow-tooltip="true" align="center" label="验证内容"
                             prop="content"
            />
            <el-table-column :show-overflow-tooltip="true" align="center" label="备注" prop="remarks"/>
            <el-table-column label="操作" align="center" width="150" show-overflow-tooltip>
                <template slot-scope="scope">
                    <el-button plain size="small" @click="testRule(scope.row)">测试</el-button>
                    <el-button circle icon="el-icon-edit" plain size="small" type="primary"
                               @click.stop="editRuleDialog(scope.row)"
                    ></el-button>
                    <el-button circle icon="el-icon-delete" plain size="small" type="danger"
                               @click.stop="deleteRule(scope.row)"
                    ></el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination v-show="queryParam.total > 0" :total="queryParam.total" :page.sync="queryParam.pageNum"
                    :limit.sync="queryParam.pageSize" @pagination="queryRuleList"
        />
        <!--规则增改-->
        <el-dialog :title="dialogData.title" @open="openDialog" :visible.sync="dialogData.show" width="400px"
                   :close-on-click-modal="false" append-to-body
        >
            <el-form ref="ruleForm" :model="dialogData.data" label-width="80px">
                <el-form-item required prop="name" label="规则名称">
                    <el-input v-model="dialogData.data.name" size="small"/>
                </el-form-item>
                <el-form-item required label="规则类型" prop="type">
                    <el-select @change="typeChange" size="small" v-model="dialogData.data.type" style="width: 160px">
                        <el-option v-for="item in typeDict" :key="item" :label="item" :value="item"/>
                    </el-select>
                </el-form-item>
                <el-form-item required label="验证模式" prop="mode">
                    <el-select @change="modeChange" size="small" v-model="dialogData.data.mode" style="width: 160px">
                        <el-option v-for="item in modeDict" :key="item" :label="item" :value="item"/>
                    </el-select>
                </el-form-item>
                <el-form-item required prop="content">
                    <!--正则1-->
                    <el-input v-model="dialogData.data.content" type="textarea" placeholder="请输入需要验证的正则表达式"
                              v-if="dialogData.data.mode === '正则'"
                    />
                    <!--非空数组2-->
                    <ArrayInput v-model="dialogData.data.content" placeholder="请输入视为空的值"
                                v-if="dialogData.data.mode === '非空'"
                    />
                    <!--区间配置3-->
                    <SectionInput v-if="dialogData.data.mode === '区间'" v-model="dialogData.data.content"/>
                    <!--比较4-->
                    <el-input v-model="dialogData.data.content" placeholder="输入表达式,例如 >4 , <=4"
                              v-if="dialogData.data.mode === '比较'"
                    />
                    <!--值域6-->
                    <ArrayInput v-model="dialogData.data.content" placeholder="请输入值域"
                                v-if="dialogData.data.mode === '值域'"
                    />
                    <!--逻辑与11-->
                    <!--逻辑或12-->
                    <SectionSelect v-model="dialogData.data.content" :arr="ruleDict"
                                   v-if="['逻辑与', '逻辑或'].includes(dialogData.data.mode)"
                                   :config="{ value: 'value', label: 'label' }"
                    />
                </el-form-item>
                <el-form-item prop="remarks" label="备注">
                    <el-input v-model="dialogData.data.remarks" placeholder="备注" type="textarea"/>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="testRule(dialogData.data)">规则测试</el-button>
                <el-button type="primary" @click="submitRule">确 定</el-button>
                <el-button @click="dialogData.show = false">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import * as Emport from '@/api/emport/Emport'
import ArrayInput from '@/views/emport/rule/ArrayInput.vue'
import SectionInput from '@/views/emport/rule/SectionInput.vue'
import SectionSelect from '@/views/emport/rule/SectionSelect.vue'

export default {
    name: 'Rule',
    components: { ArrayInput, SectionInput, SectionSelect },
    data() {
        return {
            typeDict: ['基础规则', '组合规则'],
            modeDict: [],
            queryParam: {
                pageNum: 1,
                pageSize: 20,
                total: 0,
                name: '',
                type: ''
            },
            queryLoading: false,
            ruleList: [],
            dialogData: {
                title: '',
                show: false,
                data: {}
            },
            ruleDict: [] // 规则下拉字典
        }
    },
    created() {
        this.initRuleDict()
        this.queryRuleList()
    },
    methods: {
        // 初始化规则字典
        initRuleDict() {
            Emport.queryRuleDict().then(res => {
                this.ruleDict = res.data.map(item => {
                    return {
                        value: item.id,
                        label: item.name
                    }
                })
            })
        },
        // 打开dialog回调
        openDialog() {
            this.initRuleDict()
        },
        // 查询规则列表
        queryRuleList() {
            this.queryLoading = true
            Emport.queryRule(this.queryParam).then(res => {
                if (res.code === 200) {
                    this.queryParam.total = res.total
                    this.ruleList = res.rows
                }
            }).finally(_ => {
                this.queryLoading = false
            })
        },
        // 打开添加规则dialog
        openAddruleDialog() {
            this.dialogData.title = '添加规则'
            this.dialogData.data = {}
            this.dialogData.show = true
        },
        // 打开编辑规则dialog
        editRuleDialog(row) {
            this.dialogData.title = '编辑规则'
            this.dialogData.data = { ...row }
            this.dialogData.show = true
        },
        // 规则类型修改触发事件
        typeChange(value) {
            this.$set(this.dialogData.data, 'mode', '')
            if (value === '基础规则') {
                this.modeDict = ['正则', '非空', '区间', '比较', '值域']
            } else if (value === '组合规则') {
                this.modeDict = ['逻辑与', '逻辑或']
            }
        },
        // 验证模式修改触发事件
        modeChange(value) {
            this.$set(this.dialogData.data, 'content', '')
        },
        // 提交规则
        submitRule() {
            this.$refs.ruleForm.validate(validate => {
                if (validate) {
                    if (this.dialogData.title === '添加规则') {
                        Emport.addRule(this.dialogData.data).then(res => {
                            this.dialogData.show = false
                            this.queryRuleList()
                        })
                    } else {
                        Emport.updateRule(this.dialogData.data).then(res => {
                            this.dialogData.show = false
                            this.queryRuleList()
                        })
                    }
                }
            })
        },
        // 删除规则
        deleteRule(row) {
            this.$confirm(`是否删除规则 ${row.name} ?`, '删除',
                {
                    type: 'warning',
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    beforeClose: (action, instance, done) => {
                        if (action === 'confirm') {
                            Emport.deleteRule(row.id).then(res => {
                                done()
                                this.queryRuleList()
                            })
                        } else {
                            done()
                        }
                    }
                }
            )
        },
        // 规则测试
        testRule(data) {
            if (data) {
                this.$prompt('请输入测试数据', '测试',
                    {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        beforeClose: (action, instance, done) => {
                            if (action === 'confirm') {
                                instance.confirmButtonLoading = true
                                Emport.ruleTest({
                                    ...data,
                                    value: instance.inputValue
                                }).then(res => {
                                    if (res.code === 200) {
                                        this.$message.success('校验通过')
                                    }
                                }).finally(_ => instance.confirmButtonLoading = false)
                            } else {
                                done()
                            }
                        }
                    }
                )
            }
        },
        // 验证内容合并
        contentFormat(row){
            if (row.type === '基础规则'){
                return row.content
            }else {
                let idArr = row.content.split(',')
                return this.ruleDict.filter(item=>idArr.includes(item.value))
                    .map(item=>item.label)
                    .join(",")
            }
        },
    }
}
</script>

<style lang="scss" scoped>
.app-container {
    box-shadow: none;
}

.header-operator {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    .mr {
        margin-right: 8px;
        margin-left: 0;
        margin-bottom: 8px;
    }

    .input {
        width: 250px;
    }
}
</style>
