<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.name" 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>
                </div>
                <d2-crud
                        title="物品寄存"
                        :columns="columns"
                        :data="data"
                        :options="tableOptions"
                        :loading="loading"
                        :rowHandle="rowHandle"
                        @tack="handleRowTack"
                        @delete="handleRowDelete"
                ></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"
                width="30%"
                @close="clearForm"
                :close-on-click-modal="false">
            <el-form ref="form" :model="form" label-width="100px" labelPosition="right" :rules="rules">
                <el-form-item label="寄存物品编号">
                    <el-input disabled v-model="form.id" size="small" style="width: 230px"/>
                </el-form-item>
                <el-form-item label="访客姓名" prop="name">
                    <el-input v-model="form.name" size="small" maxlength="15" style="width: 230px"/>
                </el-form-item>
                <el-form-item label="访客手机号" prop="phone">
                    <el-input v-model="form.phone" size="small" style="width: 230px"/>
                </el-form-item>
                <!--<el-form-item label="寄存条码">-->
                    <!--<el-input v-model="form.goodsNo"/>-->
                <!--</el-form-item>-->
                <el-form-item label="物品描述" prop="goodsName">
                    <el-input type="textarea" v-model="form.goodsName" maxlength="100" size="small" style="width: 230px"/>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
     		    <zl-button :loading="staLoading" @click="operInstanceEqu('form')"/>
            </span>
        </el-dialog>
    </d2-container>
</template>

<script>
    import {getPageList,saveOrUpdataList,deleteList,getList} from "../../../../api/visitor/manage/goods";
    import {tableOptions} from "../../../../assets/options";

    export default {
        name: "visitor-manage",
        data(){
            let checkName =(rule, value, callback)=>{
                let reg = /^[\u4e00-\u9fa5_a-zA-Z]{1,15}$/
                if(!reg.test(value)){
                    return callback(new Error("访客姓名是由中文或英文组成最多不能超过15位"))
                }else {
                    callback()
                }
            }
            let checkPhone = (rule, value, callback) => {
                let reg = /^1(3|4|5|6|7|8|9)\d{9}$/
                if(!reg.test(value)){
                    return callback(new Error("请输入正确的手机号码"))
                }else {
                    callback()
                }
            }
            return{
                tableOptions,
                loading:false,
                operVisible:false,
                staLoading:false,
                isEdit:false,
                currentPage:1,
                diaLogName:'物品寄存',
                pagination:{
                    total:0
                },
                filter:{
                    name:'',
                    pageNum:1,
                    pageSize:10
                },
                data:[],
                id:[],
                columns:[
                    {
                        title:'编号',
                        key:'id',
                        minWidth:'100',
                        showOverflowTooltip: true
                    },
                    {
                        title:'访客姓名',
                        key:'name',
                        minWidth:'100',
                        showOverflowTooltip: true
                    },
                    {
                        title:'手机号',
                        key:'phone',
                        minWidth:'100',
                        showOverflowTooltip: true
                    },
                    {
                        title:'物品描述',
                        key:'goodsName',
                        minWidth:'100',
                        showOverflowTooltip: true
                    },
                    {
                        title:'寄存时间',
                        key:'createDate',
                        minWidth:'150',
                        showOverflowTooltip: true
                    },
                    {
                        title:'状态',
                        key:'goodsSts',
                        minWidth:'100',
                        showOverflowTooltip: true,
                        formatter (row, column, cellValue, index) {
                            if(cellValue === '1'){
                                return '寄存中'
                            }else if(cellValue === '2'){
                                return '已取回'
                            }
                        }
                    },
                    {
                        title:'取回时间',
                        key:'modifyDate',
                        minWidth:'150',
                        showOverflowTooltip: true
                    },
                    {
                        title:'操作员',
                        key:'userNm',
                        minWidth:'100',
                        showOverflowTooltip: true
                    },
                ],
                rowHandle:{
                    columnHeader:'操作',
                    minWidth:'100',
                    align:'center',
                    custom:[
                        {
                            text:'取回',
                            type:'primary',
                            size:'small',
                            emit:'tack',
                            show(index,row){
                                if (row.goodsSts === '1'){
                                    return true
                                }else
                                    return false
                            }
                        },
                        {
                            text:'删除',
                            type:'danger',
                            size:'small',
                            emit:'delete',
                            show(index,row){
                                if (row.goodsSts === '2'){
                                    return true
                                }else
                                    return false
                            }
                        },
                    ]
                },
                form:{
                    name:'',
                    id:'',
                    goodsName:'',
                    phone:'',
                    goodsSts:''
                },
                rules:{
                    name:[{ required: true,validator:checkName, trigger: 'blur' }],
                    phone:[{required: true,validator:checkPhone, trigger: 'blur'}],
                    goodsName:[{required: true, message: '请输入物品描述', 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
                })
            },
            handleCurrentChange(val){
                this.filter.pageNum = val
                this.handleList()
            },
            handleSizeChange(val){
                this.filter.pageNum = 1
                this.filter.pageSize = val
                this.handleList()
            },
            clearForm(){
                this.form={
                    name:'',
                    id:'',
                    goodsName:'',
                    phone:'',
                }
                this.isEdit=false
            },
            operInstanceEqu(form){
                this.$refs[form].validate((valid)=>{
                    if (valid){
                        this.staLoading=true
                        saveOrUpdataList(this.form).then(res=>{
                            this.staLoading=false
                            this.operVisible=false
                            this.$message({
                                message:'添加成功',
                                type:'success'
                            })
                            this.handleList()
                        }).catch(err=>{
                            this.staLoading=false
                        })
                    }
                })
            },
            handleRowTack({index,row}){
                this.$confirm(`确认访客是否要取回物品?`, '确认操作', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let id=row.id
                    getList({id}).then(res=>{
                        this.form=res.visitorGoods
                        this.form.goodsSts='2'
                        saveOrUpdataList(this.form).then(res=>{
                            this.$message({
                                message:'成功取回',
                                type:'success'
                            })
                            this.handleList()
                        })
                    })
                })
            },
            handleRowDelete({index,row}){
                this.$confirm(`确定要删除吗?`, '确认操作', {
                    confirmButtonText: '确定',
                    cancelButtonText: '放弃',
                    type: 'warning'
                }).then(() => {
                    let id=row.id
                    deleteList({id}).then(res=>{
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        })
                        this.handleList()
                    })
                })
            },
        },
        mounted() {
            this.filter.pageSize = this.tableOptions.pageList[0]
            this.tableOptions = this.$calcTableHeight(tableOptions,35)
            this.handleList()
        }
    }
</script>

<style scoped>

</style>
