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

    <view class="container">
        <view class="uni-common-mt uni-form">
            <uni-section title="（*）验车备注" type="line">

                <view class="uni-form-item ">
                    <view class="title">验车人</view>
                    <view class="data">
                        <input class="uni-input" name="checker" v-model="order_up.checker" placeholder="验车人的名字" />
                    </view>
                </view>

                <view class="uni-form-item ">
                    <view class="title">公里数</view>
                    <view class="data">
                        <input class="uni-input" name="start_km" v-model="order_up.start_km" placeholder="当前仪表盘公里数" />
                    </view>
                </view>

                <view class="uni-form-item ">
                    <view class="title">行驶证</view>
                    <radio-group name="is_driving_lisence" class="radio" @change="radioChangeDriving">
                        <label>
                            <radio value="1" :checked="order_up.is_driving_lisence==1?true:false" /><text>未随车</text>
                        </label>
                        <label>
                            <radio value="0" :checked="order_up.is_driving_lisence==-1?true:false" /><text>不确定</text>
                        </label>
                    </radio-group>
                </view>

                <view class="uni-form-item ">
                    <view class="title">随车物品</view>
                    <view class="data">
                        <textarea name="car_extra" auto-height placeholder-style="color:#F76260" placeholder=""
                            v-model="order_up.car_extra" />
                    </view>
                </view>

            </uni-section>
        </view>

        <uni-section title="点击图片可查看" type="line">
            <view class="example-body">
                <uni-file-picker v-model="driving_lisence" :auto-upload="false" file-mediatype="image" mode="grid"
                    file-extname="png,jpg,gif" :limit="1" :delIcon="null" title="行驶证照片" />
            </view>
        </uni-section>

        <uni-section title="点击图片可查看" type="line">
            <view class="example-body">
                <uni-file-picker v-model="thumb_f" :auto-upload="false" file-mediatype="image" mode="grid"
                    file-extname="png,jpg,gif" :limit="1" :delIcon="null" title="正面车身照片" />
            </view>
        </uni-section>

        <uni-section title="点击图片可查看" type="line">
            <view class="example-body">
                <uni-file-picker v-model="thumb_b" :auto-upload="false" file-mediatype="image" mode="grid"
                    file-extname="png,jpg,gif" :limit="1" :delIcon="null" title="尾部车身照" />
            </view>
        </uni-section>

        <uni-section title="点击图片可查看" type="line">
            <view class="example-body">
                <uni-file-picker v-model="thumb_l" :auto-upload="false" file-mediatype="image" mode="grid"
                    file-extname="png,jpg,gif" :limit="1" :delIcon="null" title="左侧车身照" />
            </view>
        </uni-section>

        <uni-section title="点击图片可查看" type="line">
            <view class="example-body">
                <uni-file-picker v-model="thumb_r" :auto-upload="false" file-mediatype="image" mode="grid"
                    file-extname="png,jpg,gif" :limit="1" :delIcon="null" title="右侧车照" />
            </view>
        </uni-section>

        <uni-section title="点击图片可查看" type="line">
            <view class="example-body">
                <uni-file-picker v-model="fileLists" ref="thumbs" :auto-upload="false" file-mediatype="image"
                    mode="grid" file-extname="png,jpg,gif" :limit="fileLists.length" @select="multiSelect"
                    title="其他验车照片" :image-styles="imageStyles" :delIcon="null" />

            </view>
        </uni-section>

    </view>

</template>

