<template>
  <div>
    <el-drawer
      :modal-append-to-body='modalAppendBody'
      title="施工单脚印"
      :reverse="true"
      :visible.sync="drawer"
      :with-header="false">
      <el-timeline style="width: 90%;margin-top: 20px">
        <el-timeline-item
          v-for="(activity, index) in activitiesArray"
          :key="index"
          placement="top"
          :timestamp="(activity.workTime).substring(0,19)+'  '+activity.workMan">
          <el-card>
            <h4 style="margin: 5px 0">{{ activity.workMemo }}</h4>
            <p v-if="activity.workExplain!=null && activity.workExplain!='' && activity.workExplain!=undefined">{{activity.workExplain}}</p>
          </el-card>

        </el-timeline-item>
        <span @click="handleOpen()" v-show="activities.length>=10 && avtiveStep"
              style="display: block;margin-top: 20px;margin-left: 15px;color: #409EFF;cursor: pointer">展开<i
          class="el-icon-arrow-down"></i></span>
        <span @click="handleClose()" v-show="!avtiveStep"
              style="display: block;margin-top: 20px;margin-left: 15px;color: #409EFF;cursor: pointer">收起<i
          class="el-icon-arrow-up"></i></span>
      </el-timeline>

    </el-drawer>
  </div>
</template>

<script>
import {
   getPrintBillSteps
} from '@/api/printbill/printbill.js'
export default {
  name: 'printbillStep',
  props: {
    modalAppendBody: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      idOrder:"",
      activities: [],
      drawer: false,
      avtiveStep: true,
      activitiesArray: [],
      memoDrawer: false,
    }
  },
  created() {
    // this.getList()
  },
  methods: {
    getStep() {
      const _that = this;

      var data = {
        idPrintBill: _that.idOrder
      }
      getPrintBillSteps(data).then(res => {
        var datas = res.data;
        _that.activitiesArray = res.data;
        if (_that.activitiesArray.length <= 0) {
          _that.$message("暂无脚印");
          return
        }
        _that.drawer = true;

      }).catch(err => {
        _that.$message.error(err)
      })
    }
  }
}
</script>

<style scoped>

</style>
