<template>
    <el-form ref="form" :model="form" :inline="true"  >
        <el-col  :span="8">
            <el-form-item label="学校名称" >
                <el-input v-model="form.schoolName"  placeholder="请输入学校名称"></el-input>
            </el-form-item>
        </el-col>

        <el-col  :span="8">
            <el-form-item  id="region" >
                <el-select v-model="form.region" placeholder="请选择学校地区">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                </el-select>
            </el-form-item>
        </el-col>

        <el-col  :span="8 ">
            <el-form-item label="学校地址" >
                <el-input v-model="form.schoolAddress"  placeholder="请输入学校地址"></el-input>
            </el-form-item>
        </el-col>

        <el-form-item >
            <el-button-group>
                <el-button type="primary" icon="plus"   @click="handleAddSchool()">添加</el-button>
                <!--<el-button type="primary" icon="delete">删除</el-button>-->
                <el-button type="primary" icon="d-arrow-right">导出</el-button>
                <el-button type="primary" icon="picture ">打印</el-button>
            </el-button-group>
        </el-form-item>
        <el-form-item >
            <el-table :data=getTableData.rows>
                <el-table-column prop="name" label="学校名称" width="150">
                </el-table-column>
                <el-table-column prop="address" label="学校地址" width="150">
                </el-table-column>
                <el-table-column prop="createYear" label="创建日期"   width="150" >
                </el-table-column>
                <el-table-column prop="updatedDate" label="修改日期"   width="150" >
                </el-table-column>
                <el-table-column prop="email" label="邮箱地址"  >
                </el-table-column>
                <el-table-column :context="_self" inline-template  label="操作" width="500">
                    <div>
                        <el-button size="small" type="danger" @click="handleEdit($index, row)">修改</el-button>
                        <el-button size="small" type="danger"  @click="handleDelete($index, row)">删除</el-button>
                        <el-button size="small" type="danger"  @click="handleShow($index, row)">查看</el-button>
                        <el-button size="small" type="danger"  @click="handleTeacher($index, row)">导入老师</el-button>
                        <el-button size="small" type="danger"  @click="handleStudent($index, row)">导入学生</el-button>
                        <el-button size="small" type="danger"  @click="handleClass($index, row)">导入班级</el-button>
                    </div>
                </el-table-column>
            </el-table>
        </el-form-item>
        <el-form-item>
            <el-pagination    small v-bind:current-Page="pageIndex"  v-bind:page-size="pageSize"  :total=getTableData.total
                              layout=" pager"
                              v-on:size-change="handleSizeChange" v-on:current-change="handleCurrentChange">
            </el-pagination>
        </el-form-item>
        <el-dialog title="添加学校" v-model="showOperateManifest">
            <el-form label-position="top" :model="dialogForm" class="demo-form-stacked"   ref="dialogForm"  :rules="rules">
                <el-form-item label="学校名称"  prop="name">
                    <el-input v-model="dialogForm.name"></el-input>
                </el-form-item>
                <el-form-item label="学校地址"  prop="address">
                    <el-input v-model="dialogForm.address"></el-input>
                </el-form-item>
                <el-form-item label="地区编号" prop="area">
                    <el-input v-model="dialogForm.area" ></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" v-on:click="save">确 定</el-button>
                <el-button type="primary" v-on:click="cancel">取 消</el-button>
            </div>
        </el-dialog>

    </el-form>
</template>

<script>
    import {mapGetters, mapActions} from 'vuex'
    export default {
        data () {
            return {
                dialogForm:{
                },
                rules: {
                    name: [
                        { required: true, message: '请输入学校名称', trigger: 'blur' },
                    ],
                    address: [
                        { required: true, message: '请输入学校地址', trigger: 'change' }
                    ],
                    area: [
                        { required: true, message: '请选择地区编号', trigger: 'change' }
                    ],
                },
                form:{
                    schoolName:"",
                    schoolAddress:"",
                    schoolAddress:"",
                    region:[],
                    jsonStr:{}
                },
                pageIndex:1,
                pageSize:5,
                netVariables:{},
                showOperateManifest:false,
                isAdd:true
            }
        },
        created: function () {

        },
        mounted: function () {
            this.pageIndex=-1;
            this.changeTable();
        },
        computed: {
            ...mapGetters(
                    ["getTableData"])
        },
        methods: {
            ...mapActions(
                    ["getTableDataAction","addSchoolAction","updateSchoolAction","deleteSchoolAction"]),
            handleAddSchool() {
                this.isAdd=true;
                this.showOperateManifest = true;
                this.dialogForm={
                    name:"test",
                    address:"222",
                    area:"112234",
                };
            },
            handleEdit(index, row) {
                this.isAdd=false;
                this.showOperateManifest = true;
                this.dialogForm.id=row.id;
                this.dialogForm.name=row.name;
                this.dialogForm.address=row.address;
                this.dialogForm.area=row.area;
            },
            handleDelete(index, row) {
                this.$confirm("是否删除？", "警告", { type: "warning" })
                        .then(() => {
                            var netVariables={id:row.id};
                            this.deleteSchoolAction (netVariables).then((requestData) => {
                                if(requestData!=null&&requestData.code=="1") {
                                    this.$message("获取列表错误！");
                                }
                                else {
                                    this.$message("获取列表成功！"+requestData);
                                    this.changeTable();
                                }
                            });
                        });
            },
            handleShow(index, row) {
                console.log(index, row);
            },
            handleTeacher(index, row) {
                console.log(index, row);
            },
            handleStudent(index, row) {
                console.log(index, row);
            },
            handleClass(index, row) {
                console.log(index, row);
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize=val;
                this.changeTable();
            },
            handleCurrentChange(val) {
                this.pageIndex=val;
                this.changeTable();
            },
            save: function () {
                var netVariables={};
                netVariables.jsonStr= JSON.stringify(this.dialogForm);;
                console.log("jsonStr2！"+netVariables.jsonStr);
                if(this.isAdd==true)
                {
                    this.addSchoolAction (netVariables).then((requestData) => {
                        if(requestData==null)
                            return;
                        if(requestData!=null&&requestData.code=="1") {
                            this.$message("新建学校失败！");
                        }
                        else {
                            this.$message("新建学校成功！");
                            this.dialogForm={};
                            this.showOperateManifest = false;
                            this.changeTable();
                        }
                    });
                }
                else{
                    this.updateSchoolAction (netVariables).then((requestData) => {
                        if(requestData==null)
                            return;
                        if(requestData!=null&&requestData.code=="1") {
                            this.$message("更新学校失败");
                        }
                        else {
                            this.$message("更新学校成功");
                            this.dialogForm={};
                            this.showOperateManifest = false;
                            this.changeTable();
                        }
                    });
                }

            },
            cancel: function () {
                this.dialogForm={};
                this.showOperateManifest = false;
            },
            changeTable(){
                this.netVariables.page=this.pageIndex;
                this.netVariables.rows=this.pageSize;
                this.netVariables.orderby="name";
                this.getTableDataAction (this.netVariables).then((requestData) => {
                    if(requestData!=null&&requestData.code=="1") {
                        this.$message("获取列表错误！");
                    }
                    else {
                        this.$message("获取列表成功！"+requestData);
                    }
                });
            }
        }
    }
</script>
<style>
</style>