<template>
  <div class="bi-operate-log">
    <div class="bi-operate-log__head">
      <strong class="bi-operate-log__title">日志</strong>
    </div>
    <div class="bi-operate-log__body">
      <div class="bi-operate-log__list" v-if="data && data.length">
        <div
          class="bi-operate-log__item"
          v-for="(item, index) in data"
          :key="index"
        >
          <span class="bi-operate-log__user" v-if="false">{{item.name}}</span>
          <span class="bi-operate-log__content">{{item.content}}</span>
          <span class="bi-operate-log__date">{{item.date}}</span>
        </div>
      </div>
      <div class="bi-operate-log__form">
        <div class="bi-operate-log__form-user">
          <bi-user-avatar :src="userAvatar" size="medium"></bi-user-avatar>
        </div>
        <div class="bi-operate-log__form-main">
          <div class="bi-operate-log__form-input">
            <ui-textarea v-model="inputComment" placeholder="填写评论"></ui-textarea>
          </div>
          <div class="bi-operate-log__form-toolbar">
            <ui-button type="primary" :click="handleConfirmClick">保存</ui-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import UiTextarea from '@huntianning/components/packages/textarea'
import BiUserAvatar from '@huntianning/components/packages/user-avatar'
import Message from '@huntianning/components/packages/message'

export default {
  name: 'BiOperateLog',
  components: {
    UiTextarea,
    BiUserAvatar
  },
  props: {
    data: {
      type: Array
    },
    userAvatar: {
      type: String
    },
    userName: {
      type: String
    },
    sendCommentMethod: {
      type: Function
    }
  },
  data() {
    return {
      inputComment: ''
    }
  },
  methods: {
    handleConfirmClick() {
      if (!this.inputComment) {
        Message.error('评论内容不能为空')
        return
      }
      if (!this.sendCommentMethod) {
        return
      }
      return this.sendCommentMethod({
        content: this.inputComment
      }).then(() => {
        this.inputComment = ''
      })
    }
  }
}
</script>
<style lang="less">
.bi-operate-log__head{
  height: 32px;
  line-height: 32px;
  margin-bottom: 3px;
}
.bi-operate-log__title{
  font-size: 18px;
}
.bi-operate-log__item{
  line-height: 1.5em;
  padding: 3px 0;
  &:before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #D5D8DC;
    border-radius: 50%;
    margin-right: 9px;
  }
}
.bi-operate-log__user{
  margin-right: 6px;
}
.bi-operate-log__date{
  color: #999;
  margin-left: 6px;
}
.bi-operate-log__form{
  display: flex;
  flex-direction: row;
  margin-top: 16px;
}
.bi-operate-log__form-user{
  margin-right: 12px;
}
.bi-operate-log__form-main{
  flex: 1;
}
.bi-operate-log__form-input{
  margin-bottom: 16px;
}
</style>
