<template>
    <div>
        <search-layout :needBox="true">
            <template slot="searchItem1">
                <span class="label">账户名称</span>
                <el-input
                    v-model="searchParams.userName"
                    size="small"
                    clearable
                    placeholder="请输入"
                    maxlength="60"
                    @keyup.enter.native="doSearch"
                >
                </el-input>
            </template>
            <template slot="searchItem2">
                <span class="label">操作时间</span>
                <!-- <el-date-picker
                    v-model="createDate"
                    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.yearMin"
                    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.yearMax"
                    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="doReset">重置</el-button>
            </template>
        </search-layout>

        <tableList
            ref="table"
            style="margin: 30px"
            :columns="columns"
            :getDataWay="getDataWay"
            :pagination="pagination"
            index
        >
            <el-table-column
                label="操作"
                slot="cgInfos"
                align="center"
                width="100"
            >
                <template v-slot="scope">
                    <i
                        @click="editRow(scope.row.userName)"
                        class="el-icon-edit-outline elIcon"
                        title="编辑"
                    ></i>
                </template>
            </el-table-column>
        </tableList>
    </div>
</template>

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

export default {
    name: "scenePacketDistributionList", // 场景包分配列表
    components: { searchLayout, tableList },
    data() {
        return {
            searchParams: {
                //搜索参数
                userName: "", // 账户名称
                yearMin: "", // 操作时间起
                yearMax: "", // 操作时间止
            },
            createDate: "",
            columns: [
                {
                    label: "账户名称",
                    prop: "userName",
                },
                {
                    label: "场景包名称",
                    prop: "packageName",
                    showOverflowTooltip: true,
                },
                {
                    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",
                // firstRequest: false,
                data: this.$api.systemManagement.queryPackageByUserIdList,
                param: {},
            },
        };
    },

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

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

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

            let pageMap = {
                userName: this.searchParams.userName,
                yearMin,
                yearMax,
            };
            this.refreshList(pageMap);
        },
        //刷新table
        refreshList(param) {
            param
                ? this.$refs["table"].loadData(param)
                : this.$refs["table"].loadData();
        },
        doReset() {
            this.searchParams = {
                userName: "",
                yearMin: "",
                yearMax: "",
            };
            // this.createDate = "";
            this.doSearch();
        },
        editRow(userName) {
            this.$router.push({
                path: "/scenePacketDistributionDetail",
                query: { userName },
            });
        },
    },

    // mounted() {},
};
</script>

<style lang='less' scoped>
</style>