<template>
    <div class="dialog-body">
        <div class="flex_row" style="width: 100%;background-color: #fff;">
            <div class="flex_row" style="width: 95%;">
                <div class="atitle">{{ types }}介绍</div>
                <div class="details">{{details.introduce}}</div>
            </div>
        </div>
        <div class="flex_row" style="width: 100%;margin-top: 25px;">
            <div class="flex_row" style="width: 100%;">
                <div class="atitle">{{ types }}展图</div>
                <div v-for="(item,index) in details.imgList" :key="index">
                    <el-image class="imgs" :src="item" alt="" :preview-src-list="details.imgList"></el-image>
                </div>
            </div>
        </div>
        <div class="flex_row" style="width: 100%;margin-top: 25px;justify-content: space-between;" >
            <div class="flex_row" style="width: 37%;">
                <div class="atitle">{{ types }}视频</div>
                <div><video class="videos" controls :src="details.video"></video></div>
            </div>
            <div class="flex_row" style="width: 54.5%;">
                <div class="atitle" style="margin-left: 43px;">驳回原因</div>
                <div class="overrule">{{details.overrule}}</div>
            </div>
        </div>
        <div class="flex_row btn_box">
            <div class="onbtn">上架{{ types }}</div>
            <div class="offbtn">下架{{ types }}</div>
        </div>
    </div>
  </template>
  <script>
  export default {
    props: {
        types: {
        type: String,
        default: ''
      },
      details: {
        type:Object,
        default: {}

      }
    },
      data() {
          return {

          }
      },
      methods: {
        preview(item){
            this.$emit('preview',item)
        }
      }
  }
  </script>
  
  <style scoped>
    .dialog-body{
        height: 550px;
        padding: 30px 0px;
        margin-top: 15px;
        border-radius: 4px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: wrap;
        position: relative;
    }
    .atitle{
        width: 100px;
        color: #333333;
        font-weight: bold;
        font-size: 16px;
        margin-left: 55px;
    }
    .details{
        width: 90%;
        height: 100px;
        padding: 15px;
        border: 1px solid #aaaaac;
        border-radius: 3px;
    }
    .overrule{
        width: 550px;
        height: 200px;
        padding: 15px;

        border: 1px solid #aaaaac;
        border-radius: 3px;
    }
    .imgs{
        width: 100px;
        height: 100px;
        margin-right: 15px;
    }
    .videos{
        height: 200px;
        margin-left: 25px;
    }
    .onbtn{
        width: 120px;
        height: 40px;
        line-height: 40px;
        background-color: #fff;
        border: 1px solid#2F51FF;
        color: #2F51FF;
        text-align: center;
        border-radius: 3px;
    }
    .offbtn{
        width: 120px;
        height: 40px;
        line-height: 40px;
        background-color: #2F51FF;
        border: 1px solid#2F51FF;
        color: #FFF;
        text-align: center;
        border-radius: 3px;
        margin-left: 15px;
    }
    .btn_box{
        width: 100%;
        margin-top: 20px;
        justify-content: center;
    }
  </style>