<template>
  <div>
    <div class="content">
      <div class="jjlist">
        <div class="listinfo">
          <div class="list_top">
            <div class="list_top_left">
              <!-- <img src="../assets/images/ad_icon1.png" alt="" /> -->
              <span class="iconfont icon-dizhibao iconStyle"></span>

              <div v-if="mailDetail.type == 1">
                <p>快递单号：{{ ObjectVlaue.waybillNo }}</p>
                <p>收件人：{{ ObjectVlaue.addresseeName }}</p>
                <p>手机号：{{ ObjectVlaue.addresseePhone }}</p>

                <p>
                  地&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp址：{{
                    ObjectVlaue.addresseeProvince
                  }}
                  {{ ObjectVlaue.addresseeCity }}
                  {{ ObjectVlaue.addresseeCounty }}
                </p>
              </div>
              <div v-if="mailDetail.type == 2">
                <p>快递单号：{{ ObjectVlaue.inside_num }}</p>
                <p>收件人：{{ ObjectVlaue.addressee_name }}</p>
                <p>手机号：{{ ObjectVlaue.addressee_phone }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 外部 -->
      <div class="info" v-if="mailDetail.type == 1">
        <img style="margin: 0 auto;display: block;" id="barcode" />
        <p>物流公司：{{ ObjectVlaue.expressCompany }}</p>
        <p>寄件人姓名：{{ ObjectVlaue.sendName }}</p>
        <p>寄件人手机号：{{ ObjectVlaue.sendPhone }}</p>
        <p>收件人姓名：{{ ObjectVlaue.addresseeName }}</p>
        <p>收件人手机：{{ ObjectVlaue.addresseePhone }}</p>
        <!-- <p>部门：{{ ObjectVlaue.sendDeptName }}</p> -->
        <p>快件类型：{{ ObjectVlaue.expressType === 1 ? "文件" : "物品" }}</p>
        <p>数量(件数)：{{ ObjectVlaue.expressNum }}</p>
        <p>重量(KG)：{{ ObjectVlaue.expressWeight }}</p>
        <p>状态：{{ ObjectVlaue.expressDesc }}</p>
        <p>省：{{ ObjectVlaue.addresseeProvince }}</p>
        <p>市：{{ ObjectVlaue.addresseeCity }}</p>
        <p>区：{{ ObjectVlaue.addresseeCounty }}</p>
        <p>
          财务核销码：{{
            ObjectVlaue.verificationCode == ""
              ? "无"
              : ObjectVlaue.verificationCode
          }}
        </p>
        <p>
          备注：{{
            ObjectVlaue.expressRemark == "" ? "无" : ObjectVlaue.expressRemark
          }}
        </p>
      </div>
      <div class="info" v-if="mailDetail.type == '2'">
        <img style="margin: 0 auto;display: block;" id="barcode" />
        <p>部门：{{ ObjectVlaue.addressee_dept_name }}</p>
        <p>收件人：{{ ObjectVlaue.addressee_name }}</p>
        <p>收件人手机：{{ ObjectVlaue.addressee_phone }}</p>
        <p>数量(件数)：{{ ObjectVlaue.express_num }}</p>
        <p>重量(KG)：{{ ObjectVlaue.express_weight }}</p>
        <!-- <p>创建时间:{{ ObjectVlaue.create_time }}</p> -->
        <p>快件类型：{{ ObjectVlaue.express_type === 1 ? "文件" : "物品" }}</p>
        <p>座位：{{ ObjectVlaue.addressee_seat_no }}</p>
        <p>
          备注：{{
            ObjectVlaue.express_remark == "" ? "无" : ObjectVlaue.express_remark
          }}
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast, Dialog } from "vant";
import { findWithoutInfoById, findInsideInfoById } from "../api/index";
export default {
  data() {
    return {
      titlename: "查快递",
      item: {},
      mailDetail: {}, //传过来的数据
      id: "",
      ObjectVlaue: {}
    };
  },
  created: function() {
    this.mailDetail = this.$route.query.mailDetail;
    this.id = this.mailDetail.id;
  },
  mounted() {
    if (this.mailDetail.type === "1") {
      // 外部
      this.getFindWithoutInfoById();
    } else if (this.mailDetail.type === "2") {
      this.getFindInsideInfoById();
    }
  },
  methods: {
    async getFindWithoutInfoById() {
      const res = await findWithoutInfoById(
        { id: this.id },
        { emulateJSON: true, loading: true, message: "加载中..." }
      );
      this.ObjectVlaue = res.floorInfoById;
      console.log(res);
    },
    async getFindInsideInfoById() {
      const res = await findInsideInfoById(
        { id: this.id },
        { emulateJSON: true, loading: true, message: "加载中..." }
      );
      this.ObjectVlaue = res.floorInfoById;
      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;
            display: inline-block;
            // width: 0.9rem;
            // height: 0.9rem;
            position: relative;
            top: -0.1rem;
          }

          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>
