<template>
    <div class="app-container">
        <el-card style="margin-bottom: 15px;">
            <el-form ref="form" :model="form" label-width="100px">
                <el-form-item label="数据库名称">
                    <el-input v-model="form.dataBaseName" style="width: 600px;"></el-input>
                </el-form-item>
                <el-form-item label="数据表名称">
                    <el-input v-model="form.tableName" style="width: 600px;"></el-input>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card>
            <div class="titleitem">
                <span>数据表字段</span>
            </div>
            <el-table :data="experienceData" stripe style="width: 100%">
                <el-table-column prop="fieldName" label="字段名称" width="200">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.fieldName"></el-input>
                    </template>
                </el-table-column>

                <el-table-column prop="fieldType" label="字段类型" width="200">
                    <template slot-scope="scope">
                        <el-select v-model="scope.row.fieldType">
                            <el-option label="int" value="int"></el-option>
                            <el-option label="varchar" value="varchar"></el-option>
                        </el-select>
                    </template>

                </el-table-column>

                <el-table-column prop="fieldLength" label="长度" width="200">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.fieldLength"></el-input>
                    </template>
                </el-table-column>

                <el-table-column prop="isNull" label="不是null" width="200">
                    <template slot-scope="scope">
                        <el-radio-group v-model="scope.row.isNull">
                            <el-radio :label="true">是</el-radio>
                            <el-radio :label="false">否</el-radio>
                        </el-radio-group>
                    </template>
                </el-table-column>



                <el-table-column prop="isPrimary" label="键" width="200">
                    <template slot-scope="scope">
                        <el-radio-group v-model="scope.row.isPrimary">
                            <el-radio :label="true">是</el-radio>
                            <el-radio :label="false">否</el-radio>
                        </el-radio-group>
                    </template>
                </el-table-column>

                <el-table-column prop="isAuto" label="自增" width="200">
                    <template slot-scope="scope">
                        <el-radio-group v-show="scope.row.isPrimary" v-model="scope.row.isAuto">
                            <el-radio :label="true">是</el-radio>
                            <el-radio :label="false">否</el-radio>
                        </el-radio-group>
                    </template>
                </el-table-column>

                <el-table-column prop="fieldDescription" label="字段描述" width="200">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.fieldDescription"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="operate" label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" type="success" icon="el-icon-save"
                            @click="handlesaveExperience(scope.$index, scope.row)">保存
                        </el-button>
                        <el-button size="mini" type="danger" icon="el-icon-delete"
                            @click="handleDeleteExperience(scope.$index, scope.row)">删除
                        </el-button>

                    </template>
                </el-table-column>
            </el-table>
            <div>
                <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddExperienceline">新增字段
                </el-button>
            </div>
        </el-card>

        <div style="margin-top: 15px;">
            <el-button @click="addSqlServer" type="primary">添加</el-button>
        </div>
    </div>
</template>

<script>
import { createSqlServerDataBase } from "@/api/datasheet/index"
export default {
    name: "SqlServer",
    data() {
        return {
            form: {
                dataBaseName: '',
                tableName: '',
            },
            experienceData: [{
                fieldName: '',
                fieldType: '',
                fieldLength: undefined,
                isNull: false,
                isPrimary: false,
                fieldDescription: '',
                isAuto:false
            },],
            dataBase: {}

        }
    },
    methods: {
        //增加经验行
        handleAddExperienceline() {
            if (this.experienceData == undefined) {
                this.experienceData = new Array();
            }
            let obj = {
                fieldName: '',
                fieldType: '',
                fieldLength: undefined,
                isNull: false,
                isPrimary: false,
                fieldDescription: '',
                isAuto:false
            };

            this.experienceData.push(obj);
        },
        //保存经验行
        handlesaveExperience(a, b) {
            console.log(a + b);
            console.log(b);
        },
        //删除经验行
        handleDeleteExperience(index) {
            console.log(index);
            this.experienceData.splice(index, 1)
        },
        addSqlServer() {
            let query = {
                dataBaseName: this.form.dataBaseName,
                tableName: this.form.tableName,
                field: this.experienceData
            }
            createSqlServerDataBase(query).then(res => {
                this.$modal.msgSuccess(res.msg);
                if (res.code === 200) {
                    this.visible = false;
                    this.$emit("ok");
                    Object.keys(this.form).forEach(key => (this.form[key] = ''));
                    this.experienceData = [{
                        fieldName: '',
                        fieldType: '',
                        fieldLength: undefined,
                        isNull: false,
                        isPrimary: false,
                        fieldDescription: '',
                        isAuto:false
                    }]
                }
            }).catch(err=>{
                console.log(err);
            })
        }



    }
}
</script>