<template>
    <div class="camera-wrapper">
        <el-header>
            <span class="behavior-title">{{ repTitle }}{{$t('Behavior.clerkcamera')}}</span>
        </el-header>
        <clerk-option @emitParams="getPatams" @emitTitle="getTitle" @startLoading="startLoad"></clerk-option>
        <div class="element-main behavior-main" style="margin-top: 110px">
            <!-- main -->
            <div class="behavior-table-page" :style="{ height: 'calc(100% - 14px)' }">
                <div class="behavior-table" :style="{ height: 'calc(100% - 40px)', overflowY: 'auto' }">
                    <el-table :data="tableData" style="width: 100%;" v-loading="loading" header-row-class-name="behavior-thead" v-if="false">
                        <el-table-column :label="$t('table.order')" align="center" prop="seriesNum" width="100"></el-table-column>
                        <el-table-column :label="$t('table.name')" align="center" prop="name"></el-table-column>
                        <el-table-column :label="$t('table.age')" align="center" prop="age"></el-table-column>
                        <el-table-column :label="$t('table.gender')" align="center" prop="gender" :formatter="genderFormatter"></el-table-column>
                        <el-table-column :label="$t('table.time')" align="center" prop="counttime"></el-table-column>
                        <el-table-column :label="$t('table.monitorSiteName')" align="center" prop="gateName"></el-table-column>
                        <el-table-column :label="$t('table.faceMap')" align="center">
                            <template slot-scope="scope">
                                <el-popover
                                    placement="left"
                                    title=""
                                    trigger="hover">
                                    <div class="face-img-box" slot="reference">
                                        <img :src="dealImg(scope.row)" width="50" height="50" alt="" class="face-img" @error="dealErrImg" />
                                    </div>
                                    <img :src="dealImg(scope.row)" width="200" height="200" :alt="dealImg(scope.row)" @error="dealErrImg" />                                    
                                </el-popover>
                            </template>
                        </el-table-column>
                    </el-table>
                    <ul class="shotpic-wrapper" v-loading="loading">
                            <li v-if="tableData.length == 0" style="text-align: center; margin: 10px 0; color: #909399;">{{ $t('echartsTitle.noData') }}</li>
                            <li class="shotpic-item" v-for="(item, index) in tableData" :key="index">
                                <div class="shotpic-img">
                                    <span class="shotpic-date">{{ item.counttime }}</span>
                                    <img :src="dealImg(item)" @error="dealErrImg" :style="imgStyle"/>
                                </div>
                                <p class="shotpic-info">
                                    <span class="">{{ item.name }}</span>
                                </p>
                                <p class="shotpic-info">
                                    <span class="ellipsis" style="display:inline-block;width:100%" :title="gateName[item.gateId]">{{ gateName[item.gateId] }}</span>
                                </p>
                            </li>
                        </ul> 
                </div>
                <div class="page-wrapper" style="margin-top: 5px">
                    <el-pagination
                      background
                      :current-page="currentPage"
                      :page-sizes="pageArr"
                      :page-size="pageSize"
                      @size-change="sizeChange"
                      @current-change="handleCurrentChange"
                      layout="sizes, prev, pager, next, slot, jumper"
                      :total="totalPage">
                        <span class="slot-ele-total">{{$t('table.pageHead')}} {{ totalPage }} {{$t('table.pageTail')}}</span>
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import clerkOption from './common/option/clerkCameraOpt'
import defaultImg from '@/assets/img/behavior/default.png'
import femaleImg from '@/assets/img/behavior/female.png'
import maleImg from '@/assets/img/behavior/male.png'
export default {
    data () {
        return {
            params:{
                url:'',
                param:'',
            },
            tableData: [],
            defaultImg: defaultImg,
            currentPage: 1,
            pageArr: [45, 90, 135],
            pageSize: 45,
            totalPage: 0,
            repTitle: '',
            loading: true,
            tableHeight: 0,
            emitData: {},
            gateName: {},
            imgStyle:{},
        }
    },
    components: {
        'clerk-option': clerkOption
    },
    created() {
        this.tableHeight = this.computedWinH('px');
        window.addEventListener('resize', () => {
            this.tableHeight = this.computedWinH('px');
        })
    },
    mounted() {
    },
    methods: {
        getGate(mall_id) {
            this.$api.management.gate({ mallId: mall_id, status: 1 })
            .then(res => {
                let result = res.data.data;
                result.forEach(item => {
                    this.gateName[item.id] = item.name;
                })
                window.sessionStorage.setItem('gateNameObj',JSON.stringify(this.gateName))
            })
            .catch(err => { })
        },
        setStaffDic(mall_id) {
            this.$api.management.staff({ mallId: mall_id })
            .then(res => {
                let result = res.data;
                result.data.forEach(item => {
                    this.setSessionLocal('staff-' + item.personUnid, item.name);
                });
                this.getTableData();
            })
        },
        getTableData () {
            this.$api.flowReport.captureRecord(this.emitData)
            .then(res => {
                let result = res.data;
                if(result.code == 200) {
                    this.tableData = [];
                    this.totalPage = result.data.total;
                    result.data.list.forEach((item, index) => {
                        item.pic = this.dealImage(item);
                        item.facePic = item.pic ? item.pic : '0';
                        item.seriesNum = (this.currentPage - 1) * this.pageSize + index + 1;
                        let isStaff = this.getSessionLocal('staff', item.personUnid);
                        item.name = isStaff ? isStaff : this.$t('dictionary.unknow') //'未知';
                        item.gateId = item.gateId;
                    })
                    this.tableData = result.data.list;
                    setTimeout(() => {
                        this.loading = false;
                        let boxWidth = $('.shotpic-img').width()
                        if(boxWidth) {
                            this.imgStyle = {'height': boxWidth + 'px'}
                        }
                        window.addEventListener('resize', () => {
                            let boxWidth = $('.shotpic-img').width()
                            if(boxWidth) {
                                this.imgStyle = {
                                    'height': boxWidth + 'px'
                                }
                            }
                        })
                    }, 100);
                } else {
                    this.$message({
                        showClose: true,
                        type: 'error',
                        message: this.$t('message.captureFailed') + result.msg
                    })
                }
            })
            .catch(err => {
                this.catchErrorHandle(err)
            })
        },
        dealDate(counttime) {
            var date=counttime.split(' ')[0];
            var year=date.split('-')[0];
            var month=date.split('-')[1];
            var day=date.split('-')[2];
            var dateStr=year+month+day;
            return dateStr
        },
        dealImg(row) {
            let img_path;
            if(row.facePic === '0'){
                if(row.gender  == '1'){
                    img_path = maleImg
                }else if(row.gender  == '0'){
                    img_path = femaleImg
                }else{
                    img_path = defaultImg
                }
            }else{
                img_path = window._vionConfig.picUrl + '/picture/' + row.facePic
            }
            return img_path;
        },
        dealErrImg(e) {
            let ev = e || window.event;
            ev.target.src = defaultImg;
        },
        genderFormatter(row, column, cellValue) {
            let genderStr = '', localStr = '';
            localStr = this.$t('dictionary.' + this.getSessionLocal('gender', cellValue));
            genderStr = localStr ? localStr : '--';
            return genderStr;
        },
        handleSizeChange(val) {
            // this.currentPage = 1;
            this.emitData.pageSize = val;
            this.pageSize = val;
            this.loading = true;
            this.getTableData();
            // this.$refs.searchRef.searchHandle(1, val);
        },
        handleCurrentChange(val) {
            if (this.currentPage != val) {
                this.emitData.page = val;
                this.currentPage = val;
                this.loading = true;
				this.getTableData();
			} else {
                this.emitData.page = val;
                this.currentPage = val;
                this.loading = true;
				this.getTableData();
            }
        },
        changeCurpage(num, size) {
            this.currentPage = num;
        },
        sizeChange(val) {
            this.pageSize = val;
            this.emitData['pageSize'] = val;
            this.loading = true;
			this.getTableData();
		},
        getTitle(tit) {
            this.repTitle = tit;
        },
        startLoad(isCurrentPage) {
            if(isCurrentPage === 'camera') {
                this.loading = true;
            }
        },
        getPatams(param) {
            this.pageSize = param.pageSize;
            this.currentPage = param.page;
            this.emitData = param;
            let gateName = window.sessionStorage.getItem('gateNameObj')
            if(gateName){
                this.gateName = JSON.parse(gateName)
            }else{
                this.getGate(param.mallId);
            }
            this.setStaffDic(param.mallId);
        },
    }
}
</script>

<style scoped>
    .camera-wrapper {
        width: 100%;
        height: calc(100% - 110px);
    }

    .behavior-thead th {
        height: 80px !important;
    }
    
    .face-img-box {
        position: relative;
        width: 50px;
        height: 50px;
        border: 1px solid #dcdcdc;
        margin: 0px auto;
        cursor: zoom-in;
    }

    .pic-popover {
        margin: 5px 0;
        padding: 10px;
        background: #fff;
        border: 1px solid #ebeef5;
        box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        border-radius: 4px;
    }
    .download-text{
        margin-left: 980px;
    }

    .face-img {
        width: 50px;
        height: 50px;
    }

    .slot-ele-total {
        margin-right: 10px;
        font-weight: 400;
        color: #606266;
        float: left;
    }
</style>