<!--集群管理-->
<template>
    <div>
        <search-layout :needBox="true">
            <template slot="searchItem1">
                <span class="label">分配账户</span>
                <el-input
                    v-model="searchParams.userName"
                    size="small"
                    clearable
                    placeholder="请输入"
                >
                </el-input>
            </template>
            <template slot="searchItem2">
                <span class="label">操作时间</span>
                <!-- <el-date-picker
                    v-model="modifyTimeRange"
                    type="datetimerange"
                    format="yyyy-MM-dd HH:mm:ss"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                >
                </el-date-picker> -->
                <el-date-picker
                    v-model="searchParams.modifyTimeStart"
                    type="date"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    placeholder="开始日期"
                    class="dateRangeInput"
                >
                </el-date-picker>
                <span class="dateSeparator">至</span>
                <el-date-picker
                    v-model="searchParams.modifyTimeEnd"
                    type="date"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    placeholder="结束日期"
                    class="dateRangeInput"
                >
                </el-date-picker>
            </template>
            <template slot="searchItem3">
                <span class="label">到期时间</span>
                <!-- <el-date-picker
                    v-model="dueTimeRange"
                    type="daterange"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                >
                </el-date-picker> -->
                <el-date-picker
                    v-model="searchParams.dueTimeStart"
                    type="date"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    placeholder="开始日期"
                    class="dateRangeInput"
                >
                </el-date-picker>
                <span class="dateSeparator">至</span>
                <el-date-picker
                    v-model="searchParams.dueTimeEnd"
                    type="date"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    placeholder="结束日期"
                    class="dateRangeInput"
                >
                </el-date-picker>
            </template>
            <template slot="searchBtn1">
                <el-button type="primary" @click="doSearch">查询</el-button>
            </template>
            <template slot="searchBtn2">
                <el-button type="primary" @click="reset">重置</el-button>
            </template>
        </search-layout>

        <!--<div class="btnsPanel">
            <el-button
                type="primary"
                icon="el-icon-circle-plus-outline"
                @click="addConfig"
                >新建配置</el-button
            >
        </div>-->

        <div style="border-top: none; margin: 30px 40px 10px 40px">
            <span
                >仿真软件已分配未到期节点数量：{{ totalSimulation }}
                <span v-if="totalSimulationAll && totalSimulationAll >= 0">
                    / {{ totalSimulationAll }}</span
                >
            </span>
            <span style="margin-left: 20%"
                >动力学软件已分配未到期节点数量：{{ totalDynamic }}
                <span v-if="totalDynamicAll && totalDynamicAll >= 0">
                    / {{ totalDynamicAll }}</span
                >
            </span>
        </div>
        <tableList
            ref="table"
            style="border-top: none; margin: 0 30px"
            :columns="columns"
            :getDataWay="getDataWay"
            :pagination="pagination"
            index
        >
            <!--<el-table-column label="独占类型" slot="useType" align="center">
                <template v-slot="scope">
                    <span>
                        {{(useTypeList.find(item=>item.code==scope.row.useType)||{}).caption||''}}
                    </span>
                </template>
            </el-table-column>-->
            <el-table-column label="操作" slot="cgInfos" align="center">
                <template v-slot="scope">
                    <i
                        @click="addMarkDia(scope.row)"
                        class="el-icon-edit-outline elIcon"
                    ></i>
                </template>
            </el-table-column>
        </tableList>
    </div>
</template>

<script>
import searchLayout from "@/components/grid/searchLayout";
import tableList from "@/components/grid/TableList";

