<template>
    <div class="app-container" v-loading="loading">
        <template v-if="detail != null">
            <el-row :gutter="12">
                <el-col :lg="10" :md="12" :xs="24">
                    <el-card class="box-card">
                        <template #header>
                            <el-row type="flex" style="justify-content: space-between">
                                <div>代理商详情</div>
                                <div>
                                    <el-button type="text" icon="el-icon-setting" size="small" style="padding: 5px 0 0;"
                                        @click="showConfigDialog = true">代理商配置</el-button>
                                </div>
                            </el-row>
                        </template>

                        <div class="user-detail">
                            <div class="user-header">
                                <!-- <el-avatar :size="64" :src="detail.avatar"></el-avatar> -->
                                <el-row type="flex" class="name-box" align="middle">
                                    <span class="user-name">{{ detail.deptName }}</span>
                                    <dict-tag :value="detail.status" :options="dict.type.sys_normal_disable" />
                                </el-row>
                                <div class="phone-number">{{ detail.phone }}</div>
                            </div>



                            <div class="user-description">
                                <el-descriptions :column="3">
                                    <el-descriptions-item label="小程序">
                                        {{ detail.appName }}
                                    </el-descriptions-item>
                                    <el-descriptions-item label="独立支付">
                                        <dict-tag :options="dict.type.sys_yes_no" :value="detail.separateAccount" />
                                    </el-descriptions-item>
                                    <el-descriptions-item label="余额">
                                        {{ deptInfo.balance }} 元
                                    </el-descriptions-item>
                                    <!--                  <el-descriptions-item label="限制提现">-->
                                    <!--                    <boolean-tag :value="detail.limitWithdraw" size="small" true-type="danger" false-type="success"/>-->
                                    <!--                  </el-descriptions-item>-->
                                    <!--                  <el-descriptions-item label="限制提现原因" :span="2">-->
                                    <!--                    {{detail.limitWithdrawReason | defaultValue}}-->
                                    <!--                  </el-descriptions-item>-->
                                    <!--                  <el-descriptions-item label="限制退款">-->
                                    <!--                    <boolean-tag :value="detail.limitRefund" size="small"  true-type="danger" false-type="success"/>-->
                                    <!--                  </el-descriptions-item>-->
                                    <!--                  <el-descriptions-item label="限制退款原因" :span="2">-->
                                    <!--                    {{detail.limitRefundReason | defaultValue}}-->
                                    <!--                  </el-descriptions-item>-->
                                    <el-descriptions-item label="服务费">
                                        {{ detail.platformServiceFee  }}%
                                    </el-descriptions-item>
                                    <el-descriptions-item label="充值手续费">
                                        {{ detail.handlingCharge  }}%
                                    </el-descriptions-item>
                                    <el-descriptions-item label="提现手续费">
                                        {{ detail.withdrawHandlingCharge }}%
                                    </el-descriptions-item>
                                    <el-descriptions-item label="已提现">
                                        {{ deptInfo.withdraw  }}元
                                    </el-descriptions-item>
                                    <el-descriptions-item label="待结算">
                                        {{ deptInfo.settlementAmount }}
                                    </el-descriptions-item>
                                    <el-descriptions-item label="营收">
                                        {{ deptInfo.todayIncome  }}元 | {{ deptInfo.totalIncome }}元
                                    </el-descriptions-item>
                                    <el-descriptions-item label="订单数">
                                        {{ deptInfo.todayOrderCount}}元 | {{ deptInfo.totalOrderCount  }}元
                                    </el-descriptions-item>
                                    <el-descriptions-item label="订单金额">
                                        {{ deptInfo.todayOrderFee }}元 | {{ deptInfo.totalOrderFee }}元
                                    </el-descriptions-item>
                                    <el-descriptions-item label="待付订单 数/元 ">
                                        {{ deptInfo.unpaidOrderCount }}笔 | {{ deptInfo.unpaidOrderFee }}元
                                    </el-descriptions-item>


                                </el-descriptions>


                            </div>
                            <el-tabs>
                                <el-tab-pane label="车辆信息">
                                    <el-descriptions :column="3">
                                        <el-descriptions-item label="车辆">
                                            {{ deptInfo.vehicleVo.offlineDevices.length}}辆 | {{ deptInfo.vehicleVo.allNum}}辆
                                        </el-descriptions-item>
                                        <el-descriptions-item label="仓库">
                                            {{deptInfo.offlineStatusCount.inStashNum }}辆 | {{ deptInfo.vehicleVo.inStashNum  }}辆
                                        </el-descriptions-item>
                                        <el-descriptions-item label=" 投放"  >
                                            <template>
                                              <!-- <pre></pre> -->
                                              <div @click="noline">{{ deptInfo.vehicleVo.offlineDevices.length-deptInfo.offlineStatusCount.inStashNum}}辆 | {{ deptInfo.vehicleVo.inOperation}}辆</div>
                                            </template>
                                            
                                        </el-descriptions-item>



                                        <el-descriptions-item label="订单">
                                            {{ deptInfo.offlineStatusCount.ridingNum +deptInfo.offlineStatusCount.temporarilyLockNum}}辆 | {{deptInfo.vehicleVo.ridingNum+ deptInfo.vehicleVo.temporarilyLockNum}}辆
                                        </el-descriptions-item>
                                        <el-descriptions-item label="骑行">
                                            {{ deptInfo.offlineStatusCount.ridingNum  }}辆 | {{ deptInfo.vehicleVo.ridingNum  }}辆
                                        </el-descriptions-item>
                                        <el-descriptions-item label="锁车 ">
                                            {{ deptInfo.offlineStatusCount.temporarilyLockNum }}辆 | {{ deptInfo.vehicleVo.temporarilyLockNum}}辆
                                        </el-descriptions-item>

                                        <el-descriptions-item label="待租">
                                            {{ deptInfo.offlineStatusCount.normalNum  }}辆 | {{ deptInfo.vehicleVo.normalNum}}辆
                                        </el-descriptions-item>
                                        <el-descriptions-item label=" 预约">
                                            {{ deptInfo.offlineStatusCount.inAppointmentNum  }}辆 | {{ deptInfo.vehicleVo.inAppointmentNum  }}辆
                                        </el-descriptions-item>
                                        <el-descriptions-item label="禁用 ">
                                            {{ deptInfo.offlineStatusCount.offlineNum }}辆 | {{ deptInfo.vehicleVo.disabledNum}}辆
                                        </el-descriptions-item>
                                    </el-descriptions>

                                </el-tab-pane>

                            </el-tabs>
                        </div>
                    </el-card>
                </el-col>
                <el-col :lg="14" :md="12" :xs="24">
                    <el-card class="box-card">
                        <user-recharge-report :deptId="detail.deptId" />
                    </el-card>
                </el-col>
            </el-row>

            <el-card class="box-card">
                <el-tabs v-model="activeTab">
                    <el-tab-pane label="运营区" lazy name="运营区">
                        <Area :deptId="detail.deptId" v-if="detail.deptId" />
                    </el-tab-pane>
                    <el-tab-pane label="合伙人" lazy>
                        <partner :deptId="detail.deptId" v-if="detail.deptId" />

                    </el-tab-pane>
                    <el-tab-pane label="收费方式" lazy>
                        <Fees :deptId="detail.deptId" v-if="detail.deptId" />
                        <!-- <Fee :deptId="detail.deptId"  v-if="detail.deptId"/> -->
                    </el-tab-pane>
                    <el-tab-pane label="车型" lazy>
                        <Model :deptId="detail.deptId" v-if="detail.deptId" />
                        <!-- <recharge :query="{deptId: detail.deptId}" :view="views.user"/> -->
                    </el-tab-pane>
                    <el-tab-pane label="车辆列表" lazy name="车辆列表">
                        <device ref="deviceComponent"  :deptId="detail.deptId" v-if="detail.deptId" />
                    </el-tab-pane>
                    <el-tab-pane label="订单" lazy>

                        <order :deptId="detail.deptId" v-if="detail.deptId" />
                    </el-tab-pane>
                    <el-tab-pane label="退款订单" lazy>

                        <refund :deptId="detail.deptId" v-if="detail.deptId" />

                    </el-tab-pane>
                    <el-tab-pane label="还车审核" lazy>

                        <audit :deptId="detail.deptId" v-if="detail.deptId" />
                    </el-tab-pane>
                    <el-tab-pane label="押金管理" lazy>
                        <recharge :deptId="detail.deptId" v-if="detail.deptId" />
                    </el-tab-pane>
                    <el-tab-pane label="资金流水" lazy>
                        <flow :deptId="detail.deptId" v-if="detail.deptId" />
                    </el-tab-pane>
                    <el-tab-pane label="提现记录" lazy>
                        <withdraw :deptId="detail.deptId" v-if="detail.deptId" />


                    </el-tab-pane>

                </el-tabs>
            </el-card>
        </template>
        <el-empty v-else description="用户不存在" />

        <!--用户设置-->
        <user-config-dialog :show.sync="showConfigDialog" :deptId="detail.deptId"  v-if="detail.deptId" />

    </div>
