<template>
  <view class="bg-white">
    <view class="common-logistics">
      <view class="logistic-item" v-for="(item, index) in logisticsData" :key="index">
        <view class="total-wrap" :style="{ marginTop: item.isFirstNode ? '22rpx' : '6rpx' }">
          <view class="item-container">
            <view
              class="item-container-left flex flex-direction align-center"
              :class="[index == 0 ? 'text-1A1A1A' : 'text-808080']"
            >
              <text class="text-df">{{ item.time | dateTommdd }}</text>
              <text class="text-sm">{{ item.time | dateToHHmmss }}</text>
            </view>
            <view class="item-container-center">
              <view class="tag-container">
                <image
                  v-if="item.isFirstNode && String(item.state) != 'null'"
                  :src="nodeIconUrl(item.state, index)"
                  mode="scaleToFill"
                ></image>
                <view v-else class="item-tag-container">
                  <image
                    class="item-tag"
                    :src="[
                      index == 0
                        ? '/static/mine/logistics/active-line-state.png'
                        : '/static/mine/logistics/line-state.png'
                    ]"
                    mode="scaleToFill"
                  ></image>
                </view>
              </view>
              <view
                class="line-container"
                :style="{
                  height: item.isFirstNode ? '145rpx' : '88rpx',
                  paddingTop: item.isFirstNode ? '22rpx' : '8rpx'
                }"
              >
                <view
                  v-if="index !== logisticsData.length - 1"
                  class="line"
                  :style="{ height: item.isFirstNode ? '120rpx' : '80rpx' }"
                ></view>
              </view>
            </view>
            <view class="item-container-right" :style="{ paddingTop: item.isFirstNode ? '0' : '8rpx' }">
              <view
                v-if="item.isFirstNode"
                class="item-title text-dm text-bold"
                :class="[index == 0 ? 'text-1A1A1A' : 'text-808080']"
                >{{ item.state | stateFilter }}</view
              >
              <view
                class="item-desc text-dm"
                :class="[index == 0 ? 'text-1A1A1A' : 'text-999999']"
                :style="{ marginTop: item.isFirstNode ? '10rpx' : '0' }"
                >{{ item.context }}</view
              >
              <!-- <view class="item-time">{{item.createTime}}</view> -->
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    logisticsData: {
      type: [Object, Array]
    }
  },
  filters: {
    stateFilter(val) {
      const stateMap = {
        0: '在途',
        1: '揽收',
        2: '疑难',
        3: '签收',
        4: '退签',
        5: '派件',
        6: '退回'
      }
      return stateMap[val]
    }
  },
  computed: {
    nodeIconUrl() {
      return function (data, isFirstIndex) {
        // 物流状：0在途，1揽收，2疑难，3签收，4退签，5派件，6退回
        if (data == 0) {
          return isFirstIndex === 0 ? '/static/icon/select_1.png' : '/static/icon/select_1.png'
        } else if (data == 1) {
          return isFirstIndex === 0 ? '/static/icon/select_1.png' : '/static/icon/select_1.png'
        } else if (data == 2) {
          return isFirstIndex === 0 ? '/static/icon/select_1.png' : '/static/icon/select_1.png'
        } else if (data == 3) {
          return isFirstIndex === 0 ? '/static/icon/select_1.png' : '/static/icon/select_1.png'
        } else if (data == 4) {
          return isFirstIndex === 0 ? '/static/icon/select_1.png' : '/static/icon/select_1.png'
        } else if (data == 5) {
          return isFirstIndex === 0 ? '/static/icon/select_1.png' : '/static/icon/select_1.png'
        } else if (data == 6) {
          return isFirstIndex === 0 ? '/static/icon/select_1.png' : '/static/icon/select_1.png'
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import url('@/components/logistics/main.css');

.common-logistics {
  height: auto;
  box-sizing: border-box;
  background: #ffffff;
}

.item-container {
  width: 100%;
  height: auto;
  display: flex;

  .item-container-left {
    width: 120rpx;
    max-width: 120rpx;
  }

  .item-container-center {
    width: 44rpx;
    height: auto;

    .tag-container {
      width: 44rpx;
      height: 44rpx;

      image {
        width: 44rpx;
        height: 44rpx;
        border-radius: 50%;
      }

      .item-tag-container {
        width: 44rpx;
        height: 44rpx;
        display: flex;
        justify-content: center;
        align-items: center;

        .item-tag {
          width: 14rpx;
          height: 14rpx;
          border-radius: 50%;
        }
      }
    }

    .line-container {
      box-sizing: border-box;
      width: 44rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      .line {
        width: 2rpx;
        background-color: #dcdcdc;
      }
    }
  }

  .item-container-right {
    width: 510rpx;
    max-width: 510rpx;
    box-sizing: border-box;
    padding: 0 10rpx 0 24rpx;

    .item-title {
      width: 100%;
      height: 40rpx;
      line-height: 44rpx;
      color: #222;
      font-size: 28rpx;
    }

    .item-desc {
      margin-top: 16rpx;
      width: 100%;
      min-height: 30rpx;
      line-height: 30rpx;
      word-wrap: break-word;
      word-break: normal;
    }

    .item-time {
      margin-top: 12rpx;
      width: 100%;
      height: 34rpx;
      line-height: 34rpx;
      font-size: 24rpx;
    }
  }
}

.line-state {
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
}

.take-space {
  width: 100%;
  height: 80rpx;
}

.text-1A1A1A {
  color: #1a1a1a;
}

.text-999999 {
  color: #999999;
}

.text-808080 {
  color: #808080;
}
</style>