<script>
    import config from "@/config/ctms.config.js";
    import ctms from '@/apis/ctms/index.js';
    import Hi from '@/common/util.js';
    export default {
        data() {
            return {
                userinfo: {},
                oid: 0,
                order: {
                    id: 0,
                    remark: '备注',
                },

                h5_url: '',
                //要上传修改的订单数据部分（留空的则服务端不覆盖）
                order_up: {
                    driving_lisence: '',
                    thumb_f: '',
                    thumb_b: '',
                    thumb_l: '',
                    thumb_r: '',
                    thumbs: [],
                    start_km: 0,
                    is_driving_lisence: 0,
                    car_extra: '',
                    checker: ''
                },
                driving_lisence: {
                    url: '',
                    extname: 'jpg',
                    name: '行驶证'
                },
                thumb_f: {
                    url: '',
                    extname: 'jpg',
                    name: '车头照'
                },
                thumb_b: {
                    url: '',
                    extname: 'jpg',
                    name: '车尾照'
                },
                thumb_r: {
                    url: '',
                    extname: 'jpg',
                    name: '右车身'
                },
                thumb_l: {
                    url: '',
                    extname: 'jpg',
                    name: '左车身'
                },
                //订单详情thumbs转换为可显部分 //该字段未启用
                thumbs: [{
                    url: '',
                    extname: 'jpg',
                    name: 'thumbs[]'
                }],
                thumbs_files: [], //多图待上传
                //呈现多图列表    //通过组件内加号选择上传的多图列表也加入到这
                fileLists: [],
                /*{
                    url: '//public.hiluker.com/fm.jpg',
                    extname: 'jpg',
                    name: 'thumbs[]',
                    _src: '/pics/X/Y/Z/.test.jpg'   //BY FM453，自行添加的一个属性，将图片原始目录数据保存，备用
                }*/
                //所有已选多图 //该字段未启用
                tmpfiles: [{}], //{'blob:http://localhost:3000/4c9d3b56-041b-40fb-8c2b-221ae9d56a56'}

                //图片上传组件样式定义
                imageStyles: {
                    width: 128,
                    height: 128,
                    border: {
                        radius: '2%',
                        color: '#ddd',
                    },
                },
                listStyles: {
                    // 是否显示边框
                    border: true,
                    // 是否显示分隔线
                    dividline: true,
                    // 线条样式
                    borderStyle: {
                        width: 1,
                        color: 'blue',
                        style: 'dashed',
                        radius: 2
                    },
                },

                //悬浮按钮
                horizontal: 'right',
                vertical: 'bottom',
                direction: 'vertical', //horizontal水平展开；vertical垂直展开
                pattern: {
                    color: '#7A7E83',
                    backgroundColor: '#eef',
                    selectedColor: '#007AFF',
                    buttonColor: '#fd8008',
                    iconColor: '#fff'
                },
                content: [{
                        iconPath: '/static/c1.png',
                        selectedIconPath: '/static/c1.png',
                        text: '保存草稿',
                        active: false,
                        diyfn: '1' //自定义添加的一个字段
                    },
                    {
                        iconPath: '/static/submit.png',
                        selectedIconPath: '/static/submit-active.png',
                        text: '确认上传',
                        active: false,
                        diyfn: false
                    }
                ],

            };
        },

        methods: {
            getOderDetail: function(e) {
                var _that = this;
                ctms.order.checkDetail(this.oid).then((res) => {
                    if (res) {
                        var order = res;
                        _that.oid = order.id;
                        order = Hi._that.formatOrder(order, false);
                        _that.order = order;
                        uni.stopPullDownRefresh();
                    }
                });
            },
            //order,订单详情原始数据; restore,是否重新存储
            formatOrder: function(order, restore = false) {
                if (order.driving_lisence) {
                    Hi._that.driving_lisence.url = order.driving_lisence_url;
                }
                if (order.thumb_f) {
                    Hi._that.thumb_f.url = order.thumb_f_url;
                }
                if (order.thumb_b) {
                    Hi._that.thumb_b.url = order.thumb_b_url;
                }
                if (order.thumb_r) {
                    Hi._that.thumb_r.url = order.thumb_r_url;
                }
                if (order.thumb_l) {
                    Hi._that.thumb_l.url = order.thumb_l_url;
                }

                if (order.thumbs) {
                    var f, l;
                    const t = [];
                    for (let fi in order.thumbs_url) {
                        f = order.thumbs_url[fi];
                        l = {
                            url: f.url,
                            extname: 'jpg',
                            name: 'thumbs',
                            _src: f.src
                        };
                        // console.log(l)
                        t.push(l);
                    }
                    Hi._that.fileLists = t;
                }

                // console.log(Hi._that.fileLists);
                if (order.checker) {
                    Hi._that.order_up.checker = order.checker;
                } else {
                    Hi._that.order_up.checker = Hi._that.userinfo.username;
                }
                if (order.car_extra) {
                    Hi._that.order_up.car_extra = order.car_extra;
                }
                if (order.start_km) {
                    Hi._that.order_up.start_km = order.start_km;
                }
                if (order.no_driving_lisence) {
                    Hi._that.order_up.is_driving_lisence = order
                        .no_driving_lisence; //确认行驶证未随车
                }
                if (restore) {
                    var lsIndex = Hi._that.orderLsIndex + '-' + Hi._that.oid;
                    uni.setStorageSync(lsIndex, order);
                }
                return order;
            }
        },

        onLoad(o) {
            Hi._that = this; //在部分函数内部，无法再直接调用this，所以改用该方法赋值后再调用，效果等同于this
            this.oid = o.oid;
            this.h5_url = config.h5_view;
            this.userinfo = ctms.user.getInfo();
        },
        onShow() {
            var res = ctms.order.detail(this.oid);
            if (res) {
                this.order = res;
                this.formatOrder(res, false);
            } else {
                this.getOderDetail();
            }
        },
        onPullDownRefresh() {
            this.getOderDetail();
            uni.stopPullDownRefresh();
        }
    };
</script>

<style>
    .example-body {
        padding: 10px;
        padding-top: 0;
    }

    .custom-image-box {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .uni-form-item .title {
        width: 150rpx;
        text-align: justify;
        text-align-last: justify;
    }

    .text {
        font-size: 14px;
        color: #333;
    }

    .btn[size='mini'] {
        margin-right: 10rpx;
        margin-top: 10rpx;
    }

    .btn-success {
        background-color: #42b983;
        color: #fff;
    }

    .btn-warning {
        background-color: #fc8105;
        color: #fff;
    }

    .btn-danger {
        background-color: #f00;
        color: #fff;
    }

    .btn-primary {
        background-color: #0095f6;
        color: #fff;
    }

    .uni-input {
        border: #bbb solid 1rpx;
    }

    /*调整下上传组件样式*/
    .icon-add {
        background-color: #bbb;
    }

    .file-image {
        width: 128rpx;
        height: 128rpx;
    }

    .file-image>image {
        width: 128rpx;
        height: 128rpx;
    }

    .help-block {
        display: block;
        width: 100%;
        color: #f00;
        font-size: 1rem;
        line-height: 1rem;
        margin: 1.5rem;
    }
</style>