<template>
  <div class="ls-vertical">
    <div class="ls-container" style="min-height: 100px;">
        <div class="ls-task">
          <div class="title">
            <span>任务动态</span>
          </div>
          <div class="dynamicList" v-for="(item,index) in reviewerParamList">
            <div class="head_portrait">
              <img src="../../../../assets/img/public/heder.png">
            </div>
            <div class="content">
              <div>
                <b class="dynamic_name">{{item.updater}}</b>
                <span class="dynamic_time">{{item.updateTime}}</span>
              </div>
              <div v-if="dynamic==1">
                <div class="dynamic_situation">
                  任务未完成
                </div>
                <div class="dynamic_situation">
                  原因备注：
                </div>
              </div>
              <div v-if="dynamic==2">
                <div class="dynamic_situation">
                  创建任务
                </div>
              </div>
              <div v-if="dynamic==3">
                <div class="dynamic_situation">
                  原因备注：{{item.content}}
                </div>
              </div>
            </div>
          </div>
        </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'dynamic',
    props: {
      reviewerParamList: {
        type: Array,
        default: () => [],
        required: true
      }
    },
    components: {

    },
    created() {

    },
    mounted() {

    },
    methods: {



    },
    data() {
      return {
        users: [],
        information: "",
        dynamic: 3,

      }
    }
  }
</script>

<style scoped lang="scss">
  .ls-task {
    margin: 0;
    border-top: 1px solid #f4f4f4;
    overflow: hidden;

    >.title {
      margin-top: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      >span {
        color: #357FB9;
        font-size: 16px;
        font-weight: bold;
      }
    }

    >.dynamicList {
      display: flex;
      width: 48%;
      height: 129px;
      border-radius: 10px;
      background-color: #F8F8F8;
      margin: 27px 0px 0px 15px;
      padding: 20px;

      .head_portrait {
        width: 40px;
        height: 40px;
        border-radius: 25px;
        // background-color: #000000;
      }

      .head_portrait img {
        width: 50px;
        height: 50px;
      }

      .content {
        margin-left: 20px;
        color: #666666;
        font-size: 14px;

        .dynamic_name {
          color: #333333;
          font-size: 16px;
          font-family: Microsoft YaHei;
          opacity: 1;
          margin-right: 10px;
        }

        .dynamic_situation {
          margin-top: 15px;
        }

        .reason_remarks {
          margin-top: 15px;
        }

      }
    }

  }
</style>
