<template>
    <div class="user dict">
        <Card :bordered="false" dis-hover>
            <Split v-model="split1">
                <div slot="left" class="dict-split">
                    <div class="dict-in">字典索引项</div>
                    <Button
                        class="dict-in-btn"
                        type="default"
                        customIcon="iconfont iconxinjian"
                        @click="onNewSmall"
                        >{{ $t("page.common.new") }}</Button
                    >
                    <ul class="left-list">
                        <li v-for="(item,index) in dictreeData" :key="item.id" @click="treeClick(item,index)"
                             :class="currentIndex==index?'active':''"
                            @mouseover="roleOver($event,item)"
                            @mouseout="roleOut($event,item)">
                            <span class="ico-name">{{item.name}}</span>
                            <div class="ico-all" v-if="item.flag">
                                <span class="ico-c"><i class="icon iconfont iconchakan" @click="onViewBtnSmall(item.id)"></i></span>
                                <span class="ico-c"><i class="icon iconfont iconbianji" @click="onEditBtnSmall(item.id)"></i></span>
                                <span class="ico-c"><i class="icon iconfont iconshanchu" @click="onDeleteBtnSmall(item.id,index)"></i></span>
                            </div>
                        </li>
                    </ul>
                </div>
                <div slot="right" class="split-right">
                    <bingo-list
                        :columns="columns"
                        :pageSetting="pageSetting"
                        :page="true"
                        :isAdvanceTable="false"
                        :showBtnType="'all'"
                        :showBtnOutNum="2"
                        :showNewBtn="true"
                        :toolbarNew="true"
                        ref="bingoList"
                        :searchList="searchList"
                        :data="tableData"
                        :queryData="queryData"
                        :isSearch="true"
                        :isSearchAdvance="true"
                        :showSwitchBtn="false"
                        :isCustomData="true"
                        :dataApi="Api"
                        @get-special-type="getSpecialType"
                        @on-query-submit="querySubmit"
                        @on-add-new="onAddNew"
                        @on-edit-btn="onEditBtn"
                        @get-data="getData"
                    >
                    <template slot="searchType">
                        <div id="select">
                            <Select transfer v-model="dictGroup" placeholder="请选择字典分组" @on-change="onChange">
                                <Option v-for="item in dictGroupList" :key="item.value" :value="item.value">{{item.label}}</Option>
                            </Select>
                        </div>
                    </template>
                    <!-- 高级搜索 -->
                        <template slot="queryForm">
                            <!-- <bingo-grid-item>
                                <bingo-form-item label="字典编码" prop="dictCode">
                                    <Input
                                        v-model="queryData.dictCode"
                                        placeholder="请输入字典编码"
                                    />
                                </bingo-form-item>
                            </bingo-grid-item>
                            <bingo-grid-item>
                                <bingo-form-item label="当前字典项编码" prop="dictCurType">
                                    <Input
                                        v-model="queryData.dictCurType"
                                        placeholder="请输入当前字典项编码"
                                    />
                                </bingo-form-item>
                            </bingo-grid-item> -->

                            <!-- <bingo-grid-item>
                                <bingo-form-item label="父级字典项编码" prop="dictTopType">
                                    <Input
                                        v-model="queryData.dictTopType"
                                        placeholder="请输入父级字典项编码"
                                    />
                                </bingo-form-item>
                            </bingo-grid-item> -->
                            <bingo-grid-item>
                                <bingo-form-item label="字典名字" prop="name">
                                    <Input
                                        v-model="queryData.name"
                                        placeholder="请输入字典名字"
                                    />
                                </bingo-form-item>
                            </bingo-grid-item>
                            <bingo-grid-item>
                                <bingo-form-item label="字典值" prop="dictValue">
                                    <Input
                                        v-model="queryData.dictValue"
                                        placeholder="请输入字典值"
                                    />
                                </bingo-form-item>
                            </bingo-grid-item>
                            <bingo-grid-item>
                                <bingo-form-item label="字典类型" prop="dictType">
                                    <Input
                                        v-model="queryData.dictType"
                                        placeholder="请输入字典类型"
                                    />
                                </bingo-form-item>
                            </bingo-grid-item>
                            <bingo-grid-item>
                                <bingo-form-item label="字典分组" prop="dictGroup">
                                    <Select transfer v-model="queryData.dictGroup" placeholder="请选择字典分组">
                                        <Option v-for="item in dictGroupList" :key="item.value" :value="item.value">{{item.label}}</Option>
                                    </Select>
                                </bingo-form-item>
                            </bingo-grid-item>
                            <bingo-grid-item>
                                <bingo-form-item label="字典备注" prop="remark">
                                    <Input
                                        v-model="queryData.remark"
                                        placeholder="请输入字典备注"
                                    />
                                </bingo-form-item>
                            </bingo-grid-item>
                        </template>
                    </bingo-list>
                </div>
            </Split>
        </Card>
        <Modal v-model="isShowNewForm" :title="isAdd==true?'新建':'修改'" @on-ok="onOk" :width="900">
            <Form ref="formAdd" :model="formAdd" label-position="right" :label-width="90">
                <Row>
                    <Col :span="12">
                        <bingo-form-item label="字典名字">
                            <Input type="text" v-model="formAdd.name" placeholder="请输入字典名字">
                            </Input>
                        </bingo-form-item>
                    </Col>
                    <Col :span="12">
                        <bingo-form-item label="字典编码">
                            <Input type="text" v-model="formAdd.dictCode" placeholder="请输入字典编码">
                            </Input>
                        </bingo-form-item>
                    </Col>
                    <Col :span="12">
                        <bingo-form-item label="字典值">
                            <Input type="text" v-model="formAdd.dictValue" placeholder="请输入字典值">
                            </Input>
                        </bingo-form-item>
                    </Col>
                    <Col :span="12">
                        <bingo-form-item label="当前字典项编码">
                            <Input type="text" v-model="formAdd.dictCurType" placeholder="请输入当前字典项编码">
                            </Input>
                        </bingo-form-item>
                    </Col>
                    <Col :span="12">
                        <bingo-form-item label="父级字典项编码">
                            <TreeSelect
                                transfer
                                v-model="formAdd.dictTopType"
                                :data="dictreeData"
                                :load-data="loadData"
                                placeholder="请选择父级字典项编码"
                            >
                            </TreeSelect>
                        </bingo-form-item>
                    </Col>
                    <Col :span="12">
                        <bingo-form-item label="字典类型">
                            <Input type="text" v-model="formAdd.dictType" placeholder="请输入字典类型">
                            </Input>
                        </bingo-form-item>
                    </Col>
                    <Col :span="12">
                        <bingo-form-item label="字典分组">
                            <Select transfer v-model="formAdd.dictGroup" placeholder="请选择字典分组">
                                <Option v-for="item in dictGroupList" :key="item.value" :value="item.value">{{item.label}}</Option>
                            </Select>
                        </bingo-form-item>
                    </Col>
                    <Col :span="12">
                        <bingo-form-item label="字典备注">
                            <Input type="text" v-model="formAdd.remark" placeholder="请输入字典备注">
                            </Input>
                        </bingo-form-item>
                    </Col>
                </Row>
            </Form>
        </Modal>
        <Modal v-model="isShowNewFormSmall" :title="isAddSmallTitle" @on-ok="onOkSmall" :width="900">
            <Form ref="formAdd" :model="formAddSmall" label-position="right" :label-width="90">
                <Row>
                    <Col :span="12">
                        <bingo-form-item label="字典类型">
                            <Input type="text" v-model="formAddSmall.dictType" placeholder="请输入字典类型">
                            </Input>
                        </bingo-form-item>
                    </Col>
                    <Col :span="12">
                        <bingo-form-item label="字典索引名">
                            <Input type="text" v-model="formAddSmall.name" placeholder="请输入字典索引名">
                            </Input>
                        </bingo-form-item>
                    </Col>
                    <Col :span="12">
                        <bingo-form-item label="字典分组">
                            <Select transfer v-model="formAddSmall.dictGroup" placeholder="请选择字典分组">
                                <Option v-for="item in dictGroupList" :key="item.value" :value="item.value">{{item.label}}</Option>
                            </Select>
                        </bingo-form-item>
                    </Col>
                    <Col :span="12">
                        <bingo-form-item label="备注">
                            <Input type="text" v-model="formAddSmall.remark" placeholder="请输入备注">
                            </Input>
                        </bingo-form-item>
                    </Col>
                    <!-- <Col :span="12">
                        <FormItem label="数据编号">
                            <Input type="text" v-model="formAddSmall.sn" placeholder="请输入数据编号" disabled>
                            </Input>
                        </FormItem>
                    </Col> -->
                </Row>
            </Form>
        </Modal>
    </div>
