<template>
    <view class="container">
        <uni-card v-if="!totalCount" title="查询结果" sub-title="" extra="" padding="10px 0">
            <view class="uni-body uni-mt-5">
                <view>
                    <text>没有查询到相关询价记录</text>
                </view>
            </view>
        </uni-card>

        <uni-section v-else :title="'询价单'+order.id" type="line" v-for="(order, index) in orders" :data-oid="order.id"
            :key="index">
            <uni-card title="基础卡片" sub-title="副标题" extra="额外信息" padding="10px 0">
                <template v-slot:title>
                    <uni-list>
                        <uni-list-item :show-switch="false" :title="order.car_title + '  ' + order.car_no" />
                    </uni-list>
                </template>
                <view class="uni-body uni-mt-5">
                    <view>
                        <text>计划日期：{{order.date_plan}}</text>
                    </view>
                    <view>
                        <text>起运地：{{order.start_city}} => 目的地：{{order.aim_city}}</text>
                    </view>
                    <view>
                        <text>价格：{{order.price}} </text>
                    </view>
                    <view>
                        <text>状态：{{order.status}} </text>
                    </view>
                </view>
                <view slot="actions" class="card-actions">
                    <view class="card-actions-item" @click="actionsCancel(order.id,index)" v-if="order.status_code>-1">
                        <uni-icons type="refresh-filled" size="18" color="#999"></uni-icons>
                        <text class="card-actions-item-text">取消</text>
                    </view>

                    <view class="card-actions-item" @click="actionsUpdate(order.id)">
                        <uni-icons type="compose" size="18" color="#999"></uni-icons>
                        <text class="card-actions-item-text">更新咨询</text>
                    </view>

                    <view class="card-actions-item" @click="actionsDetail(order.id)">
                        <uni-icons type="link" size="18" color="#999"></uni-icons>
                        <text class="card-actions-item-text">详情</text>
                    </view>
                </view>
            </uni-card>
        </uni-section>
        <view class="pagination">
            <uni-pagination :show-icon="false" :total="totalCount" :pageSize='psize' v-model='page' title="分页栏"
                @change="newPage" />
        </view>

        <uni-fab ref="fab" :pattern="fabs.pattern" :content="fabs.content" :horizontal="fabs.horizontal"
            :vertical="fabs.vertical" :direction="fabs.direction" @trigger="fabTrigger" @fabClick="fabClick" />
    </view>
</template>

<script>
    import utils from "@/utils/common.js";
    import ctms from '@/apis/ctms/index.js';
    export default {
        data() {
            return {
                userinfo: {},
                orders: {},
                totalCount: 0, //一共多少条数据
                psize: 10,
                page: 1,

                //悬浮按钮
                fabs: {
                    horizontal: 'left',
                    vertical: 'bottom',
                    direction: 'horizontal', //horizontal水平展开；vertical垂直展开
                    pattern: {
                        color: '#7A7E83',
                        backgroundColor: '#fff',
                        selectedColor: '#007AFF',
                        buttonColor: '#fff',
                        iconColor: '#aaa'
                    },
                    content: [{
                            iconPath: '/static/fab/home.png',
                            selectedIconPath: '/static/fab/homeactive.png',
                            text: '首页',
                            active: false,
                            diyfn: 'home'
                        },
                        {
                            iconPath: '/static/fab/guanzhu.png',
                            selectedIconPath: '/static/fab/guanzhuactive.png',
                            text: '关注',
                            active: false,
                            diyfn: 'news'
                        },
                        {
                            iconPath: '/static/fab/me.png',
                            selectedIconPath: '/static/fab/meactive.png',
                            text: '用户',
                            active: false,
                            diyfn: 'user'
                        },

                        {
                            iconPath: '/static/fab/news.png',
                            selectedIconPath: '/static/fab/newsactive.png',
                            text: '公告',
                            active: false,
                            diyfn: 'notice'
                        }
                    ]
                }
            }
        },
        methods: {
            checkLogin() {
                return ctms.user.getInfo();
            },

            actionsCancel(e, i) {
                var _that = this;
                return ctms.orderpre.cancel(e).then((res) => {
                    if (res) {
                        _that.orders[i].status_code = res.status_code;
                        uni.showToast({
                            title: "已取消",
                            icon: "success"
                        });
                    }
                });
            },
            actionsDetail(e) {
                uni.navigateTo({
                    url: '../detail/detail?oid=' + e
                })
            },
            actionsUpdate(e) {
                uni.navigateTo({
                    url: '../create/create?oid=' + e + '&NotNew=1'
                })
            },
            //分页器动作
            newPage(e) {
                var page = e.current;
                this.page = page;
                var res = ctms.orderpre.list(this.page);
                if (res) {
                    this.orders = res.orders;
                } else {
                    this.checkOrder();
                }
            },
            //刷新列表
            checkOrder() {
                var _that = this;
                ctms.orderpre.list(null, this.page, this.psize).then(
                    function(res) {
                        if (res) {
                            _that.orders = res.orders;
                            _that.totalCount = res.total;
                            uni.showToast({
                                title: "查询完成!",
                                icon: "success"
                            });
                        } else {
                            _that.orders = {}
                            _that.totalCount = 0;
                        }
                    }
                );
            },

            //浮窗按钮相关操作
            fabClick(e) {
                // utils.debug('点击了悬浮按钮')
            },
            fabTrigger(e) {
                var eindex = e.index;
                this.fabs.content[e.index].active = !e.item.active;

                if (!e.item.diyfn) {
                    //未设置这个difyfn字段的，无操作
                    return false;
                }
                var diyfn = e.item.diyfn,
                    dir = config.pageDir,
                    page;
                switch (diyfn) {
                    case 'home':
                        page = 'tabbar/index/index';
                        return uni.reLaunch({
                            url: dir + page
                        })
                        break;
                    case 'news':
                        page = 'news/list/list';
                        break;
                    case 'user':
                        page = 'me/index';
                        break;
                    case 'notice':
                        page = 'tabbar/notice/index';
                        return uni.reLaunch({
                            url: dir + page
                        })
                        break;
                }
                return uni.navigateTo({
                    url: dir + page
                })
            }
        },

        onLoad() {
            // this.checkLogin();
            // utils.debug('询价记录列表页启动')
            this.checkOrder()
        },
        onShow() {

        },

        onPullDownRefresh() {
            this.page = 1;
            this.checkOrder();
            setTimeout(() => {
                uni.stopPullDownRefresh();
            }, 3000);
        }
    }
</script>

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