<!-- 物联卡查看 -->
<template>
    <page-container v-if="type === 'card'">
        <!-- 新增、编辑 -->
        <div>
            <Save
                v-if="visible"
                :type="saveType"
                :data="current"
                @change="saveChange"
            />
            <j-row :gutter="[24, 24]">
                <j-col :span="24">
                    <j-card>
                        <j-descriptions size="small" :column="3" bordered>
                            <template #title>
                                <Guide>
                                    <template #title>
                                        <span>基本信息</span>
                                        <j-button
                                            type="link"
                                            @click="
                                                () => {
                                                    visible = true;
                                                    current = detail;
                                                    saveType = 'edit';
                                                }
                                            "
                                        >
                                            <AIcon type="EditOutlined"></AIcon>
                                            编辑
                                        </j-button>
                                    </template>
                                </Guide>
                            </template>

                            <j-descriptions-item label="卡号">{{
                                detail.id
                            }}</j-descriptions-item>
                            <j-descriptions-item label="ICCID">{{
                                detail.iccId
                            }}</j-descriptions-item>
                            <j-descriptions-item label="绑定设备">{{
                                detail.deviceName
                            }}</j-descriptions-item>
                            <j-descriptions-item label="平台类型">{{
                                platformTypeList.find(
                                    (item) =>
                                        item.value ===
                                        detail.operatorPlatformType?.text,
                                )?.label || detail.operatorPlatformType?.text
                            }}</j-descriptions-item>
                            <j-descriptions-item label="平台名称">{{
                                detail.platformConfigName
                            }}</j-descriptions-item>
                            <j-descriptions-item label="运营商">{{
                                OperatorList.find(
                                    (item) =>
                                        item.value === detail.operatorName,
                                )?.label || detail.operatorName
                            }}</j-descriptions-item>
                            <j-descriptions-item label="类型">{{
                                detail.cardType?.text
                            }}</j-descriptions-item>
                            <j-descriptions-item label="激活日期">{{
                                detail.activationDate
                                    ? moment(detail.activationDate).format(
                                          'YYYY-MM-DD HH:mm:ss',
                                      )
                                    : ''
                            }}</j-descriptions-item>
                            <j-descriptions-item label="更新时间">{{
                                detail.updateTime
                                    ? moment(detail.updateTime).format(
                                          'YYYY-MM-DD HH:mm:ss',
                                      )
                                    : ''
                            }}</j-descriptions-item>
                            <j-descriptions-item label="总流量">{{
                                detail.totalFlow
                                    ? detail.totalFlow.toFixed(2) + ' M'
                                    : '0 M'
                            }}</j-descriptions-item>
                            <j-descriptions-item label="使用流量">{{
                                detail.usedFlow
                                    ? detail.usedFlow.toFixed(2) + ' M'
                                    : '0 M'
                            }}</j-descriptions-item>
                            <j-descriptions-item label="剩余流量">{{
                                detail.residualFlow
                                    ? detail.residualFlow.toFixed(2) + ' M'
                                    : '0 M'
                            }}</j-descriptions-item>
                            <j-descriptions-item label="运营商状态">
                                {{ detail?.cardState?.text }}
                                <span
                                    v-if="deactivateData.show"
                                    style="padding-left: 8px"
                                >
                                    <a-tooltip :title="deactivateData.tip">
                                        <AIcon
                                            type="ExclamationCircleOutlined"
                                            style="
                                                color: var(--ant-error-color);
                                            "
                                        />
                                    </a-tooltip>
                                </span>
                            </j-descriptions-item>
                            <j-descriptions-item label="平台状态">
                                {{ detail?.cardStateType?.text }}
                            </j-descriptions-item>
                            <j-descriptions-item label="说明">{{
                                detail?.describe
                            }}</j-descriptions-item>
                        </j-descriptions>
                    </j-card>
                </j-col>
                <j-col :span="24">
                    <!-- 流量统计 -->
                    <j-row :gutter="24">
                        <j-col :span="16">
                            <div class="card">
                                <Guide title="流量统计">
                                    <template #extra>
                                        <TimeSelect
                                            :type="'week'"
                                            :quickBtnList="quickBtnList"
                                            @change="getEcharts"
                                        />
                                    </template>
                                </Guide>
                                <LineChart
                                    :showX="true"
                                    :showY="true"
                                    style="min-height: 490px"
                                    :chartData="flowData"
                                />
                            </div>
                        </j-col>
                        <j-col :span="8">
                            <div class="card">
                                <Guide title="数据统计" />
                                <div
                                    class="static-info"
                                    style="min-height: 490px"
                                >
                                    <div class="data-statistics-item">
                                        <div
                                            class="flow-info"
                                            style="width: 100%"
                                        >
                                            <div class="label">
                                                昨日流量消耗
                                            </div>
                                            <j-tooltip placement="bottomLeft">
                                                <template #title>
                                                    <span
                                                        >{{ dayTotal }} M</span
                                                    >
                                                </template>
                                                <div class="value">
                                                    {{ dayTotal }}
                                                    <span class="unit">M</span>
                                                </div>
                                            </j-tooltip>
                                        </div>
                                        <LineChart
                                            color="#FBA500"
                                            :chartData="dayOptions"
                                        />
                                    </div>
                                    <div class="data-statistics-item">
                                        <div
                                            class="flow-info"
                                            style="width: 100%"
                                        >
                                            <div class="label">
                                                当月流量消耗
                                            </div>
                                            <j-tooltip placement="bottomLeft">
                                                <template #title>
                                                    <span
                                                        >{{
                                                            monthTotal
                                                        }}
                                                        M</span
                                                    >
                                                </template>
                                                <div class="value">
                                                    {{ monthTotal }}
                                                    <span class="unit">M</span>
                                                </div>
                                            </j-tooltip>
                                        </div>
                                        <LineChart :chartData="monthOptions" />
                                    </div>
                                    <div class="data-statistics-item">
                                        <div
                                            class="flow-info"
                                            style="width: 100%"
                                        >
                                            <div class="label">
                                                本年流量消耗
                                            </div>
                                            <j-tooltip placement="bottomLeft">
                                                <template #title>
                                                    <span
                                                        >{{ yearTotal }} M</span
                                                    >
                                                </template>
                                                <div class="value">
                                                    {{ yearTotal }}
                                                    <span class="unit">M</span>
                                                </div>
                                            </j-tooltip>
                                        </div>
                                        <LineChart
                                            color="#58E1D3"
                                            :chartData="yearOptions"
                                        />
                                    </div>
                                </div>
                            </div>
                        </j-col>
                    </j-row>
                </j-col>
            </j-row>
        </div>
    </page-container>
    <div v-else>
        <div v-if="cardId">
            <Save
                v-if="visible"
                :type="saveType"
                :data="current"
                @change="saveChange"
            />
            <j-row :gutter="[24, 24]">
                <j-col :span="24">
                    <j-card>
                        <j-descriptions size="small" :column="3" bordered>
                            <template #title>
                                <Guide>
                                    <template #title>
                                        <span>基本信息</span>
                                        <j-button
                                            type="link"
                                            @click="
                                                () => {
                                                    visible = true;
                                                    current = detail;
                                                    saveType = 'edit';
                                                }
                                            "
                                        >
                                            <AIcon type="EditOutlined"></AIcon>
                                            编辑
                                        </j-button>
                                    </template>
                                </Guide>
                            </template>

                            <j-descriptions-item label="卡号">{{
                                detail.id
                            }}</j-descriptions-item>
                            <j-descriptions-item label="ICCID">{{
                                detail.iccId
                            }}</j-descriptions-item>
                            <j-descriptions-item label="绑定设备">{{
                                detail.deviceName
                            }}</j-descriptions-item>
                            <j-descriptions-item label="平台类型">{{
                                platformTypeList.find(
                                    (item) =>
                                        item.value ===
                                        detail.operatorPlatformType?.text,
                                )?.label || detail.operatorPlatformType?.text
                            }}</j-descriptions-item>
                            <j-descriptions-item label="平台名称">{{
                                detail.platformConfigName
                            }}</j-descriptions-item>
                            <j-descriptions-item label="运营商">{{
                                OperatorList.find(
                                    (item) =>
                                        item.value === detail.operatorName,
                                )?.label || detail.operatorName
                            }}</j-descriptions-item>
                            <j-descriptions-item label="类型">{{
                                detail.cardType?.text
                            }}</j-descriptions-item>
                            <j-descriptions-item label="激活日期">{{
                                detail.activationDate
                                    ? moment(detail.activationDate).format(
                                          'YYYY-MM-DD HH:mm:ss',
                                      )
                                    : ''
                            }}</j-descriptions-item>
                            <j-descriptions-item label="更新时间">{{
                                detail.updateTime
                                    ? moment(detail.updateTime).format(
                                          'YYYY-MM-DD HH:mm:ss',
                                      )
                                    : ''
                            }}</j-descriptions-item>
                            <j-descriptions-item label="总流量">{{
                                detail.totalFlow
                                    ? detail.totalFlow.toFixed(2) + ' M'
                                    : '0 M'
                            }}</j-descriptions-item>
                            <j-descriptions-item label="使用流量">{{
                                detail.usedFlow
                                    ? detail.usedFlow.toFixed(2) + ' M'
                                    : '0 M'
                            }}</j-descriptions-item>
                            <j-descriptions-item label="剩余流量">{{
                                detail.residualFlow
                                    ? detail.residualFlow.toFixed(2) + ' M'
                                    : '0 M'
                            }}</j-descriptions-item>
                            <j-descriptions-item label="运营商状态">
                                {{ detail?.cardState?.text }}
                                <span
                                    v-if="deactivateData.show"
                                    style="padding-left: 8px"
                                >
                                    <a-tooltip :title="deactivateData.tip">
                                        <AIcon
                                            type="ExclamationCircleOutlined"
                                            style="
                                                color: var(--ant-error-color);
                                            "
                                        />
                                    </a-tooltip>
                                </span>
                            </j-descriptions-item>
                            <j-descriptions-item label="平台状态">
                                {{ detail?.cardStateType?.text }}
                            </j-descriptions-item>
                            <j-descriptions-item label="说明">{{
                                detail?.describe
                            }}</j-descriptions-item>
                        </j-descriptions>
                    </j-card>
                </j-col>
                <j-col :span="24">
                    <!-- 流量统计 -->
                    <j-row :gutter="24">
                        <j-col :span="16">
                            <div class="card">
                                <Guide title="流量统计">
                                    <template #extra>
                                        <TimeSelect
                                            :type="'week'"
                                            :quickBtnList="quickBtnList"
                                            @change="getEcharts"
                                        />
                                    </template>
                                </Guide>
                                <LineChart
                                    :showX="true"
                                    :showY="true"
                                    style="min-height: 490px"
                                    :chartData="flowData"
                                />
                            </div>
                        </j-col>
                        <j-col :span="8">
                            <div class="card">
                                <Guide title="数据统计" />
                                <div
                                    class="static-info"
                                    style="min-height: 490px"
                                >
                                    <div class="data-statistics-item">
                                        <div
                                            class="flow-info"
                                            style="width: 100%"
                                        >
                                            <div class="label">
                                                昨日流量消耗
                                            </div>
                                            <j-tooltip placement="bottomLeft">
                                                <template #title>
                                                    <span
                                                        >{{ dayTotal }} M</span
                                                    >
                                                </template>
                                                <div class="value">
                                                    {{ dayTotal }}
                                                    <span class="unit">M</span>
                                                </div>
                                            </j-tooltip>
                                        </div>
                                        <LineChart
                                            color="#FBA500"
                                            :chartData="dayOptions"
                                        />
                                    </div>
                                    <div class="data-statistics-item">
                                        <div
                                            class="flow-info"
                                            style="width: 100%"
                                        >
                                            <div class="label">
                                                当月流量消耗
                                            </div>
                                            <j-tooltip placement="bottomLeft">
                                                <template #title>
                                                    <span
                                                        >{{
                                                            monthTotal
                                                        }}
                                                        M</span
                                                    >
                                                </template>
                                                <div class="value">
                                                    {{ monthTotal }}
                                                    <span class="unit">M</span>
                                                </div>
                                            </j-tooltip>
                                        </div>
                                        <LineChart :chartData="monthOptions" />
                                    </div>
                                    <div class="data-statistics-item">
                                        <div
                                            class="flow-info"
                                            style="width: 100%"
                                        >
                                            <div class="label">
                                                本年流量消耗
                                            </div>
                                            <j-tooltip placement="bottomLeft">
                                                <template #title>
                                                    <span
                                                        >{{ yearTotal }} M</span
                                                    >
                                                </template>
                                                <div class="value">
                                                    {{ yearTotal }}
                                                    <span class="unit">M</span>
                                                </div>
                                            </j-tooltip>
                                        </div>
                                        <LineChart
                                            color="#58E1D3"
                                            :chartData="yearOptions"
                                        />
                                    </div>
                                </div>
                            </div>
                        </j-col>
                    </j-row>
                </j-col>
            </j-row>
        </div>
        <JEmpty v-else></JEmpty>
    </div>
