<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.intervieweeName" placeholder="受访人" clearable/>
                    </el-form-item>
                    <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"
                                style="width: 335px" clearable></el-date-picker>
                    </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 size="small" @click="onMutilBlackClick">设为黑名单</el-button>
                    <el-button size="small" @click="onMutilLeaveClick">设为离访</el-button>
                </div>
                <d2-crud
                        title="受访统计"
                        :columns="columns"
                        :data="data"
                        :options="tableOptions"
                        :loading="loading"
                        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>
    </d2-container>
</template>

<script>
    import {getPageList,setBlack,setLeave} from "../../../../api/visitor/manage/interviewed";
    import {tableOptions} from "../../../../assets/options";
    import identityPhoto from './components/identityPhoto'
    import scenePhoto from './components/scenePhoto'

    export default {
        name: "index",
        components:{
            identityPhoto,
            scenePhoto
        },
        data(){
            return{
                loading:false,
                tableOptions,
                selection:[],
                time:'',
                filter:{
                    id:'',
                    intervieweeName:'',
                    bgTm:'',
                    endTm:'',
                    pageNum:1,
                    pageSize:10,
                },
                currentPage:1,
                pagination:{
                    total:0
                },
                columns:[
                    {
                        title:'访客姓名',
                        key:'visitorName',
                        minWidth:80,
                        showOverflowTooltip:true
                    },
                    {
                        title:'证件号',
                        key:'identityNo',
                        minWidth:130,
                        showOverflowTooltip:true
                    },
                    {
                        title:'随行人数',
                        key:'accompanyNum',
                        minWidth:80,
                        showOverflowTooltip:true
                    },
                    {
                        title:'联系电话',
                        key:'visitorPhone',
                        minWidth:100,
                        showOverflowTooltip:true
                    },
                    {
                        title:'车牌',
                        key:'carNumber',
                        minWidth:100,
                        showOverflowTooltip:true
                    },
                    {
                        title:'访客类型',
                        key:'typeName',
                        minWidth:100,
                        showOverflowTooltip:true
                    },
                    {
                        title:'受访人',
                        key:'intervieweeName',
                        minWidth:100,
                        showOverflowTooltip:true
                    },
                    {
                        title:'受访时间',
                        key:'visitTime',
                        minWidth:100,
                        showOverflowTooltip:true
                    },
                    {
                        title:'离访时间',
                        key:'leaveTime',
                        minWidth:100,
                        showOverflowTooltip:true
                    },
                    {
                        title:'证件照',
                        key:'identityPhoto',
                        minWidth:100,
                        component:{
                            name:identityPhoto
                        }
                    },
                    {
                        title:'照片',
                        key:'scenePhoto',
                        minWidth:100,
                        component:{
                            name:scenePhoto
                        }
                    },
                    {
                        title:'操作员',
                        key:'userNm',
                        minWidth:100,
                        showOverflowTooltip:true
                    },
                ],
                data:[],
                id:[],
            }
        },
        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
                })
            },
            dateChange(val){
                if(val == null){
                    this.filter.bgTm=''
                    this.filter.endTm=''
                }else {
                    this.filter.bgTm=val[0]
                    this.filter.endTm=val[1]
                }
            },
            handleCurrentChange(val){
                this.filter.pageNum = val
                this.handleList()
            },
            handleSizeChange(val){
                this.filter.pageNum = 1
                this.filter.pageSize = val
                this.handleList()
            },
            handleSelectionChange(selection) {
                this.selection = selection
            },
            onMutilBlackClick(){
                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.$confirm(`确定要将访客设为黑名单?`, '确认操作', {
                    confirmButtonText: '确定',
                    cancelButtonText: '放弃',
                    type: 'warning'
                }).then(() => {
                    setBlack({id}).then(res => {
                        this.$message({
                            message: '设置成功',
                            type: 'success'
                        })
                        this.handleList()
                    })
                })
            },
            onMutilLeaveClick(){
                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.$confirm(`确定要将访客设为离访?`, '确认操作', {
                    confirmButtonText: '确定',
                    cancelButtonText: '放弃',
                    type: 'warning'
                }).then(() => {
                    setLeave({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>
