<template>
  <div class="operate-info">
    <div
    v-for="(item,index) in list"
    :key="index"
    class="operate-list">
      <!-- list，js中重构，别从这改 -->
      <div class="operate-title">{{item.operateName}}</div>
      <div class="operate-details">
        <div
        v-for="(items,indexs) in item.operateDetails"
        :key="indexs"
        class="flex-astart-jsb pb-20 show-line">
          <div class="operate-details-title" v-if="items.title">{{items.title}}</div>
          <!-- 图片/大图 -->
          <template v-if="items.type == 1 || items.type == 8">
            <div class="operate-details-content">
              <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>
            </div>
          </template>
          <!-- 视频 -->
          <template v-if="items.type == 2">
            <video muted="muted" class="operate-details-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="operate-details-content" :class="[items.type == 5 || items.type == 6?'no-title-content':'']" v-if="!items.linkText">{{items.content?items.content:'-'}}</div>
            <div class="operate-details-content" :class="[items.type == 5 || items.type == 6?'no-title-content':'',items.content?'setting-link':'']" v-if="items.linkText" @click="openWeb(items.linkText)">{{items.content?items.content:'-'}}</div>
          </template>
          <!-- 地图 -->
          <template v-if="items.type == 7">
            <div class="operate-details-map-content">
              <div
              v-for="(itemMap,indexMap) in items.mapContent"
              :key="indexMap">{{itemMap.address}}</div>
            </div>
          </template>
          <!-- PDF -->
          <template v-if="items.type == 9">
            <div class="operate-details-content" :class="items.content?'setting-link':''" @click="openWeb(items.content)">PDF文件</div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default{
    props:{
      operateDate: {
        type: Object,
        default: {},
      },
    },
    watch:{
      operateDate:{
        handler(newValue,oldValue){
          console.log('初次获取',newValue,oldValue);
          let list = [];
          // 处理商品信息
          if( newValue.goodsInfo ){
            let operateDetails = JSON.parse(JSON.stringify(newValue.goodsInfo.operateDetails));
            list.push({
              operateName: newValue.goodsInfo.linkName,
              operateDetails: this.handleDate(operateDetails),
            });
          }
          // 处理环节信息
          if( newValue.linkInfos ){
            newValue.linkInfos.map(async item=>{
              let operateDetails = JSON.parse(JSON.stringify(item.operateDetails));
              list.push({
                operateName: item.linkName,
                operateDetails: await this.handleDate(operateDetails),
              });
            });
          }
          // 处理认证信息
          if( newValue.goodsVerifys ){
            newValue.goodsVerifys.map(async item=>{
              let operateDetails = JSON.parse(JSON.stringify(item.operateDetails));
              list.push({
                operateName: item.linkName,
                operateDetails: await this.handleDate(operateDetails),
              });
            });
          }
          // 处理农事信息
          if( newValue.farmingPlans ){
            newValue.farmingPlans.map(async item=>{
              let operateDetails = JSON.parse(JSON.stringify(item.operateDetails));
              list.push({
                operateName: item.linkName,
                operateDetails: await this.handleDate(operateDetails),
              });
            });
          }
          console.log('list',list);
          this.list = list;
        },
        immediate: true,
      },
    },
    data(){
      return{
        list: [],
      }
    },
    methods:{
      handleDate(list){
        if( list.length > 0 ){
          list.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;
            }
          });
        }
        return list;
      },
    },
  }
</script>

<style lang="scss" scoped>
  .operate-info{
    padding: 30px 20px;
    background-color: #ebeef5;
    .operate-list{
      box-shadow: 0 0.9px 9px #3d577829;
      margin-bottom: 30px;
      .operate-title{
        border-top-right-radius: 6px;
        border-top-left-radius: 6px;
        background-color: #f7f9ff;
        line-height: 42px;
        width: 100%;
        padding-left: 16px;
        font-size: 14px;
        font-weight: bold;
      }
      .operate-details{
        border-bottom-right-radius: 6px;
        border-bottom-left-radius: 6px;
        padding: 14px 14px 0px 30px;
        background-color: #ffffff;
      }
    }
    .operate-list:last-child{
      // margin-bottom: 0px;
    }
  }

  .show-line{
    position: relative;
  }
  .show-line::before{
    content: '';
    position: absolute;
    left: -12px;
    top: 14px;
    height: calc(100% - 10px);
    min-width: 2px;
    border-left: 2px dashed #1890ff;
  }
  .show-line:last-child::before{
    min-width: 0px;
    border-left: 0px dashed rebeccapurple;
  }

  .operate-details-title{
    position: relative;
    max-width: 100px;
    white-space: nowrap;
  }
  .operate-details-title::before{
    content: '';
    min-width: 8px;
    height: 8px;
    border-radius: 100%;
    border: 2px solid #1890ff;
    position: absolute;
    left: -15px;
    top: 6px;
  }

  .operate-details-content{
    font-size: 12px;
    max-width: 180px;
  }
  .operate-details-map-content{
    max-width: 180px;
    font-size: 12px;
  }

  .no-title-content{
    max-width: 100%;
  }

  .operate-details-video{
    width: 180px;
  }

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

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

  .setting-link{
    cursor: pointer;
    color: #1890ff;
  }

  .flex-astart-jsb{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }
</style>
