<template>
  <div class="page-container infoPage">
    <div class="page-top-title-box">
      <p class="page-top-title-name-p" style="margin-left: 20px">详情</p>
      <p class="page-top-title-out-p" @click="backPage">返回</p>
    </div>
    <div class="text-box">
      <p>标题</p>
      <p>{{propsData.imgName}}</p>
    </div>
    <div class="text-box">
      <p>类型</p>
      <p>{{propsData.imgCategory == 1?'轮播图':(propsData.imgCategory == 2?'文化图':'')}}</p>
    </div>
    <div class="text-box">
      <p>范围</p>
      <p>{{propsData.imgRangeName}}</p>
    </div>
    <div class="text-box">
      <p>排序</p>
      <p>{{propsData.imgOrder}}</p>
    </div>
    <div class="text-box">
      <p>有效期</p>
      <p>{{propsData.validBeginTime}}-{{propsData.validEndTime}}</p>
    </div>
    <div class="text-box">
      <p>内容</p>
      <img :src="propsData.imgUrl" @click="lockImg(propsData.imgUrl)">
    </div>
    <!--查看图片-->
    <el-dialog :title="imgTitle" :visible.sync="imgOpen" width="1200px" append-to-body :close-on-click-modal="false">
      <div class="scrollbar-box" style="width:1160px;margin:0 auto;max-height:700px;overflow-y: scroll">
        <img :src="imgUrl" style="display:block;max-width:1160px;margin:0 auto;">
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "infoPage",
    props:{
      propsData:{},
    },
    data(){
      return{
        //查看图片
        imgOpen:false,
        imgTitle:"",
        imgUrl:"",
      }
    },
    created() {

    },
    methods: {
      //查看图片
      lockImg(url){
        console.log("url",url);
        this.imgTitle = "查看";
        this.imgUrl = url;
        this.imgOpen = true;
      },
      // 返回按钮
      backPage(){
        this.$parent.tableButton('out');
      },
    }
  }
</script>

<style scoped lang="scss">
  .infoPage{
    flex:1;
    display: flex!important;
    flex-direction: column;
    *{
      margin:0;
    }
    .top-title-box{
      display: flex;
      border-bottom:1px solid #dedede;
      margin-bottom:30px;
      p:nth-child(1){
        flex:1;
        margin-left:20px;
        color:#0045af;
        line-height:80px;
        font-size:18px;
      }
      p:nth-child(2){
        margin:20px;
      }
    }
    .text-box{
      display: flex;
      margin:0 40px;
      p{
        line-height: 50px;
        font-weight: 500;
      }
      p:nth-child(1){
        width:100px;
        text-align: right;
        color:#999;
        margin-right:20px;
        span{
          color:#FF3131;
          margin-right:5px;
        }
      }
      p:nth-child(2){
        color:#333333;
      }
      img{
        margin-top:10px;
        width:200px;
        height:150px;
        cursor: pointer
      }
    }
  }
</style>
