<template>
    <div class="innerMargin">
        <el-card class="box-card">
        <div style="cursor: default">
            <div class="opt-box">
                <div>
                    <el-button type="primary" size="mini" @click="getImageList()"
                    >刷新</el-button
                    >
                    <!-- <el-button type="primary" size="mini">批量删除</el-button> -->
                </div>
                <el-date-picker
                size="small"
                align="right"
                v-model="timeRange"
                type="daterange"
                @change="timeRangChange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
                </el-date-picker>
            </div>
            <el-row :gutter="20">
                <viewer :images="images" class="images clearfix">
                    <template slot-scope="scope">
                        <el-col :span="6"  v-for="(src,index) in scope.images" :key="index">
                            <el-card>
                                    <img :src="src"  class="image">
                                    <span class="time">2020-12-25 12:00:00</span>
                                    <span class="del iconfont icon-shanchu" @click="delPhoto()"></span>
                                    <div class="bottom">
                                        <img src="@/assets/images/forecasting/monitor/icon.png" >
                                        病情识别
                                    </div>
                            </el-card>
                        </el-col>
                    </template>
                </viewer>
                <!-- 暂无数据 -->
                <div class="expertDiagnosis_referral_units_not" v-if="images.length <= 0">
                    <img
                    :src="$imghost + zanwu"
                    alt
                    class="expertDiagnosis_referral_units_notImg"
                    />
                </div>
            </el-row>
            
        </div>
        </el-card>
    </div>
</template>

<script>
   export default {
        data(){
            return {
                timeRange:'',
                imei:this.$route.params.id,
                zanwu: "/images/expertDiagnosis/zanwu.png",
                page:1,
                images:[]
            }
        },
        mounted(){
            this.getImageList()
        },
        methods:{
            getImageList(){
                this.$axios({
                    method:'POST',
                    url:'/api/api_gateway?method=camera.camera_manage.camera_photo',
                    data:this.qs.stringify({
                        imei:this.imei,
                        page:this.page
                    })
                }).then((res)=>{

                })
            },
            timeRangChange() {
                this.page = 1;
                if (this.timeRange) {
                    this.begin = parseInt(new Date(this.timeRange[0]).getTime() / 1000);
                    this.end = parseInt(new Date(this.timeRange[1]).getTime() / 1000);
                } else {
                    this.begin = "";
                    this.end = "";
                }
                  this.getImageList();
            },
            // 删除图片
            delPhoto(data) {
            var arr = [];
            console.log(arr);
            this.$confirm("此操作将删除该图片, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                this.$axios({
                    method: "POST",
                    url:
                    "/api/api_gateway?method=camera.camera_manage.del_camera_photo",
                    data: this.qs.stringify({
                    photo_id_list: arr,
                    }),
                })
                    .then((res) => {
                    console.log(res);
                    this.$message({
                        type: "success",
                        message: "删除成功!",
                    });
                    this.getImageList()
                    })
                    .catch((err) => {
                    console.log(err);
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                    });
                })
                .catch(() => {});
            },
        }
   }
</script>

<style lang='less' scoped>
.opt-box{
    display:flex;
    justify-content: space-between;
    margin-bottom:20px;
}
/* 时间段选择框的宽度 */
.el-date-editor--daterange.el-input__inner{width:220px}
.image {
    width:100%;
    height:auto;
    cursor: pointer;
    margin: 5px;
    display: inline-block;
  }
.time{position:absolute;bottom:52px;color:#fff;font-size:14px;left:30px}
.del{position: absolute;top:30px;right:30px;color:rgb(199, 0, 0);font-size:20px;font-weight:bold;display:none;}
.el-card{
    position:relative;
    .bottom{
        font-size:14px;
        color:#666;
        display:flex;
        align-items: center;
        justify-content:center;
        img{margin-right:5px;width:16px;}
        }
    }
.el-card:hover{
    .del{display:block}
}
</style>