<template>
  <div class="logisticsMaskDiv" @click="closeClick()" v-if="show">
    <div class="logisticsDivAll" @click.stop=''>
      <div class="logisticsDivAll1">
        <div class="title">物流跟踪</div>
        <div class="logisticsCom">圆通速递 qk12111</div>
        <div class="logisticsListDiv">
          <div class="logisticsItemDiv" v-for="(item, index) in logisticsList" :key="index">
            <ul class="logisticsDate">
              <li class="date">11-27</li>
              <li class="time">11:27</li>
            </ul>
            <ul class="logisticsDetail">
              <li class="cicyle">
                <img v-if="item.status == '已签收'" src="//img10.360buyimg.com/imgzone/jfs/t1/136256/27/19837/2184/5fd6fb8bEe1bb18e1/b77fcb59fd9cd9e4.png" />
                <img v-else-if="item.status == '派送中'" src="//img10.360buyimg.com/imgzone/jfs/t1/155394/28/9818/2284/5fd6fb8bEe5181970/ebae6acddf1a7a52.png" />
                <img v-else-if="item.status == '运输中'" src="//img10.360buyimg.com/imgzone/jfs/t1/146882/13/18721/2574/5fd6fb8bE8c2fba52/c9bfe36a03f5394e.png" />
                <img v-else src="//img10.360buyimg.com/imgzone/jfs/t1/145561/37/18369/1198/5fd706faE05fcc28c/99b9b23f6c6b6b4c.png" />
              </li>
              <li class="logisticsRight">
                <span class="status" v-if="item.status == '已签收'">{{ item.status }}</span>
                <span class="status1" v-if="item.status == '派送中'">{{ item.status }}</span>

                <span v-if="item.status == '已签收'" class="message">{{ item.message }}</span>
                <span v-else-if="item.status == '派送中'" class="message1">{{ item.message }}</span>
                <span v-else class="message2">{{ item.message }}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      logisticsList: []
    };
  },
  created() {
    console.log('created');
    var data = [
      {
        message: '[收货地址] 辽宁省大连市高新园区',
        messageDate: '2016-03-10 18:07:15',
        status: '已签收'
      },
      {
        message: '1包裹已签收，感谢您使用顺丰快递服务，期待下次继续为您服务！',
        messageDate: '2016-03-10 18:07:15',
        status: '已签收'
      },
      {
        message: '2包裹已签收',
        messageDate: '2016-03-10 18:07:15',
        status: '派送中'
      },
      {
        message: '3包裹已签收，感谢您使用顺丰快递服务，期待下次继续为您服务！',
        messageDate: '2016-03-10 18:07:15'
      },
      {
        message: '4包裹已签收，感谢您使用顺丰快递服务，期待下次继续为您服务！',
        messageDate: '2016-03-10 18:07:15'
      },
      {
        message: '4包裹已签收，感谢您使用顺丰快递服务，期待下次继续为您服务！',
        messageDate: '2016-03-10 18:07:15'
      }
    ];
    for (var i = 0; i < data.length; i++) {
      if (!data[i].status) {
        data[i].status = '运输中';
        break;
      }
    }
    this.logisticsList = data;
    console.log(this.logisticsList);
  },
  mounted() {},
  methods: {
    closeClick() {
      this.submit()
      // console.log('8888888888888');
      // this.$emit('closeClick');
    }
  }
};
</script>

<style lang="scss">
.logisticsMaskDiv {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 20;
  .logisticsDivAll {
    position: absolute;
    bottom: 0.62rem;
    width: 100%;
    display: flex;
    justify-content: center;
    text-align: left;

    .logisticsDivAll1 {
      width: 6.84rem;
      height: 9.26rem;
      background: #ffffff;
      border-radius: 0.08rem;
      overflow: hidden;
      padding-bottom: 0.32rem;
      .title {
        font-size: 0.4rem;
        color: #6a6969;
        font-weight: 600;
        text-align: center;
        padding-top: 0.26rem;
      }
      .logisticsCom {
        margin-top: 0.24rem;
        color: #070505;
        font-size: 0.2rem;
        padding: 0.3rem 0.28rem;
        background: #f9f9f9;
      }
      .logisticsListDiv {
        padding-top: 0.5rem;
        height: 7.6rem;
        overflow-y: scroll;
        .logisticsItemDiv {
          display: flex;
          min-height: 1.5rem;
          padding-right: 0.4rem;
          .logisticsDate {
            color: #999999;
            padding-left: 0.26rem;
            padding-right: 0.14rem;
            width: 0.9rem;
            margin-top: -0.22rem;

            .date {
              font-size: 0.24rem;
              width: 0.7rem;
            }
            .time {
              margin-top: 0.16rem;
              font-size: 0.18rem;
            }
          }
          .logisticsDetail {
            color: #000000;
            font-size: 0.22rem;
            display: flex;
            position: relative;
            .cicyle{
              min-width: 0.42rem;
              height: 0.42rem;
              img {
                width: 0.42rem;
                height: 0.42rem;
                position: relative;
                z-index: 10;
              }

            }

            .logisticsRight {
              display: flex;
              flex-direction: column;
              border-left: 0.02rem dashed #e9e9e9;
              padding-left: 0.28rem;
              margin-left: -0.21rem;
              .status {
                margin-top: -0.22rem;
              }
              .status1 {
                margin-top: -0.22rem;
                color: #cbcbcb;
              }
              .message {
                color: #010101;
              }
              .message1 {
                color: #cbcbcb;
              }
              .message2 {
                color: #999999;
              }
            }
          }
        }
      }
    }
  }
}
</style>
