<template>
    <!-- MQTT管理 -->
    <div class="flex-col">
        <s-header :name="$t('mqtt.message')" :noback="false"></s-header>
        <div class="outer flex-col justify-center ">
            <div class="l-flex-RC">
                <div class="outer1 flex-col"></div>
                <div class="TextGroup flex-col">
                    <span class="txt">{{ $t("mqtt.sendMessage") }}</span>
                </div>
            </div>
        </div>
        <van-form @submit="sendMessage">
            <van-cell-group inset>
                <van-field v-model="params.topic" :label="$t('mqtt.topic')" :placeholder="$t('mqtt.topicPlaceholder')"
                    :rules="[{ required: true, message: $t('mqtt.topicPlaceholder') }]" />
                <van-field name="radio" :label="$t('mqtt.qos')">
                    <template #input>
                        <van-radio-group v-model="params.qos" direction="horizontal">
                            <van-radio :name="0">0</van-radio>
                            <van-radio :name="1">1</van-radio>
                            <van-radio :name="2">2</van-radio>
                        </van-radio-group>
                    </template>
                </van-field>
                <van-field v-model="params.message" rows="5" autosize :label="$t('mqtt.messageContent')" type="textarea" :placeholder="$t('mqtt.messageContentPlaceholder')"
                    :rules="[{ required: true, message: $t('mqtt.messageContentPlaceholder') }]" />
                <br>
            </van-cell-group>
            <div style="margin: 10px 100px;">
                <van-button round block type="primary" native-type="submit">
                    {{ $t('mqtt.send') }}
                </van-button>
            </div>
        </van-form>
        <div class="taskMessageBox flex-col">
            <van-list v-model:loading="loading" v-model:error="error" :error-text="$t('common.reqFailClkReload')"
                :finished="finished" :finished-text="$t('common.noMoreTxt')" offset="300" :immediate-check="false"
                @load="onLoad">
                <div class="searchRow flex-row justify-between">
                    <div class="flex-col">
                        <div class="flex-row justify-between bd3">
                            <div class="flex-col outer4"></div>
                            <span class="flex-col txt2">{{ $t("mqtt.messageList") }}，{{ $t('taskMessage.total')
                                }}<span class="discountNumber">{{
            alarmHistoryTotal
        }}</span>{{ $t('taskMessage.recordsInTotal') }}</span>
                        </div>
                    </div>
                    <!-- <div @click="noticeClk" class="main5 l-flex-RC">
                            <img class="label2 o-mr-5" src="../../../assets/device/searchIcon.png" />
                        </div> -->
                </div>
                <div class="listBox">
                    <div v-for="(item, index) in alarmHistoryList" :key="index" class="listItem">
                        <div class="itemBox">
                            <div class="itemRow">
                                <span class="itemTitle">{{ $t('mqtt.topic') }}:&nbsp;</span>
                                {{ item.topic }}
                            </div>
                            <div class="itemRow">
                                <span class="itemTitle">{{ $t('taskMessage.clientId') }}:&nbsp;</span>
                                {{ item.clientId }}
                            </div>
                            <div class="itemRow">
                                <span class="itemTitle">{{ $t('mqtt.messageContent') }}:&nbsp;</span>
                                {{ item.message }}
                            </div>
                            <div class="itemRow">
                                <span class="itemTitle">{{ $t('mqtt.receiveTime') }}:&nbsp;</span>
                                {{ showDateTime(item.createDate) }}
                            </div>
                        </div>
                    </div>
                </div>
            </van-list>
        </div>
    </div>
</template>

<script>
import { onMounted, reactive, ref } from 'vue';
import sHeader from "../../../components/SimpleHeader";
import { sendMqttMessage, getMsgList } from '@/service/mqtt';
import { showFailToast, showSuccessToast } from "vant";
import dateUtil from "@/utils/dateUtil";
import { useI18n } from "vue-i18n";


