<template>
    <!-- 终端管理 -->
    <div class="terminalListBox flex-col">
        <s-header name="终端管理" :noback="false"></s-header>
        <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('alarmHistory.common') }}<span class="discountNumber">{{
            terminalTotal
        }}</span>{{ $t('alarmHistory.recordsTotal') }}</span>
                </div>
            </div>
            <div class="flex-col">
                <div class="main5 flex-row justify-between" @click="showAdd = true">
                    <img class="label2 o-mr-5" src="../../../assets/device/alarmClock_Add.png" />
                </div>
            </div>
        </div>
        <van-list v-model:loading="loading" v-model:error="error" :error-text="$t('alarmHistory.requestFailed')"
            :finished="finished" :finished-text="$t('alarmHistory.noMore')" offset="300" :immediate-check="false"
            @load="onLoad">
            <div class="listBox">
                <div v-for="(item, index) in terminalList" :key="index" class="listItem">
                    <div class="container">
                        <div class="itemBox">
                            <div class="itemRow">
                                <span class="itemTitle">
                                    终端名称:&nbsp;
                                </span>
                                {{ item.name }}
                            </div>
                            <div class="itemRow">
                                <span class="itemTitle">
                                    终端编号:&nbsp;
                                </span>
                                {{ item.number }}
                            </div>
                        </div>
                        <div>
                            <van-button type="primary" style="padding: 10px;" @click="distribution(item)">分销</van-button>
                        </div>
                    </div>
                </div>
            </div>
        </van-list>
        <van-dialog v-model:show="showAdd" title="生成终端" show-cancel-button @confirm="addTerminal">
            <van-field v-model="name" label="终端名称" placeholder="请填写终端名称" label-align="center" />
        </van-dialog>
    </div>
</template>
<script>
import sHeader from "../../../components/SimpleHeader.vue";
import { onMounted, reactive, ref, toRefs } from "vue";
import { getTerminalList, generatingTerminal } from "../../../service/terminal";
import { getLoginUser } from "@/common/js/utils";
import { showFailToast, showNotify, showSuccessToast, } from "vant";
import { useRouter } from "vue-router";


export default {
    components: { sHeader },
    setup() {
        const router = useRouter();
        const user = getLoginUser();
        const loading = ref(false); // 加载状态
        const error = ref(false); // 错误状态
        const finished = ref(false); // 结束翻页状态
        const terminalTotal = ref(0); // 列表总数
        const terminalList = ref([]); // 列表集合
        const showAdd = ref(false); //弹窗展示
        let searchParams = reactive({
            adminId: "", // 当前登录账户的id
            current: 1, // 当前页
            size: 20, // 页大小
            name: "", // 机器名称
        });
        // 获取设备列表
        const getList = async () => {
            const { data } = await getTerminalList(
                Object.assign({}, searchParams)
            );
            if (data.code === "00000") {
                // 列表值叠加
                terminalList.value = terminalList.value.concat(
                    data.data.records
                );
                terminalTotal.value = data.data.total;
                if (terminalList.value.length === data.data.total) {
                    finished.value = true;
                }
                loading.value = false;
            } else {
                showFailToast(data.message);
            }
        };
        // 滚动加载
        const onLoad = () => {
            if (!finished.value) {
                searchParams.current = searchParams.current + 1;
                getList();
            }
        };
        // 生成终端
        const addTerminal = async () => {
            if (searchParams.name == null || searchParams.name === "") {
                showNotify({ type: 'warning', message: '请输入终端名称' });
            } else {
                const { data } = await generatingTerminal(
                    Object.assign({}, searchParams)
                );
                if (data.code === "00000") {
                    showSuccessToast("生成成功");
                    setTimeout(() => {
                        searchParams.current = 1;
                        terminalList.value = [];
                        getList();
                    }, 500);
                } else {
                    showFailToast(data.message);
                }
            }
        };
        // 分销跳转
        const distribution = (e) => {
            router.push({ path: "distribution", query: { terminalId: e.id, terminalNo: e.number	} });
        };
        onMounted(async () => {
            if (user) {
                searchParams.adminId = user.id;
                getList();
            }
        });

        return {
            loading,
            error,
            finished,
            onLoad,
            terminalTotal,
            terminalList,
            showAdd,
            addTerminal,
            distribution,
            ...toRefs(searchParams),
        };
    },
};
</script>
<style lang="less" scoped>
@import "../../../common/style/common.less";

.terminalListBox {
    width: 100%;
    height: calc(100% - 44px);
    overflow: auto;

    .searchRow {
        width: 90%;
        height: 48px;
        margin: 0 auto;
        background: rgba(255, 255, 255, 1) url("../../../assets/home/line.png") bottom center no-repeat;
        background-size: 100%;
        align-items: center;

        .bd3 {
            width: 87px;
            height: 16px;

            .outer4 {
                width: 16px;
                height: 20px;
                background: url("../../../assets/alarmHistory/icon.png") top center no-repeat;
                background-size: 100%;
            }

            .txt2 {
                width: 65px;
                height: 14px;
                overflow-wrap: break-word;
                color: rgba(64, 77, 116, 1);
                font-size: 15px;
                font-family: PingFangSC-Semibold;
                text-align: left;
                white-space: nowrap;
                line-height: 15px;
                display: block;
                font-weight: bold;

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

        .main5 {
            width: auto;
            cursor: pointer;

            .label2 {
                width: 20px;
                height: 20px;
                margin-right: 5px;
            }
        }
    }

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

            .container {
                display: flex;
                justify-content: space-between;
                /* 左右对齐 */
                align-items: center;
                /* 顶部对齐 */
                margin: 20px;
                /* 根据父容器宽度 */
                .itemBox {
                    flex: 1;
                    font-size: 12px;
                    line-height: 1.65;
    
                    .itemRow {
                        width: 80%;
                    }
    
                    .itemTitle {
                        color: #8787a6;
                    }
    
                }
            }

        }
    }
}

.van-button--primary {
    border-color: #4d6add;
    background-color: #4d6add;
}
</style>