<template>
    <div class="main-content12">
        <!-- page header -->
        <div class="pageheader flex-between">
            <span class="pagetitle">{{ pageTitle }}</span>
            <GuipButton size="table" type="ignore" @click="showPddSetting">拼多多发货</GuipButton>

            <GuipDialog :dialogVisible="dialogVisiblePddSetting" title="" :confirmText="pddSettingConfirmText"
                cancelText="取消" :show-close-button="false" :show-cancel-button="true" @confirm="pddSetting"
                @cancel="closePddSetting" @close="closePddSetting" @dialogVisibleChange="dialogVisibleChange">
                <!-- 自定义内容 -->
                <el-form>
                    <el-tabs v-model="pddSettingActiveName" @tab-click="handleClick">
                        <el-tab-pane label="拼多多手工发货" name="1">
                            <PromptText text='导出待发货订单excel，到拼多多导入该excel进行发货' :type="1" />
                            <GuipSelect class="mt-16" label="选择站点" v-model="pddExportUid"
                                @change="selectPddExportSite()" :options="searchSiteList" valueKey="uid" labelKey="name"
                                :extraItem="{ label: '请选择站点', value: '0' }" placeholder="" clearable width="300px" />

                        </el-tab-pane>
                        <el-tab-pane label="拼多多自动发货" name="2">
                            <PromptText text='需要自己在拼多多购买自动发货软件，并设置下方规则' :type="1" />
                            <div class="flex-wrap mt-16">
                                <div class="mb-16">
                                    <p>提交规则</p>
                                </div>
                                <div class="mt-16">
                                    <div>
                                        <el-checkbox checked disabled><span
                                                class="fontblue">允许未发货的有效订单提交检测（不可取消）</span></el-checkbox>
                                    </div>
                                    <div class="mt-16">
                                        <el-checkbox v-model="selectAllowPddDeliveredDelayedSubmit">允许已发货<el-input
                                                v-model="pddDeliveredDelayedSubmitHour"
                                                style="width:50px;height:30px"></el-input>小时订单提交论文检测</el-checkbox>
                                    </div>
                                </div>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </el-form>
            </GuipDialog>
        </div>

        <div class="elementWrap mb-10">
            <el-form>
                <div class="flex-between operateBtns">
                    <b>筛选及导出列表</b>
                    <div class="flex gap24">
                        <GuipButton size="table" type="ignore" @click="resetSearchParams">清空</GuipButton>
                        <GuipButton size="table" type="system" @click="getFilterParams">筛选</GuipButton>
                        <GuipButton size="table" type="primary" @click="exportData">导出</GuipButton>
                    </div>
                </div>
                <div class="flex">
                    <p class="mr-12">时间范围</p>
                    <el-date-picker class="mr-32" v-model="searchDate" type="daterange" range-separator="至"
                        start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd">
                    </el-date-picker>

                    <GuipSelect class="mr-32" label="服务类型" v-model="searchType" @change="changeSearchType()"
                        :options="searchTypeList" :extraItem="{ label: '全部', value: '0' }" placeholder="" clearable />

                    <GuipSelect class="mr-32" label="站点" v-model="searchUid" @change="changeSearchSite()"
                        :options="searchSiteList" valueKey="uid" labelKey="name" :extraItem="{ label: '全部', value: '0' }"
                        placeholder="" clearable />

                    <GuipSelect class="mr-32" width="100px" label="报告状态" v-model="searchStatus"
                        @change="changeSearchStatus()" :options="searchStatusList"
                        :extraItem="{ label: '全部', value: 'all' }" placeholder="不限" clearable />
                </div>
            </el-form>
        </div>

        <!-- page content -->
        <div class="elementWrap">
            <div>
                <el-form>
                    <div class="flex" style="justify-content: space-between;">
                        <div class="flex">
                            <h3 class="checktitle mr-24">{{ pageTitle }}列表</h3>
                            <GuipSelect class="mr-32" label="报告格式" v-model="reportNameFormat"
                                :options="donwReportNameFormat" @change="changeReportNameFormat()" clearable
                                v-if="pageTab == 'check'" />
                        </div>
                        <GuipInput label="订单号" v-model="searchTid" @blur="changeSearchTid()" placeholder="请输入订单号"
                            ref="GuipInput" />

                    </div>

                    <PromptText class="my-32" text='订单提示：电商订单，提交检测后会自动发货，请勿手动发货、代收款订单，退款须由平台操作，不可私自退款' :type="2" />

                    <GuipTable :tableData="orderList" ref="multipleTable" autoColumn="true" :loading="tableLoading">
                        <el-table-column prop="sitename" label="站点" fixed="left" min-width="60px">
                            <template slot-scope="scope">
                                <div class="flex">
                                    <GuipToolTip :content="scope.row.sitename">
                                        <img class="wh-16" src="@/assets/site.svg" alt="">
                                    </GuipToolTip>
                                </div>
                            </template>
                        </el-table-column>

                        <el-table-column prop="sale_id" label="ID" fixed="left" min-width="120px">
                            <template slot-scope="scope">
                                <div class="flex">
                                    <p>{{ scope.row.sale_id }}</p>
                                    <GuipToolTip class="ml-7" v-if="scope.row.ispublic == 1" content="自供货">
                                        <img class="wh-16" src="@/assets/self_supply.svg" />
                                    </GuipToolTip>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="type_desc" label="检测类型" fixed="left" min-width="160px"></el-table-column>
                        <el-table-column prop="pay_type" label="买家" min-width="60px">
                            <template slot-scope="scope">
                                <div class="flex">
                                    <GuipToolTip :content="scope.row.pay_type_desc">
                                        <img class="wh-16" :src="getPayImg(scope.row.pay_type)" alt="">
                                    </GuipToolTip>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="tids" label="订单号" min-width="220px">
                            <template slot-scope="scope">
                                <div class="flex" v-if="scope.row.status == 1">
                                    <GuipToolTip :content="'下载报告 作者：' + scope.row.author + ' 标题：' + scope.row.title">
                                        <a :href="'http://' + scope.row.domain + '/report/tid/' + tid + '/sid/' + scope.row.sale_id"
                                            target="_blank" v-for="tid in scope.row.tids" :key="tid">{{ tid }}</a>
                                    </GuipToolTip>
                                </div>
                                <div class="" v-else>
                                    <p v-for="tid in scope.row.tids" :key="tid">
                                        {{ tid }}
                                        <GuipToolTip content="待发货">
                                            <img v-if="scope.row.pay_type == 11 && scope.row.pdd_is_wait_deliver_goods[tid] == true"
                                                class="wh-16 ml-7" src="@/assets/wait_deliver_goods.svg" />
                                        </GuipToolTip>
                                    </p>

                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="author" label="作者" v-if="pageTab == 'check'">
                            <template slot-scope="scope">
                                <div class="flex">
                                    <GuipToolTip :content="'作者：' + scope.row.author + ' 标题：' + scope.row.title">
                                        <p>{{ scope.row.author }}</p>
                                    </GuipToolTip>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="title" label="标题" v-else-if="pageTab == 'ai'" min-width="200px">
                            <template slot-scope="scope">
                                <div class="flex">
                                    <GuipToolTip :content="scope.row.title">
                                        <p>{{ scope.row.title }}</p>
                                    </GuipToolTip>
                                </div>
                            </template>
                        </el-table-column>


                        <el-table-column prop="src" label="渠道" min-width="60px">
                            <template slot-scope="scope">
                                <div class="flex">
                                    <GuipToolTip :content="scope.row.src_desc">
                                        <img class="wh-16" :src="getChannelImg(scope.row.src)" alt="">
                                    </GuipToolTip>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="ip" label="IP" min-width="150px"></el-table-column>
                        <el-table-column prop="sale_date_format" label="销售日期" min-width="120px">
                            <template slot-scope="scope">
                                <div class="flex">
                                    <GuipToolTip :content="scope.row.sale_date">
                                        <p>{{ scope.row.sale_date_format }}</p>
                                    </GuipToolTip>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="wordnum" label="字数"></el-table-column>
                        <el-table-column v-if="pageTab != 'ai'" prop="similarity" label="相似度">
                            <template slot-scope="scope">
                                <div class="flex">
                                    <p v-if="scope.row.similarity > 0">{{ scope.row.similarity }}%</p>
                                    <p v-else>-</p>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="income" label="实际收入" min-width="100px"></el-table-column>
                        <el-table-column prop="cost" label="成本"></el-table-column>
                        <el-table-column prop="status_desc" label="状态" min-width="150px">
                            <template slot-scope="scope">
                                <div class="flex">
                                    <div v-if="scope.row.status == 1" class="status-item divgreen">
                                        <span class="fontgreen">{{ scope.row.status_desc }}</span>
                                    </div>
                                    <div v-else-if="scope.row.status == 3 || scope.row.status == 11 || scope.row.status == 12"
                                        class="status-item divblue">
                                        <span class="fontblue">{{ scope.row.status_desc }}</span>
                                    </div>
                                    <div v-else-if="scope.row.status == 2 || scope.row.status == 10 || scope.row.status == 4"
                                        class="status-item divred">
                                        <span class="fontred">{{ scope.row.status_desc }}</span>
                                    </div>
                                    <div v-else-if="scope.row.status == 0 || scope.row.status == 8"
                                        class="status-item divgray">
                                        <span class="fontgray">{{ scope.row.status_desc }}</span>
                                    </div>
                                    <div v-else-if="scope.row.status == 5" class="status-item divorange">
                                        <span class="fontorange">{{ scope.row.status_desc }}</span>
                                    </div>
                                    <div v-else-if="scope.row.status == 6 || scope.row.status == 7"
                                        class="status-item divpurple">
                                        <span class="fontpurple">{{ scope.row.status_desc }}</span>
                                    </div>
                                    <GuipToolTip v-if="scope.row.status == 1 && scope.row.is_downloaded_report == 1"
                                        content="已下载报告标识">
                                        <img class="wh-16 ml-7" src="@/assets/downloaded.svg" />
                                    </GuipToolTip>

                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" min-width="80px">
                            <template slot-scope="scope">
                                <div class="flex">
                                    <el-button v-if="scope.row.status == 1" @click="showConfirmDelReport(scope.row)"
                                        type="text">删报告</el-button>
                                </div>
                            </template>
                        </el-table-column>
                    </GuipTable>
                    <Page :current-page="orderListCurrentPage" :has-next-page="isHasNextPage"
                        :total-records="orderListTotalRecords" :page-size="orderListPageSize" :is-loading="tableLoading"
                        @page-change="handlePageChange" />

                </el-form>
            </div>
            <GuipDialog :dialogVisible="dialogVisibleDelReport" title="删除报告" confirmText="删除" cancelText="取消"
                :show-close-button="false" :show-cancel-button="true" @confirm="confirmDelReport" @cancel="handleCancel"
                @close="handleClose" @dialogVisibleChange="dialogVisibleChange">
                <!-- 自定义内容 -->
                <p class="mx-24 mt12 flex">是否删除 ID:{{ delReportId }} 报告？删除后无法恢复</p>
            </GuipDialog>
            <audio id="notice-sound" ref="audioPlayer" :src="audioSrc" hidden v-if="!isIE"></audio>
            <!-- IE浏览器使用的embed元素 -->
            <embed v-if="isIE" name="embedPlay" :src="audioSrc" autostart="true" hidden="true" loop="false" />
        </div>
    </div>
