<template>
    <div style="padding: 10px; background-color: #f8f8f8">
        <div style="margin-top: 10px">
            <el-row :gutter="24">
                <el-col :span="6">
                    <TopCard :footer="productFirmwareFooter" :value="productFirmwareValue" img="https://demo.jetlinks.cn/images/DataCollect/dashboard/channel.png" title="产品固件数"></TopCard>
                </el-col>
                <el-col :span="6">
                    <TopCard :footer="templateFooter" :value="templateValue" img="https://demo.jetlinks.cn/images/DataCollect/dashboard/channel.png" title="采集点模板个数"></TopCard>
                </el-col>
                <el-col :span="6">
                    <TopCard :footer="noticeFooter" :value="noticeValue" img="https://demo.jetlinks.cn/images/DataCollect/dashboard/channel.png" title="通知模板数量"></TopCard>
                </el-col>
                <el-col :span="6">
                    <TopCard :footer="channelFooter" :value="channelValue" img="https://demo.jetlinks.cn/images/DataCollect/dashboard/channel.png" title="通知渠道数量"></TopCard>
                </el-col>
            </el-row>
        </div>
        <el-card class="box-card" style="height: 530px; margin-top: 20px">
            <div>
                <div style="margin-bottom: 20px; display: flex; justify-content: space-between">
                    <div>通知日志</div>
                    <el-button plain size="mini" type="primary" @onclick="toNotice">查看更多</el-button>
                </div>
                <div>
                    <el-table :border="false" v-loading="loading" :data="noticeList">
                        <el-table-column align="left" label="渠道编号" prop="channelId" width="100" />
                        <el-table-column align="left" label="渠道账号" prop="channelName" />
                        <el-table-column align="left" label="通知模版编号" prop="notifyTemplateId" width="100" />
                        <el-table-column align="left" label="模板名称" prop="templateName" />
                        <el-table-column align="left" label="业务编码" prop="serviceCode">
                            <template slot-scope="scope">
                                <dict-tag :options="dict.type.notify_service_code" :value="scope.row.serviceCode" />
                            </template>
                        </el-table-column>
                        <el-table-column align="left" label="发送账号" min-width="150" prop="sendAccount" />
                        <el-table-column align="center" label="发送状态" prop="sendStatus" width="100">
                            <template slot-scope="scope">
                                <span v-if="scope.row.sendStatus == 0" class="status-error-wrap">失败</span>
                                <span v-if="scope.row.sendStatus == 1" class="status-success-wrap">成功</span>
                            </template>
                        </el-table-column>
                        <el-table-column align="left" label="发送时间" prop="createTime" width="180">
                            <template slot-scope="scope">
                                <span>{{ parseTime(scope.row.createTime) }}</span>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script>
import TopCard from '../components/TopCard';
import Charts from '../components/Charts';
import { listLog } from '@/api/notify/log';
import { firmwareInfo, varTempInfo, notifyTemplateInfo, notifyChannelInfo } from '@/api/iot/dashBoard';

export default {
    name: 'templateDashBoard',
    dicts: ['notify_message_type', 'iot_is_enable', 'notify_service_code'],
    components: {
        TopCard,
        Charts,
    },
    data() {
        return {
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
            },
            // 遮罩层
            loading: true,
            // 总条数
            total: 0,
            productFirmwareValue: 0,
            channelValue: 0,
            templateValue: 0,
            noticeValue: 0,
            productFirmwareFooter: [
                {
                    title: '最新',
                    value: 0,
                    status: 'success',
                },
                {
                    title: '默认',
                    value: 0,
                    status: 'error',
                },
            ],
            channelFooter: [],
            templateFooter: [
                {
                    title: '云端轮询',
                    value: 0,
                    status: 'success',
                },
                {
                    title: '边缘采集',
                    value: 0,
                    status: 'error',
                },
            ],
            noticeFooter: [
                {
                    title: '启用',
                    value: 0,
                    status: 'success',
                },
                {
                    title: '未启用',
                    value: 0,
                    status: 'error',
                },
            ],
            noticeList: [
                {
                    time: 2020 - 2 - 22,
                    name: '通知模板1',
                    status: 1,
                },
                {
                    time: 2020 - 2 - 22,
                    name: '通知模板2',
                    status: 0,
                },
            ],
        };
    },
    computed: {
        TodayDevOptions() {
            let myTodayDevOptions = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow',
                    },
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    show: false,
                    data: [1, 2, 3],
                },
                yAxis: {
                    type: 'value',
                    show: false,
                },
                grid: {
                    top: '2%',
                    bottom: 0,
                },
                series: [
                    {
                        name: '消息量',
                        data: [4, 5, 6],
                        type: 'line',
                        smooth: true, // 是否平滑曲线
                        symbolSize: 0, // 拐点大小
                        color: '#F29B55',
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: '#FBBB87', // 100% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: '#FFFFFF', //   0% 处的颜色
                                    },
                                ],
                                global: false, // 缺省为 false
                            },
                        },
                    },
                ],
            };
            return myTodayDevOptions;
        },
    },
    created() {
        this.getList();
        this.init();
    },
    methods: {
        toNotice() {},
        init() {
            this.getFirmwareInfo();
            this.getVarTempInfo();
            this.getNotifyTemplateInfo();
            this.getNotifyChannelInfo();
        },
        getNotifyChannelInfo() {
            notifyChannelInfo().then((res) => {
                this.channelValue = res.data;
            });
        },
        getNotifyTemplateInfo() {
            notifyTemplateInfo().then((res) => {
                this.noticeValue = res.data.totalCount;
                this.noticeFooter[0].value = res.data.onLineCount;
                this.noticeFooter[1].value = res.data.offLineCount;
            });
        },
        getVarTempInfo() {
            varTempInfo().then((res) => {
                this.templateValue = res.data.totalCount;
                this.templateFooter[0].value = res.data.onLineCount;
                this.templateFooter[1].value = res.data.offLineCount;
            });
        },
        getFirmwareInfo() {
            firmwareInfo().then((res) => {
                this.productFirmwareValue = res.data.totalCount;
                this.productFirmwareFooter[0].value = res.data.onLineCount;
                this.productFirmwareFooter[1].value = res.data.offLineCount;
            });
        },
        /** 查询通知日志列表 */
        getList() {
            this.loading = true;
            listLog(this.addDateRange(this.queryParams)).then((response) => {
                this.noticeList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
    },
};
</script>

<style>
.home-title {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    font-weight: 700;
    font-size: 18px;
}
</style>