</template>

<script setup lang="ts" name="CardDetail">
import moment from 'moment';
import type { CardManagement } from '../typing';
import {
    queryDeactivate,
    queryDetail,
    query,
} from '@/api/iot-card/cardManagement';
import Save from '../Save.vue';
import Guide from '@/views/iot-card/components/Guide.vue';
import LineChart from '@/views/iot-card/components/LineChart.vue';
import { queryFlow } from '@/api/iot-card/home';
import TimeSelect from '@/views/iot-card/components/TimeSelect.vue';
import { OperatorList, platformTypeList } from '@/views/iot-card/data';

const props = defineProps({
    type: {
        type: String,
        default: 'card',
    },
});

const route = useRoute();
const cardId = ref();

const visible = ref<boolean>(false);
const current = ref<Partial<CardManagement>>({});
const saveType = ref<string>('');
const detail = ref<any>({});

const flowData = ref<any[]>([]);
const dayTotal = ref(0);
const monthTotal = ref(0);
const yearTotal = ref(0);
const dayOptions = ref<any[]>([]);
const monthOptions = ref<any[]>([]);
const yearOptions = ref<any[]>([]);

const deactivateData = reactive({
    show: false,
    tip: '',
});

const quickBtnList = [
    { label: '昨日', value: 'yesterday' },
    { label: '近一周', value: 'week' },
    { label: '近一月', value: 'month' },
    { label: '近一年', value: 'year' },
];

