<style>
    .btn-d-cancel {
        border: 1px #cfd4d7 solid;
        background: #cfd4d7;
        color: #fff;
    }
</style>

<template>
    <div class="container resource" style="min-height: 490px;">

        <div class="pop-banner clearfix">
            <!--<form class="search-bar">
                <div class="search-btn" v-on:click="getData('search')">
                    <input type="submit" value="搜索">
                </div>
                <input type="text" v-model="search.searchtxt"
                       placeholder="输入关键字" style="color: #373737;">
            </form>-->
            <div class="operate-btns">
                <a href="javascript:;" class="fbtn fb-add" v-show="!addrow"
                   v-on:click="addrow=!addrow">添加</a>
                <a href="javascript:void(0)" class="fbtn fb-save"
                   v-show="addrow" v-on:click="add()">保存</a>
                <a href="javascript:;" class="fbtn fb-refresh"
                   v-on:click="getData('refresh')">刷新</a>
            </div>
            <h3 class="current-module">数据字典</h3>
        </div>

        <!-- start-->
        <div class="pd-form fast-search-form">
            <div class="group-row">
                <div class="form-group">
                    <label for="in1" class="label">类型值</label>
                    <div class="control">
                        <input type="text" value="" id="in1" placeholder='类型值' v-model="search.typevalue" v-rule>
                    </div>
                </div>
                <div class="form-group">
                    <label for="in3" class="label">类型说明</label>
                    <div class="control">
                        <input type="text" value="" id="in3" placeholder='类型说明' v-model="search.typeintroduction" v-rule>
                    </div>
                </div>
            </div>
            <div class="group-row">
                <div class="form-group">
                    <label for="in4" class="label">数据值说明</label>
                    <div class="control">
                        <input type="text" value="" id="in4" placeholder='数据值说明' v-model="search.dataintroduction" v-rule>
                    </div>
                </div>
                <div class="form-group">
                    <label class="label">状态</label>
                    <div class="control control-filtering control-filtering-green w600">
                        <a class="option" :class="{'all active':search.state==''}" href="javascript:void(0)" @click="search.state=''">全部</a>
                        <a class="option" href="javascript:;" :class="{'all active':search.state=='n'}" v-on:click="search.state='n'">无效</a>
                        <a class="option" href="javascript:;" :class="{'all active':search.state=='y'}" v-on:click="search.state='y'">有效</a>
                    </div>
                </div>
            </div>
            <div class="group-row t-right">
                <button class="fast-search-form-btn btn-d btn-d-lg btn-d-activate btn-d-circle" @click="getData(true)">查 询</button>
            </div>
        </div>
        <!--basic-user-info start-->
        <table class="itable basic-user-info data-table">
            <thead>
            <tr>
                <th class="w50">序号</th>
                <th class="w150">类型值</th>
                <th class="w110">类型说明</th>
                <th class="w80">参数值</th>
                <th class="w130">数据值说明</th>
                <th class="w100">数据值序号</th>
                <th class="w80">状态</th>
                <th class="w150">备注</th>
                <th class="">操作</th>
            </tr>
            </thead>
            <tbody v-show="addrow">
            <tr>
                <td>
                </td>
                <td class="td-yesorno select-style padd_5">
                    <input type="text" v-model="newobj.typevalue">
                </td>
                <td class="td-code padd_5">
                    <input type="text" v-model="newobj.typeintroduction"></td>
                <td class="td-name padd_5">
                    <input type="text" v-model="newobj.datavalue"></td>
                <td class="td-type select-style padd_5">
                    <input type="text" v-model="newobj.dataintroduction">
                </td>
                <td class="td-day padd_5">
                    <input type="text" v-model="newobj.dataseqno">
                </td>
                <td class="td-type select-style padd_5">
                    <select-ui :list="statusselects" :empty="false"
                               :selected.sync="newobj.state">
                    </select-ui>
                </td>
                <td class="td-type select-style padd_5">
                    <input type="text" v-model="newobj.memo">
                </td>
                <td class="td-type select-style">
                </td>
            </tr>
            </tbody>
            <tbody v-for="item in list">
            <tr v-if="item.edit==1">
                <td>
                </td>
                <td class="td-yesorno select-style padd_10">
                    <input type="text" v-model="item.typevalue">
                </td>
                <td class="td-code padd_10">
                    <input type="text" v-model="item.typeintroduction">
                </td>
                <td class="td-name padd_10">
                    <input type="text" v-model="item.datavalue">
                </td>
                <td class="td-type select-style padd_10">
                    <input type="text" v-model="item.dataintroduction">
                </td>
                <td class="td-day padd_10">
                    <input type="text" v-model="item.dataseqno">
                </td>
                <td class="td-type select-style padd_10">
                    <select-ui :list="statusselects" :empty="false"
                               :selected.sync="item.state">
                    </select-ui>
                </td>
                <td class="td-type select-style padd_10">
                    <input type="text" v-model="item.memo">
                </td>
                <td class="td-type select-style">
                    <a class="btn-d btn-d-activate" href="javascript:"
                       v-on:click="save($index)">
                        保存</a>
                    <a class="btn-d btn-d-cancel" href="javascript:"
                       v-on:click="edit($index)">
                        取消</a>
                </td>
            </tr>
            <tr :class="{'tr_sty_red':item.status==0}" v-else>
                <td>{{$index + 1}}</td>
                <td>{{item.typevalue}}</td>
                <td>{{item.typeintroduction}}</td>
                <td>{{item.datavalue}}</td>
                <td>{{item.dataintroduction}}</td>
                <td>{{item.dataseqno}}</td>
                <td>{{item.state | ft-state}}</td>
                <td>{{item.memo}}</td>
                <td>
                    <a class="btn-d btn-d-activate" href="javascript:"
                       v-on:click="edit($index)">
                        修改</a>
                    <a class="btn-d btn-d-activate" href="javascript:"
                       v-on:click="copy($index)">
                        复制</a>
                    <a class="btn-d btn-d-red" href="javascript:"
                       v-on:click="remove($index)">
                        删除</a>
                </td>
            </tr>

            </tbody>
        </table>

        <pagination
            @page-change="getData"
            :class="['m-20-0']"
            :page-no.sync="search.page"
            :total-pages.sync="search.totalPages"></pagination>

        <!--basic-user-info end-->

    </div>
