<template>
    <div class="user">
        <Card :bordered="false" dis-hover>
            <bingo-list
                :columns="columns"
                :pageSetting="pageSetting"
                :page="true"
                :showBtnType="'all'"
                :showBtnOutNum="2"
                :showNewBtn="true"
                :toolbarNew="true"
                ref="bingoList"
                :searchList="searchList"
                :dataApi="Api"
                :queryData="queryData"
                :isSearch="true"
                :isSearchAdvance="true"
                :showSwitchBtn="false"
                :processData="processData"
                @get-special-type="getSpecialType"
                @on-query-submit="querySubmit"
                @on-add-new="onAddNew"
                @on-edit-btn="onEditBtn"
            >
                <template slot="searchType">
                    <div id="strategy">
                        <Select transfer v-model="strategy" placeholder="请选择编号生成策略" @on-change="onChange">
                            <Option v-for="item in typeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                    </div>
                </template>
                <!-- 高级搜索 -->
                <template slot="queryForm">
                    <bingo-grid-item>
                        <bingo-form-item label="编号名称" prop="nameCn">
                            <Input
                                v-model="queryData.nameCn"
                                placeholder="请输入编号名称"
                            />
                        </bingo-form-item>
                    </bingo-grid-item>
                    <!-- <bingo-grid-item>
                        <bingo-form-item label="模块编号ID" prop="id">
                            <Input
                                v-model="queryData.id"
                                placeholder="请输入模块编号ID"
                            />
                        </bingo-form-item>
                    </bingo-grid-item> -->
                    <bingo-grid-item>
                        <bingo-form-item label="编号生成策略" prop="strategy">
                            <Select transfer v-model="queryData.strategy" placeholder="请选择编号生成策略">
                                <Option v-for="item in typeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            </Select>
                        </bingo-form-item>
                    </bingo-grid-item>
                    <bingo-grid-item>
                        <bingo-form-item label="前缀" prop="prefixName">
                            <Input
                                v-model="queryData.prefixName"
                                placeholder="请输入前缀"
                            />
                        </bingo-form-item>
                    </bingo-grid-item>
                    <bingo-grid-item>
                        <bingo-form-item label="后缀" prop="suffixName">
                            <Input
                                v-model="queryData.suffixName"
                                placeholder="请输入后缀"
                            />
                        </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>
                    <bingo-grid-item>
                        <bingo-form-item label="日期格式" prop="dateStyleCode">
                            <Input
                                v-model="queryData.dateStyleCode"
                                placeholder="请输入日期格式"
                            />
                        </bingo-form-item>
                    </bingo-grid-item>
                </template>
            </bingo-list>
        </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.nameCn" placeholder="请输入编号名称">
                            </Input>
                        </bingo-form-item>
                    </Col>
                    <Col :span="12">
                        <bingo-form-item label="英文名称">
                            <Input type="text" v-model="formAdd.nameEn" placeholder="请输入英文名称">
                            </Input>
                        </bingo-form-item>
                    </Col>
                    <Col :span="12">
                        <bingo-form-item label="德文名称">
                            <Input type="text" v-model="formAdd.nameDe" placeholder="请输入德文名称">
                            </Input>
                        </bingo-form-item>
                    </Col>
                    <Col :span="12">
                        <bingo-form-item label="编号生成策略">
                            <Select transfer v-model="queryData.strategy" placeholder="请选择编号生成策略">
                                <Option v-for="item in typeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            </Select>
                        </bingo-form-item>
                    </Col>
                    <Col :span="12">
                        <bingo-form-item label="前缀">
                            <Input type="text" v-model="formAdd.prefixName" placeholder="请输入前缀">
                            </Input>
                        </bingo-form-item>
                    </Col>
                    <Col :span="12">
                        <FormItem label="后缀">
                            <Input type="text" v-model="formAdd.suffixName" placeholder="请输入后缀">
                            </Input>
                        </FormItem>
                    </Col>
                    <Col :span="12">
                        <bingo-form-item label="备注信息">
                            <Input type="text" v-model="formAdd.remark" placeholder="请输入备注信息">
                            </Input>
                        </bingo-form-item>
                    </Col>
                    <Col :span="12">
                        <bingo-form-item label="长度">
                            <Input type="text" v-model="formAdd.snLength" placeholder="请输入长度">
                            </Input>
                        </bingo-form-item>
                    </Col>
                    <Col :span="12">
                        <bingo-form-item label="日期格式">
                            <Input type="text" v-model="formAdd.dateStyleCode" placeholder="请输入日期格式">
                            </Input>
                        </bingo-form-item>
                    </Col>
                </Row>
            </Form>
        </Modal>
    </div>
