<!--
 * @Description: 脚本管理
 * @Author: xiaofengzhou
 * @Email: 2946471396@qq.com
 * @Date: 2022-08-05 21:45:58
 * @LastEditTime: 2022-10-18 16:20:33
 * @LastEditors: xiaofengzhou
-->

<template>
    <div>
        <a-modal :maskClosable="false" v-model:visible="visible" width="1000px" centered @ok="hanOk" @cancel="hanCancel">
            <div class="head-content">
                <span class="iconfont icon-repo head-icon"></span>
                &nbsp;&nbsp;
                <span class="head-font">脚本库</span>
            </div>
            <div class="btn-content">
                <a-button @click="showUploadScript" size="small" class="add-btn">
                    <span class="iconfont icon-cloud-upload add-btn-icon">上传新脚本</span>
                </a-button>
            </div>

            <a-table :dataSource="dataSource" :columns="columns" :pagination="false">
                <template slot="action" slot-scope="text, record">
                    <span>
                        <a @click="handleScriptUpdate(record)">更新</a>
                        &nbsp;&nbsp;
                        <a @click="handleScriptView(record)">查看</a>
                    </span>
                </template>
            </a-table>
            <div class="pagintion">
                <a-pagination size="small" @change="onShowPageChange" v-model="pagination.current"
                    :total="pagination.totalCount" :page-size="5" />
            </div>

        </a-modal>
        <uploadScriptVue @uploadScriptVue="uploadScriptVue" ref="UploadScriptVue" />
        <viewScript ref="viewScript" />
    </div>
</template>

<script>
import { time } from '../../../../../packages/utils/time'
import { getScriptList } from '../../../../../packages/api/manage'
import uploadScriptVue from './UploadScript.vue'
import viewScript from './ViewScript.vue'
export default {
    components: {
        uploadScriptVue,
        viewScript
    },
    data() {
        return {
            pagination: {
                current: 1,
                pageSize: 5,
                totalCount: 10,

            },
            scriptType: {
                '0': '数据库脚本',
                '1': 'redis脚本',
                '2': 'minio脚本',
                '3': 'xxljob脚本',
                '4': 'rocketMq脚本',
                '5': 'dubbo脚本',
                '6': 'nacos脚本',
                '7': 'nginx脚本'
            },
            visible: false,
            dataSource: {

            },
            columns: [
                {
                    title: "序号",
                    dataIndex: "index",
                    key: "index",
                },
                {
                    title: "脚本名称",
                    dataIndex: "scriptName",
                    key: "scriptName",
                },
                {
                    title: "脚本类型",
                    dataIndex: "middlewareType",
                    key: "middlewareType",
                    customRender: (text, record, index) => {
                        if (record.middlewareType === '1') {
                            return "redis脚本"
                        } else if (record.middlewareType === '2') {
                            return "minio脚本"
                        } else if (record.middlewareType === '3') {
                            return "xxljob脚本"
                        } else if (record.middlewareType === '4') {
                            return "rocketMq脚本"
                        } else if (record.middlewareType === '5') {
                            return "dubbo脚本"
                        } else if (record.middlewareType === '6') {
                            return "nacos脚本"
                        } else if (record.middlewareType === '0') {
                            return "数据库脚本"
                        } else if (record.middlewareType === '7') {
                            return "nginx脚本"
                        }
                    },
                    align: 'center'
                },
                {
                    title: "是否支持集群安装",
                    dataIndex: "clusterFlag",
                    key: "clusterFlag",
                    customRender: (text, record, index) => {
                        if (record.clusterFlag === '0') {
                            return "是"
                        } else if (record.clusterFlag === '1') {
                            return "否"
                        }
                    },
                    align: 'center'
                },
                {
                    title: "备注",
                    dataIndex: "remark",
                    key: "remark",
                    align: 'center'

                },
                {
                    title: "操作人",
                    dataIndex: "operator.userName",
                    key: "userName",
                },
                {
                    title: "操作时间",
                    dataIndex: "createTime",
                    key: "createTime",
                    customRender: (text, record, index) => {
                        if (record.updateTime !== null) {
                            return time.formatTime(record.updateTime, "yyyy/MM/dd")
                        } else {
                            return time.formatTime(record.createTime, "yyyy/MM/dd")
                        }

                    },
                    align: 'center'
                },
                {
                    title: "操作",
                    key: "action",
                    scopedSlots: { customRender: "action" },

                },
            ],
            updateCurrent: ""
        }
    },
    //生命周期 - 创建完成（访问当前this实例）
    created() {
        this.getScriptData()
    },
    //生命周期 - 挂载完成（访问DOM元素）
    mounted() {
    },
    methods: {
        handleScriptView(record) {
            this.$refs.viewScript.init(record)
            this.$refs.viewScript.visible = true
        },
        hanOk() {
            this.visible = false
        },
        hanCancel() {

        },
        // 分页
        onShowPageChange(page, pagesize) {
            this.pagination.current = page
            this.getScriptData(page, pagesize)
        },
        // 上传
        uploadScriptVue() {
            this.getScriptData(this.pagination.current, 5)
        },
        // 获取脚本数据
        getScriptData(pageNum = 1, pageSize = 5, scriptName = '', middlewareType = '') {
            getScriptList({ pageSize: pageSize, pageNum: pageNum, scriptName: scriptName, middlewareType: middlewareType }).then((res) => {
                let result = res.result.data
                result.map((item, index) => {
                    item.key = index + 1
                    item.index = (this.pagination.current - 1) * 5 + index + 1
                    // item.middlewareName = this.scriptType[item.middlewareType]
                })
                this.pagination.totalCount = res.result.totalCount
                this.dataSource = res.result.data
            })
        },
        // 弹出框
        showUploadScript() {
            this.$refs.UploadScriptVue.init(_, 'add')
            this.$refs.UploadScriptVue.visible = true
        },
        // 弹出框
        handleScriptUpdate(record) {
            this.updateCurrent = record.scriptId
            this.$refs.UploadScriptVue.visible = true
            this.$refs.UploadScriptVue.init(record, 'edit')
        },
    }
}
</script>
<style scoped lang="less">
/* @import url(); 引入css类 */
.head-content {
    text-align: center;

    .head-icon {
        font-size: 28px;
        vertical-align: middle;
        color: #284f84;
    }

    .head-font {
        font-size: 18px;
        vertical-align: middle;
        color: #284f84;
    }
}

.btn-content {
    text-align: right;
    margin-bottom: 20px;
    margin-top: 20px;

    .add-btn {
        border: 1px solid #284f84;
    }

    .add-btn-icon {
        color: #284f84;
    }
}

.pagintion {
    text-align: right;
    margin-top: 10px;
}
</style>