<template>
  <view class="order-record-view">
    <view class="top-item">
      <text>履约记录</text>
    </view>
    <view v-if="orderRecords.length == 0" class="no-record-view"
      >当前暂无履约记录</view
    >
    <view
      v-else
      :class="[
        'record-list-view',
        { short: orderRecords.length <= showLenght },
      ]"
    >
      <view class="record-right-view">
        <view class="dashed-line-view"></view>
        <view class="order-list">
          <view
            v-for="(record, index) in showOrderRecords"
            :key="record.operationContent"
            :class="['order-cell', { first: index == 0 }]"
          >
            <view class="node-view">
              <view class="node-border-view">
                <view class="node-middle-view"></view>
              </view>
            </view>
            <view class="right-view">
              <view class="line-view-top">
                <text>{{
                  $u.timeFormat(
                    record.operationDatetime,
                    'yyyy.mm.dd &nbsp hh:MM:ss'
                  )
                }}</text>
                <text style="color: red;"
                  >{{ record.overTime ? '超时' : ''
                  }}{{ record.overTime && record.exception ? '/' : ''
                  }}{{ record.exception ? '异常' : '' }}</text
                >
                <text style="color: #2272FF;" v-show="record.isTrace"
                  >跟进</text
                >
              </view>
              <view class="line-view-item">
                <view>
                  <text>{{ record.operationTypeText }}</text>
                </view>
                <view class="item-operation-view" v-show="record.isTrace">
                  <text class="item-label">{{ record.traceLabel + '：' }}</text>
                  <text class="item-content">{{ record.traceTime }}</text>
                </view>
                <view
                  class="item-operation-view"
                  v-show="record.operationContent"
                >
                  <text class="item-label">备注：</text>
                  <text class="item-content">{{
                    record.operationContent
                  }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view
        v-if="orderRecords && orderRecords.length > showLenght"
        @click="readMoreRecord = !readMoreRecord"
      >
        <view v-if="readMoreRecord" class="read-more-toggle">
          <u-icon name="arrow-down"></u-icon>
          <text class="read-more-text">查看更多</text>
        </view>
        <view v-else class="read-more-toggle">
          <u-icon name="arrow-up"></u-icon>
          <text class="read-more-text">点击收起</text>
        </view>
      </view>
      <view v-else style="height: 10rpx;"></view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    // 履约记录
    orderRecords: {
      type: Array,
      default() {
        return []
      },
    },
  },
  data() {
    return {
      readMoreRecord: true,
      showLenght: 5,
    }
  },
  computed: {
    showOrderRecords() {
      if (
        this.readMoreRecord &&
        this.orderRecords &&
        this.orderRecords.length > 0
      ) {
        return this.orderRecords.slice(0, this.showLenght)
      } else {
        return this.orderRecords
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.order-record-view {
  .top-item {
    font-size: 32rpx;
    color: #333333;
    font-weight: bold;
    margin-bottom: 20rpx;
  }

  .no-record-view {
    font-size: 26rpx;
    color: #333333;
    padding-bottom: 30rpx;
  }

  .record-list-view {
    position: relative;

    &.short {
      padding-bottom: 30rpx;
    }
    .record-right-view {
      position: relative;
      display: flex;
      justify-content: space-between;

      .dashed-line-view {
        position: absolute;
        width: 2rpx;
        border-left: 1px dashed #2272ff;
        height: 100%;
        top: 14rpx;
        left: 11rpx;
      }

      .order-list {
        width: 100%;

        .order-cell {
          margin-top: 50rpx;
          display: flex;

          &.first {
            margin-top: 0;
          }
          .node-view {
            margin-right: 18rpx;
            flex-shrink: 0;
            margin-top: 8rpx;
            z-index: 1;

            .node-border-view {
              border: 2rpx solid #2272ff;
              border-radius: 50%;
              width: 22rpx;
              height: 22rpx;
              display: flex;
              align-items: center;
              justify-content: center;
              // padding: 6rpx;
              background-color: #ffffff;

              .node-middle-view {
                width: 10rpx;
                height: 10rpx;
                background-color: #2272ff;
                border-radius: 50%;
              }
            }
          }

          .right-view {
            width: 100%;

            .line-view-top {
              display: flex;
              align-items: center;
              justify-content: space-between;
              color: #333333;
              font-weight: bold;
              font-size: 28rpx;
            }

            .line-view-item {
              color: #666666;
              font-size: 26rpx;
              margin-top: 10rpx;

              .item-operation-view {
                margin-top: 20rpx;
                .item-label {
                  color: #2272ff;
                }
                .item-content {
                  word-break: break-all;
                }
              }
            }
          }
        }
      }
    }
  }

  .read-more-toggle {
    text-align: center;
    color: #2272ff;
    font-size: 26rpx;
    padding-top: 30rpx;
    padding-bottom: 30rpx;
  }

  .read-more-text {
    padding-left: 8rpx;
  }

  .order-item-more {
    font-size: 26rpx;
    color: #333333;
    text-align: right;

    .line-view {
      background-color: #f4f5f7;
      height: 2rpx;
      margin-bottom: 20rpx;
    }
  }
}
</style>