</template>
<script>
    import bingoList from '@/components/bingo-list';
    import Api from '@/api/platform/dict';
    import ApiTree from '@/api/platform/dicttree';
    import module from '@/mixins/module';
    import util from '@/utils/tool'
    export default {
        name:'plat-dict',
        data () {
            return {
                split1: 0.2,
                columns: [
                    {
                        title: '序号',
                        type: 'index',
                        width: 60,
                        align: 'center',
                        fixed: 'left'
                    },
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center',
                        fixed: 'left'
                    },
                    // {
                    //     title: '当前字典项编码',
                    //     key: 'dictCurType',
                    //     width: 100
                    // },
                    // {
                    //     title: '父级字典项编码',
                    //     key: 'dictTopType',
                    //     width: 100
                    // },
                    {
                        title: '字典名字',
                        key: 'name',
                        minWidth: 100
                    },
                    {
                        title: '字典编码',
                        key: 'dictCode',
                        minWidth: 80
                    },
                    {
                        title: '字典值',
                        key: 'dictValue',
                        minWidth: 160
                    },
                    {
                        title: '字典类型',
                        key: 'dictType',
                        minWidth: 130
                    },
                    {
                        title: '字典分组',
                        key: 'dictGroup',
                        minWidth: 100
                    },
                    {
                        title: '字典备注',
                        key: 'remark',
                        minWidth: 100
                    },
                    {
                        title: '创建人',
                        key: 'creator',
                        minWidth: 110
                    },
                    {
                        title: '创建时间',
                        key: 'createTime',
                        minWidth: 120
                    },
                    {
                        title: '修改人',
                        key: 'modifier',
                        minWidth: 110
                    },
                    {
                        title: '修改时间',
                        key: 'modifyTime',
                        minWidth: 120
                    },
                    {
                        title: '操作',
                        slot: 'action',
                        align: 'center',
                        width: 146
                    }
                ],
                Api: Api,
                pageSetting: {
                    pageNum: 1,
                    pageSize: 20,
                    showSizer: true
                },
                // 搜索的字段
                searchList: [
                    // {
                    //     label: '字典编码',
                    //     value: 'dictCode',
                    //     type: 'input'
                    // },
                    // {
                    //     label: '当前字典项编码',
                    //     value: 'dictCurType',
                    //     type: 'input'
                    // },
                    {
                        label: '字典名字',
                        value: 'name',
                        type: 'input'
                    },
                    {
                        label: '字典值',
                        value: 'dictValue',
                        type: 'input'
                    },
                    // {
                    //     label: '父级字典项编码',
                    //     value: 'dictTopType',
                    //     type: 'input'
                    // },
                    {
                        label: '字典类型',
                        value: 'dictType',
                        type: 'input'
                    },
                    {
                        label: '字典分组',
                        value: 'dictGroup',
                        type: 'select'
                    },
                    // {
                    //     label: '基础数据ID',
                    //     value: 'id',
                    //     type: 'input'
                    // },
                    {
                        label: '字典备注',
                        value: 'remark',
                        type: 'input'
                    }
                ],
                tableData: [],
                queryData: {
                    dictCode: '',
                    dictCurType: '',
                    dictGroup: '',
                    dictTopType: '',
                    dictType: '',
                    dictValue: '',
                    name: '',
                    remark: '',
                    sn: ''
                },
                queryObj: {},
                isShowNewForm: false,
                isShowNewFormSmall: false,
                formAdd: {
                    dictCode: '',
                    dictCurType: '',
                    dictGroup: '',
                    dictTopType: '',
                    dictType: '',
                    dictValue: '',
                    name: '',
                    remark: '',
                    sn: ''
                },
                formAddSmall: {
                    dictType: '',
                    name: '',
                    dictGroup: '',
                    remark: '',
                    sn: ''
                },
                grid: {
                    xl: 12,
                    lg: 13,
                    md: 13,
                    sm: 24,
                    xs: 24
                },
                isAdd: true,
                isAddSmall: 'add',
                dictreeData: [],
                currentIndex: 0,
                isAddSmallTitle: '新建',
                dictType: '',
                dictGroup: '',
                dictGroupList: [
                    {
                        value: 'platform',
                        label: '平台组'
                    },
                    {
                        value: 'product',
                        label: '产品组'
                    },
                    {
                        value: 'custom',
                        label: '自定义组'
                    }
                ]
            };
        },
        created () {
            this.getDicTree();
        },
        mixins: [module],
        watch: {
            isAddSmall (val) {
                if (val == 'add') {
                    this.isAddSmallTitle = '新建';
                } else if (val == 'edit') {
                    this.isAddSmallTitle = '编辑';
                } else if (val == 'view') {
                    this.isAddSmallTitle = '查看'
                }
            }
        },
        methods: {
            // 获取字典索引
            getDicTree () {
                ApiTree.tableList().then(res => {
                    this.dictreeData = res.rows;
                    if (res.rows.length > 0) {
                        this.dictType = res.rows[0].dictType;
                        this.getData()
                    }
                    this.dictreeData.forEach(item => {
                        item.title = item.name;
                        item.value = item.id;
                        item.loading = false;
                        item.selected = false;
                        item.checked = false;
                        item.children = [];
                    })
                })
            },
            // 获取父级字典项
            loadData (item, callback) {
                // 异步加载的方法
                let data = { dictType: item.dictType };
                Api.tableList(data).then(res => {
                    if (res.rows.length > 0) {
                        let array = [];
                        res.rows.forEach((item) => {
                            array.push({
                                title: item.name,
                                value: item.id,
                                expand: false,
                                loading: false,
                                selected: false,
                                checked: false,
                                children: []
                            });
                        });
                        callback(array);
                    } else {
                        item.loading = false;
                        delete item.loading
                    }
                });
            },
            // 弹出层查询
            querySubmit (obj) {
                if (obj) {
                    this.queryObj = obj;
                }
                this.getData(this.queryObj);
            },
            // 新建
            async onAddNew () {
                this.isAdd = true;
                for (let i in this.formAdd) {
                    if (Array.isArray(this.formAdd[i])) {
                        this.formAdd[i] = [];
                    } else {
                        this.formAdd[i] = '';
                    }
                }
                this.formAdd.sn = await this.getSn();
                this.isShowNewForm = true;
            },
            // 新建
            async onNewSmall () {
                this.isAddSmall = 'add';
                for (let i in this.formAddSmall) {
                    if (Array.isArray(this.formAddSmall[i])) {
                        this.formAddSmall[i] = [];
                    } else {
                        this.formAddSmall[i] = '';
                    }
                }
                this.formAddSmall.sn = await this.getSn();
                this.isShowNewFormSmall = true;
            },
            // 新建确定
            onOk () {
                if (this.isAdd) {
                    Api.addTable(this.formAdd).then(res => {
                        this.$Message.success('新建成功');
                        this.$refs.bingoList.getTableData();
                    })
                } else {
                    Api.editTable(this.formAdd).then(res => {
                        this.$Message.success('修改成功');
                        this.$refs.bingoList.getTableData();
                    })
                }
            },
            // 新建确定
            onOkSmall () {
                if (this.isAddSmall == 'add') {
                    ApiTree.addTable(this.formAddSmall).then(res => {
                        this.$Message.success('新建成功');
                        this.dictreeData.push(res);
                    })
                } else if (this.isAddSmall == 'edit') {
                    ApiTree.editTable(this.formAddSmall).then(res => {
                        this.$Message.success('修改成功');
                        // this.dictreeData.findIndex(function(item,index){
                        //     return item.
                        // });
                        // this.dictreeData.splice(index, 1, res)
                    })
                }
            },
            // 编辑
            onEditBtn (id) {
                this.isAdd = false;
                Api.getTableById(id).then(res => {
                    this.formAdd = res;
                    this.isShowNewForm = true;
                })
            },
            // 编辑
            onEditBtnSmall (id) {
                this.isAddSmall = 'edit';
                ApiTree.getTableById(id).then(res => {
                    this.formAddSmall = res;
                    this.isShowNewFormSmall = true;
                })
            },
            // 查看
            onViewBtnSmall (id) {
                this.isAddSmall = 'view';
                ApiTree.getTableById(id).then(res => {
                    this.formAddSmall = res;
                    this.isShowNewFormSmall = true;
                })
            },
            // 删除
            onDeleteBtnSmall (id, index) {
                this.$Modal.confirm({
                    title: '请确认',
                    content: '<p>是否确认删除?</p>',
                    onOk: () => {
                        ApiTree.deleteTable(id).then((res) => {
                            this.$Message.success('删除成功');
                            this.dictreeData.splice(index, 1)
                        });
                    }
                });
            },
            // 点击左侧
            treeClick (item, index) {
                this.currentIndex = index;
                this.dictType = item.dictType;
                this.getData();
            },
            // 获取字典数据
            getData (searchObj) {
                let data = {};
                data = Object.assign(data, searchObj);
                data.dictType = this.dictType;
                Api.tableList(data).then(res => {
                    this.tableData = res.rows;
                    this.$refs.bingoList.handleMatch();
                    this.tableData.forEach(item => {
                        if (item.createTime) {
                            item.createTime = util.format(new Date(item.createTime), 'yyyy-MM-dd');
                        }
                        if (item.modifyTime) {
                            item.modifyTime = util.format(new Date(item.modifyTime), 'yyyy-MM-dd')
                        }
                    });
                })
            },
            // 改变特殊类型
            onChange () {
                this.getSpecialType();
            },
            // 特殊类型查询
            getSpecialType () {
                let searchObj = { dictGroup: this.dictGroup };
                this.getData(searchObj);
            },
            // 鼠标经过
            roleOver (e, item) {
                if (e.relatedTarget == e.currentTarget || e.currentTarget.contains(e.relatedTarget)) {
                    return;
                }
                this.$set(item, 'flag', true);
            },
            // 鼠标离开
            roleOut (e, item) {
                if (e.relatedTarget == e.currentTarget || e.currentTarget.contains(e.relatedTarget)) {
                    return;
                }
                this.$set(item, 'flag', false);
            }
        },
        components: { bingoList }
    };
</script>
<style lang="less">
.dict{
    .split-right{
        padding-left:16px;
        height:100%;
    }
    .left-pane{
        .dict-split{
            overflow: hidden;
            .dict-in{
                float: left;
                line-height: 32px;
            }
            .dict-in-btn{
                float: right;
                margin-right: 20px;
                i{
                    vertical-align: middle;
                    margin-top:-3px;
                }
            }
        }
        .left-list{
            margin-top:23px;
            padding:20px;
            li{
                height: 30px;
                line-height: 30px;
                width:100%;
                overflow: hidden;
                &:hover{
                    background:rgba(51, 63, 72, 0.06);
                }
                &.active{
                    background:rgba(51, 63, 72, 0.06);
                }
                .ico-name{
                    padding: 2px 6px;
                }
                .ico-all{
                    float: right;
                    margin-right:10px;
                }
                .ico-c{
                    margin-left:8px;
                    i{
                        font-size: 14px;
                        &.iconbianji{
                            color:#2d8cf0;
                        }
                        &.iconshanchu{
                            color:#ed4014;
                        }
                    }
                }
            }
        }
    }
}
</style>
