<template>
  <el-dialog
    ref="dialog"
    :close-on-click-modal="false"
    :title="title"
    :visible.sync="dialogVisible"
    :destroy-on-close="true"
    width="40%"
    :model="false"
    :before-close="handleClose"
  >
    <el-timeline :reverse="false">
      <el-timeline-item
        v-for="(activity, index) in activities"
        :key="index"
        >
        <div @click="extendTime(activity)">
          <span class="time">{{activity.timestamp}}</span>
          <span>{{activity.content}}</span>
        </div>
        <template v-if="activeTimeId === activity.id">
          <div class="base-info">
            <div class="info-a">
              <span>评价总数：</span>
              <span>232</span>
            </div>
            <div class="info-a">
              <span>评价总数：</span>
              <span>232</span>
            </div>
            <div class="info-a">
              <span>评价总数：</span>
              <span>232</span>
            </div>
          </div>
          <div>
            <span>附件：</span>
            <span>这是一份xx</span>
          </div>
          <div>
            <el-input type="textarea"></el-input>
          </div>
        </template>

      </el-timeline-item>
    </el-timeline>
  </el-dialog>
</template>

<script>
export default {
  name: "PlanTimeLineModel",
  props:{
    dialogVisible:{

    },
    title:{

    }
  },
  methods:{
    handleClose() {

      this.$emit('update:dialogVisible',false)

    },
    extendTime(activity){
      this.activeTimeId = activity.id
      console.log(activity)
    }
  },
  data() {
    return {
      activities: [{
        content: '已提交',
        timestamp: '2018-04-15',
        id:1
      }, {
        content: '已提交',
        timestamp: '2018-04-13',
        id:2
      }, {
        content: '已提交',
        timestamp: '2018-04-11',
        id:3
      }],
      activeTimeId:1
    }
  }
}
</script>

<style scoped lang="scss">
.base-info{
  display: flex;
  .info-a{
    line-height: 2;
    margin-right: 10px;
  }
}
 ::v-deep{
   .el-textarea__inner{
     margin-top: 10px;
     height:110px;
   }
   .time{
     display: inline-block;
     margin-right: 10px;
     width: 90px ;
   }
 }
</style>