export default {
    name: "clusteringManagement", // 集群管理
    components: { searchLayout, tableList },
    data() {
        return {
            searchParams: {
                //搜索参数
                userName: "",
                dueTimeStart: "",
                dueTimeEnd: "",
                modifyTimeStart: "",
                modifyTimeEnd: "",
            },
            modifyTimeRange: [],
            dueTimeRange: [],
            list: [],
            totalSimulation: 0,
            totalSimulationAll: -1,
            totalDynamic: 0,
            totalDynamicAll: -1,
            useTypeList: [],
            columns: [
                //表格列
                {
                    label: "账户名称",
                    prop: "userName",
                },
                {
                    label: "独占类型",
                    prop: "useType",
                    //template:true
                },
                {
                    label: "仿真软件license",
                    prop: "numSimulationLicense",
                },
                {
                    label: "到期时间",
                    prop: "dateSimulationLicense",
                    formatter: (data) => {
                        return data.dateSimulationLicense
                            ? data.dateSimulationLicense.slice(0, 10)
                            : "";
                    },
                },
                {
                    label: "动力学软件license",
                    prop: "numDynamicLicense",
                },
                {
                    label: "到期时间",
                    prop: "dateDynamicLicense",
                    formatter: (data) => {
                        return data.dateDynamicLicense
                            ? data.dateDynamicLicense.slice(0, 10)
                            : "";
                    },
                },
                {
                    label: "操作时间",
                    prop: "modifyTime",
                },
                {
                    label: "操作",
                    prop: "cgInfos",
                    template: true,
                },
            ],
            pagination: {
                //分页使用
                currentPage: 1,
                pageSize: 10,
                position: "right",
                pageSizes: [10, 30, 50, 100, 200],
                layout: "sizes, total, prev, pager, next, jumper",
            },
            getDataWay: {
                dataType: "url",
                type: "post",
                data: this.$api.systemManagement.getClusterList,
                param: {},
            },
        };
    },
    created() {
        //获取未到期已分配节点数量
        this.$axios({
            method: "POST",
            url: this.$api.systemManagement.getClusterNum,
            data: {},
        }).then((res) => {
            if (res.code == "200") {
                this.totalSimulation = res.info.totalSimulation;
                this.totalSimulationAll = res.info.totalSimulationAll;
                this.totalDynamic = res.info.totalDynamic;
                this.totalDynamicAll = res.info.totalDynamicAll;
            }
        });
    },
    async mounted() {
        await this.$dicsListsInit({
            useTypeList: "useType",
        });
    },
    methods: {
        doSearch() {
            // this.searchParams.modifyTimeStart = this.modifyTimeRange[0] || "";
            // this.searchParams.modifyTimeEnd = this.modifyTimeRange[1] || "";
            // this.searchParams.dueTimeStart = this.dueTimeRange[0] || "";
            // this.searchParams.dueTimeEnd = this.dueTimeRange[1] || "";
            // this.refreshList(this.searchParams);

            let modifyTimeStart = "";
            if (this.searchParams.modifyTimeStart) {
                modifyTimeStart = `${this.searchParams.modifyTimeStart} 00:00:00`;
            }

            let modifyTimeEnd = "";
            if (this.searchParams.modifyTimeEnd) {
                modifyTimeEnd = `${this.searchParams.modifyTimeEnd} 23:59:59`;
            }

            if (
                modifyTimeStart &&
                modifyTimeEnd &&
                modifyTimeStart > modifyTimeEnd
            ) {
                this.$message.error("结束时间不能早于开始时间");
                return;
            }

            let dueTimeStart = "";
            if (this.searchParams.dueTimeStart) {
                dueTimeStart = `${this.searchParams.dueTimeStart} 00:00:00`;
            }

            let dueTimeEnd = "";
            if (this.searchParams.dueTimeEnd) {
                dueTimeEnd = `${this.searchParams.dueTimeEnd} 23:59:59`;
            }

            if (dueTimeStart && dueTimeEnd && dueTimeStart > dueTimeEnd) {
                this.$message.error("结束时间不能早于开始时间");
                return;
            }

            let pageMap = {
                username: this.searchParams.username,
                modifyTimeStart,
                modifyTimeEnd,
                dueTimeStart,
                dueTimeEnd,
            };
            this.refreshList(pageMap);
        },
        reset() {
            this.searchParams = {
                userName: "",
                dueTimeStart: "",
                dueTimeEnd: "",
                modifyTimeStart: "",
                modifyTimeEnd: "",
            };
            this.modifyTimeRange = [];
            this.dueTimeRange = [];
            this.refreshList(this.searchParams);
        },
        refreshList(param) {
            param
                ? this.$refs["table"].loadData(param)
                : this.$refs["table"].loadData();
        },
        addConfig() {
            this.$router.push({
                path: "/clusteringDetail",
            });
        },
        addMarkDia(row) {
            let query = { ...row };
            this.$router.push({
                path: "/clusteringDetail",
                query,
            });
        },
    },
};
</script>

<style scoped lang="less">
.btnsPanel {
    margin: 45px 40px 15px;
}
</style>