const getDetail = () => {
    queryDetail(cardId.value).then((resp: any) => {
        if (resp.success) {
            detail.value = resp.result;

            if (resp.result.cardStateType?.value === 'deactivate' && detail.value.operatorName === 'onelink') {
                deactivateData.show = true;
                //   获取停机原因
                queryDeactivate(cardId.value).then((deacResp: any) => {
                    if (deacResp.success && deacResp.result?.message) {
                        deactivateData.tip = deacResp.result.message.toString();
                    }
                });
            }
        }
    });
};

/**
 * 新增、编辑关闭弹窗
 * @param val 加载表格
 */
const saveChange = (val: any) => {
    visible.value = false;
    current.value = {};
    if (val) {
        getDetail();
    }
};

const getData = (start: number, end: number): Promise<{ sortArray: any[] }> => {
    return new Promise((resolve) => {
        queryFlow(start, end, {
            orderBy: 'date',
            terms: [
                {
                    column: 'cardId',
                    termType: 'eq',
                    value: cardId.value,
                },
            ],
        }).then((resp: any) => {
            if (resp.status === 200) {
                const sortArray = resp.result.sort(
                    (a: any, b: any) =>
                        new Date(a.date).getTime() - new Date(b.date).getTime(),
                );
                resolve({
                    sortArray,
                });
            }
        });
    });
};