</template>
<script>
    module.exports = {
        data: function () {
            return {
                list: [
                    {
                        id: 1, type: 'SYSRATYPE', typevalue: '系统参数类型', number: 1,
                        datanumber: '业务类', value: '1', status: 1, note: ''
                    }
                ],
                search: {
                    size: 10,
                    page: 1,
                    totalPages: 0,
                    typevalue: '',
                    typeintroduction:'',
                    dataintroduction:'',
                    state:''
                },
                newobj: {
                    dataintroduction: '',
                    dataseqno: '',
                    datavalue: '',
                    memo: '',
                    state: 'y',
                    typeintroduction: '',
                    typevalue: ''
                }, editlist: [], addrow: 0,
                statusselects: [
                    {value: 'n', label: '无效'}, {value: 'y', label: '有效'}
                ]
            }
        }, methods: {
            getData: function (casetxt) {//请求数据
                if (casetxt) {
                    this.search.page = 1;
                }
                //this.search.searchtxt = this.search.searchtxt.trim();
                Ajax.post('/systemdata/distributor/datadict/getAll',
                    this.search).then(function (res) {
                    var result = res.data.data;

                    if (result.list) {
                        this.$set('list', result.list);
                        this.search.totalPages = result.totalPages || 0;
                    }
                }.bind(this))
            }, edit: function (index, num) {//修改  状态
                var obj = Object.assign({}, this.list[index],
                    {edit: this.list[index].edit ? 0 : 1});
                if (obj.copy) {
                    this.list.splice(index, 1);
                    return;
                }
                if (obj.edit == 1) {
                    this.editlist[index] = Object.assign({}, obj);
                } else {
                    obj = this.editlist[index];
                    obj.edit = 0;
                }
                this.$set('list[' + index + ']', obj)
            }, save: function (index) {//单个保存
                var obj = Object.assign({}, this.list[index]);
                if (obj.copy) {//如果是复制的而添加
                    Ajax.post('/systemdata/distributor/datadict/addDict', obj).then(function (res) {
                        var result = res.data;

                        if (result.errorCode == 0) {
                            this.list[index].edit = 0;
                            this.list[index].copy = 0;
                        } else {
                            layer.msg(result.message);
                        
                        }
                    }.bind(this))
                    return;
                }
                obj.olddatavalue = this.editlist[index].datavalue;
                obj.oldtypevalue = this.editlist[index].typevalue;

                if (obj.id == undefined) {
                    Ajax.post('/systemdata/distributor/datadict/updateDict',
                        obj).then(function (res) {
                        var result = res.data;

                        if (result.errorCode == 0) {
                            //obj.id=result.id;
                            obj.edit = 0;
                            this.$set('list[' + index + ']', obj)
                        } else {
                            alert(result.message);
                        }
                    }.bind(this))
                    return;
                }
                Ajax.post('/systemdata/dataDictionary', {}).then(function (res) {
                    var result = res.data;

                    if (result.errorCode == 0) {
                        obj.edit = 0;
                        this.$set('list[' + index + ']', obj)
                    } else {
                        layer.msg(result.message);
                    }
                }.bind(this))
            }, remove: function (index) {//删除
                var obj = Object.assign({}, this.list[index]);

                this.MessageBox({
                    title: '提示',
                    message: '是否删除',
                    type: 'success',
                    showCancelButton: true
                }).then(function (action) {
                    if (action == "confirm") {
                        var id = this.list[index].id;
                        Ajax.post('/systemdata/distributor/datadict/delDict', obj).then(function (res) {
                            var result = res.data;

                            if (result.errorCode == 0) {
                                this.list.splice(index, 1)
                            }
                        }.bind(this))
                    }
                }.bind(this));
            }, add: function () {//添加
                var obj = Object.assign({}, this.newobj);
                if (!obj.typevalue) {
                    layer.msg('类型值不能为空');
                    return;

                }
                if (!obj.typeintroduction) {
                    layer.msg('类型说明不能为空');
                    return;

                }
                if (!obj.datavalue) {
                    layer.msg('参数值不能为空');
                    return;

                }
                if (!obj.dataintroduction) {
                    layer.msg('数据值说明不能为空');
                    return;

                }
                Ajax.post('/systemdata/distributor/datadict/addDict', obj).then(function (res) {
                    var result = res.data;

                    if (result.errorCode == 0) {
                        //this.newobj.id=result.id;
                        this.list.unshift(this.newobj);
                        this.newobj = Object.assign({}, this.newobj, {
                            dataintroduction: '',
                            dataseqno: '',
                            datavalue: '',
                            memo: '',
                            state: 'y',
                            typeintroduction: '',
                            typevalue: ''
                        });
                        this.addrow = 0;
                    } else {
                        layer.msg(result.message);
                    }
                }.bind(this))
            }, copy: function (index) {
                var obj = {
                    dataintroduction: '',
                    dataseqno: '',
                    datavalue: '',
                    memo: '',
                    state: '',
                    typeintroduction: '',
                    typevalue: ''
                };

                obj.typevalue = this.list[index].typevalue;
                obj.typeintroduction = this.list[index].typeintroduction;
                obj.edit = 1;
                obj.copy = 1;
                this.list.splice(index + 1, 0, obj);

            }
        }, route: {
            activate: function () {
                this.getData();
            }
        },
        watch: {
            'search.state': function() {
                var self = this;
                self.getData(true);
            }

        }
    }
</script>