<script src="../index/index.ts"></script>
<template>
    <div class="list-wrap">
        <div class="user_head">
            <img src="../../assets/image/payrollback_left@2x.png" class="leftIcon" alt="" @click="$router.replace('/index')">
            <span>
                我的订单
            </span>
        </div>
        <!--        <div class="nav-bar order-status-tab">-->
        <!--        <ul class="nav d-flex justify-content-around">-->
        <!--        <li class="active"><a href="#order_pay_yes" data-status="2" v-on:click="tab">已付款</a></li>-->
        <!--        <li class=""><a href="#order_pay_no" data-status="1" v-on:click="tab">未付款</a></li>-->
        <!--        </ul>-->
        <!--        </div>-->
        <div class="list" :style="{height:cHeigth}">
            <el-tabs   class="haoyou" @tab-click="handleClick">
                <el-tab-pane label="待支付">
                    <ul class="list-group list-group-flush"  v-if="!data.cueShow" style="line-heigt:1.5rem">
                        <li class="list-group-item m-2 mb-0" v-for="(info,key) in data.list" >
                            <!-- <div class="header d-flex align-items-center"> -->
                            <div class="section">
                                <!-- <span>{{info['order_sn']}}</span>
                                <span class="ml-auto">{{info['create_timestamp']}}</span> -->
                                <p class="d-flex align-items-center">
                                    <span class="leftColor">订单编号</span>
                                    <span class="ml-auto rightColor">{{info['order_sn']}}</span>
                                </p>
                                <p class="d-flex align-items-center">
                                    <span class="leftColor">下单时间</span>
                                    <span class="ml-auto rightColor">{{info['create_timestamp']}}</span>
                                </p>
                            </div>
                            <!-- <hr> -->
                            <div class="section">
                                <p class="d-flex align-items-center">
                                    <span class="leftColor">办理进度</span>
                                    <span class="ml-auto" style="color:#fb2e2e">{{info['status']}}</span>
                                </p>
                                <p class="d-flex align-items-center">
                                    <span class="leftColor">实付金额</span>
                                    <span class="ml-auto leftColor">&yen;{{info['payment']}}</span>
                                </p>
                            </div>
                            <!-- <hr> -->
                            <div class="footer  align-items-center" style="justify-content: space-between;">
                                <button class="btn btn-info" style="background: #4FDCA2;border:1px solid #4FDCA2" @click="open">联系我们</button>
                                <button class="btn btn-info" style="background: #fff;color:#666666;border:1px solid rgb(102, 102, 102,.5)" :data-id="info['id']" :data-key="key" @click="cancel">取消订单</button>
                                <a class="btn btn-info"  style="background: #fff;color:#666666;border:1px solid rgb(102, 102, 102,.5)" :data-id="info['id']" :data-key="key" :data-type="info['order_type']"
                                   v-on:click="goDetail">订单详情</a>
                                <button style="background: #F78F7E;border:1px solid #F78F7E"  class="btn btn-info" :data-id="info['order_sn']" :data-key="key" :data-type="info['order_type']" @click="gopay">去付款</button>
                            </div>
                        </li>
                    </ul>
                    <div class="cuewords" v-if="data.cueShow">
                        <p>您暂时还没有订单</p>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="已支付" name="second">
                    <ul class="list-group list-group-flush"  v-if="!data.cueShow2" >
                        <li class="list-group-item m-2 mb-0" v-for="(info,key) in data.list">
                            <!-- <div class="header d-flex align-items-center">
                                <span>{{info['order_sn']}}</span>
                                <span class="ml-auto">{{info['create_timestamp']}}</span>
                            </div> -->
                            <div class="section">
                                <p class="d-flex align-items-center">
                                    <span class="leftColor">订单编号</span>
                                    <span class="ml-auto rightColor">{{info['order_sn']}}</span>
                                </p>
                                <p class="d-flex align-items-center">
                                    <span class="leftColor">下单时间</span>
                                    <span class="ml-auto rightColor">{{info['create_timestamp']}}</span>
                                </p>
                            </div>
                            <!-- <hr> -->
                            <div class="section">
                                <p class="d-flex align-items-center">
                                    <span class="leftColor">办理进度</span>
                                    <span class="ml-auto"  style="color: #fb2e2e">已支付</span>
                                </p>
                                <p class="d-flex align-items-center">
                                    <span class="leftColor">实付金额</span>
                                    <span class="ml-auto leftColor">&yen;{{info['payment']}}</span>
                                </p>
                            </div>
                            <!-- <hr> -->
                            <div class="footer  align-items-center" style="justify-content: flex-end;">
                                <button class="btn btn-info btnLeft" style="background: #4FDCA2" @click="open">联系我们</button>
                                <a class="btn btn-info"  style="background: #fff;color:#666666;border:1px solid rgb(102, 102, 102,.5)" :data-id="info['id']" :data-key="key" :data-type="info['order_type']"
                                   v-on:click="goDetail">查看信息</a>
                            </div>
                        </li>
                    </ul>
                    <div class="cuewords" v-if="data.cueShow2">
                        <p>您暂时还没有订单</p>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="代缴完成" name="third">
                    <ul class="list-group list-group-flush" v-if="!data.cueShow3" >
                        <li class="list-group-item m-2 mb-0" v-for="(info,key) in data.list">
                            <!-- <div class="header d-flex align-items-center">
                                <span>{{info['order_sn']}}</span>
                                <span class="ml-auto">{{info['create_timestamp']}}</span>
                            </div> -->
                            <div class="section">
                                <p class="d-flex align-items-center">
                                    <span class="leftColor">订单编号</span>
                                    <span class="ml-auto rightColor">{{info['order_sn']}}</span>
                                </p>
                                <p class="d-flex align-items-center">
                                    <span class="leftColor">下单时间</span>
                                    <span class="ml-auto rightColor">{{info['create_timestamp']}}</span>
                                </p>
                            </div>
                            <!-- <hr> -->
                            <div class="section">
                                <p class="d-flex align-items-center">
                                    <span class="leftColor">办理进度</span>
                                    <span class="ml-auto"  style="color: #fb2e2e">代缴完成</span>
                                </p>
                                <p class="d-flex align-items-center">
                                    <span class="leftColor">实付金额</span>
                                    <span class="ml-auto leftColor">&yen;{{info['payment']}}</span>
                                </p>
                                <div class="seal-img">
                                    <span>{{info['month']}}月份</span>
                                </div>
                            </div>
                            <!-- <hr> -->
                            <div class="footer  align-items-center" style="justify-content: flex-end;">
                                <button class="btn btn-info btnLeft" style="background: #4FDCA2" @click="open">联系我们</button>
                                <a class="btn btn-info" style="background: #fff;color:#666666;border:1px solid rgb(102, 102, 102,.5)" :data-id="info['id']" :data-key="key" :data-type="info['order_type']"
                                   v-on:click="goDetail">查看信息</a>
                            </div>
                        </li>
                    </ul>
                    <div class="cuewords" v-if="data.cueShow3">
                        <p>您暂时还没有订单</p>
                    </div>
                </el-tab-pane>
            </el-tabs>
            <div class="more" v-if="data.moreShow">
                <a href="javascript:void(0);" class="btn btn-light btn-block m-2 pt-3 pb-3" v-on:click="loadMore"
                   v-if="hasMore">点击加载更多</a>
                <p class="text-center" style="color:#999" v-if="!hasMore">没有更多了</p>
            </div>
        </div>
    </div>
