<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.registerCode" clearable/>
                    </el-form-item>
                    <el-form-item label="证件号">
                        <el-input v-model="filter.identityNo" clearable/>
                    </el-form-item>
                    <el-form-item label="手机号">
                        <el-input v-model="filter.visitorPhone" 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">
                <d2-crud
                        title="审核记录"
                        :columns="columns"
                        :data="data"
                        :options="tableOptions"
                        :loading="loading"
                        :rowHandle="rowHandle"
                        @audit="handleRowAudit"
                ></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="审核"
                :visible.sync="operVisible"
                @close="clearForm"
                width="60%"
                :close-on-click-modal="false">
            <el-form ref="form" :model="form" label-width="90px" labelPosition="right">
                <el-row :gutter="16">
                    <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="访客姓名">
                            <el-input v-model="form.visitorName" disabled/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="15">
                        <el-form-item label="预约时间">
                            <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 disabled
                            ></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="受访人部门">
                            <el-input :value="form.depNm" v-model="form.intervieweeId" disabled/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="性别">
                            <el-select v-model="form.gender" placeholder="请选择" style="width: 100%;" disabled>
                                <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="证件类型">
                            <custom-select :value="form.paramData" v-model="form.identityType" typeName="证件类型"
                                           style="width: 100%;" disabled/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="证件号">
                            <el-input v-model="form.identityNo" disabled/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="联系电话">
                            <el-input v-model="form.visitorPhone" disabled/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="来访单位">
                            <el-input v-model="form.visitorOrg" disabled/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="随行人数">
                            <el-input v-model="form.accompanyNum" disabled/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="受访人">
                            <el-input v-model="form.intervieweeName" disabled/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="22">
                        <el-form-item label="访客事由">
                            <el-input type="textarea" v-model="form.rmk" maxlength="100" disabled/>
                        </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>
                        </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>
            <span slot="footer" class="dialog-footer">
                <el-button :loading="staLoading" @click="operInstanceEqu('form')">通过审核</el-button>
                <el-button @click="operReject('form')">驳回</el-button>
            </span>
        </el-dialog>
        <el-dialog
                title="驳回"
                :visible.sync="operVisible2"
                @close="clearForm"
                width="25%"
                :close-on-click-modal="false">
            <el-form>
                <el-form-item label="理由" prop="examineRmk">
                    <el-input type="textarea" v-model="form.examineRmk" maxlength="100"/>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
     		    <zl-button :loading="staLoading2" @click="operSure('form')"/>
            </span>
        </el-dialog>
    </d2-container>
