<template>
  <div class="show-operateInfo">
    <div
    v-for="item in list"
    :key="item.id"
    class="show-line">
      <div class="show-linkName">{{item.linkName}}</div>
      <div class="show-contentArea">
        <div
        v-for="items in item.traceLinkItems"
        :key="items.id"
        class="show-items">
          <div class="show-title" v-if="items.title">{{items.title}}<span v-if="items.title">：</span></div>
          <!-- 图片/大图 -->
          <template v-if="items.type == 1 || items.type == 8">
            <el-image
              :class="items.type==1?'image-small':'image-big'"
              v-for="(itemUrl,indexUrl) in items.imgUrl"
              :key="indexUrl"
              :src="itemUrl"
              :preview-src-list="items.imgUrl"
              fit="fill"></el-image>
          </template>
          <!-- 视频 -->
          <template v-if="items.type == 2">
            <video muted="muted" class="show-video" :src="items.content" type="video/mp4" controls="controls" loop="-1">
              <p>你的浏览器不支持video标签.</p>
            </video>
          </template>
          <!-- 文本/长文本/无标文本/无标长文本 -->
          <template v-if="items.type == 3 || items.type == 4 || items.type == 5 || items.type == 6">
            <div class="show-content" v-if="!items.linkText">{{items.content}}</div>
            <div class="show-content" v-if="items.linkText" :class="items.content?'setting-link':''" @click="openWeb(items.linkText)">{{items.content}}</div>
          </template>
          <!-- 地图 -->
          <template v-if="items.type == 7">
            <div class="show-content"
            v-for="(itemMap,indexMap) in items.mapContent"
            :key="indexMap">{{itemMap.address}}</div>
          </template>
          <!-- PDF -->
          <template v-if="items.type == 9">
            <div class="show-content" :class="items.content?'setting-link':''" @click="openWeb(items.content)">PDF文件</div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default{
    props:{
      list: {
        type: Array,
        default: [],
      }
    },
    watch:{
      list:{
        handler: function(newValue,oldValue){
          console.log('列表',newValue);
          newValue.map(item=>{
            item.traceLinkItems.length && item.traceLinkItems.map(items=>{
              if(items.type == 1 || items.type == 8){
                if(items.content){
                  if( items.content.indexOf(',') != -1 ) {
                    items.imgUrl = items.content.split(',');
                  }else{
                    items.imgUrl = [items.content];
                  }
                }else{
                  items.imgUrl = '--';
                }
              }
              if(items.type == 7){
                items.content = JSON.parse(items.content);
                items.mapContent = items.content;
              }
            });
          });
        },
        immediate: true
      }
    },
    data(){
      return{

      }
    },
    mounted() {
    },
    methods:{
      openWeb(url){
        window.open(url,'_blank');
      },
    }
  }
</script>

<style lang="scss" scoped>
  .show-operateInfo{
    padding: 20px 20px 20px 50px;
    border-top: 1px solid rgb(222, 222, 222);
    .show-line{
      position: relative;
    }
    .show-line::before{
      content: '';
      position: absolute;
      left: -25px;
      top: 17px;
      height: calc(100% + 6px);
      min-width: 2px;
      background-color: rgb(222, 222, 222);
    }
    .show-line:last-child::before{
      min-width: 0px;
    }
    .show-linkName{
      font-size: 18px;
      position: relative;
    }
    .show-linkName::before{
      content: '';
      min-width: 12px;
      height: 12px;
      border-radius: 100%;
      border: 2px solid #1890ff;
      position: absolute;
      left: -30px;
      top: 7px;
    }
    .show-contentArea{
      margin-top: 16px;
      .show-items{
        margin-bottom: 16px;
        .show-title{
          margin-bottom: 10px;
          font-size: 16px;
        }
        .show-content{
          font-size: 14px;
        }
        .show-video{
          width: 320px;
        }
      }
    }
  }

  .image-small{
    width: 60px;
    height: 60px;
    margin: 5px;
  }

  .image-big{
    width: 100px;
    height: 100px;
    margin: 5px;
  }

  .setting-link{
    cursor: pointer;
    color: #1890ff;
  }
</style>
