<!--照片浏览DIALOG-->
<!--
        <lookSingleImgDialog ref="lookSingleImgDialog"></lookSingleImgDialog>
        import lookSingleImgDialog from '@/components/lookSingleImgDialog/lookSingleImgDialog.vue'
        components: {
          lookSingleImgDialog
        },
        /*
          传入3个参数(1,url,title)
          1-开启
          url-地址
          title-标题
        */
        this.$refs.lookSingleImgDialog.lookImgDialogOpen(1,item.fileUrl,'预览');
-->
<template>
  <el-dialog class="look-img-dialog" :title="lookImgDialogTitle" :visible.sync="lookImgDialogType" v-if="lookImgDialogType" width="1070px" height="700" append-to-body>
    <div class="look-img-dialog-min scrollbar-box" :class="backType?'back99':''">
      <img :src="lookImgUrl">
    </div>
  </el-dialog>
</template>

<script>
  export default {
    name: 'lookSingleImgDialog',
    data(){
      return{
        lookImgDialogTitle:null,
        lookImgDialogType:false,
        lookImgUrl:null,
        backType:false,
      }
    },
    created(){

    },
    mounted(){

    },
    methods:{
      /*
      * type:1.开启
      * url:地址
      * title:标题
      * backType:true 灰色背景
      * */
      lookImgDialogOpen(type,url,title,backType){
        if(type == 1){
          this.$set(this,'backType',backType?backType:false);
          this.$set(this,'lookImgUrl',url);
          this.$set(this,'lookImgDialogTitle',title?title:'照片');
          this.$set(this,'lookImgDialogType',true);
        }else{
          this.$set(this,'lookImgDialogType',false);
        }
      },
    },
  }
</script>

<style scoped lang="scss">
  .look-img-dialog{
    .left-i-button{
      cursor: pointer;
      text-align: center;
      line-height:30px;
      color:#fff;
      font-size:16px;
      top:350px;
      left:40px;
      position: absolute;
      width:30px;
      height:30px;
      background-color: #0045AF;
      border-radius:50%;
    }
    .right-i-button{
      cursor: pointer;
      text-align: center;
      line-height:30px;
      color:#fff;
      font-size:16px;
      position: absolute;
      top:350px;
      right:40px;
      width:30px;
      height:30px;
      background-color: #0045AF;
      border-radius:50%;
    }
    .right-i-button:hover{
      background-color: #0183fa;
    }
    .left-i-button:hover{
      background-color: #0183fa;
    }
    .look-img-dialog-bottom-text{
      text-align: center;
      line-height: 30px;
      font-size:16px;
      position: absolute;
      bottom:0;
      width:1026px;
    }
    .back99{
      background-color: #dedede!important;
    }
    .look-img-dialog-min{
      height:560px;
      display: flex;
      flex-direction: column;
      img{
        max-width:1026px;
        display: block;
        margin:auto;
      }
    }
  }
</style>
