<template>
  <div class="oDetail" v-loading="loading">
    <van-nav-bar
      title="订单详情"
      class="van-nav-bar-my-fixed"
      left-arrow
      @click-left="onClickLeft"
      fixedfixed
    />
    <div class="page-main">
      <van-cell-group title="订单信息">
        <van-cell
          size="mini"
          v-for="(item, i) in list1"
          :key="item.title + i"
          center
          :title="item.title"
          :value="item.value"
      /></van-cell-group>
      <div class="jiange"></div>
      <van-cell-group v-if="status === '2'" title="物流信息">
        <van-cell
          size="mini"
          v-for="(item, i) in list2"
          :key="item.title + i"
          :title="item.title"
          :value="item.value"
      /></van-cell-group>
      <div class="jiange" v-if="status === '2'"></div>
      <van-cell-group title="收货地址">
        <van-cell
          size="mini"
          v-for="(item, i) in list3"
          :key="item.title + i"
          center
          :title="item.title"
          :value="item.value"
      /></van-cell-group>
      <div class="jiange"></div>
      <van-cell-group title="商品信息">
        <van-cell
          size="mini"
          v-for="(item, i) in list4"
          :key="item.title + i"
          center
          :title="item.title"
          :value="item.value"
      /></van-cell-group>
    </div>
  </div>
</template>

<script>
import asyncRequest from "@/apis/order/index";
import resToken from "@/mixins/resToken";
export default {
  mixins: [resToken],
  components: {
    // "van-cell": cell,
    // "van-list": List,
    // "van-tab": Tab,
    // "van-tabs": Tabs,
  },
  data() {
    return {
      id: "0",
      status: "0",
      list1: [
        { title: "订单编号：", value: "" },
        { title: "订单状态：", value: "" },
        { title: "下单时间：", value: "" },
      ],
      list2: [
        { title: "物流公司：", value: "" },
        { title: "物流编号：", value: "" },
        { title: "发货时间：", value: "" },
      ],
      list3: [
        { title: "联系人：", value: "" },
        { title: "联系电话：", value: "" },
        { title: "收货地址：", value: "" },
      ],
      list4: [
        { title: "商品名称：", value: "五常大米" },
        { title: "购买数量：", value: "" },
      ],
      loading: false,
    };
  },
  async created() {
    this.id = this.$route.query.id ? this.$route.query.id : "0";
    await this.initData();
  },
  methods: {
    onClickLeft() {
      window.history.back(-1);
    },

    async initData() {
      const res = await asyncRequest.detail({ id: this.id });
      if (res && res.code === 0) {
        const {
          order_sn,
          status,
          unit,
          order_num,
          order_time,
          post_name,
          post_code,
          delivery_time,
          contector,
          contector_mobile,
          city_name,
          provice_name,
          area_name,
          addr,
          unit_weight
        } = res.data;
        this.list1[0].value = order_sn;
        this.list1[1].value = status === "1" ? "待发货" : "待收货";
        this.status = status;
        this.list4[0].value = unit === "盒" ? "藏金1745礼盒" : "藏金1745普通装";
        this.list4[1].value = order_num + unit+"/"+unit_weight+'kg';
        this.list1[2].value = order_time;
        if (this.status === "2") {
          this.list2[0].value = post_name;
          this.list2[1].value = post_code;
          this.list2[2].value = delivery_time;
        }
        this.list3[0].value = contector;
        this.list3[1].value = contector_mobile;
        let str =
          provice_name === city_name ? city_name : provice_name + city_name;
        this.list3[2].value = str + area_name + addr;
      } else if (res && res.code >= 100 && res.code <= 104) {
        await this.logout();
      } else {
        this.show_title(res.msg);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.oDetail {
  // background: #fff;
  background: transparent;
  overflow-y: scroll;
  .page-main {
    box-sizing: border-box;
    overflow-y: scroll;
    width: 100%;
    height: auto;
    // background: #fff;
    background: transparent;
    padding: 46px 0 50px 0;
    border: 0 !important;
    .jiange {
      height: 5px;
      // width: 100%;
      background: #f0f0f0 !important;
      width: calc(100% -32px);
      margin: 3px 16px 0 16px;
    }
    .van-cell::after {
      border: 0px !important;
      box-sizing: 0 !important;
      border: 0 !important;
    }
    .van-cell-group__title {
      font-weight: bolder;
      color: #333;
      box-sizing: 0 !important;
      border: 0 !important;
    }
    .van-cell {
      font-size: 12px;
      background: transparent !important;
      color: #787878;
      padding: 7px 16px 0px 16px;
      box-sizing: 0 !important;
      border: 0 !important;
      &:last-child {
        padding-bottom: 7px !important;
        box-sizing: 0 !important;
        border: 0 !important;
      }
    }
    .van-cell-group {
      background: transparent !important;
      box-sizing: 0 !important;
      border: 0 !important;
    }
    .van-hairline--top-bottom::after,
    .van-hairline-unset--top-bottom::after {
      border: 0 !important;
    }
  }
}
</style>