</template>

<script>

import GuipTable from '@/components/GuipTable.vue';
import GuipSelect from '@/components/GuipSelect.vue';
import GuipInput from '@/components/GuipInput.vue';
import GuipButton from '@/components/GuipButton.vue';
import GuipToolTip from '@/components/GuipToolTip.vue';
import GuipDialog from '@/components/GuipDialog.vue';
import Page from '@/components/Page.vue';
import PromptText from '@/components/PromptText.vue';

export default {
    name: 'siteList',
    props: {
        list_type: {
            type: String,
            default: 'check'
        },
    },
    components: {
        GuipTable,
        GuipSelect,
        GuipButton,
        GuipInput,
        GuipToolTip,
        GuipDialog,
        Page,
        PromptText,
    },
    data() {
        return {
            pageTab: 'check',
            pageTitle: '查重订单',
            // 表格加载
            tableLoading: false,
            // 订单列表
            orderList: [],
            orderListTotalRecords: 0,
            isHasNextPage: true,
            orderListCurrentPage: 1,
            orderListPageSize: 100,
            orderListNextMinId: 0,
            orderListPrevMaxId: 0,
            orderListEndPage: 0,

            siteList: [],

            searchDate: '',
            searchStatus: 'all',
            searchStatusList: [],
            searchUid: '0',
            searchSiteList: [],
            searchTid: 0,
            searchType: '0',
            searchTypeList: [],

            dialogVisibleDelReport: false,
            delReportId: '',

            dialogVisiblePddSetting: false,
            pddSettingActiveName: '1',
            pddSettingConfirmText: '导出拼多多发货订单',
            pddExportUid: '0',
            pddDeliveredDelayedSubmitHour: 1,
            selectAllowPddDeliveredDelayedSubmit: false,

            donwReportNameFormat: [],
            reportNameFormat: 0,

            intervalId: null,

            isMuted: true,
            audioSrc: require('@/assets/msg.wav'), // 音频文件路径
            isIE: false // 是否是IE浏览器
        }
    },
    mounted() {
        this.pageTab = this.list_type
        this.getOrderList()
        this.getConfig()
        this.startTimer();

        this.checkBrowser();
        if (!this.isIE) {
            this.$refs.audioPlayer.load(); // 预加载音频
        }
    },
    beforeUpdate() {
    },
    beforeDestroy() {
        this.stopTimer();
    },
    methods: {
        unmute() {
            this.isMuted = false;
            if (this.$refs.audioPlayer) {
                this.$refs.audioPlayer.muted = false;
            }
        },
        checkBrowser() {
            const userAgent = window.navigator.userAgent.toLowerCase();
            this.isIE = userAgent.indexOf("ie") >= 0 || userAgent.indexOf("trident") >= 0;
        },

        // 播放声音
        playSound() {
            this.$nextTick(() => {
                if (this.isIE) {
                    // IE浏览器使用embed播放
                    console.log('ienotice');
                } else {
                    // 现代浏览器使用audio播放
                    try {
                        const audio = this.$refs.audioPlayer;
                        this.unmute()
                        if (audio) {
                            audio.play().then(() => {
                                console.log('notice');
                            }).catch(e => {
                                console.error('音频播放失败:', e);
                            });
                        }
                    } catch (e) {
                        console.error('播放出错:', e);
                    }
                }
            });
        },
        startTimer() {
            this.intervalId = setInterval(() => {
                this.getOrderList()
                // // 测试重复播放 -- is okk
                // this.playSound()
                // 每隔5秒执行的代码
                console.log('定时更新订单');
            }, 60000);
        },
        stopTimer() {
            if (this.intervalId) {
                clearInterval(this.intervalId);
            }
        },
        getFilterParams() {
            var stime = '';
            var etime = '';
            if (this.searchDate && this.searchDate.length > 0) {
                stime = this.searchDate[0];
                etime = this.searchDate[1];
            }
            var params = {};
            if (stime) params.stime = stime;
            if (etime) params.etime = etime;
            if (this.searchStatus) params.status = this.searchStatus;
            if (this.searchType) params.type = this.searchType;
            if (this.searchUid) params.uid = this.searchUid;

            this.getOrderList(params)

        },
        resetPageParams() {
            this.orderListTotalRecords = 0
            this.isHasNextPage = true
            this.orderListCurrentPage = 1
            this.orderListPageSize = 100
            this.orderListNextMinId = 0
            this.orderListPrevMaxId = 0
            this.orderListEndPage = 0
        },
        resetSearchParams() {
            this.searchDate = ''
            this.searchStatus = 'all'
            this.searchType = '0'
            this.searchUid = '0'
            // 或者使用 $set
        },
        handleError(error) {
            console.error('分页错误:', error)
            // 可以在这里显示错误提示
        },
        getConfig() {
            this.$http('POST', '/agentnew/get_agent_config', {

            }).then(response => {
                this.$nextTick(() => {
                    if (response.status) {
                        if (response.data.pdd_delivered_delayed_submit_hour > 0) {
                            this.pddDeliveredDelayedSubmitHour = response.data.pdd_delivered_delayed_submit_hour;
                            this.selectAllowPddDeliveredDelayedSubmit = true;
                        }
                        this.reportNameFormat = response.data.report_name_format;
                    } else {
                        this.$Message.error(response.info);
                    }
                })
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        getOrderList(params) {
            console.log(this.searchDate)
            this.tableLoading = true
            try {
                const requestParams = {
                    pagesize: this.orderListPageSize,
                    page: this.orderListCurrentPage,
                    pagetab: this.pageTab,
                    ...params
                }
                this.$http('POST', '/agentnew/ajax_get_check_order_list', requestParams).then(response => {
                    this.tableLoading = false
                    this.$nextTick(() => {
                        if (this.intervalId && response.data.maxid && this.orderListPrevMaxId && response.data.maxid > this.orderListPrevMaxId) {
                            console.log('有新订单了');
                            this.playSound();
                        }
                        this.orderList = response.data.list
                        this.searchStatusList = response.data.search_check_status
                        this.orderListTotalRecords = response.data.total_records
                        this.searchSiteList = response.data.sitelist
                        this.searchTypeList = response.data.type2name
                        this.donwReportNameFormat = response.data.donw_report_name_format
                        console.log(this.donwReportNameFormat, 'donwReportNameFormat')
                        // 更新minId和maxId
                        if (response.data.minid) this.orderListNextMinId = response.data.minid
                        if (response.data.maxid) this.orderListPrevMaxId = response.data.maxid
                        this.isHasNextPage = response.data.is_has_next_page;
                        if (this.orderListTotalRecords > 0) {
                            // 计算总页数
                            this.orderListCurrentPage = Math.ceil(this.orderListTotalRecords / this.orderListPageSize)
                            // this.page = this.totalPages || 1
                            // this.jumpPage = this.page 
                            // this.end_page = 1;
                        }
                        // console.log(this.isHasNextPage, 'isHasNextPage')
                    })
                }).catch(error => {
                    console.error(error, 'error')
                })


            } catch (error) {
                console.error('数据加载失败:', error)
            } finally {
                this.tableLoading = false
            }
        },
        exportData() {
            var stime = '';
            var etime = '';
            if (this.searchDate && this.searchDate.length > 0) {
                stime = this.searchDate[0];
                etime = this.searchDate[1];
            }
            var params = {};
            if (stime) params.stime = stime;
            if (etime) params.etime = etime;
            if (this.searchStatus) params.status = this.searchStatus;
            if (this.searchType) params.type = this.searchType;
            if (this.searchUid) params.uid = this.searchUid;

            this.$http('GET', '/agentnew/export_order', params, {
                returnFullResponse: true,
                responseType: 'blob'
            }).then(response => {
                const {
                    headers,     // 响应头（headers）
                    data,        // 响应体数据
                } = response;
                const filename = this.decodeRFC5987Filename(headers['content-disposition']);
                // console.log(headers,data,filename,'ajax_get_check_order_list=====');

                const blob = new Blob([data], { type: 'application/force-download' });
                const downloadUrl = window.URL.createObjectURL(blob);

                const link = document.createElement('a');
                link.href = downloadUrl;
                link.setAttribute('download', filename);

                document.body.appendChild(link);
                link.click();

                document.body.removeChild(link);
                window.URL.revokeObjectURL(downloadUrl);
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        decodeRFC5987Filename(header) {
            // 匹配 RFC 5987 编码的文件名（如 filename*=utf8''xxx）
            const match = header.match(/filename\*=(?:utf8|UTF-8)''([^;]+)/i);
            console.log(match, 'match');
            if (match) {
                return decodeURIComponent(match[1]);
            }
            // 回退到普通文件名（如 filename="xxx"）
            const fallbackMatch = header.match(/filename="?([^"]+)"?/i);
            return fallbackMatch ? fallbackMatch[1] : 'download';
        },
        getPayImg(pay_type) {
            return require('@/assets/pay/pay_' + pay_type + '.svg');
        },
        getChannelImg(src) {
            return require('@/assets/channel_' + src + '.svg');
        },
        changeSearchSite() {
            console.log(this.searchUid)
        },
        changeSearchTid() {
            console.log(this.searchTid, 'this.searchTid')
            this.getOrderList({ orderid: this.searchTid })
        },
        changeSearchType() {
            console.log(this.searchType)
        },
        changeSearchStatus() {
            console.log(this.searchStatus)
        },
        changeReportNameFormat() {
            this.$http('POST', '/agentnew/ajax_set_report_name_format', {
                report_name_format: this.reportNameFormat,
            }).then(response => {
                this.$nextTick(() => {
                    if (response.status) {
                        this.$Message.success(response.info);
                    } else {
                        this.$Message.error(response.info);
                    }
                })
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        // 弹框相关方法---start
        showConfirmDelReport(row) {
            this.dialogVisibleDelReport = true;
            this.delReportId = row.sale_id;
        },
        // 确认按钮事件
        confirmDelReport() {
            this.$http('POST', '/agentnew/ajax_del_report', {
                saleid: this.delReportId,
            }).then(response => {
                this.$nextTick(() => {
                    if (response.status) {
                        this.$Message.success(response.info);
                        this.dialogVisibleDelReport = false;
                    } else {
                        this.$Message.error(response.info);
                    }
                })
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        // 取消按钮事件
        handleCancel() {
            this.dialogVisibleDelReport = false;
        },
        // 关闭弹框事件
        handleClose() {
            this.dialogVisibleDelReport = false;
        },
        dialogVisibleChange(data) {
            console.log(data, 'data098908090');
        },
        // 弹框相关方法---end
        showPddSetting() {
            this.dialogVisiblePddSetting = true;
        },
        // 关闭弹框事件
        closePddSetting() {
            this.dialogVisiblePddSetting = false;
        },
        selectPddExportSite() {
            console.log(this.pddExportUid)
        },
        // 确认按钮事件
        pddSetting() {
            if (this.pddSettingActiveName == 1) {
                this.$http('GET', '/agentnew/export_pdd_tids', {
                    uid: this.pddExportUid,
                }, {
                    returnFullResponse: true,
                    responseType: 'blob'
                }).then(response => {
                    const {
                        headers,     // 响应头（headers）
                        data,        // 响应体数据
                    } = response;
                    const filename = this.decodeRFC5987Filename(headers['content-disposition']);
                    // console.log(headers,data,filename,'ajax_get_check_order_list=====');

                    const blob = new Blob([data], { type: 'application/force-download' });
                    const downloadUrl = window.URL.createObjectURL(blob);

                    const link = document.createElement('a');
                    link.href = downloadUrl;
                    link.setAttribute('download', filename);

                    document.body.appendChild(link);
                    link.click();

                    document.body.removeChild(link);
                    window.URL.revokeObjectURL(downloadUrl);
                }).catch(error => {
                    console.error(error, 'error')
                })
            } else if (this.pddSettingActiveName == 2) {
                this.$http('POST', '/agentnew/ajax_set_pdd_delivered_delayed_submit_hour', {
                    hour: this.selectAllowPddDeliveredDelayedSubmit === true ? this.pddDeliveredDelayedSubmitHour : 0,
                }).then(response => {
                    this.$nextTick(() => {
                        if (response.status) {
                            this.$Message.success(response.info);
                            this.dialogVisibleDelReport = false;
                        } else {
                            this.$Message.error(response.info);
                        }
                    })
                }).catch(error => {
                    console.error(error, 'error')
                })
            }

        },
        handleClick() {
            console.log(this.pddSettingActiveName);
            if (this.pddSettingActiveName == 1) {
                this.pddSettingConfirmText = '导出拼多多发货订单';
            } else if (this.pddSettingActiveName == 2) {
                this.pddSettingConfirmText = '确定';
            }
        },

        handlePageChange({ page, endPage, direction }) {
            console.log(endPage, 'endPage===');
            this.orderListCurrentPage = page

            const params = { page }

            // 根据翻页方向设置参数
            if (direction === 'prev') {
                params.maxid = this.orderListPrevMaxId
                if (this.orderListNextMinId) params.minid = null
            } else if (direction === 'next') {
                params.minid = this.orderListNextMinId
                if (this.orderListPrevMaxId) params.maxid = null
            } else if (direction === 'last') {
                params.end_page = 1
                params.page = null
                params.minid = null
                params.maxid = null
            }

            this.getOrderList(params)
        },

    },
    computed: {
    },
    watch: {
        '$route'() {
            // 执行数据更新逻辑
            this.pageTab = this.list_type
            if (this.pageTab === 'check') {
                this.pageTitle = '查重订单'
            } else if (this.pageTab === 'ai') {
                this.pageTitle = 'AI写作订单'
            }
            this.getOrderList()
            this.resetSearchParams()
            this.resetPageParams()
        }

    },
}
</script>
<style lang="scss" scoped>
.pageheader {
    display: flex;
    justify-content: space-between;
    /* 关键属性 */
    align-items: center;
    margin: 0px 0px 16px 0px;
}

.pagetitle {
    font-size: 16px;
    font-weight: bold;
    line-height: normal;
    letter-spacing: 0.08em;
    color: #1E2226;
    margin-top: 8px;
}

.elementWrap {
    padding: 32px 36px;
    background: #fff;
}

.operateBtns {
    padding: 17px 0;
    border-bottom: 1px solid #DFE2E6;
    margin-bottom: 24px;
}

::v-deep .custom-popover {
    position: fixed !important;
    // max-height: 290px;
    // overflow-y: auto;
    margin-top: 0 !important;
    margin-left: 0 !important;
    transform: none !important;
}

.wh-16 {
    width: 16px;
    height: 16px;
    z-index: 1;
}

.mt-16 {
    margin-top: 16px;
}

.mb-10 {
    margin-bottom: 10px;
}

.mr-12 {
    margin-right: 12px;
}

.mr-24 {
    margin-right: 24px;
}

.mr-32 {
    margin-right: 32px;
}

.my-32 {
    margin-bottom: 32px;
    margin-top: 32px;
}

a {
    text-decoration: none;
    color: #006AFF;
}

a:hover {
    text-decoration: underline;
}

.ml-7 {
    margin-left: 7px;
}



.status-item {
    height: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    z-index: 0;
    padding: 2px 10px;
    border-radius: 4px;

}

.divgreen {
    background: rgba(239, 255, 224, 0.5);
    box-sizing: border-box;
    border: 1px solid rgba(0, 194, 97, 0.6);
}

.fontgreen {
    font-family: Microsoft YaHei UI;
    font-size: 14px;
    font-weight: normal;
    line-height: normal;
    text-align: center;
    letter-spacing: 0.08em;
    color: #0DAF49;
}

.divblue {
    background: #F2F7FF;
    box-sizing: border-box;
    border: 1px solid #BFDAFF;
}

.fontblue {
    font-family: Microsoft YaHei UI;
    font-size: 14px;
    font-weight: normal;
    line-height: normal;
    text-align: center;
    letter-spacing: 0.08em;
    color: #006AFF;
}

.divred {
    background: #FFF1F0;
    box-sizing: border-box;
    border: 1px solid #FFA39E;
}

.fontred {
    font-family: Microsoft YaHei UI;
    font-size: 14px;
    font-weight: normal;
    line-height: normal;
    text-align: center;
    letter-spacing: 0.08em;
    color: #FF4D4F;
}

.divgray {
    background: #F6F7FA;
    box-sizing: border-box;
    border: 1px solid #DFE2E6;
}

.fontgray {
    color: #626573;
}

.divorange {
    background: #FFFBF2;
    box-sizing: border-box;
    border: 1px solid rgba(251, 131, 45, 0.38);
}

.fontorange {
    color: #FB832D;
}

.divpurple {
    background: #F9F2FF;
    box-sizing: border-box;
    border: 1px solid rgba(126, 118, 253, 0.28);
}

.fontpurple {
    color: #6258FF;
}

.checktitle {
    /* body/body 2_bold */
    font-family: Microsoft YaHei UI;
    font-size: 14px;
    font-weight: bold;
    line-height: normal;
    letter-spacing: 0.08em;
    /* text/text_1 */
    color: #1E2226;
}

.el-form-item {
    margin-bottom: 0px
}
</style>