<template>
    <div class="app-container home">
        <div class="page-content">
            <div class="title-bar" @click="back">
                <svg-icon icon-class="back" style="width: 30px;height: 30px;margin-right: 20px;color: #000;" />
                <span style="font-size: 32px;font-weight: 700;">{{ t('activity.myOrder') }}</span>
            </div>

            <div class="data-list" >
                <data-loading v-if="loading" />
                <el-empty v-show="!loading && (!dataList || !dataList.length)" />
                <div class="order-item" v-for="(item, i) in dataList" :key="i" >
                    <div class="order-status">{{ getOrderStatus(item.status) }}</div>
                    <div class="order-info">
                        <el-image class="order-img" :src="item.goods_img.split(',')[0]" />
                        <div class="order-desc">
                            <div class="goods-name">{{ item.goods_name }}</div>
                            <div class="order-time">{{ t('activity.orderTime') + ': ' + item.apply_time }}</div>
                            <div class="order-point">
                                <span style="color: rgba(37, 186, 228, 1);font-size: 24px;font-weight: 700;margin-right: 13px;" >{{ item.goods_integral }}</span>
                                <span style="font-size: 22px;font-weight: 400;color: rgba(51, 51, 51, 1);margin-right: 13px;">{{ t('activity.point') }}</span>
                                <span style="font-size: 20px;font-weight: 400;color: rgba(119, 119, 119, 1);">{{ '× ' + item.goods_num }}</span>
                            </div>
                        </div>
                    </div>
                    <el-divider />
                    <div class="order-footer">
                        <svg-icon icon-class="location" style="height: 55px;width: 55px;margin-right: 17px;" />
                        <div class="order-delivery">
                            <div class="line1">
                                {{ t('activity.recipients') + ': ' + item.delivery_recipients + '  ' + t('activity.phone') + ': ' + item.delivery_phone }}
                            </div>
                            <div class="line2">
                                {{ item.delivery_address }}
                            </div>
                        </div>
                        <el-button v-if="item.status == 0" class="shop-btn-large shop-dark" type="primary" @click="handleCancel(item)" >{{ t('activity.cancelOrder') }}</el-button>
                        
                    </div>
                </div>
            </div>

            <pagination v-show="total > 0" :total="total" :autoScroll="false"
                v-model:page="queryParams.curr_page"
                v-model:limit="queryParams.page_size"
                @pagination="getList" />
        </div>
        <cancel-order v-model:show="showCancel" :data="order" @cancel="getList" />
    </div>
</template>

<script setup name="MyOrder">
import { useLocale } from 'element-plus'
import { useRoute } from 'vue-router';
import { queryShopMyOrder } from '@/api/shop'
import { serverLang } from '@/utils/i18n'
import { onMounted, ref } from 'vue';
import { getOrderStatus } from '@/utils/htfx'
import CancelOrder from './cancelOrder'
import DataLoading from '@/components/DataLoading'

let { proxy } = getCurrentInstance()
const { t } = useLocale()
const route = useRoute()

const loading = ref(true);
const dataList = ref([])
const total = ref(0)
const data = reactive({
  queryParams: {
    curr_page: 1,
    page_size: 10,
    qcc_fuzzy_search: undefined,
    qcc_language: serverLang()
  }
});

const { queryParams } = toRefs(data)

const showCancel = ref(false)
const order = ref(null)

function getList() {
    loading.value = true;
    queryShopMyOrder(queryParams.value).then(response => {
        dataList.value = response.data.records;
        total.value = response.data.totalRecords;
        loading.value = false;
    })
}

function handleQuery() {
    queryParams.value.curr_page = 1
    getList()
}

function back() {
    if (proxy.$route.query.noGoBack) {
        proxy.$router.push({ path: "/" });
    } else {
        proxy.$router.go(-1);
    }
}

function handleCancel(data) {
    order.value = data
    showCancel.value = true
}

getList()
</script>

<style lang="scss" scoped>
.app-container {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.page-content {
    position: relative;
    flex-grow: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.title-bar {
    display: flex;
    align-items: center;
    width: fit-content;
    margin: 6px 0 20px;
    cursor: pointer;
}

.data-list {
    width: 100%;
    flex-grow: 1;
}

.order-item {
    width: 100%;
    height: 347px;
    box-shadow: var(--el-box-shadow-light);
    display: flex;
    flex-direction: column;
    padding: 20px 38px;
    margin-bottom: 20px;

    .order-status {
        font-size: 18px;
        font-weight: 400;
        letter-spacing: 0px;
        color: rgba(119, 119, 119, 1);
    }

    .order-info {
        width: 100%;
        display: flex;

    }

    .order-img {
        width: 293px;
        height: 165px;
        margin: 20px 40px 0 0;
        flex-shrink: 0;
    }

    .order-desc {
        width: 100%;
        margin: 20px 0 0;
        height: 165px;
        display: flex;
        flex-direction: column;
    }

    .goods-name {
        font-size: 30px;
        font-weight: 700;
        color: rgba(51, 51, 51, 1);
        margin-bottom: 16px;
    }

    .order-time {
        font-size: 18px;
        font-weight: 400;
        letter-spacing: 0px;
        color: rgba(119, 119, 119, 1);
    }

    .order-point {
        margin-top: auto;
        width: 100%;
        display: flex;
        justify-content: end;
        align-items: center;
    }

    .order-footer {
        width: 100%;
        min-height: 55px;
        display: flex;

        .order-delivery {
            min-height: 55px;
            margin-right: auto;

            .line1 {
                font-size: 20px;
                font-weight: 700;
                letter-spacing: 0px;
                line-height: 28.96px;
                color: rgba(51, 51, 51, 1);
            }

            .line2 {
                font-size: 16px;
                font-weight: 400;
                letter-spacing: 0px;
                line-height: 23.17px;
                color: rgba(119, 119, 119, 1);
            }
        }
    }
}

.shop-btn-large {
    margin-left: 10px;
    border: none;
    height: 55px;
    font-size: 20px;
    min-width: 188px;
    background: linear-gradient(90deg, rgba(41, 193, 229, 1) 0%, rgba(181, 227, 240, 1) 100%);
}

.shop-dark {
    margin-left: 34px;
    background: linear-gradient(90deg, rgba(16, 55, 118, 1) 0%, rgba(99, 116, 174, 1) 100%);
}

.shop-dark:active {
    background: linear-gradient(90deg, rgb(11, 37, 80) 0%, rgb(76, 89, 133) 100%);
}
</style>