</template>

<script lang="ts" scoped>
    import {Component, Vue} from "vue-property-decorator";
    import Http from "../../extend/Http";
    import router from "../../router";
    import {MessageBox} from 'element-ui';
    import {Message} from "element-ui";
import login from "@/store/module/login";

    @Component({})
    export default class OrderList extends Vue {

        public data: any = {
            list: [],
            activeName:'',
            isChildUpdate1:true,
            isChildUpdate2:true,
            isChildUpdate3:true,
            status:1,
            cueShow:false,
            cueShow2:false,
            cueShow3:false,
            moreShow: false
        };

        // private status: number = 2;
        private page: number = 0;
        private hasMore: boolean = true;

        async created() {
            this.page = 1;
            let res = await Http.getInstance().getOrderList({
                page: this.page,
                status: this.data.status
            });
            if(res.data.length == 0){
                this.data.cueShow = true
                this.data.cueShow2 = true
                this.data.cueShow3 = true
                this.data.moreShow = false
            }else{
                this.data.list = res.data
                this.hasMore = res.data.length >9 ;
                this.data.moreShow = true
            }
            //this.loadMore();
        }
        updated(){
        }
        open() {
            // @ts-ignore
            MessageBox.alert('<a href="tel:' + Http.PHONE + '">' + Http.PHONE  + '</a><p>手机号同步微信</p>', '请联系客服', {
                dangerouslyUseHTMLString: true,
                confirmButtonText: "拨打" ,
            }).then(action =>{
                window.location.href = 'tel://' +Http.PHONE;
            });
        }
        async gopay(event: any){
            let data = this.data.list[event.target.getAttribute("data-key")];
            let res = await Http.getInstance().savelistOrder({
                order_sn: data['order_sn']
            });
            console.log('付款data', data);
            console.log(res)
            if(data['order_type'] == 1){
                localStorage.setItem('order_paying', JSON.stringify(res.data));
            }else{
                localStorage.setItem('order_payings', JSON.stringify(res.data));
            }
            router.replace({
                name: 'opayment',
                params: {
                    order_sn: res.data.order_sn,
                    type: data['order_type']
                }
            });
        }
        async loadMore() {
            let res = await Http.getInstance().getOrderList({
                page: this.page,
                status: this.data.status
            });
            this.hasMore = res.data.length >9 ;
            this.data.list = [].concat(this.data.list.concat(res.data));
            this.page++;
        }
        async handleClick(tab,event){
            if(tab.label == '待支付'){
                this.data.list = ''
                this.data.status = 1
                let res = await Http.getInstance().getOrderList({
                    page: this.page,
                    status: this.data.status
                });
                this.data.list = res.data
                if(res.data.length == 0){
                    this.data.cueShow = true
                    this.data.cueShow2 = true
                    this.data.cueShow3 = true
                    this.data.moreShow = false
                }else{
                    this.data.list = res.data
                    this.hasMore = res.data.length >9 ;
                    this.data.moreShow = true
                    this.data.cueShow = false
                    this.data.cueShow2 = false
                    this.data.cueShow3 = false
                }
            }
            if(tab.label == '已支付'){
                this.page = 1;
                this.data.list = ''
                this.data.status = 3
                let res = await Http.getInstance().getOrderList({
                    page: this.page,
                    status: this.data.status
                });
                if(res.data.length == 0){
                    this.data.cueShow = true
                    this.data.cueShow2 = true
                    this.data.cueShow3 = true
                    this.data.moreShow = false
                }else{
                    this.data.list = res.data
                    this.hasMore = res.data.length >9 ;
                    this.data.moreShow = true
                    this.data.cueShow = false
                    this.data.cueShow2 = false
                    this.data.cueShow3 = false
                }

            }
            if(tab.label == '代缴完成'){
                this.page = 1;
                this.data.list = ''
                this.data.status = 5
                let res = await Http.getInstance().getOrderList({
                    page: this.page,
                    status: this.data.status
                });
                this.data.list = res.data
                if(res.data.length == 0){
                    this.data.cueShow = true
                    this.data.cueShow2 = true
                    this.data.cueShow3 = true
                    this.data.moreShow = false
                }else{
                    this.data.list = res.data
                    this.hasMore = res.data.length >9 ;
                    this.data.moreShow = true
                    this.data.cueShow = false
                    this.data.cueShow2 = false
                    this.data.cueShow3 = false
                }
            }
        }
        cancel(event: any){
            MessageBox.alert( '你确定要取消订单吗？', '温馨提示', {
                dangerouslyUseHTMLString: true,
                confirmButtonText: '确定',
            }).then(async() =>{
                let data = this.data.list[event.target.getAttribute("data-key")];
                console.log(data)
                let res = await Http.getInstance().cancelOrder({
                    oid: data['id'],
                });
                if(res.code == 1){
                    Message({
                        message: '订单已取消', duration: 2000, type: "success"
                    });
                    setTimeout(function(){
                        location.reload()
                    },1000)

                }
            }).catch(() => {
            });
            
        }
        goDetail(event: any) {
            let data = this.data.list[event.target.getAttribute("data-key")];
            if(data['order_type'] == 1){
                router.push({
                    name: "odetail", params: {
                        id: data["id"],
                        order_sn: data["order_sn"],
                        status: data["status"],
                        payment: data["payment"],
                        create_timestamp: data["create_timestamp"],
                        type: data['order_type']
                    }
                });
            }else{
                router.push({
                    name: "bujiaodetail", params: {
                        id: data["id"],
                        order_sn: data["order_sn"],
                        status: data["status"],
                        payment: data["payment"],
                        create_timestamp: data["create_timestamp"],
                    }
                });
            }
            localStorage.setItem('id', JSON.stringify(data["id"]))
        }

        //
        // tab(event: any) {
        //     let href = event.target.href;
        //     let li = event.target.parentElement;
        //     let lis = li.parentElement.querySelectorAll("li");
        //     let tab = document.querySelector(href.slice(href.indexOf("#")));
        //     let tabs = tab.parentElement.querySelectorAll(".login-iten");
        //     this.data.status = event.target.getAttribute("data-status");
        //     this.data.list = Http.getInstance().getOrderList({
        //         status: this.data.status,
        //     });
        //     lis.forEach((item: any) => {
        //         item.classList.remove("active");
        //     });
        //     li.classList.add("active");
        //     tabs.forEach((item: any) => {
        //         item.classList.add("hide");
        //     });
        //     tab.classList.remove("hide");
        //     return false;
        // }
        get cHeigth() {
            if (this.data.list.length) {
                return 'auto'
            } else {
                return '100%'
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import "@/assets/scss/variables.scss";

    // 顶部导航
    .user_head{
        text-align: center;
        font-size: 2rem;
        // font-family: 'PingFang SC';
        padding-bottom: 1.667rem;
        padding-top: 1rem;
        // font-weight: bold;
        line-height: 1.5rem;
        background-color: #fff;
        .leftIcon{
            position: absolute;
            left: 1.667rem;
            top: 1.4rem;
            width: 0.667rem;
        }
        span {
            vertical-align: middle;
            color: #333;
        }
    }
    .list {
        width: 100%;
        // height: 100%;
        position: absolute;
        background-color: #EDF0F5;
    }
    // tab栏样式
    .list /deep/.el-tabs__active-bar {
        background-color: #4FDCA2;
    }
    .list /deep/.el-tabs__item.is-active {
        color: #333;
    }
    .list /deep/.el-tabs__item {
        color: #666;
        font-size: 1.4rem;
    }
    .list /deep/.el-tabs__nav-wrap {
        background-color: #fff;
    }
    .list /deep/.el-tabs__header {
        width: 100%;
        display: flex;
        justify-content: space-around;
        margin: 0;
        background-color: #fff;
    }
    .list /deep/.el-tabs__nav-wrap::after {
        background: none;
    }
    // 右侧字体颜色
    .rightColor {
        color: #666;
    }
    .leftColor {
        color: #333;
    }
    .list-wrap {
    }
    .haoyou{
        .el-tabs__nav-scroll{
            /*margin-left: 9rem;*/
            // padding: 0 8rem;
            width: 100%;
            display: flex;
            justify-content: space-around;
        }


    }
    .order-status-tab {
        height: auto;
        border-bottom: 0;
    }

    .order-status-tab .nav {
        overflow: inherit;
    }

    .order-status-tab li {
        width: 50%;
        border-bottom: 2px solid #ffffff;
    }

    .order-status-tab li a {
        height: auto;
        padding: .5rem;
    }

    .order-status-tab li.active {
        border-bottom: 2px solid $green;
    }
    // 内边距
    .list-group {
        padding: 1rem;
    }
    .list .list-group-item {
        border-radius: 0.833rem;
        // padding: .5rem;
        padding: 1rem 1rem 1.5rem 1rem;
        margin: .5rem;
        margin-bottom: 0;
        background: #fff;
    }

    .footer {
        color: #ffffff;
        // float: right;
        width: 100%;
        display: flex;
        padding-top: 1rem;
        .btn {
            padding: 0.375rem 0.55rem;
        }
        .btn-info{
            // margin: 0 0.5rem;
            border: none;
            // border-radius: 1.5rem;
            border-radius: 0.5rem;
            font-size: 1rem;
        }
        .btnLeft {
            margin-right: 1rem;
        }
    }
    .footer:first-child {
        width: 100%;
        display: flex;
        justify-content: space-around;
    }
    .cuewords{
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1.2rem;
        p{
            margin-top: 9rem;
            color: #999
        }
    }
    .section{
        position: relative;
    }
    .seal-img{
        position: absolute;
        // top: 0;
        // right: 5rem;
        // width: 5rem;
        top: -6.5rem;
        height: 6rem;
        right: 0rem;
        width: 6rem;
        background: url("../../assets/image/seal_03@2px.png") no-repeat;
        background-size: 100%;
        // padding-top: 1.7rem;
        // padding-left: 0.9rem;
        padding-top: 2.25rem;
        padding-left: 1.4rem;
        span{
            // color: #ee1e1e;
            color: #fff;
            font-size: 1rem;
            display: inline-block;
            // transform:rotate(-31deg);
            transform:rotate(-11deg);
            font-weight:700 ;
            text-align: center;
        }
    }
</style>
