<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" v-show="showSearch" :inline="true">
            <el-form-item label="" prop="appName">
                <el-input v-model="queryParams.appName" placeholder="请输入小程序名称" clearable size="small"
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="" prop="appId">
                <el-input v-model="queryParams.appId" placeholder="请输入AppId" clearable size="small"
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="" prop="appDesc">
                <el-input v-model="queryParams.appDesc" placeholder="请输入小程序详情" clearable size="small"
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="" prop="appRemark">
                <el-input v-model="queryParams.appRemark" placeholder="请输入小程序备注" clearable size="small"
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item>
                <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" icon="el-icon-plus" size="mini"
                    @click="modifyData = null; handleAdd()">新增</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-popconfirm title="确定删除吗？" @confirm="handleDelete(selectIds)">
                    <el-button slot="reference" :disabled="selectIds.length === 0" :loading="deleteLoading" size="mini" type="danger"
                        icon="el-icon-delete">批量删除</el-button>
                </el-popconfirm>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table :data="miniprogramList" :loading="loading" :border="true" size="mini"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" />
            <el-table-column label="小程序名称" prop="appName" align="center" width="150px" :show-overflow-tooltip="true" />
            <el-table-column label="AppId" prop="appId" align="center" width="150px" :show-overflow-tooltip="true" />
            <el-table-column label="小程序详情" prop="appDesc" :show-overflow-tooltip="true" width="350px" />
            <el-table-column label="小程序备注" prop="appRemark" :show-overflow-tooltip="true" />
            <el-table-column label="创建人" prop="createName" align="center" width="90px" />
            <el-table-column label="创建时间" prop="createTime" align="center" width="160px" />
            <el-table-column label="操作" align="center" width="120px">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑</el-button>
                    <div style="display: inline-block;width: 10px"></div>
                    <el-popconfirm title="确定删除吗？" @confirm="handleDelete(scope.row.id)">
                        <el-button slot="reference" :loading="deleteLoading" size="mini" type="text" style="color: red"
                            icon="el-icon-delete">删除</el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <!-- 翻页 -->
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="getList" />

        <modify-mini :visible="visible" :modifyData="modifyData" @onClose="visible = false"
            @onChange="visible = false; getList()" />
    </div>
</template>
<script>
import { getMiniList, delMinis } from "@/api/accounts/miniprogram";
import modifyMini from './modify'
export default {
    components: { modifyMini },
    data() {
        return {
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                appDesc: null,
                appId: null,
                appName: null,
                appRemark: null,
            },
            showSearch: true,
            total: 0,
            loading: false,
            miniprogramList: [],
            visible: false,
            modifyData: null,
            deleteLoading: false,
            multipleSelection: [],
            selectIds: '',
        }
    },
    created() {
        this.getList()
    },
    methods: {
        handleSelectionChange(val) {
            this.multipleSelection = val;
            this.selectIds = val.map(item => item.id).toString()
        },
        getList() {
            this.loading = true
            getMiniList(this.queryParams).then(response => {
                this.loading = false
                let data = response.data
                this.total = data.total
                let records = data.records
                this.miniprogramList = records
            }).catch(() => this.loading = false)
        },
        handleAdd() {
            this.visible = true
        },
        /** 搜索 */
        handleQuery() {
            this.getList()
        },
        /** 搜索条件重置 */
        resetQuery() {
            this.resetForm("queryForm");
            this.getList()
        },
        handleEdit(row) {
            const { appName, appId, appDesc, appRemark, id } = row
            this.modifyData = { appName, appId, appDesc, appRemark, id }
            this.visible = true
        },
        handleDelete(ids) {
            this.deleteLoading = true
            delMinis(ids).then(() => {
                this.deleteLoading = false
                this.getList()
                this.$message({
                    message: '删除成功',
                    type: 'success'
                });
            }).catch(() => this.deleteLoading = false)
        }
    }
}
</script>