<div id="app" v-cloak>
    <el-card class="box-card">
        <el-form :inline="true" :model="vm" ref="vm" label-width="90px">
            <el-form-item label="字典名称">
                <el-input disabled v-model="vm.dictName" clearable size="small"></el-input>
            </el-form-item>
            <el-form-item label="字典键" prop="key">
                <el-input v-model="vm.key" clearable size="small" placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="字典值" prop="value">
                <el-input v-model="vm.value" clearable size="small" placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="是否有效" prop="valid">
                <el-select v-model="vm.valid" size="small" placeholder="">
                    <el-option label="所有" value=""></el-option>
                    <el-option label="有效" value="true"></el-option>
                    <el-option label="无效" value="false"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" size="small" icon="el-icon-search" @click="onSearch">搜索</el-button>
                <el-button type="warning" size="small" icon="el-icon-refresh-left" @click="onReset('vm')">重置</el-button>
            </el-form-item>
        </el-form>
    </el-card>

    <el-card class="box-card">
        <el-row>
            <el-col :span="12">
                <el-button type="success" size="small" icon="el-icon-plus" @click="onAction(['create',''])">新增</el-button>

                <el-button type="warning" size="small" icon="el-icon-download">导出</el-button>

                <el-dialog class="form" :title="form.title" :visible.sync="form.dialog">
                    <el-form :model="form":inline="true" :rules="formRules" ref="form" label-width="90px">
                        <el-form-item label="字典键" prop="dictName">
                            <el-input size="small" v-model="form.key"></el-input>
                        </el-form-item>
                        <el-form-item label="字典值" prop="dictCode">
                            <el-input size="small" v-model="form.value"></el-input>
                        </el-form-item>
                        <el-form-item label="排序值" prop="dictCode">
                            <el-input-number size="small" v-model="form.sort" :min="0" :max="10000"
                                             label="描述文字"></el-input-number>
                        </el-form-item>
                        <el-form-item label="是否有效" prop="valid">
                            <el-switch size="small" v-model="form.valid"></el-switch>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                        <el-button size="small" @click="form.dialog = false">取消</el-button>
                        <el-button size="small" type="primary" @click="onAction(['save',''])">保存</el-button>
                    </span>
                </el-dialog>
            </el-col>

            <el-col :span="12">
                <el-button-group style="float: right;">
                    <el-tooltip effect="dark" content="Excel模板下载" placement="bottom">
                        <el-button size="small" icon="el-icon-date"></el-button>
                    </el-tooltip>
                    <el-tooltip effect="dark" content="Excel导入" placement="bottom">
                        <el-button size="small" icon="el-icon-upload"></el-button>
                    </el-tooltip>
                    <el-tooltip effect="dark" content="批量删除" placement="bottom">
                        <el-button size="small" icon="el-icon-delete" @click="onBitchDelete"></el-button>
                    </el-tooltip>
                    <el-tooltip effect="dark" content="刷新" placement="bottom">
                        <el-button size="small" icon="el-icon-refresh" @click="onFind"></el-button>
                    </el-tooltip>
                </el-button-group>
            </el-col>
        </el-row>

        <el-table
                @selection-change="onSelectionChange"
                empty-text="无数据"
                :data="result"
                size="small"
                style="width: 100%">
            <el-table-column
                    align="center"
                    type="selection"
                    width="50">
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="id"
                    label="主键"
                    width="140">
            </el-table-column>
            <el-table-column
                    align="center"
                    width="80"
                    label="是否有效">
                <template slot-scope="scope">
                    <el-tag size="mini" v-if="scope.row.valid">有效</el-tag>
                    <el-tag size="mini" type="danger" v-if="!scope.row.valid">无效</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="key"
                    label="字典键">
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="value"
                    label="字典值">
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="sort"
                    label="排序">
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="createTime"
                    label="创建时间">
            </el-table-column>
            <el-table-column
                    align="center"
                    fixed="right"
                    width="120"
                    label="操作">
                <template slot-scope="scope">
                    <el-dropdown size="mini" split-button type="primary" @click="onAction(['edit',scope.row])"
                                 @command="onAction">
                        <i class="el-icon-edit"></i>编辑
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item :command="['delete',scope.row]" icon="el-icon-delete">删除
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
                background
                v-if="vm.totalCount > vm.pageSize"
                style="margin-top: 10px"
                @current-change="onPage"
                :current-page="vm.pageNumber"
                :page-size="vm.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="vm.totalCount">
        </el-pagination>
    </el-card>
</div>
<style>
    #app {
        padding: 10px;
    }

    .box-card {
        margin: 10px;
    }

    .form .el-dialog{
        width: 700px;
    }

    .form .el-dialog .el-form-item__content {
        width: 220px;
    }

