<!--
 * @Date: 2022-11-21 11:04:12
 * @LastEditors: JinxChen
 * @LastEditTime: 2023-04-28 09:16:24
 * @FilePath: \TelpoH5FrontendWeb\src\views\buy-record\index.vue
 * @description:
-->
<template>
    <div class="buy-record">
        <van-nav-bar title="订购记录" left-arrow :border="true" @click-left="onNavBack"></van-nav-bar>
        <div class="record-container" v-if="recordList.length > 0">
            <div class="record-list" v-for="(item, index) in recordList" :key="index">
                <div class="title">
                    <div class="title-left"><p class="order">充值套餐</p></div>
                    <div class="title-right" :data-clipboard-text="item.packageOrder" @click="onCopy('.title-right')">
                        <p>订单号<van-icon class="right-icon" name="description"/></p>
                    </div>
                </div>
                <div class="name">
                    <p>{{item.packageName}}</p>
                </div>
                <div class="bottom">
                    <div class="btn-left"><span>{{item.orderTime}}</span></div>
                    <div class="btn-right"><span>{{item.packagePrice}}</span><span class="btn-price">元</span></div>
                </div>
            </div>
        </div>
        <div class="data-null" v-else>
            <img src="@/assets/img/news-noData.png" alt />
            <span>暂无购买记录</span>
        </div>
    </div>
</template>

<script>
import Clipboard from 'clipboard';
import APIWx from "@/api/wx";
export default {
  name:'',
  data(){
   return {
       recordList: [
           /* {
               title: '充值套餐',
               orderNumber: '20221122112424',
               name: '50分钟语音月清资源包',
               time: '2022-11-22 11:24:23',
               price: '6.5'
           },
           {
               title: '充值套餐',
               orderNumber: '777777777',
               name: '50分钟语音月清资源包',
               time: '2022-11-22 11:24:23',
               price: '6.5'
           },
           {
               title: '充值套餐',
               orderNumber: '555555',
               name: '50分钟语音月清资源包',
               time: '2022-11-22 11:24:23',
               price: '6.5'
           }, */
       ]
   }
  },
  created() {
    this.getLckjGetOrderPackageShow();
  },
  methods: {
    getLckjGetOrderPackageShow() {
        this.$toast.loading({
            message: '数据加载中...'
        })
        let reqParams = {
            imei: this.$route.query.imei,
            iccid: this.$route.query.iccid
        }
        APIWx.LckjGetOrderPackageShow(reqParams).then(res => {
            let data = res.data;
            if(data.stateCode === 1) {
                this.recordList = data.data;
                this.$toast.success({
                    message: "数据加载成功",
                    duration: 1500
                });
            }
            console.log("res", res);
        }).catch(error => {
            console.log("error");
        }).finally(() => {
            this.$toast.clear();
        })
    },
    onNavBack() {
        this.$router.replace({
            name: "cardInfo",
            query: { imei: this.$route.query.imei, iccid: this.$route.query.iccid, isShowMenu: true, isHasCode: true}
        });
    },
    // 复制订单号
    onCopy(type) {
        const clipboard = new Clipboard(type);
        clipboard.on('success', e => {
            this.$toast.success({
                message: '已复制到粘贴板'
            });
            clipboard.destroy();
        })
    }

  }
}
</script>

<style scoped lang="scss">
    .buy-record {
        height: 100vh;
        .record-container {
            position: relative;
            height: calc(100vh - 88px);
            padding: 15px;
             overflow: scroll;
            .record-list {
                background-color: #fff;
                padding: 15px;
                margin-bottom: 20px;
                box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
                p, span {
                    font-size: 16px;
                }
                .title {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    p {
                        font-size: 16px;
                    }
                    .title-right {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        p {
                            font-size: 16px;
                            color: $blue;
                            @include center();
                            .right-icon {
                                height: 20px !important;
                                width: 20px !important;
                                display: flex;
                                justify-content: flex-end;
                                align-items: center;
                                color: #1890ff !important;
                            }
                        }
                    }
                }
                .name {
                    text-align: left;
                    margin-top: 20px;
                }
                .bottom {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .btn-left {
                        span {
                            color: #999;
                        }
                    }
                    .btn-right {
                        span {
                            font-size: 20px;
                            color: #fca842;
                        }
                        .btn-price {
                            font-size: 16px
                        }
                    }
                }
            }
        }
        .data-null {
            height: calc(100vh - 88px);
            @include center();
            flex-direction: column;
            img {
                height: 200px;
                width: 300px;
            }
            span {
                font-size: 16px;
            }
        }
    }
</style>
