<template>
    <d2-container>
        <div class="d2-table-view-full">
            <div class="d2-table-view-header">
                <el-form size="small" :inline="true" :model="filter" @keyup.enter.native="handleList" class="demo-form-inline">
                    <el-form-item label="访客类型名称">
                        <el-input v-model="filter.typeName" placeholder="访客类型名称" clearable/>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="handleList('1')">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="d2-table-view-content">
                <div class="d2-table-view-handle">
                    <el-button @click="operVisible = !operVisible" size="small" icon="el-icon-plus" >新增</el-button>
                    <el-button size="small" @click="onMutilDelClick">批量删除</el-button>
                </div>
                <d2-crud
                        title="访客类型"
                        ref="d2Crud"
                        :columns="columns"
                        :data="data"
                        :options="tableOptions"
                        :loading="loading"
                        :rowHandle="rowHandle"
                        @edit="handleRowEdit"
                        @delete="handleRowDelete"
                        selection-row
                        @selection-change="handleSelectionChange"
                ></d2-crud>
            </div>
            <div class="d2-table-view-footer">
                <el-pagination
                        @current-change="handleCurrentChange"
                        @size-change="handleSizeChange"
                        :page-size="tableOptions.pageList[0]"
                        :page-sizes="tableOptions.pageList"
                        :current-page.sync="currentPage"
                        layout="total,sizes, prev, pager, next,jumper"
                        :total="pagination.total"
                ></el-pagination>
            </div>
        </div>
        <el-dialog
                :title="diaLogName"
                :visible.sync="operVisible"
                @close="clearForm"
                width="28%"
                :close-on-click-modal="false">
            <el-form ref="form" :model="form" label-width="110px" labelPosition="right" :rules="rules">
                <el-form-item label="访客类型编号" prop="typeNo">
                    <el-input v-model="form.typeNo" size="small" maxLength="8"/>
                </el-form-item>
                <el-form-item label="访客类型名称" prop="typeName">
                    <el-input v-model="form.typeName" size="small" maxLength="15"/>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
     		    <zl-button :loading="staLoading" @click="operInstanceEle('form')"/>
     		</span>
        </el-dialog>
    </d2-container>
</template>

<script>
    import {getPageList,saveOrUpdataList,deleteList,getList} from "../../../../api/visitor/set/type";
    import {tableOptions} from "../../../../assets/options";
    export default {
        name: "index",
        data(){
            let checktypeNo = (rule, value, callback) => {
                let reg = /^[0-9a-zA-Z]{1,8}$/
                if(!reg.test(value)){
                    return callback(new Error("访客编号由数字和字母组成最多8位"))
                }else {
                    callback()
                }
            }
            let checkName =(rule, value, callback)=>{
                let reg = /^[\u4e00-\u9fa5]{0,15}$/
                if(!reg.test(value)){
                    return callback(new Error("访客类型名称不能超过15位"))
                }else {
                    callback()
                }
            }
            return{
                operVisible:false,
                tableOptions,
                loading:false,
                selection:[],
                diaLogName:'新增',
                isEdit:false,
                staLoading:false,
                currentPage:1,
                pagination:{
                    total:0
                },
                filter:{
                    id:'',
                    typeName:'',
                    pageNum:1,
                    pageSize:10,
                },
                columns:[
                    {
                        title:'访客类型编号',
                        key:'typeNo',
                        minWidth:'100',
                        showOverflowTooltip: true
                    },
                    {
                        title:'访客类型名称',
                        key:'typeName',
                        minWidth:'100',
                        showOverflowTooltip: true
                    }
                ],
                rowHandle:{
                    columnHeader:'操作',
                    minWidth:'150',
                    align:'center',
                    custom:[
                        {
                            text:'编辑',
                            type:'primary',
                            size:'small',
                            emit:'edit'
                        },
                        {
                            text:'删除',
                            type:'danger',
                            size:'small',
                            emit:'delete'
                        },
                    ]
                },
                data:[],
                id:[],
                form:{
                    id:'',
                    typeNo:'',
                    typeName:''
                },
                rules:{
                    typeNo:[{ required: true, validator:checktypeNo, trigger: 'blur' }],
                    typeName:[{ required: true,validator:checkName, trigger: 'blur' }]
                }
            }
        },
        methods:{
            handleList(val){
                if(val){
                    this.filter.pageNum=1
                    this.currentPage = 1
                }
                this.loading = true
                getPageList(this.filter).then(res=>{
                    this.loading = false
                    this.data = res.page.list
                    this.pagination.total = res.page.total
                }).catch(err=>{
                    this.loading = false
                })
            },
            onMutilDelClick(){
                if(!this.selection.length){
                    this.$message({
                        message: '请选择记录',
                        type: 'success'
                    })
                }
                this.selection.forEach((item,index)=>{
                    this.id.push(item.id)
                })
                this.id=this.id.join(",")
                this.delete(this.id)
            },
            delete(id){
                this.$confirm(`确定要删除吗?`, '确认操作', {
                    confirmButtonText: '确定',
                    cancelButtonText: '放弃',
                    type: 'warning'
                }).then(() => {
                    deleteList({id}).then(res=>{
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        })
                        this.handleList()
                    })
                })
            },
            handleRowEdit({index,row}){
                this.isEdit=true
                this.diaLogName='编辑'
                let id=row.id
                getList({id}).then(res=>{
                    this.form=res.visitorType
                    this.operVisible = true
                })
            },
            handleRowDelete({index,row}){
                this.delete(row.id)
            },
            handleSelectionChange(selection){
              this.selection =selection
            },
            handleCurrentChange(val){
                this.filter.pageNum = val
                this.handleList()
            },
            handleSizeChange(val){
                this.filter.pageNum = 1
                this.filter.pageSize = val
                this.handleList()
            },
            clearForm(){
                this.form={
                    typeName:'',
                    typeNo:''
                }
                this.isEdit = false
                this.diaLogName = '新增'
            },
            operInstanceEle(){
                console.log('form')
                this.$refs['form'].validate((valid)=>{
                    console.log(valid)
                    if (valid){
                        this.staLoading=true
                        saveOrUpdataList(this.form).then(res=>{
                            this.staLoading=false
                            this.operVisible=false
                            this.$message({
                                message: this.form.id ? '编辑成功':'新增成功',
                                type: 'success'
                            })
                            this.handleList()
                        }).catch(err=>{
                            this.staLoading=false
                        })
                    }
                })
            },
        },
        mounted () {
            this.filter.pageSize = this.tableOptions.pageList[0]
            this.tableOptions = this.$calcTableHeight(tableOptions,35)
            this.handleList()
        }
    }
</script>

<style>

</style>
