<template>
    <div>
        <m-nav-bar background="#498EF5" mode="white" title="订单列表"></m-nav-bar>
        <van-calendar :max-date="maxDate" @confirm="setTimeRange" :min-date="minDate" v-model:show="calendarShow"
            type="range" :round="false" position="bottom" />
        <div class="calendar">
            <van-icon @click="()=>{
                calendarShow=true
                
            }" size="32" name="notes-o" />
            <span @click="resetTimeRange" class="text">重置</span>
        </div>
        <div class="list">
            <div v-for="(item,index) in orderList" :key="index" class="item">
                <div class="order-time">下单时间：{{item.successTime}}</div>
                <div class="order-border"></div>
                <div class="order-name">{{item.goodsName}}</div>
                <div class="order-money">
                    <span style="color:#FF4D53">预估佣金￥{{item.commissionPrice/100}}</span>
                    <span style="color:#8A9099">付款金额￥1.00</span>
                </div>
                <div class="order-border"></div>
                <div class="order-code">
                    <span class="text">订单编号：{{item.outTradeNo}}</span>
                    <div @click="copyCode(item.outTradeNo)" class="copy">
                        复制
                    </div>

                </div>


            </div>

        </div>


    </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import api from '@/api'
import { order } from '@/api/types/order'
import { Toast } from 'vant'
export default defineComponent({
    setup() {
        const calendarShow = ref(false)
        const orderList = ref<order.studentOrderInfoList["rows"]>([])
        const copyCode = (code: string | number) => {
            code = String(code)
            var aux = document.createElement("input");

            // 获得需要复制的内容
            aux.setAttribute("value", code);

            // 添加到 DOM 元素中
            document.body.appendChild(aux);

            // 执行选中
            // 注意: 只有 input 和 textarea 可以执行 select() 方法.
            aux.select();

            // 获得选中的内容
            window.getSelection().toString();

            // 执行复制命令
            document.execCommand("copy");

            // 将 input 元素移除
            document.body.removeChild(aux);
            console.log('复制成功')
            Toast('复制成功')

            return

        }
        let query = reactive({
            endTime: "",
            startTime: ""
        })
        const setTimeRange = (val: Date | Date[]) => {
            calendarShow.value = false
            if (Array.isArray(val)) {
                query.startTime = `${val[0].getFullYear()}-${val[0].getMonth() + 1}-${val[0].getDate()}`
                query.endTime = `${val[1].getFullYear()}-${val[1].getMonth() + 1}-${val[1].getDate()}`
            }
            api.order.studentOrderInfoList({
                ...query


            }).then(res => {
                orderList.value = res.data.rows


            })
        }
        const resetTimeRange = () => {
            query.startTime = ""
            query.endTime = ""

            api.order.studentOrderInfoList({
                ...query


            }).then(res => {
                orderList.value = res.data.rows


            })


        }
        api.order.studentOrderInfoList({
            ...query


        }).then(res => {
            orderList.value = res.data.rows


        })

        return {
            query,
            setTimeRange,
            resetTimeRange,
            maxDate: new Date(),
            minDate: new Date('2022-1-01'),
            orderList,
            copyCode,
            calendarShow
        }
    }
})
</script>

<style lang="scss" scoped>
.calendar {
    padding-left: 30px;
    padding-right: 30px;
    display: flex;
    width: 750px;
    height: 104px;
    align-content: center;
    align-items: center;
    justify-content: space-between;
    background: #fff;

    .text {
        color: #498EF5;

    }


}

.list {
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 40px;

    .item {
        width: 690px;
        height: 320px;
        margin: 0 auto;
        border-radius: 16px;
        background: #fff;
        margin-bottom: 20px;

        .order-time {
            color: #8A9099;
            line-height: 90px;
            height: 90px;
            width: 100%;
            padding-left: 30px;
            text-align: left;
            font-size: 26px;

        }

        .order-border {
            width: 100%;
            height: 2px;
            background: #E8E8E8;
        }

        .order-name {
            color: #0A1A33;
            font-size: 36px;
            text-align: left;
            padding-left: 30px;
            padding-top: 20px;
            padding-bottom: 20px;
        }

        .order-money {
            display: flex;
            justify-content: space-between;
            padding-left: 30px;
            padding-right: 30px;
            font-size: 26px;
            padding-bottom: 20px;

            align-content: center;
            align-items: center;
        }

        .order-code {
            padding-left: 30px;
            padding-right: 30px;
            display: flex;
            align-content: center;
            align-items: center;
            height: 90px;
            font-size: 26px;
            width: 100%;

            .text {
                width: 70%;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
            }

            .copy {
                width: 80px;
                height: 40px;
                background: #FFFFFF;
                border-radius: 20px 20px 20px 20px;
                opacity: 1;
                border: 2px solid #0A1A33;
                margin-left: 10px;
                cursor: pointer;
            }

        }

    }
}
</style>