<template>
  <div class="record" v-if="record.length>0">
    <div class="record-title">记录</div>
    <div v-for="(item,index) in record" :key="index" :class="[record.length-index>1?'record-list':'']">
      <div class="flex-box-ce record-date fontColorB">
        <userImage :user_name="item.userData.name" :img_url="item.userData.img_url" fontSize="12" width="32px" height="32px"></userImage>
        <div class="record-name">{{item.userData.name}}</div>
        <span class="fontColorC"> {{item.time}}</span>
      </div>
      <div class="record-message flex-box-ce">
        <div class="blue"># {{item.remark}} #</div>
      </div>
      <div class="record-content" v-if="item.content">
        <pre class="pre">{{item.content}}</pre>
<!--        <el-input  type="textarea" class="textarea" v-model="item.content" :rows="2" disabled>

        </el-input> -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Record',
  props:{
    record:{
      type:Array,
      default:()=>{
        return []
      }
    }
  },
  data() {
    return {
    };
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {

  }
};
</script>

<style scoped="scoped">
  .pre{
    margin: 0 !important;
    font-family: 微软雅黑;
    background-color:#f4f6f9 ;
    width: 800px;
    white-space:pre-wrap;/*css-3*/
    white-space:-moz-pre-wrap;/*Mozilla,since1999*/
    white-space:-pre-wrap;/*Opera4-6*/
    white-space:-o-pre-wrap;/*Opera7*/
    word-wrap:break-word;/*InternetExplorer5.5+*/
  }
  .textarea ::v-deep textarea{
    background-color:#f4f6f9 ;
    border: none;
    padding: 0;
    width: 500px;
    color: #222 !important;
  }
  .record-message{
    font-size: 13px;
    margin: 15px 60px;
  }
  .record-list{
    position: relative;
    padding-bottom: 20px;
  }
  .record-title{
    padding: 16px 0;
    font-size: 16px;

  }
  .record-date{
    padding-left:20px;
    position: relative;
    font-size: 13px;
  }
  .record-date::after{
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: #238DFA;
    left: 0;
    top: 50%;
    margin-top: -4px;
    border-radius: 50%;
    z-index: 2;
  }
  .record-list::after{
    content: "";
    position: absolute;
    width: 1px;
    top: 4px;
    left: 3px;
    bottom: 0;
    border-right: 1px dashed #ccc;
  }
  .record-content{
    margin-left: 60px;
    background-color: #f4f6f9;
    padding: 10px;
    display: inline-block;
  }
  .record-name{
    margin-right: 10px;
    margin-left: 10px;
  }
</style>