</template>

<script>
import {
    listDept,
    getDept,
    delDept,
    addDept,
    updateDept,
    listDeptExcludeChild,
    listDept2, getDeptInfo
} from '@/api/system/dept'
import UserDevice from "@/views/system/dept/components/userDevice.vue";
import LineChart from "@/views/dashboard/LineChart.vue";

import UserAccount from "@/views/system/dept/components/userAccount.vue";

import UserRechargeReport from "@/views/system/dept/components/userRechargeReport.vue";
import UserConfigDialog from '@/views/system/dept/components/UserConfigDialog.vue'

import { $serviceType, $view } from '@/utils/mixinss'

import Recharge from '@/views/system/recharge/index.vue'

import BooleanTag from '@/components/BooleanTag/index.vue'
import Area from "@/views/system/area/index";
import Fees from "@/views/system/fee/index";
import Model from "@/views/system/model/index";
import device from "@/views/system/device/index";
import order from "@/views/system/order/index";
import partner from "@/views/system/partner/index";
import refund from "@/views/system/refund/index";
import audit from "@/views/system/audit/index";
import flow from "@/views/system/flow/index";
import withdraw from "@/views/system/withdrawAudit/index";


//   import Withdraw from '@/views/system/withdraw/index.vue'
//   import RealName from '@/views/ss/realName/index.vue'
//   import UserConfigDialog from '@/views/system/smUser/components/UserConfigDialog.vue'
//   import { SmUserType } from '@/utils/constants'
//   import ReceiveBill from '@/views/ss/receiveBill/index.vue'
//   import Risk from '@/views/ss/risk/index.vue'