/**
 * 查询左日、当月、本年数据
 */
const getDataTotal = () => {
    const dTime = [
        moment(new Date()).subtract(1, 'day').startOf('day').valueOf(),
        moment(new Date()).subtract(1, 'day').endOf('day').valueOf(),
    ];
    const mTime = [
        moment().startOf('month').valueOf(),
        moment().endOf('month').valueOf(),
    ];
    const yTime = [
        moment().startOf('year').valueOf(),
        moment().endOf('year').valueOf(),
    ];
    getData(dTime[0], dTime[1]).then((resp) => {
        dayTotal.value = resp.sortArray
            .reduce((r, n) => r + Number(n.value), 0)
            .toFixed(2);
        dayOptions.value = resp.sortArray;
    });
    getData(mTime[0], mTime[1]).then((resp) => {
        monthTotal.value = resp.sortArray
            .reduce((r, n) => r + Number(n.value), 0)
            .toFixed(2);
        monthOptions.value = resp.sortArray;
    });
    getData(yTime[0], yTime[1]).then((resp) => {
        yearTotal.value = resp.sortArray
            .reduce((r, n) => r + Number(n.value), 0)
            .toFixed(2);
        yearOptions.value = resp.sortArray;
    });
};

/**
 * 流量统计
 * @param data
 */
const getEcharts = (data: any) => {
    let startTime = data.start;
    let endTime = data.end;
    if (data.type === 'week' || data.type === 'month') {
        startTime = moment(data.start).startOf('days').valueOf();
        endTime = moment(data.end).startOf('days').valueOf();
    }
    getData(startTime, endTime).then((resp) => {
        flowData.value = resp.sortArray;
    });
};

/**
 * 获取绑定设备的物联卡的信息
 */
const queryCard = async () => {
    const res: any = await query({
        terms: [
            {
                column: 'deviceId',
                termType: 'eq',
                value: route.params.id,
            },
        ],
    });
    if (res.success && res.result?.data) {
        cardId.value = res.result?.data?.[0]?.id;
    }
};

onMounted(async () => {
    if (props.type === 'device') {
        await queryCard();
    } else {
        cardId.value = route.params.id;
    }
    if (cardId.value) {
        getDetail();
        getDataTotal();
    }
});
</script>
<style scoped lang="less">
.card {
    padding: 24px;
    background-color: #fff;
}

.static-info {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    .data-statistics-item {
        height: 140px;
        background: #fcfcfc;
        border: 1px solid #e0e4e8;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px;

        .flow-info {
            // width: 180px;
            width: 28%;
            .label {
                font-size: 14px;
                color: rgba(0, 0, 0, 0.64);
            }
            .value {
                font-size: 32px;
                font-weight: bold;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                .unit {
                    font-size: 20px;
                    font-weight: normal;
                }
            }
        }
    }
}
</style>
