<template>
    <div class="main-content12 expense-wrap">
        <h3 class="pagetitle">收支统计</h3>
        <div class="flex-common">
            <div class="flex-between">
                <el-tabs v-model="totalType" @tab-click="handleClick">
                    <el-tab-pane label="月统计列表" name="1"></el-tab-pane>
                    <el-tab-pane v-if="siteNum>1" label="各站点统计列表" name="2"></el-tab-pane>
                    <el-tab-pane label="各服务统计列表" name="3"></el-tab-pane>
                </el-tabs>
                <div class="flex">
<!--                    <GuipSelect label="服务类型" v-if="totalType == '3'" :options="[{label:'asd',value:'9'}]"></GuipSelect>-->
<!--                    <GuipSelect label="时间" :options="[{label:'asd',value:'9'}]"></GuipSelect>-->
                    <CustomDropdown ref="dropdownRef" :placeholder="date" width="280px">
                        <DateSelect slot="normal" view="month" :onlyMonth="true" @change="handleDateChange"/>
                    </CustomDropdown>
                </div>
            </div>
            <div v-if="totalType == '1' && Object.keys(monthTotal).length>0" class="mt24 monthTotal-wrap flex">
                <div class="total-item" :class="monthTotal.profit<0?'loss':''">
                    <div class="flex-between total-top">
                        <div class="top-left">
                            <img src="" alt="">
                            <b>月利润</b>
                        </div>
                        <span v-if="monthTotal.profit<0" class="loss-tip">亏损</span>
                    </div>
                    <div class="price">
                        <b>{{monthTotal.profit}}</b>元
                    </div>
                    <div class="gap24 flex-between total-bottom">
                        <div class="left column gap8">
                            <template v-for="(col, index) in payList">
                                <span v-if="index % 2 === 1" :key="index">{{ col.name }}：{{ monthTotal.pay_type[col.id].profit }}元</span>
                            </template>
                        </div>
                        <div class="right column gap8">
                            <template v-for="(col, index) in payList">
                                <span v-if="index % 2 === 0" :key="index">{{ col.name }}：{{ monthTotal.pay_type[col.id].profit }}元</span>
                            </template>
                        </div>
                    </div>
                </div>
                <div class="total-item">
                    <div class="flex-between total-top">
                        <div class="top-left">
                            <img src="" alt="">
                            <b>月收入</b>
                        </div>
                        <span class="loss-tip-empty"></span>
                    </div>
                    <div class="price">
                        <b>{{this.monthTotal.income}}</b>元
                    </div>
                    <div class="gap24 flex-between total-bottom">
                        <div class="left column gap8">
                            <template v-for="(col, index) in payList">
                                <span v-if="index % 2 === 1" :key="index">{{ col.name }}：{{ monthTotal.pay_type[col.id].income }}元</span>
                            </template>
                        </div>
                        <div class="right column gap8">
                            <template v-for="(col, index) in payList">
                                <span v-if="index % 2 === 0" :key="index">{{ col.name }}：{{ monthTotal.pay_type[col.id].income }}元</span>
                            </template>
                        </div>
                    </div>
                </div>
                <div class="total-item">
                    <div class="flex-between total-top">
                        <div class="top-left">
                            <img src="" alt="">
                            <b>月支出</b>
                        </div>
                        <span class="loss-tip-empty"></span>
                    </div>
                    <div class="price">
                        <b>{{this.monthTotal.cost}}</b>元
                    </div>
                    <div class="gap24 flex-between total-bottom">
                        <div class="left column gap8">
                            <template v-for="(col, index) in payList">
                                <span v-if="index % 2 === 1" :key="index">{{ col.name }}：{{ monthTotal.pay_type[col.id].cost }}元</span>
                            </template>
                        </div>
                        <div class="right column gap8">
                            <template v-for="(col, index) in payList">
                                <span v-if="index % 2 === 0" :key="index">{{ col.name }}：{{ monthTotal.pay_type[col.id].cost }}元</span>
                            </template>
                        </div>
                    </div>
                </div>
                <div class="total-item">
                    <div class="flex-between total-top">
                        <div class="top-left">
                            <img src="" alt="">
                            <b>月单量</b>
                        </div>
                        <span class="loss-tip-empty"></span>
                    </div>
                    <div class="price">
                        <b>{{this.monthTotal.check_num}}</b>元
                    </div>
                    <div class="gap24 flex-between total-bottom">
                        <div class="left column gap8">
                            <template v-for="(col, index) in payList">
                                <span v-if="index % 2 === 1" :key="index">{{ col.name }}：{{ monthTotal.pay_type[col.id].check_num }}单</span>
                            </template>
                        </div>
                        <div class="right column gap8">
                            <template v-for="(col, index) in payList">
                                <span v-if="index % 2 === 0" :key="index">{{ col.name }}：{{ monthTotal.pay_type[col.id].check_num }}单</span>
                            </template>
                        </div>
                    </div>
                </div>
            </div>
            <el-form class="mt24">
                <GuipTable :tableData="monthList" :key="tableKey" ref="multipleTable" autoColumn="true" :loading="tableLoading" style="flex:1"
                :show-summary="totalType === '1'"
                :summary-method="totalType === '1' ? getSummaries : null">
                    <el-table-column prop="date" label="日期" min-width="130px" v-if="totalType == '1'"></el-table-column>
                    <el-table-column prop="date1" label="站点名称" min-width="130px" v-if="totalType == '2'">
                        <template slot-scope="scope">
                            <div class="flex">
                                {{ nameList[scope.row.id] }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="date2" label="服务名称" min-width="130px" v-if="totalType == '3'">
                        <template slot-scope="scope">
                            <div class="flex">
                                {{ nameList[scope.row.id] }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="profit" label="利润" min-width="110px">
                        <template slot-scope="scope">
                            <div class="flex" :class="scope.row.profit<0?'red':''">
                                {{ scope.row.profit ? scope.row.profit : '-' }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="income" label="收入" min-width="110px">
                        <template slot-scope="scope">
                            <div class="flex">
                                {{ scope.row.income ? scope.row.income : '-' }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="expenditure" label="支出" min-width="110px">
                        <template slot-scope="scope">
                            <div class="flex">
                                {{ scope.row.cost ? scope.row.cost : '-' }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="orderVolume" label="单量" min-width="110px">
                        <template slot-scope="scope">
                            <div class="flex">
                                {{ scope.row.check_num ? scope.row.check_num : '-' }}
                            </div>
                        </template>
                    </el-table-column>

                    <el-table-column v-for="(col, index) in payList" :key="index" :label="col.name+'收/支/单量'" min-width="160px">
                        <template slot-scope="scope">
                            <div class="flex" v-if="scope.row.pay_type[col.id]">
                                {{ scope.row.pay_type[col.id].income }}/
                                {{ scope.row.pay_type[col.id].cost }}/
                                {{ scope.row.pay_type[col.id].check_num }}
                            </div>
                            <div v-else>-</div>
                        </template>
                    </el-table-column>

                    <el-table-column v-if="totalType == '3'"
                        key="top1" prop="top1" label="站点排行（利润）" width="250">
                        <template slot-scope="scope">
                            <span v-if="topList[scope.row.id]" slot="reference" class="flex">
                                NO.1 {{topList[scope.row.id]}}
                                <svg-icon :size="14" @click="handleClicksiteRank(scope.row.id)"
                                    :path="require('@/assets/super/list-detail.svg')" :color="'#8A9099'"
                                    :hoverColor="'#006AFF'" />
                            </span>
                            <span v-else slot="reference">暂无排行</span>
                        </template>
                    </el-table-column>

                    <el-table-column v-if="totalType == '2'"
                        key="top2" prop="top2" label="服务排行（利润）" width="250">
                        <template slot-scope="scope">
                            <span v-if="topList[scope.row.id]" slot="reference" class="flex">
                                NO.1 {{topList[scope.row.id]}}
                                <svg-icon :size="14" @click="handleClickserviceRank(scope.row.id)"
                                    :path="require('@/assets/super/list-detail.svg')" :color="'#8A9099'"
                                    :hoverColor="'#006AFF'" />
                            </span>
                            <span v-else slot="reference">暂无排行</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="操作" fixed="right" v-if="totalType != '1'">
                        <template slot-scope="scope">
                            <GuipButton type="text" class="mr-16" @click="handleClickDetail(scope.row.id)">详情</GuipButton>
                        </template>
                    </el-table-column>
                </GuipTable>
            </el-form>
        </div>
    </div>
</template>
<script>
import GuipButton from '@/components/GuipButton.vue';
// import GuipSelect from '@/components/GuipSelect.vue';
import GuipTable from '@/components/GuipTable.vue';
import SvgIcon from '@/components/SvgIcon.vue';
import DateSelect from "@/components/super/DateSelect.vue";
import CustomDropdown from "@/components/CustomDropdown.vue";

export default {
    components: {
        CustomDropdown, DateSelect,
        GuipTable,
        GuipButton,
        // GuipSelect,
        SvgIcon
    },
    props: {
        total_type: {
            type: String,
            default: '1'
        },
    },
    data() {
        return {
            totalType:'1',
            date: this.getNow(),
            tableLoading:false,
            siteNum: 1,
            tableKey: '',
            monthList:[],
            monthTotal:[],
            payList:[],
            nameList:[],
            topList:[],
        }
    },
    mounted() {
        const {total_type, date} = this.$route.query
        this.$nextTick(()=>{
            this.totalType = this.total_type;
            if(total_type)this.totalType = total_type;
            if(date) this.date = date;

            this.getSiteNum()
            this.handleClick()
        })
    },
    methods: {
        getNow() {
            const now = new Date();
            const year = now.getFullYear();
            const month = now.getMonth() + 1;
            return `${year}-${month}`
        },
        getDate(dateStr) {
            const date = new Date(dateStr);
            const year = date.getFullYear(); // 2025
            const month = date.getMonth() + 1; // 3 (表示3月)

            return `${year}-${month}`
        },
        handleDateChange(date) {
            this.date = this.getDate(date)
            localStorage.setItem('date', JSON.stringify(date))

            this.$refs.dropdownRef.closeDropdown();
            this.handleClick()
        },
        handleClickDetail(id){
            if(this.totalType == 2) this.$router.push(`/agent/statisticalDetails?uid=${id}&total_type=${this.totalType}&date=${this.date}`)
            if(this.totalType == 3) this.$router.push(`/agent/statisticalDetails?chktype=${id}&total_type=${this.totalType}&date=${this.date}`)
        },
        handleClicksiteRank(id){
            this.$router.push(`/agent/siteRank?id=${id}&total_type=${this.totalType}&date=`+this.date)
        },
        handleClickserviceRank(id){
            this.$router.push(`/agent/serviceRank?id=${id}&total_type=${this.totalType}&date=`+this.date)
        },
        handleClick(){
            this.monthList = []
            this.payList = []
            this.monthTotal = []
            this.nameList = []
            this.topList = []
            this.tableKey = Math.random();
            if(this.totalType == 1) this.getDayStats()
            if(this.totalType == 2) this.getSiteStats()
            if(this.totalType == 3) this.getChktypeStats()
        },
        getSummaries() {
            if(this.totalType != '1') return []
            const sums = [];

            let index = 0
            sums[index] = `小计`
            sums[++index] = this.monthTotal.profit
            sums[++index] = this.monthTotal.income
            sums[++index] = this.monthTotal.cost
            sums[++index] = this.monthTotal.check_num
            this.payList.forEach(column =>{
                sums[++index] = this.monthTotal.pay_type[column.id].income + '/' + this.monthTotal.pay_type[column.id].cost + '/' + this.monthTotal.pay_type[column.id].check_num
            })

            return sums;
        },
        getSiteNum() {
            try {
                this.$http('POST', '/agentnew/ajax_get_agent_sitenum', {date: this.date}).then(response => {
                    this.$nextTick(() => {
                        this.siteNum = response.data
                    })
                }).catch(error => {
                    console.error(error, 'error')
                })
            } catch (error) {
                console.error('数据加载失败:', error)
            }
        },
        getDayStats() {
            this.tableLoading = true
            try {
                this.$http('POST', '/agentnew/ajax_get_day_stats', {date: this.date}).then(response => {
                    this.$nextTick(() => {
                        this.monthList = response.data.list
                        this.payList = response.data.pay_list
                        this.monthTotal = response.data.total
                    })
                }).catch(error => {
                    console.error(error, 'error')
                })
            } catch (error) {
                console.error('数据加载失败:', error)
            } finally {
                this.tableLoading = false
            }
        },
        getSiteStats() {
            this.tableLoading = true
            try {
                this.$http('POST', '/agentnew/ajax_get_site_stats', {date: this.date}).then(response => {
                    this.tableLoading = false
                    this.$nextTick(() => {
                        this.monthList = response.data.list
                        this.payList = response.data.pay_list
                        this.monthTotal = response.data.total
                        this.nameList = response.data.name_list
                        this.topList = response.data.top_list
                    })
                }).catch(error => {
                    console.error(error, 'error')
                })
            } catch (error) {
                console.error('数据加载失败:', error)
            } finally {
                this.tableLoading = false
            }
        },
        getChktypeStats() {
            this.tableLoading = true
            try {
                this.$http('POST', '/agentnew/ajax_get_chktype_stats', {date: this.date}).then(response => {
                    this.tableLoading = false
                    this.$nextTick(() => {
                        this.monthList = response.data.list
                        this.payList = response.data.pay_list
                        this.monthTotal = response.data.total
                        this.nameList = response.data.name_list
                        this.topList = response.data.top_list
                    })
                }).catch(error => {
                    console.error(error, 'error')
                })
            } catch (error) {
                console.error('数据加载失败:', error)
            } finally {
                this.tableLoading = false
            }
        },
    }
}

</script>
<style lang="scss" scoped>
::v-deep .el-table__footer-wrapper tbody td.el-table__cell {
  background-color: #E8F0FE; /* 背景色 */
  color: #006AFF; /* 文字颜色 */
  font-weight: 600;
}

.loss-profit{
    color: #FF4D4F;
}
.red{
  color: #FF4D4F;
}

.expense-wrap{
    .pagetitle {
        text-align: left;
        font-size: 16px;
        font-weight: bold;
        line-height: normal;
        letter-spacing: 0.08em;
        color: #1E2226;
        margin-top: 8px;
    }
    .monthTotal-wrap{
        display: grid;
        grid-gap: 12px;
        grid-template-columns: repeat(auto-fit, 287px);
    }

    .loss-tip{
        width: 50px;
        height: 24px;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        border-radius: 4px;
        background: #FFF1F0;
        box-sizing: border-box;
        border: 1px solid #FFA39E;
        font-size: 14px;
        font-weight: normal;
        line-height: 20px;
        text-align: center;
        letter-spacing: 0.08em;
        color: #FF4D4F;
    }
    .loss-tip-empty{
        width: 50px;
        height: 24px;
        display: flex;
    }
    .total-item{
        padding: 14px 16px;
        font-size: 12px;
        letter-spacing: 0.03em;
        color: #23242B;
        box-sizing: border-box;
        border-radius: 4px;
        background: #F2F7FF;
        min-height: 153px;
        .price{
            text-align: left;
            font-size: 12px;
            font-weight: normal;
            line-height: 15px;
            letter-spacing: 0.08em;
            color: #1E2226;
            margin: 14px 0;
            b{
                font-size: 22px;
                line-height: 20px;
                letter-spacing: normal;
            }
        }
        .total-bottom{
            align-items: flex-start;
        }
    }
    .loss{
        background: #FFF1F0;
        .top-left b{
            color: #FF4D4F;
        }
    }
    .gain{
        background: #EFFFE0;
        .top-left b{
            color: #00C261;
        }
    }
}
</style>