<template>
  <view class="xd-express">
    <view class="xd-express__info">
      <view>
        <view>订单编号：</view>
        <view>{{information['orderId']}}</view>
      </view>
      <view>
        <view>快递编号：</view>
        <view>{{information['number']}}</view>
      </view>
      <view>
        <view>国内承运人：</view>
        <view>{{information['name']}}</view>
      </view>
      <view>
        <view>{{noticeName}}</view>
        <view>{{information['notice']}}</view>
      </view>
    </view>
    <view class="ali">
      <view class="ali_top borders" v-if="state !== 3">
        <text class="ali_top_icon">收</text>
        <text class="a14">浙江省杭州市西湖区 蒋村街道 紫霞街 110号</text>
      </view>
      <!-- ======="state": 0 ,1 ,2====== -->
      <view class="ali_state">
        <block v-for="(item,i) in datas" :key="i">
          <view class="State_Four">
            <view class="FourBox">
              <text class="line" :class="[i === 0?'noline':'']"></text>
              <text
                class="ali_top_icon"
                :class="[/^.*(签收|再次为您服务).*$/.test(item.remark)?'isOk':'']"
                style="margin: 0 0;"
                v-if="Type(item.remark) === true"
              >{{item.remark | Type}}
              </text>
              <view class="ali_top_icons" style="margin: 0 0;" v-else>
                <text class="line" :class="[i === 0?'noline':'']"></text>
                <text class="ali_top_iconss"></text>
                <text class="line" :class="[i ===0?'noline':'']"></text>
              </view>
              <text class="line" :class="[i === datas.length -1?'noline':'']"></text>
            </view>
            <view class="remark">
              <text class="a14">{{item.remark}}</text>
              <text class="a12" style="padding-top: 10rpx;">{{item.time}}</text>
            </view>
          </view>
        </block>
      </view>
    </view>
  </view>

</template>

<script>

  /**
   * @description 匹配规则
   * @type {{p: RegExp, s: RegExp, d: RegExp, y: RegExp, l: RegExp}}
   */
  let reg = {
    p: /^.*(派件中|派件|派件人|派送|安排投递).*$/, //派
    l: /^.*(已收件|已取件|收件|取件|揽投).*$/, //揽
    y: /^.*(转运|中转|营业部|集散|转场|下一站|到达).*$/, //运
    d: /^.*(熊猫快收|代收|自提通知|合作点|上门自提|智能快递柜|快递柜).*$/, //待
    s: /^.*(签收|再次为您服务|投递到|菜鸟驿站).*$/ //收
  };

  export default {
    name: "XdExpressTimeLine",
    props: {
      noticeName:{
        type: String,
        default: '描述：'
      },
      /**
       * @description 物流详细
       * @example [{time: '2019-05-23 16:30:20',remark: '[杭州市]快件派送至【丰巢智能快递柜'}],
       */
      datas: {
        type: Array,
        required: true
      },
      state: {
        type: Number, //2,3
        required: true
      },

      /**
       * @description 订单信息
       * @example {"name":"顺丰快递","orderId":"s451214554121212","number":"21212121212112"}
       */
      information: {
        type: Object,
        required: true
      },
    },
    data() {
      return {

      }
    },
    //过滤返回关键字
    filters: {
      Type(item) {
        let Info;
        let Phone = /\d{11}/;
        if (Phone.test(item) && reg.p.test(item)) {
          Info = "派";
        } else if (reg.l.test(item)) {
          Info = "揽";
        } else if (reg.y.test(item)) {
          Info = "运";
        } else if (reg.d.test(item)) {
          Info = "待";
        } else if (reg.s.test(item)) {
          Info = "收";
        } else {
          Info = "";
        }
        return Info
      }
    },
    methods: {
      //判断哪个该展示关键字--还是默认
      Type(item) {
        let Info;
        let Phone = /\d{11}/;
        if (Phone.test(item) && reg.p.test(item)) {
          Info = true;
        } else if (reg.l.test(item)) {
          Info = true;
        } else if (reg.y.test(item)) {
          Info = true;
        } else if (reg.d.test(item)) {
          Info = true;
        } else if (reg.s.test(item)) {
          Info = true;
        } else {
          Info = false;
        }
        return Info
      }
    }
  }
</script>

<style scoped lang="less">
  .xd-express {
    &__info {
      background: #fff;
      margin-bottom: unit(20,rpx);
      padding: unit(20, rpx);

      & > view {
        font-size: @xd-font-size-lg;
        display: flex;
        justify-content: space-between;
        align-items: center;
        line-height: unit(60,rpx);

        & >view:first-child {
          flex-shrink: 0;
        }

        &> view:last-child {
          flex: 1;
          width: 0;
        }
      }
    }


  }

  .isOk {
    background-color: #F0AD4E !important;
  }

  .ali_top_iconss {
    width: unit(12, rpx);
    height: unit(12, rpx);
    display: block;
    background-color: @custom-btn-info;
    padding-right: unit(2, rpx);
    border-radius: 50%;
  }

  .noline {
    background-color: @xd-text-color-inverse !important;
  }

  .State_Four {
    display: flex;
    /* border: 1upx solid red; */
  }

  .FourBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-right: unit(24, rpx);
  }

  .line {
    width: unit(2, rpx);
    display: flex;
    flex-direction: column;
    flex: 1;
    background-color: @custom-btn-info;
  }

  /* ============= */
  .remark {
    display: flex;
    flex-direction: column;
    width: 90%;
    padding: unit(24, rpx) 0;
  }

  .borders {
    border-bottom: 1px solid @xd-bg-color-hover;
    padding: unit(24, rpx) 0;
  }

  .ali_top_icons {
    width: unit(46, rpx);
    height: unit(46, rpx);
    background-color: @xd-text-color-inverse;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-content: center;
  }

  .ali_top_icon {
    width: unit(46, rpx);
    height: unit(46, rpx);
    background-color: #83AECF;
    color: @xd-text-color-inverse;
    font-size: @xd-font-size-base + 2;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: unit(20, rpx)
  }

  .ali_top {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  /* ========公共========= */
  .a14 {
    font-size: @xd-font-size-base + 2;
    color: @xd-text-color;
  }

  .a12 {
    font-size: @xd-font-size-sm;
    color: #999;
  }

  .ali {
    /* width: 100%; */
    /* border: 1upx solid #F76260; */
    background-color: @xd-text-color-inverse;
    padding: 0 unit(24, rpx);
    display: flex;
    flex: 1;
    flex-direction: column;
  }
</style>
