<template>
	<view class="app-container">
    <view class="all-container">
      <view class="card-container" v-if="detail.pickType == 'YES'">
        <view class="title">物流信息</view>
        <view class="row">
          <view class="label">发货方式</view>
          <view class="value">自提</view>
        </view>
        <view class="row">
          <view class="label">操作人员</view>
          <view class="value">{{detail.sendName}}</view>
        </view>
        <view class="row">
          <view class="label">操作时间</view>
          <view class="value">{{detail.sendTime}}</view>
        </view>
      </view>
      <block v-else>
        <view class="top-container">
          <view class="left">{{detail.logisticsName}}<text>{{detail.logisticsNo}}</text></view>
          <view class="right">
            <text @tap="$copy(detail.logisticsNo)">复制单号</text>
          </view>
        </view>
        <view class="mian-container" v-if="!isNoData">
          <common-logistics :logisticsData="logisticsData"></common-logistics>
        </view>
        <Loading
          v-if="isNoData"
          :type="3"
          :loadStatus="2"
          :showText="noDataText"
        />
      </block>
    </view>

	</view>
</template>

<script>
	import { setAttribute, changeAttribute } from '@/components/logistics/init-logistics.js';
	import CommonLogistics from '@/components/logistics/common-logistics.vue';

	export default {
		components: {
			CommonLogistics
		},

		data() {
			return {
        id: null,
        detail: {},
				companyCode: null,
				logisticsNo: null,
				logisticsData: [],
				testStrList: [0,1,2,3,4,5,6],
				isNoData: false,
				noDataText: '',
			}
		},

		onLoad({id, companyCode, logisticsNo}) {
      this.id = id;
			this.companyCode = companyCode == 'undefined' ? 'shunfeng' : companyCode;
			this.logisticsNo = logisticsNo;
			this.getDetail();
		},

		methods: {
			// 获取物流详情
			getDetail() {
        this.$api.post('/es/orderPay/detail', {
          esOrderId: this.id
        }).then(res => {
          this.detail = res.data;
          if(this.detail.pickType == 'NO') {
            this.getLogistics();
          }
        })
			},

      getLogistics() {
        this.$api.get('/common/express', {
          companyCode: this.detail.logisticsCode,
          logisticsNo: this.detail.logisticsNo,
        }).then(res => {
        	if(res.code == 200 && res.data.length >= 1) {
        		let logisticsData = res.data;
        		this.logisticsData = changeAttribute(this.testStrList, setAttribute(logisticsData));
        	}else if(res.code == 1100) {
        		this.isNoData = true;
        		this.noDataText = res.message;
        	}else if(res.data.length < 1) {
        		this.isNoData = true;
        		this.noDataText = '暂无物流信息';
        	}
        }).catch(res => {
        	this.isNoData = true;
        	this.noDataText = res.message;
        })
      },
		}
	}
</script>

<style lang="scss">
	.app-container {
		background: #F4F2F2;
		box-sizing: border-box;
		padding: 20rpx;
	}
	.all-container {
    @include zj-card;
		padding: 20rpx;
	}
	.top-container {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		margin-bottom: 30rpx;
		.left {
			font-size: 28rpx;
			text {
				font-size: 28rpx;
				margin-left: 16rpx;
			}
		}
		.right {
			text {
				font-size: 28rpx;
				color: $theme-color;
			}
		}
	}
  .card-container {
    padding-bottom: 30rpx;
    .title {
      font-size: 32rpx;
      margin-top: 20rpx;
      font-weight: 500;
    }
    .row {
      display: flex;
      align-items: center;
      margin-top: 20rpx;
      .label {
        font-size: 28rpx;
        color: $sec-font;
        margin-right: 20rpx;
        flex-shrink: 0;
      }
      .value {
        font-size: 28rpx;
      }
    }
  }
</style>
