<template>
  <div>
    <div class="content">
      <div class="jjlist">
        <div class="listinfo">
          <div class="list_top">
            <div class="list_top_left">
              <span class="iconfont icon-dizhibao iconStyle"></span>
              <!-- <img src="../assets/images/ad_icon1.png" alt="" /> -->
              <div>
                <p>寄件号：{{ ObjectVlaue.dispatchNo }}</p>
                <p>收件人：{{ ObjectVlaue.recipient }}</p>
                <p>手机号：{{ ObjectVlaue.phone }}</p>
                <p>创建时间&nbsp：{{ ObjectVlaue.recordDate }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="info">
        <p>部门：{{ ObjectVlaue.departmentId }}</p>
        <p>收件人：{{ ObjectVlaue.recipient }}</p>
        <p>手机号：{{ ObjectVlaue.phone }}</p>
        <p>创建时间：{{ ObjectVlaue.recordDate }}</p>
        <p>快件类型：{{ ObjectVlaue.expressType === 1 ? "文件" : "物品" }}</p>
        <p>座位：{{ ObjectVlaue.sendSeat }}</p>
        <p>备注：{{ ObjectVlaue.remark == "" ? "无" : ObjectVlaue.remark }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast, Dialog } from "vant";
import { getExpressById } from "../api/index";
export default {
  data() {
    return {
      titlename: "查快递",
      item: {},
      mailDetail: {}, //传过来的数据
      id: "",
      ObjectVlaue: {}
    };
  },
  created: function() {
    this.mailDetail = this.$route.query.item;
    this.id = this.mailDetail.id;
    console.log(this.mailDetail, " this.mailDetail");
  },
  mounted() {
    this.getFindWithoutInfoById();
  },
  methods: {
    async getFindWithoutInfoById() {
      const res = await getExpressById(
        { id: this.id },
        { emulateJSON: true, loading: true, message: "加载中..." }
      );
      this.ObjectVlaue = res.expressInfoById;
      console.log(res);
    }
  }
};
</script>

<style scoped lang="less">
.content {
  padding: 0.2rem 0.33rem;
  font-size: 0.3rem;

  > p {
    font-size: 0.3rem;
    text-align: center;
    margin-bottom: 0.2rem;
  }

  .info {
    padding: 0.4rem;
    background: white;
    line-height: 200%;
    color: #666666;

    .pjinfo {
      margin-top: 0.1rem;
      border-top: 0.01rem solid #f0efef;
      padding-top: 0.1rem;
    }
  }

  .jjlist {
    font-size: 0.3rem;
    color: #999999;

    .listinfo {
      background: white;
      padding: 0.33rem 0.33rem 0.2rem;
      border-radius: 0.05rem;
      margin-bottom: 0.2rem;
      position: relative;

      .list_top {
        display: flex;
        justify-content: space-between;

        .list_top_left {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .iconStyle {
            color: #0c2469;
            font-size: 1rem;
            margin: 0 0.2rem;
            // width: 0.9rem;
            // height: 0.9rem;
          }

          div {
            margin-left: 0.2rem;
            display: inline-block;
            line-height: 150%;

            p:nth-of-type(1) {
              font-weight: bold;
              color: #333;
            }

            p:nth-of-type(2) {
              color: #333;
            }

            p:nth-of-type(3) {
              color: #333;
            }

            p:nth-of-type(4) {
              font-size: 0.22rem;
              color: #333;
            }
          }
        }

        > p {
          font-size: 0.24rem;
          color: #f5693d;
          font-weight: bold;
        }
      }

      .fast {
        //background: url(../assets/images/status.png) no-repeat center;
        background-color: #0c2469;
        background-size: 100% 100%;
        color: white;
        position: absolute;
        bottom: 0px;
        right: 0px;
        width: 1.1rem;
        height: 0.5rem;
        text-align: center;
        line-height: 0.5rem;
        font-size: 0.2rem;
      }
    }
  }
}

/deep/ .van-nav-bar__content {
  .van-nav-bar__title {
    font-size: 16px;
  }
}

/deep/.van-icon-arrow-left::before {
  color: #333;
  font-size: 16px;
}

/deep/.van-nav-bar__text {
  color: #333 !important;
  font-size: 16px;
}
</style>