</template>

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

    export default {
        name: "index",
        data() {
            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()
                }
            }
            return {
                staLoading2: false,
                operVisible: false,
                tableOptions,
                loading: false,
                isEdit: false,
                staLoading: false,
                operVisible2: false,
                selection: [],
                currentPage: 1,
                time: [],
                pagination: {
                    total: 0
                },
                filter: {
                    id: '',
                    registerCode: '',
                    identityNo: '',
                    visitorPhone: '',
                    pageSize: 10,
                    pageNum: 1
                },
                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: '100',
                        showOverflowTooltip: true
                    },
                    {
                        title: '性别',
                        key: 'gender',
                        minWidth: '50',
                        showOverflowTooltip: true
                    },
                    {
                        title: '随行人数',
                        key: 'accompanyNum',
                        minWidth: '80',
                        showOverflowTooltip: true
                    },
                    {
                        title: '手机号',
                        key: 'visitorPhone',
                        minWidth: '100',
                        showOverflowTooltip: true
                    },
                    {
                        title: '来访单位',
                        key: 'visitorOrg',
                        minWidth: '100',
                        showOverflowTooltip: true
                    },
                    {
                        title: '开始时间',
                        key: 'startTime',
                        minWidth: '130',
                        showOverflowTooltip: true
                    },
                    {
                        title: '结束时间',
                        key: 'finishTime',
                        minWidth: '130',
                        showOverflowTooltip: true
                    },
                    {
                        title: '被访人工号',
                        key: 'intervieweeNo',
                        minWidth: '100',
                        showOverflowTooltip: true
                    },
                    {
                        title: '被访人姓名',
                        key: 'intervieweeName',
                        minWidth: '100',
                        showOverflowTooltip: true
                    },
                    {
                        title: '被访人部门',
                        key: 'depNm',
                        minWidth: '100',
                        showOverflowTooltip: true
                    },
                    {
                        title: '审核人',
                        key: 'examineNm',
                        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: '100',
                    align: 'center',
                    custom: [
                        {
                            text: '审核',
                            type: 'primary',
                            size: 'small',
                            emit: 'audit',
                            show(index, row) {
                                if (row.examineState === '1') {
                                    return true
                                } else {
                                    return false
                                }
                            }
                        },
                    ]
                },
                data: [],
                id: [],
                form: {
                    id: '',
                    registerCode: '',
                    startTime: '',
                    finishTime: '',
                    visitorName: '',
                    intervieweeName: '',
                    rmk: '',
                    identityType: '',
                    identityNo: '',
                    carNumber: '',
                    gender: '',
                    visitorPhone: '',
                    visitorOrg: '',
                    accompanyNum: '',
                    intervieweeNo: '',
                    examineRmk: '',
                    paramData: '',
                    depNm: '',
                    othvisitors:[],
                    ovisitor:'',
                    osex:'',
                    oidtype:'',
                    oidentity:'',
                },
                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
                })
            },
            handleCurrentChange(val) {
                this.filter.pageNum = val
                this.handleList()
            },
            handleSizeChange(val) {
                this.filter.pageNum = 1
                this.filter.pageSize = val
                this.handleList()
            },
            handleRowAudit({index, row}) {
                this.isEdit = true
                let id = row.id
                getList({id}).then(res => {
                    this.form = res.visitorRegister
                    this.$set(this.time, 0, res.visitorRegister.startTime)
                    this.$set(this.time, 1, res.visitorRegister.finishTime)
                    if(res.visitorRegister.accompanyNum==0){
                        this.form.othvisitors=[]
                    }
                    this.form.othvisitors=res.visitorRegister.list
                    this.operVisible = true
                })
            },
            operSure(form) {
                console.log(this.form)
                this.$refs[form].validate((valid) => {
                    if (valid) {
                        this.staLoading2 = true
                        updataList(this.form).then(res => {
                            this.staLoading2 = false
                            this.operVisible2 = false
                            this.operVisible = false
                            this.$message({
                                message: '已驳回',
                                type: 'success'
                            })
                            this.handleList()
                        }).catch(err => {
                            this.staLoading2 = false
                        })
                    }
                })
            },
            operInstanceEqu(form) {
                this.$refs[form].validate((valid) => {
                    if (valid) {
                        this.staLoading = true
                        this.form.examineState = '2'
                        this.$confirm(`确定要通过审核吗?`, '确认操作', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            updataList(this.form).then(res => {
                                this.staLoading=false
                                this.$message({
                                    message: '审核通过',
                                    type: 'success'
                                })
                                this.operVisible=false
                                this.handleList()
                            })
                        }).catch(err=>{
                            this.staLoading=false
                        })
                    }
                })
            },
            operReject(form) {
                this.$refs[form].validate((valid) => {
                    if (valid) {
                        this.form.examineState = '3'
                        this.operVisible2 = true
                    }
                })
            },
            clearForm() {
                this.form = {
                    id: '',
                    registerCode: '',
                    startTime: '',
                    finishTime: '',
                    visitorName: '',
                    intervieweeName: '',
                    rmk: '',
                    identityType: '',
                    identityNo: '',
                    carNumber: '',
                    gender: '',
                    visitorPhone: '',
                    visitorOrg: '',
                    accompanyNum: '',
                    intervieweeNo: '',
                    examineRmk: '',
                    paramData: '',
                    othvisitors:[],
                    oidentity:'',
                    osex:'',
                    oidtype:'',
                    oidentity:'',
                }
                this.isEdit = false
            },
            dateChange(val) {
                if (val == null) {
                    this.form.startTime = ''
                    this.form.finishTime = ''
                } else {
                    this.form.startTime = val[0]
                    this.form.finishTime = val[1]
                }
            },
        },
        mounted() {
            this.filter.pageSize = this.tableOptions.pageList[0]
            this.tableOptions = this.$calcTableHeight(tableOptions, 5)
            this.handleList()
        }
    }
</script>

<style scoped>

</style>
