<template>
    <div>
        <el-form :model="formData" :rules="rules" ref="form" label-width="80px" label-position="right" size="small" style="max-width: 500px;">
            <el-form-item prop="databasetype" label="数据库">
                <el-select placeholder="数据库" size="small" v-model="formData.databasetype" class="filter-item">
                    <el-option label="Mysql" value="Mysql">
                    </el-option>
                    <el-option label="SqlServer" value="SqlServer">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item prop="code" label="code">
                <el-input v-model="formData.code"></el-input>
            </el-form-item>
            <el-form-item prop="tableName" label="表名">
                <el-input v-model="formData.tableName"></el-input>
            </el-form-item>

            <el-form-item prop="modules" label="功能">
                <el-select placeholder="modules" size="small" multiple v-model="formData.modules" class="filter-item">
                    <el-option label="搜索" value="search">
                    </el-option>
                    <el-option label="高级搜索" value="query">
                    </el-option>
                    <el-option label="添加" value="add">
                    </el-option>
                    <el-option label="编辑" value="edit">
                    </el-option>
                    <el-option label="删除" value="del">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item prop="tablecolumns" label="字段">
                <el-button @click="addField" type="text" icon="el-icon-plus">添加</el-button>
                <el-table :data="tablecolumnsFields">

                    <el-table-column prop="name" label="显示" align="center">
                        <template slot-scope="{row}">
                            <el-input v-model="row.label"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="value" label="字段" align="center">
                        <template slot-scope="{row}">
                            <el-input v-model="row.value"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="type" label="类型" width="150" align="center">
                        <template slot-scope="{row}">
                            <el-select v-model="row.type">
                                <el-option v-for="item in columnTypes" :label="item.label" :value="item.value" :key="item.value"></el-option>
                            </el-select>
                        </template>
                    </el-table-column>

                    <el-table-column width="60" align="center">
                        <template slot-scope="{ row, column, $index }">
                            <el-button @click="removeField($index)" size="small" type="text">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form-item>

            <el-form-item>
                <el-button @click="onSave" :loading="$store.state.fetchingData" type="primary">保存</el-button>
                <el-button @click="$router.go(-1)">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import formValidator from '../formValidator'

export default {
    created() {
        if (this.$route.query.id) {
            this.$http.get({
                url: '/queryConfig/getOne',
                data: {
                    id: this.$route.query.id
                }
            }).then(res => {
                if (res.success) {

                    res.data.modules = res.data.modules ? res.data.modules.split(',').map(i => String(i)) : [];

                    this.formData = res.data;

                    this.tablecolumnsFields = [];
                    var tableColumnsStr = res.data.tablecolumns;

                    var columns = tableColumnsStr.split('_;');

                    columns.forEach(element => {
                        var items = element.split('_,');
                        var temp = {
                            label: items[0],
                            value: items[1],
                            type: items[2]
                        }

                        this.tablecolumnsFields.push(temp);
                    });

                }
            })
        }
    },
    data() {
        return {
            saving: false,
            formData: {
                databasetype: 'Mysql'
            },
            rules: {
                databasetype: [
                    { required: true, message: '请选择数据库类型', trigger: 'blur' },
                ],
                code: [
                    { required: true, message: '请填写CODE', trigger: 'blur' },
                ],
                modules: [
                    { required: true, message: '请选择功能', trigger: 'blur' },
                ],
                tablecolumns: [
                    { required: true, message: '请添加字段', trigger: 'blur' },
                ],
                tableName: [
                    { required: true, message: '请填写表名', trigger: 'blur' },
                ],
            },

            tablecolumnsFields: [
            ],
            tablecolumnsStr: '',
            columnTypes: [
                { label: '文本', value: 'text' },
                { label: '日期', value: 'date' },
                { label: '图片', value: 'image' },
            ],

        }
    },
    methods: {
        onSave() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.submit();
                } else {
                    return false;
                }
            });
        },
        submit() {

            this.tablecolumnsStr = '';

            if (this.tablecolumnsFields.length > 0) {

                var templist = [];

                this.tablecolumnsFields.forEach(item => {
                    if (item.label && item.value) {
                        var tempItem = item.label + '_,' + item.value + '_,' + item.type;
                        templist.push(tempItem);
                    }
                })

                if (templist.length > 0) {

                    this.tablecolumnsStr = templist.join('_;');

                    this.formData.tablecolumns = this.tablecolumnsStr;

                    var data = JSON.parse(JSON.stringify(this.formData));
                    this.$http.post({
                        url: this.formData.id ? '/queryConfig/update' : '/queryConfig/save',
                        data: data
                    }).then(res => {
                        if (res.success) {
                            this.$message.success('成功');
                            this.$router.go(-1);
                        } else {
                            this.$message.warning('失败')
                        }
                    });
                } else {
                    this.$message.warning('请添加至少一个完整字段')
                }
            } else {
                this.$message.warning('请添加字段')
            }
        },
        addField() {
            this.tablecolumnsFields.push({
                label: '',
                value: '',
                type: 'text',
            });
        },
        removeField(i) {
            if (this.tablecolumnsFields.length > 0) {
                this.tablecolumnsFields.splice(i, 1);
            }
        },
    }
}
</script>
<style lang="less" scoped>
</style>
