<template>
  <div>
    <el-form label-width="80px" label-position="right" ref="messageForm" style="width: 90%;margin: 0 auto">
      <el-form-item label="订单消息">
        <el-input type="textarea" v-model="sMessage" rows="6" maxlength="200" show-word-limit></el-input>
      </el-form-item>
      <el-form-item>
      <el-button @click="resetForm('messageForm')">重 置</el-button>
      <el-button type="primary" @click="addMemo">增 加</el-button>
      </el-form-item>
    </el-form>
    <div>
      <el-card shadow="always" v-if="messageList.length>0" style="width: 95%;margin: 0 auto">
        <el-timeline style="width: 90%;margin-top: 20px">
          <el-timeline-item v-for="message in messageList" :key="message.id" :timestamp="timeString ? (message.createTime).substring(0,19):message.createMan+'  '+(message.createTime).substring(0,19)" placement="top" >
            <el-card class="stepList">
              <p style="word-wrap: break-word;">{{message.messageStr}}</p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </el-card>
      <div v-else>
        <span style="display: block;width: 100%;line-height: 34px;text-align: center;color: #7c7c7c">暂无反馈消息</span>
      </div>
    </div>
  </div>
</template>

<script>
import { addOrderMessage, getOrderMessageList } from '@/api/order/orderList'
export default {
  name: 'OrderMessage',
  data() {
    return {
      idOrder: '',
      sMessage: '',
      messageList: [],
      timeString: ''
    }
  },
  created() {
    // this.getList()
  },
  methods: {
    getList() {
      var _that = this
      var data = {
        'idOrder': _that.idOrder
      }
      // console.log(data);
      getOrderMessageList(data).then(response => {
        // console.log(response)
        _that.messageList = response.data
      }).catch(err => {
        _that.$message.error(err)
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    addMemo() {
      var _that = this
      if (_that.sMessage == '' || _that.sMessage == null) {
        _that.$message.error('消息不能为空')
        return
      }
      var data = {
        'idOrder': _that.idOrder,
        'sMessage': _that.sMessage
      }
      addOrderMessage(data).then(response => {
        // console.log(response)
        if (response.httpCode == 200) {
          _that.$message({
            message: '增加成功',
            type: 'success'
          })
          _that.$emit('handleAddBreed', _that.sMessage)
          _that.sMessage = '';
          _that.getList()
          _that.$emit('addMessageHandle',response.data)
        }
      }).catch(err => {
        _that.$message.error(err)
      })
    }
  }
}
</script>

<style scoped>

</style>