export default {
    components: { sHeader },
    setup() {
        const { t } = useI18n();
        // 发送消息参数
        const params = reactive({
            topic: '',
            qos: 0,
            message: '',
        });
        // 发送消息
        const sendMessage = async () => {
            const { data } = await sendMqttMessage(params);
            if (data.code === "00000") {
                showSuccessToast(t("mqtt.sendSuccess"));
            } else {
                showFailToast(t("mqtt.sendFailed"));
            }
        };
        // 查询消息参数
        const loading = ref(false); // 加载状态
        const error = ref(false); // 错误状态
        const finished = ref(false); // 结束翻页状态
        const alarmHistoryList = ref([]); // 列表集合
        const alarmHistoryTotal = ref(0); // 列表总数
        const searchParams = reactive({
            topic: "", // 主题名
            current: 1, // 当前页
            size: 20, // 页大小
            username: "", // 商家名称
            startTime: "", // 开始时间
            endTime: "", // 结束时间
            clientId: "", // 设备编号
        });
        // 滚动加载
        const onLoad = () => {
            if (!finished.value) {
                searchParams.current = searchParams.current + 1;
                getList();
            }
        };
        // 查询消息记录
        const searchRecordList = () => {
            alarmHistoryList.value = [];
            searchParams.current = 1;
            getList();
        };
        // 获取消息列表
        const getList = async () => {
            const { data } = await getMsgList(
                Object.assign({}, searchParams)
            );
            if (data.code === "00000") {
                // 列表值叠加
                alarmHistoryList.value = alarmHistoryList.value.concat(
                    data.data.records
                );
                alarmHistoryTotal.value = data.data.total;
                if (alarmHistoryList.value.length === data.data.total) {
                    finished.value = true;
                }
                loading.value = false;
                console.log(alarmHistoryList);
            } else {
                showFailToast(data.message);
            }
        };
        // 格式化时间
        const showDateTime = (date) => {
            return date
                ? dateUtil.formateDate(new Date(date), "yyyy/MM/dd hh:mm:ss")
                : "";
        };

        // 初始化页面获取列表
        onMounted(async () => {
            // styleUrl('taskMessage');
            searchRecordList();
        });
        return {
            params,
            sendMessage,
            loading,
            error,
            finished,
            onLoad,
            alarmHistoryList,
            alarmHistoryTotal,
            showDateTime,
        };
    }
};
</script>

<style lang="less" scoped>
@import "../../../common/style/common.less";

.outer {
    background: rgba(255, 255, 255, 1) url("../../../assets/home/line.png") bottom center no-repeat;
    background-size: 100% auto;
    padding: 20px 20px;

    .outer1 {
        position: relative;
        width: 15px;
        height: 15px;
        margin-right: 5px;
        background: url("../../../assets/home/machineSales.png") center no-repeat;
        background-size: 100%;
    }

    .TextGroup {

        .txt {
            overflow-wrap: break-word;
            color: rgba(64, 77, 116, 1);
            font-size: 0.4rem;
            font-family: PingFangSC-Semibold;
            text-align: left;
            white-space: nowrap;
            line-height: 0.4rem;
            display: block;
        }

    }
}

.searchRow {
    padding: 0.5rem 0.5rem;
    background: rgba(255, 255, 255, 1) url("../../../assets/home/line.png") bottom center no-repeat;
    background-size: 100%;
    align-items: center;

    .bd3 {


        .outer4 {
            width: 19px;
            height: 19px;
            margin-right: 5px;
            background: url("../../../assets/taskMessage/retailIcon.png") top center no-repeat;
            background-size: 100%;
        }

        .txt2 {
            overflow-wrap: break-word;
            color: rgba(64, 77, 116, 1);
            font-size: 0.4rem;
            font-family: PingFangSC-Semibold;
            text-align: left;
            white-space: nowrap;
            line-height: 0.4rem;
            display: block;

            .discountNumber {
                font-size: 18px;
                color: #df5e4c;
            }
        }
    }

    .label3 {
        color: #4d6add;
    }

    .main5 {
        width: auto;

        .label2 {
            width: 0.5rem;
            height: 0.5rem;
            margin-right: 5px;
            cursor: pointer;
        }
    }
}

.listBox {
    .listItem {
        width: 100%;
        background: url("../../../assets/home/line.png") bottom center no-repeat;
        background-size: 100%;
        position: relative;
        display: inline-block;

        .itemBox {
            margin: 20px 30px;
            line-height: 20px;

            .itemRow {
                width: 100%;
                overflow-wrap: break-word;
            }

            .itemTitle {
                color: #8787a6;
                font-size: 13px;
            }
            
            // .itemContent {
                
            // }

            .discount {
                padding-left: 2em;
            }
        }
    }
}
</style>