<template>
    <view class="container">
        <uni-section title="基础信息" type="line">
            <uni-card :is-shadow="false">
                <view class="uni-body">
                    <view>车辆：{{order.car_title}} -- {{order.car_number}}</view>
                    <view>运单号：{{order.sn}}</view>
                    <view>日期：{{order.signdate}}</view>
                    <view>起运地：{{order.from_province}}-{{order.start_city}} =>
                        目的地：{{order.to_province}}-{{order.aim_city}}</view>
                </view>
            </uni-card>
        </uni-section>

        <uni-section title="联系信息" type="line">
            <uni-card :is-shadow="false">
                <view class="uni-body">
                    <view @click="callTo(order.sender_mobiles)"> <uni-icons type="phone" size="20" color="#0095F6" />
                        发车人：{{order.sender_name}} <em> {{order.sender_mobiles}} </em></view>
                    <view @click="callTo(order.receiver_mobiles)"> <uni-icons type="phone" size="20"
                            color="#0095F6" />接车人：{{order.receiver_name}}<em>{{order.receiver_mobiles}}</em></view>
                    <view>送车地址：{{order.aim_address}}</view>
                </view>
            </uni-card>
        </uni-section>

        <uni-section title="费用信息" type="line">
            <uni-card :is-shadow="false">
                <view class="uni-body">
                    <view>总运费：{{order.fee_total}} 元</view>
                    <view>现付：<text class="error">{{order.pay_send}} </text>元</view>
                    <view>到付：<text class="error">{{order.pay_receive}} </text>元</view>
                </view>
            </uni-card>
        </uni-section>

        <uni-section title="链接" subTitle="使用系统浏览器打开" type="line">
            <view class="uni-form-item ">
                <view class="title">
                    <uni-link :href="h5_url+'?oid='+oid" :text="h5_url"></uni-link>
                </view>
            </view>
        </uni-section>

        <uni-section title="操作提示" type="line">
            <uni-card :is-shadow="false">
                <view class="uni-body">
                    <view>订单详情页首次打开时需要联网搜索运单信息；</view>
                    <view>打开过一次的运单信息将会缓存在APP内一段时间，在这期间即使手机没有网络也能查看</view>
                    <view>如果需要查看该运单的最新信息，可通过下拉本页面进行刷新（手机需要联网）</view>
                </view>
            </uni-card>
            <view class="uni-form-item ">
                <view class="title">
                    <button class="btn btn-warning" @click="actCheck()">查看验车记录</button>
                </view>
            </view>
        </uni-section>
    </view>
</template>

<script>
    import config from "@/config/ctms.config.js";
    import ctms from '@/apis/ctms/index.js';
    export default {
        data() {
            return {
                userinfo: {},
                oid: 0,
                order: {
                    id: 1,
                    car_id: 1,
                    car_number: '车牌号',
                    car_title: '车型号',
                    start_city: "起运城市",
                    from_province: '起运省份',
                    aim_city: "目的城市",
                    to_province: '目标省份',
                    signdate: '下单日期',
                    car_extra: '随车物品',
                    checker: '验车人',
                    receiver_name: '收车人姓名',
                    receiver_mobiles: '收车人电话',
                    sender_name: '发车人姓名',
                    sender_mobiles: '发车人电话',
                },
                h5_url: '',
            }
        },
        methods: {
            getOderDetail: function(e) {
                var _that = this;
                ctms.order.checkDetail(this.oid).then((res) => {
                    if (res) {
                        _that.order = res;
                        uni.showToast({
                            title: "查询完成!",
                            icon: "success"
                        });
                        uni.stopPullDownRefresh();
                    }
                });
            },
            actCheck() {
                uni.navigateTo({
                    url: './check?oid=' + this.oid
                })
            },
            callTo(tel) {
                uni.makePhoneCall({
                    phoneNumber: tel
                })
            }
        },
        onLoad(o) {
            this.oid = o.oid;
            this.h5_url = config.h5_view;
            this.userinfo = ctms.user.getInfo();
        },
        onShow: function() {
            var res = ctms.order.detail(this.oid);
            if (res) {
                this.order = res;
            } else {
                this.getOderDetail();
            }
        },
        onPullDownRefresh() {
            this.getOderDetail();
            uni.stopPullDownRefresh();
        },
        //标题栏按钮响应,仅在APP-PLUS下支持
        onNavigationBarButtonTap(e) {
            //#ifdef APP-PLUS
            uni.shareWithSystem({
                summary: '运单【 ' + this.order.sn + ' 】摘要：' + this.order.signdate + '，由' + this.order
                    .from_province + this.order.start_city + '-->发往-->' + this.order.to_province + this.order
                    .aim_city + "的车辆：" + this.order.car_title + "--" + this.order.car_number + "。点击链接可查阅更多信息",
                href: this.h5_url + "?oid=" + this.oid,
                success() {
                    // 分享完成，请注意此时不一定是成功分享
                },
                fail() {
                    // 分享失败
                }
            })
            //#endif
            //#ifdef H5
            var summary = '运单【 ' + this.order.sn + ' 】摘要：' + this.order.signdate + '，由' + this.order
                .from_province + this.order.start_city + '-->发往-->' + this.order.to_province + this.order
                .aim_city + "的车辆：" + this.order.car_title + "--" + this.order.car_number + "。点击链接可查阅更多信息:" + this
                .h5_url + "?oid=" + this.oid;
            uni.setClipboardData({
                data: summary
            })
            //#endif
        }
    }
</script>

<style>
    @import url("detail.css");
</style>