<template>
    <BasePage :back="back">
        <div class="order">
            <div class="top">
                <van-tabs class="area" v-model:active="TradeArea" color="#f00" title-active-color="#f00"
                    title-inactive-color="#000" line-width="4vw" line-height=".667vw" @change="changeMall">
                    <van-tab v-for="i in mallList" :title="i.label" :name="i.value"></van-tab>
                </van-tabs>

                <van-tabs v-model:active="activeTab" color="#f00" title-active-color="#f00" title-inactive-color="#000"
                    line-width="4vw" line-height=".667vw" @change="onTabChange">
                    <van-tab title="全部" name=""></van-tab>
                    <van-tab v-for="i in tradeStates" :title="i.label" :name="String(i.value)"></van-tab>
                </van-tabs>
                <van-search v-model="searchParams.ordernum" left-icon=" " shape="round" placeholder="输入订单号搜索"
                    @search="onSearch" @clear="onClear">
                    <template #right-icon>
                        <van-icon name="/img/sort-search.png" @click="onSearch"></van-icon>
                    </template>
                </van-search>
            </div>

            <BaseList ref="baseList" url="/v1/client/FOrdersClient" :params="searchParams"
                :parseData="res => res.data.items" class="b_l_w" style="padding: 3.33vw;" @refresh="onRefresh">
                <template #default="{ item }">
                    <div :key="item.ordernum" class="list">
                        <div class="code">
                            订单编号:{{ item.ordernum }}
                            <img src="/img/orderCopy.png"
                                @click="$copyText(item.ordernum); $showSuccessToast('复制订单编号成功')" />
                        </div>
                        <div class="_info" v-for="list in (item.orderdetails || [])" :key="list.id">
                            <img :src="$file(list.proimg)">
                            <div class="_c">
                                <div class="_name">
                                    <span>{{ list.proname }}</span>
                                </div>
                                <div class="_spec">
                                    <span>{{ list.proskuname?.split(';').join('/') }}</span>
                                    <p>x{{ list.buynums }}</p>
                                </div>
                                <div class="_price">
                                    <b><span>￥</span>{{ list.saleprice?.toFixed(2) }}</b>
                                </div>
                            </div>
                        </div>
                        <p v-if="item.remark" style="margin-bottom: 3vw;">
                            订单备注：{{ item.remark }}
                        </p>
                        <div class="state">
                            <b :class="`b${item.state}`">
                                {{ item.statename }}
                            </b>
                            <div class="btn">
                                <a class="a2" v-if="item.state == 0" @click="cancelTrade(item)">
                                    取消订单
                                </a>
                                <a class="a0" v-if="item.state == 0"
                                    @click="$navigate(`/Pay?ordernum=${item.ordernum}`)">
                                    立即支付
                                </a>
                                <a class="a1" @click="$navigate(`/TradeDetail?ordernum=${item.ordernum}`)">
                                    查看详情
                                </a>
                            </div>
                        </div>
                    </div>
                </template>
            </BaseList>
        </div>
    </BasePage>
</template>

<script>
import BaseList from '../../components/BaseList.vue';

export default {
    name: 'TradeList',
    data() {
        return {
            activeTab: '',
            TradeArea: Number(this.$route.query.TradeArea) || 3,
            searchParams: {
                ordernum: '',
                state: '',
                mallstate: Number(this.$route.query.TradeArea) || 3,
            },
            tradeStates: [
            ],
            mallList: [
                { value: 3, label: '商城订单' },
                { value: 2, label: '助农订单' },
                { value: 1, label: '商务订单' },
            ],
        }
    },
    mounted() {
        this.getTradeStates();
    },
    watch: {
        TradeArea(val) {
            this.searchParams.mallstate = val;
        },
        '$route.query.state': {
            handler(newVal) {
                if (newVal !== undefined && newVal !== '') {
                    this.activeTab = String(newVal);
                    // this.getTradeStates();
                } else {
                    this.activeTab = '';
                }
            }
        }
    },
    methods: {
        back() {
            this.$router.push('/My')
        },
        onTabChange(name) {
            this.searchParams.state = name;
            this.$refs.baseList?.refresh();
        },
        changeMall(name) {
            this.searchParams.mallstate = Number(name) || 3;
            this.searchParams.state = '';
            this.$refs.baseList?.refresh();
        },
        onSearch() {
            this.$refs.baseList?.refresh();
        },
        onClear() {
            this.searchParams.ordernum = '';
            this.$refs.baseList?.refresh();
        },
        getTradeStates() {
            this.$get('/v1/client/FOrdersClient/orderstate').then(res => {
                this.tradeStates = res.data;
                this.$nextTick(() => {
                    const stateFromRoute = this.$route.query.state;
                    if (stateFromRoute !== undefined && stateFromRoute !== '') {
                        this.activeTab = String(stateFromRoute);
                        this.searchParams.state = stateFromRoute;
                    }
                });
            }).catch((err) => {
                this.$showFailToast(err.message || '获取订单状态失败');
            });
        },
        onRefresh() {
        },
        cancelTrade(item) {
            this.$showConfirmDialog({
                title: "是否确认取消订单",
            }).then(() => {
                this.$put(`/v1/client/FOrdersClient/${item.ordernum}/cancel`).then(() => {
                    this.$showSuccessToast('取消订单成功');
                    this.$refs.baseList?.refresh();
                }).catch(err => {
                    this.$showFailToast(err.errmsg || '取消失败');
                });
            }).catch(() => { });
        },
    }
}
</script>