</template>
<script>
    import bingoList from '@/components/bingo-list';
    import Api from '@/api/platform/code';
    import module from '@/mixins/module';
    import util from '@/utils/tool'
    export default {
        name:'plat-code',
        data () {
            return {
                typeList: [
                    {
                        label: '雪花',
                        value: 0
                    },
                    {
                        label: '日期',
                        value: 1
                    },
                    {
                        label: 'uuid',
                        value: 2
                    }
                ],
                columns: [
                    {
                        title: '序号',
                        type: 'index',
                        width: 60,
                        align: 'center',
                        fixed: 'left'
                    },
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center',
                        fixed: 'left'
                    },
                    {
                        title: '编号名称',
                        key: 'nameCn',
                        minWidth: 130
                    },
                    // {
                    //     title: '模块编号ID',
                    //     key: 'id',
                    //     width: 100
                    // },
                    {
                        title: '编号生成策略',
                        key: 'strategy',
                        minWidth: 130
                    },
                    {
                        title: '前缀',
                        key: 'prefixName',
                        minWidth: 100
                    },
                    {
                        title: '后缀',
                        key: 'suffixName',
                        minWidth: 100
                    },
                    {
                        title: '备注信息',
                        key: 'remark',
                        minWidth: 100
                    },
                    {
                        title: '长度',
                        key: 'snLength',
                        minWidth: 100
                    },
                    {
                        title: '日期格式',
                        key: 'dateStyleCode',
                        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: 'nameCn',
                        type: 'input'
                    },
                    // {
                    //     label: '模块编号ID',
                    //     value: 'id',
                    //     type: 'input'
                    // },
                    {
                        label: '编号生成策略',
                        value: 'strategy',
                        type: 'strategy'
                    },
                    {
                        label: '前缀',
                        value: 'prefixName',
                        type: 'input'
                    },
                    {
                        label: '后缀',
                        value: 'suffixName',
                        type: 'input'
                    },
                    {
                        label: '备注信息',
                        value: 'remark',
                        type: 'input'
                    },
                    {
                        label: '长度',
                        value: 'snLength',
                        type: 'input'
                    },
                    {
                        label: '日期格式',
                        value: 'dateStyleCode',
                        type: 'input'
                    }

                ],
                tableData: [],
                queryData: {
                    nameCn: '',
                    nameDe: '',
                    nameEn: '',
                    dateStyleCode: '',
                    prefixName: '',
                    remark: '',
                    sn: '',
                    snLength: '',
                    strategy: '',
                    suffixName: ''
                },
                queryObj: {},
                isShowNewForm: false,
                formAdd: {
                    nameCn: '',
                    nameDe: '',
                    nameEn: '',
                    dateStyleCode: '',
                    prefixName: '',
                    remark: '',
                    sn: '',
                    snLength: '',
                    strategy: '',
                    suffixName: ''
                },
                grid: {
                    xl: 12,
                    lg: 13,
                    md: 13,
                    sm: 24,
                    xs: 24
                },
                isAdd: true,
                strategy: ''
            };
        },
        mounted () {
        },
        mixins: [module],
        methods: {
            // 弹出层查询
            querySubmit (obj) {
                if (obj) {
                    this.queryObj = obj;
                }
                this.$refs.bingoList.getTableData(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;
            },
            // 改变特殊类型
            onChange () {
                this.getSpecialType();
            },
            // 特殊类型查询
            getSpecialType () {
                let searchObj = { strategy: this.strategy };
                this.$refs.bingoList.getTableData(searchObj);
            },
            // 处理数据
            processData (data) {
                data.forEach(item => {
                    this.typeList.forEach(it => {
                        if (item.strategy === it.value) {
                            item.strategy = it.label;
                        }
                    })
                    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')
                    }
                })
            },
            // 新建确定
            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();
                    })
                }
            },
            // 编辑
            onEditBtn (id) {
                this.isAdd = false;
                Api.getTableById(id).then(res => {
                    this.formAdd = res;
                    this.isShowNewForm = true;
                })
            }
        },
        components: { bingoList }
    };
</script>
