<!-- CopyRight (C) 2017-2022 Alibaba Group Holding Limited. -->
<!-- Created by Tw93 on 17/07/28. -->

<template>
  <div>
    <div class="info-list" v-if="type=='imgleft'" v-for="(v,index) in infoList" :key="index" @click="infoClick(index)"> 
      <image :src="v.src" class="info-list-img mr30" :style="imgStyle"></image>
      <div class="flex1">
          <text class="info-list-tit" :style="titleStyle">{{v.textTitle}}</text>
          <text class="info-list-info" :style="infoStyle">{{v.textInfo}}</text>
          <text v-if="v.textTime" class="info-list-time" :style="timeStyle">{{v.textTime}}</text>
      </div>
    </div>

    <div class="info-list" v-if="type=='imgright'" v-for="(v,index) in infoList" :key="index" @click="infoClick(index)">
      <div class="flex1">
          <text class="info-list-tit" :style="titleStyle">{{v.textTitle}}</text>
          <text class="info-list-info" :style="infoStyle">{{v.textInfo}}</text>
          <text v-if="v.textTime" class="info-list-time" :style="timeStyle">{{v.textTime}}</text>          
      </div>
      <image :src="v.src" class="info-list-img" :style="imgStyle"></image>
    </div>

    <div class="info-list" v-if="type=='text'" v-for="(v,index) in infoList" :key="index" @click="infoClick(index)">
      <div class="flex1">
          <text :class="['info-list-tit', line==2 && 'line2']" :style="titleStyle">{{v.textTitle}}</text>
          <text class="info-list-info1" v-if="v.textInfo">{{v.textInfo}}</text>
          <text class="info-list-time" :style="timeStyle">{{v.textTime}}</text>          
      </div>
    </div>
  </div>

</template>

<script>
  export default {
    props: {
      infoList:Array,
      imgStyle:{
        default:''
      },
      titleStyle:{
        default:''
      },
      infoStyle:{
        default:''
      },
      timeStyle:{
        default:''
      },
      type:{
        type: String,
        default: 'text'
      },
      line: {
        type:  Number,
        default: 1
      }
    },
    computed: {
    },
    methods: {
      infoClick (index) {
        this.$emit('infoClick',index);
      }
    }
  }
</script>

<style scoped>
  .mr30{ margin-right: 30px;}
  .ml30{ margin-left: 30px;}
  .flex1{flex:1;}
  .info-list{
      flex-direction: row;
      padding-top: 40px;
      padding-bottom: 40px;
      padding-left: 30px;
      padding-right: 30px;
      border-bottom-style: solid;
      border-bottom-color: #ececec;
      border-bottom-width: 1px;
      align-items: flex-start; /*141667 【组件库】lc-info-list修改对齐方式*/
  }
  .info-list-img{
      width: 145px;
      height: 145px;
  }
  .info-list-tit{
      font-size: 32px;
      lines:1;
      color: #282d32;
  }
  .info-list-info{
      font-size: 26px;
      lines:2;
      color: #909090;
      margin-top: 10px;
      line-height: 38px;
  }
  .info-list-info1{
      font-size: 26px; 
      lines:1; 
      color: #9a9aa6; 
      margin-top: 20px;
  }
  .info-list-time{
      text-align: right;
      color: #b3b7b9;
      font-size: 22px;
      margin-top: 10px;
  }
  .line1{ lines:1;} 
  .line2{ lines:2;} 
</style>