export default {
    name: 'User/:deptId',
    mixins: [$view, $serviceType],
    components: { Area, Fees, Model, device, order, partner, refund, audit, flow, withdraw, BooleanTag, Recharge, UserRechargeReport, UserConfigDialog, UserAccount, UserDevice, LineChart },
    dicts: ['sys_normal_disable', 'sys_yes_no'],
    computed: {
        SmUserType() {
            return SmUserType
        },
        serviceUnit() {
            return (type) => {
                return type === '2' ? '元' : '%';
            }
        } 
    },
    data() {
        return {
            detail: {},
            loading: false,
            showConfigDialog: false,
            deptInfo: {},
            defaultValue:0,
            activeTab: '运营区', // 默认激活的标签页
        }
    },
    created() {
        this.getDetail();
    },
    methods: {
        noline() {
            console.log('dianjile ');
            this.activeTab = '车辆列表'; // 点击后切换到“车辆列表”标签页
            this.$nextTick(() => {
                // 调用 device 组件中的方法，例如 fetchData
                if (this.$refs.deviceComponent) {
                    this.$refs.deviceComponent.fetchData();
                }
            });
        },
        getDetail() {
            this.loading = true;
            getDept(this.$route.params.deptId).then(response => {
                this.detail = response.data;
            }).finally(() => {
                this.loading = false;
            })

            getDeptInfo(this.$route.params.deptId).then(response => {
                this.deptInfo = response.data;

        // 初始化离线状态统计对象
        this.deptInfo.offlineStatusCount = {
            inStashNum: 0, // 仓库中
            normalNum: 0, // 待租
            inAppointmentNum: 0, // 预约中
            ridingNum: 0, // 骑行中
            temporarilyLockNum: 0, // 临时锁车中
            dispatchingNum: 0, // 调度中
            offlineNum: 0 // 下线
        };

        // 根据 status 进行分类统计
        this.deptInfo.vehicleVo.offlineDevices.forEach(device => {
            switch (device.status) {
                case 0:
                    this.deptInfo.offlineStatusCount.inStashNum += 1;
                    break;
                case 1:
                    this.deptInfo.offlineStatusCount.normalNum += 1;
                    break;
                case 2:
                    this.deptInfo.offlineStatusCount.inAppointmentNum += 1;
                    break;
                case 3:
                    this.deptInfo.offlineStatusCount.ridingNum += 1;
                    break;
                case 4:
                    this.deptInfo.offlineStatusCount.temporarilyLockNum += 1;
                    break;
                case 6:
                    this.deptInfo.offlineStatusCount.dispatchingNum += 1;
                    break;
                case 8:
                    this.deptInfo.offlineStatusCount.offlineNum += 1;
                    break;
            }
        });
    }).finally(() => {
        // 加载完成后可以进行其他操作
    });
        },
    }
}
</script>

<style scoped>
.app-container .box-card:nth-child(n + 1) {
    margin-top: 1em;
}

.user-name {

    font-size: 18px;
    line-height: 30px;
    vertical-align: center;
}

.phone-number {
    font-size: 18px;
    line-height: 30px;
    color: #9B9B9B;
}

.user-header {
    text-align: center;
    margin: 0 2em;
}

.user-header .name-box {
    margin: 0 auto;
    width: fit-content;
}

.user-detail {
    position: relative;
    display: flex;
    height: fit-content;
    flex-direction: column;
}

.user-detail .user-description {
    flex: 1;
    margin-top: 16px;
}
</style>