<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.visitorName" placeholder="访客姓名" clearable style="width: 180px "/>
                    </el-form-item>
                    <el-form-item label="证件号">
                        <el-input v-model="filter.identityNo" placeholder="证件号" clearable style="width: 180px "/>
                    </el-form-item>
                    <el-form-item label="手机号">
                        <el-input v-model="filter.visitorPhone" placeholder="手机号" clearable style="width: 180px "/>
                    </el-form-item>
                    <el-form-item label="状态">
                        <el-select v-model="filter.examineState" placeholder="请选择" clearable style="width: 180px ">
                            <el-option label="未审核" value="1"></el-option>
                            <el-option label="已通过" value="2"></el-option>
                            <el-option label="已驳回" value="3"></el-option>
                            <el-option label="已取消" value="4"></el-option>
                        </el-select>
                    </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">预约登记</el-button>
                    <el-button size="small" @click="onMutilDelClick">批量删除</el-button>
                </div>
                <d2-crud
                        title="预约登记"
                        :columns="columns"
                        :data="data"
                        :options="tableOptions"
                        :loading="loading"
                        :rowHandle="rowHandle"
                        @edit="handleRowEdit"
                        @delete="handleRowDelete"
                        @cancel="handleRowCancel"
                        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="60%"
                :close-on-click-modal="false">
            <el-form ref="form" :model="form" label-width="90px" labelPosition="right" :rules="rules">
                <el-row :gutter="15">
                    <el-col :span="11">
                        <el-form-item label="预约单号">
                            <el-input v-model="form.registerCode" disabled/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="访客姓名" prop="visitorName">
                            <el-input v-model="form.visitorName" maxlength="15"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="15">
                        <el-form-item label="预约时间" prop="time">
                            <el-date-picker
                                    v-model="time"
                                    type="datetimerange"
                                    @change="dateChange"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    :picker-options="expireTimeOption" clearable
                            ></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="证件类型" prop="identityType">
                            <custom-select :value="form.paramData" v-model="form.identityType" typeName="证件类型"
                                           style="width: 100%;"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="证件号" prop="identityNo">
                            <el-input v-model="form.identityNo"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="车牌号" prop="carNumber">
                            <el-input v-model="form.carNumber"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="性别" prop="gender">
                            <el-select v-model="form.gender" placeholder="请选择" style="width: 100%;">
                                <el-option value="男"></el-option>
                                <el-option value="女"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="联系电话" prop="visitorPhone">
                            <el-input v-model="form.visitorPhone"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="来访单位" prop="visitorOrg">
                            <el-input v-model="form.visitorOrg"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="随行人数" prop="accompanyNum">
                            <el-input v-model="form.accompanyNum" disabled />
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="受访人" prop="intervieweeId">
                            <staff-tree ref="saffTree" :depType="type" :strr="form.intervieweeName"
                                        v-model="form.intervieweeId"></staff-tree>
                        </el-form-item>
                    </el-col>
                    <el-col :span="22">
                        <el-form-item label="访客事由" prop="rmk">
                            <el-autocomplete
                                    v-model="form.rmk"
                                    :fetch-suggestions="querySearchRmk"
                                    placeholder="请输入内容"
                                    style="width: 100%" clearable>
                            </el-autocomplete>
                        </el-form-item>
                    </el-col>
                    <el-col :span="22">
                        <el-form-item label="携带物品">
                            <el-autocomplete
                                    v-model="form.goods"
                                    :fetch-suggestions="querySearchGoods"
                                    placeholder="请输入内容"
                                    style="width: 100%" clearable>
                            </el-autocomplete>
                        </el-form-item>
                    </el-col>
                </el-row>
                <div v-for="(module,index) in form.othvisitors" :key="index">
                    <el-row :gutter="15">
                        <el-col :span="22">
                            <span style="font-size: 18px;margin-bottom: 10px">随行人员{{index+1}}</span>
                            <i class="el-icon-delete" style="float: right;height: 40px;" @click="deleteItem(module)"></i>
                        </el-col>
                        <el-col :span="11">
                            <el-form-item label="随行人姓名" :prop="'othvisitors.' + index + '.ovisitor'">
                                <el-input v-model="module.ovisitor"/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="11">
                            <el-form-item label="性别" :prop="'othvisitors.' + index + '.osex'">
                                <el-select v-model="module.osex" placeholder="请选择" style="width: 100%;">
                                    <el-option value="男"></el-option>
                                    <el-option value="女"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="11">
                            <el-form-item label="证件类型" :prop="'othvisitors.' + index + '.oidtype'">
                                <custom-select :value="module.paramData" v-model="module.oidtype" typeName="证件类型"
                                               style="width: 100%;"/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="11">
                            <el-form-item label="证件号" :prop="'othvisitors.' + index + '.oidentity'">
                                <el-input v-model="module.oidentity"/>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
                <el-form-item>
                    <el-button type="primary" @click="addItem">添加随行人员</el-button>
                </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,
        CancelList,
        RmkPulldown,
        GoodsPulldown
    } from "../../../../api/visitor/manage/register";
    import {tableOptions} from "../../../../assets/options";

    export default {
        name: "visitor-manage",
        data() {
            let checkidNo = (rule, value, callback) => {
                if (this.form.identityType === '0') {
                    let reg = /^[1-9]\d{5}(16|17|18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
                    if (!reg.test(value)) {
                        return callback(new Error("请输入正确的身份证号"))
                    } else {
                        callback()
                    }
                } else if (this.form.identityType === '1') {
                    let reg = /^1[45][0-9]{7}$|([P|p|S|s]\d{7}$)|([S|s|G|g]\d{8}$)|([Gg|Tt|Ss|Ll|Qq|Dd|Aa|Ff]\d{8}$)|([H|h|M|m]\d{8,10})$/
                    if (!reg.test(value)) {
                        return callback(new Error("请输入正确的护照"))
                    } else {
                        callback()
                    }
                }
            }
            let checkidPhone = (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()
                }
            }
            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 checkOrg = (rule, value, callback) => {
                let reg = /^[\u4e00-\u9fa5_a-zA-Z0-9_]{1,20}$/
                if (!reg.test(value)) {
                    return callback(new Error("来访单位不能超过20位"))
                } else {
                    callback()
                }
            }
            let checkCar = (rule, value, callback) => {
                let reg = /^[冀豫云辽黑湘皖鲁苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼渝京津沪新京军空海北沈兰济南广成使领A-Z]{1}[a-zA-Z0-9]{5}[a-zA-Z0-9挂学警港澳]{1}$/
                if (!reg.test(value)) {
                    return callback(new Error("请输入正确的车牌号"))
                } else {
                    callback()
                }
            }
            return {
                type: 'teacher',
                staLoading: false,
                diaLogName: '预约登记',
                currentPage: 1,
                pagination: {
                    total: 0
                },
                selection: [],
                loading: false,
                tableOptions,
                operVisible: false,
                isEdit: false,
                filter: {
                    id: '',
                    visitorName: '',
                    identityNo: '',
                    visitorPhone: '',
                    examineState:'',
                    pageNum: 1,
                    pageSize: 10,
                },
                columns: [
                    {
                        title: '预约单号',
                        key: 'registerCode',
                        minWidth: '100',
                        showOverflowTooltip: true
                    },
                    {
                        title: '访客姓名',
                        key: 'visitorName',
                        minWidth: '100',
                        showOverflowTooltip: true
                    },
                    {
                        title: '证件名称',
                        key: 'paramData',
                        minWidth: '80',
                        showOverflowTooltip: true,
                    },
                    {
                        title: '证件号',
                        key: 'identityNo',
                        minWidth: '150',
                        showOverflowTooltip: true
                    },
                    {
                        title: '性别',
                        key: 'gender',
                        minWidth: '50',
                        showOverflowTooltip: true
                    },
                    {
                        title: '随行人数',
                        key: 'accompanyNum',
                        minWidth: '80',
                        showOverflowTooltip: true
                    },
                    {
                        title: '手机号',
                        key: 'visitorPhone',
                        minWidth: '130',
                        showOverflowTooltip: true
                    },
                    {
                        title: '来访单位',
                        key: 'visitorOrg',
                        minWidth: '120',
                        showOverflowTooltip: true
                    },
                    {
                        title: '车牌号',
                        key: 'carNumber',
                        minWidth: '100',
                        showOverflowTooltip: true
                    },
                    {
                        title: '携带物品',
                        key: 'goods',
                        minWidth: '100',
                        showOverflowTooltip: true
                    },
                    {
                        title: '携带物品',
                        key: 'goods',
                        minWidth: '80',
                        formatter(row, column, cellValue, index) {
                            if (cellValue === '') {
                                return '无'
                            }else
                                return '有'
                        }
                    },
                    {
                        title: '开始时间',
                        key: 'startTime',
                        minWidth: '150',
                        showOverflowTooltip: true
                    },
                    {
                        title: '结束时间',
                        key: 'finishTime',
                        minWidth: '150',
                        showOverflowTooltip: true
                    },
                    {
                        title: '被访人工号/学号',
                        key: 'intervieweeNo',
                        minWidth: '130',
                        showOverflowTooltip: true
                    },
                    {
                        title: '被访人姓名',
                        key: 'intervieweeName',
                        minWidth: '100',
                        showOverflowTooltip: true
                    },
                    {
                        title: '审核状态',
                        key: 'examineState',
                        minWidth: '100',
                        showOverflowTooltip: true,
                        formatter(row, column, cellValue, index) {
                            if (cellValue === '1') {
                                return '审核中'
                            } else if (cellValue === '2') {
                                return '已通过'
                            } else if (cellValue === '3') {
                                return '已驳回'
                            } else if (cellValue === '4') {
                                return '已取消'
                            }
                        }
                    }
                ],
                rowHandle: {
                    columnHeader: '操作',
                    minWidth: '200',
                    align: 'center',
                    custom: [
                        {
                            text: '重申',
                            type: 'primary',
                            size: 'small',
                            emit: 'edit',
                            show(index, row) {
                                if (row.examineState === '3') {
                                    return true
                                } else if (row.examineState === '4') {
                                    return true
                                } else
                                    return false
                            }
                        },
                        {
                            text: '取消',
                            type: 'primary',
                            size: 'small',
                            emit: 'cancel',
                            show(index, row) {
                                if (row.examineState === '1') {
                                    return true
                                } else
                                    return false
                            }
                        },
                        {
                            text: '删除',
                            type: 'danger',
                            size: 'small',
                            emit: 'delete',
                            show(index, row) {
                                if (row.examineState === '2') {
                                    return false
                                } else
                                    return true
                            }
                        },
                    ]
                },
                data: [],
                id: [],
                form: {
                    id: '',
                    registerCode: '',
                    visitorName: '',
                    identityType: '',
                    identityNo: '',
                    carNumber: '',
                    gender: '',
                    visitorPhone: '',
                    visitorOrg: '',
                    accompanyNum: 0,
                    intervieweeNo: '',
                    intervieweeName: '',
                    rmk: '',
                    examineState: '',
                    intervieweeId: '',
                    paramData: '',
                    goods: '',
                    finishTime: '',
                    startTime: '',
                    othvisitors:[],
                    ovisitor:'',
                    osex:'',
                    oidtype:'',
                    oidentity:'',
                },
                time: [],
                rules: {
                    visitorName: [{required: true, validator: checkName, trigger: 'blur'}],
                    //time:[{required: true,message: '请输入预约时间', trigger: 'blur' }],
                    identityType: [{required: true, message: '请选择证件类型', trigger: 'change'}],
                    identityNo: [{validator: checkidNo, required: true, trigger: 'blur'}],
                    carNumber: [{validator: checkCar, required: true, trigger: 'blur'}],
                    gender: [{required: true, message: '请选择性别', trigger: 'change'}],
                    visitorPhone: [{validator: checkidPhone, required: true, trigger: 'blur'}],
                    visitorOrg: [{required: true, validator: checkOrg, trigger: 'blur'}],
                    intervieweeId: [{required: true, message: '请输入受访人', trigger: 'blur'}],
                    rmk: [{required: true, message: '请输入访客事由', trigger: 'blur'}],
                },
                expireTimeOption: {
                    disabledDate(date) {
                        return date.getTime() < Date.now() - 8.64e7;
                    }
                }
            }
        },
        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.visitorRegisterVO
                    this.$set(this.time, 0, res.visitorRegisterVO.startTime)
                    this.$set(this.time, 1, res.visitorRegisterVO.finishTime)
                    if(res.visitorRegisterVO.accompanyNum==0){
                        this.form.othvisitors=[]
                    }
                    this.form.othvisitors=res.visitorRegisterVO.list
                    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 = {
                    id: '',
                    registerCode: '',
                    visitorName: '',
                    paramData: '',
                    identityNo: '',
                    carNumber: '',
                    gender: '',
                    visitorPhone: '',
                    visitorOrg: '',
                    accompanyNum: 0,
                    intervieweeNo: '',
                    intervieweeName: '',
                    rmk: '',
                    examineState: '',
                    identityType: '',
                    goods: '',
                    finishTime: '',
                    startTime: '',
                    othvisitors:[],
                    ovisitor:'',
                    osex:'',
                    oidtype:'',
                    oidentity:'',
                    intervieweeId:'',
                    time:[],
                }
                this.isEdit = false
                this.diaLogName = '预约登记'
            },
            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: this.form.id ? '申请成功' : '预约成功',
                                type: 'success'
                            })
                            this.handleList()
                        }).catch(err => {
                            this.staLoading = false
                        })
                    }
                })
            },
            dateChange(val) {
                if (val == null) {
                    this.form.startTime = ''
                    this.form.finishTime = ''
                } else {
                    this.form.startTime = val[0]
                    this.form.finishTime = val[1]
                }
            },
            handleRowCancel({index, row}) {
                this.$confirm(`确定取消`, '确认操作', {
                    confirmButtonText: '确定',
                    cancelButtonText: '放弃',
                    type: 'warning'
                }).then(() => {
                    let id = row.id
                    CancelList({id}).then(res => {
                        this.$message({
                            message: '取消成功',
                            type: 'success'
                        })
                        this.handleList()
                    })
                })
            },
            querySearchRmk(queryString, callback) {
                let list = [{}];
                RmkPulldown({queryString}).then((res) => {
                    for (let i of res.list) {
                        i.value = i.cause;
                    }
                    list = res.list;
                    callback(list);
                }).catch((error) => {
                    console.log(error);
                });
            },
            querySearchGoods(queryString, callback) {
                let list = [{}];
                GoodsPulldown({queryString}).then((res) => {
                    for (let i of res.list) {
                        i.value = i.goodsNm;
                    }
                    list = res.list;
                    callback(list);
                }).catch((error) => {
                    console.log(error);
                });
            },
            addItem() {
                this.form.othvisitors.push({
                    oidentity:'',
                    osex:'',
                    oidtype:'',
                    oidentity:'',
                })
                this.form.accompanyNum++
            },
            deleteItem(item){
                console.log(item)
                let index = this.form.othvisitors.indexOf(item)
                if(index !== -1){
                    this.form.othvisitors.splice(index, 1)
                }
                this.form.accompanyNum--
            },
        },
        mounted() {
            this.filter.pageSize = this.tableOptions.pageList[0]
            this.tableOptions = this.$calcTableHeight(tableOptions, 35)
            this.handleList()
            this.querySearchRmk()
            this.querySearchGoods()
        }
    }
</script>

<style scoped>

</style>