</style>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            vm: {
                id: '',
                dictId: location.getParam("dictId"),
                dictName: '',
                key: '',
                value: '',
                valid: '',
                pageNumber: 1,
                pageSize: 10,
                totalCount: 0
            },
            select: [],
            result: [],
            form: {
                title: "",
                dialog: false,
                id: '',
                dictId: location.getParam("dictId"),
                key: '',
                value: '',
                sort: 0,
                valid: true
            },
            formRules: {
                key: [
                    {required: true, message: '请输入字典名称', trigger: 'blur'},
                    {min: 1, max: 50, message: '长度在 3 到 5 个字符', trigger: 'blur'}
                ],
                value: [
                    {required: true, message: '请输入字典代码', trigger: 'blur'},
                    {min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur'}
                ],
            },
        },
        methods: {
            onSearch: function () {
                this.vm.pageNumber = 1;
                this.onFind();
            },
            onReset: function (form) {
                this.$refs[form].resetFields();
                nav.w('重置成功');
            },
            onFind: function () {
                ajax.dictItemFind(this.vm).then(function (response) {
                    if (response.errors.length > 0) {
                        nav.e(response.errors[0].message);
                    } else {
                        this.result = response.result;
                        this.vm.totalCount = Number(response.totalCount);
                    }
                }.bind(this))
            },
            onPage: function (pageNumber) {
                this.vm.pageNumber = pageNumber;
                this.onFind();
            },
            onSelectionChange: function (select) {
                this.select = select;
            },
            onBitchDelete: function () {
                if (this.select.length == 0) {
                    nav.w("至少选中一项");
                } else {
                    this.$confirm('将删除已选择的项, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(function () {
                        for (var i = 0; i < this.select.length; i++) {
                            var obj = this.select[i];
                            ajax.dictItemDelete({id: obj.id}).then(function (response) {
                                if (response.errors.length > 0) {
                                    nav.e(response.errors[0].message);
                                } else {
                                    for (var j = 0; j < this.select.length; j++) {
                                        if (this.select[j].id == obj.id) {
                                            this.select.splice(j, 1);
                                        }
                                    }
                                    if (this.select.length == 0) {
                                        nav.s("删除成功")
                                        this.onFind();
                                    }
                                }
                            }.bind(this))
                        }
                    }.bind(this)).catch(function (action) {

                    });
                }
            },
            getDict: function () {
                ajax.dictGet({id: location.getParam("dictId")}).then(function (response) {
                    if (response.errors.length > 0) {
                        nav.e(response.errors[0].message);
                    } else {
                        this.vm.dictName = response.dict.dictName;
                    }
                }.bind(this))
            },
            onAction: function (arg) {
                const action = arg[0];
                const item = arg[1];
                switch (action) {
                    case "create":
                        this.form.title = '新增字典项';
                        this.form.id = '';
                        this.form.key = '';
                        this.form.value = '';
                        this.form.sort = this.vm.totalCount;
                        this.form.valid = true;
                        this.form.dialog = true;
                        break;
                    case "save":
                        this.$refs['form'].validate(function (valid) {
                            if (valid) {
                                if (this.form.id) {
                                    ajax.dictItemUpdate(this.form).then(function (response) {
                                        if (response.errors.length > 0) {
                                            nav.e(response.errors[0].message);
                                        } else {
                                            this.onFind();
                                            this.form.dialog = false;
                                        }
                                    }.bind(this))
                                } else {
                                    ajax.dictItemCreate(this.form).then(function (response) {
                                        if (response.errors.length > 0) {
                                            nav.e(response.errors[0].message);
                                        } else {
                                            this.onFind();
                                            this.form.dialog = false;
                                        }
                                    }.bind(this))
                                }
                            } else {
                                return false;
                            }
                        }.bind(this));
                        break;
                    case "edit":
                        this.form.title = '编辑字典项';
                        this.form.id = item.id;
                        this.form.key = item.key;
                        this.form.value = item.value;
                        this.form.valid = item.valid;
                        this.form.sort = item.sort;
                        this.form.rowVersion = item.rowVersion;
                        this.form.dialog = true;
                        break;
                    case "delete":
                        this.$confirm('将删除该项, 是否继续?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(function () {
                            ajax.dictItemDelete({id: item.id}).then(function (response) {
                                if (response.errors.length > 0) {
                                    nav.e(response.errors[0].message);
                                } else {
                                    nav.s("删除成功")
                                    this.onFind();
                                }
                            }.bind(this));
                        }.bind(this));
                        break;
                }
            }
        },
        filters: {},
        created: function () {
        },
        mounted: function () {
            this.getDict();
            this.onFind();
        },
        watch: {}
    })
</script>
