<!--
 * @Description: 
 * @Author: xiaofengzhou
 * @Email: 2946471396@qq.com
 * @Date: 2022-08-06 23:07:50
 * @LastEditTime: 2022-10-27 09:57:19
 * @LastEditors: xiaofengzhou
-->


<template>
    <div>
        <a-modal v-model:visible="visible" :maskClosable="false" :footer="null" @ok="hanOK" @cancel="hanCancel"
            okText="下载" cancelText="取消" width="1000px">
            <div class="down-content">
                <div class="down-content-icon">
                    <span class="iconfont icon-upload down-icon"></span>
                </div>
                &nbsp;&nbsp;
                <span class="down-content-font">下载</span>
            </div>
            <div class="checkBtn-content">
                <a-checkbox v-model:checked="downloadCheckList.projectEng">
                    <span class="iconfont icon-folder checkBtn-content-icon"></span>
                    <p class="checkBtn-content-font">项目工程</p>
                </a-checkbox>

            </div>
            <a-checkbox v-model:checked="downloadCheckList.scriptDown">
            </a-checkbox>
            <span>&nbsp;&nbsp;待下载脚本</span>
            <div class="wait-content">
                <div class="wait-content-script" v-for="(item, index) in waitDownScript">
                    <span class="wait-content-script-span">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{
                            item.scriptName
                    }}</span>
                    <div class="wait-content-script-span-btn" @click="deleteDownScript(item)">
                        <span class="iconfont icon-roundadd"></span>
                    </div>
                </div>
            </div>
            <a-row class="search-content">
                <a-col :span="4" class="search-content-font">
                    <span class="search-content-span">
                        脚本检索:
                    </span>

                </a-col>
                <a-col :span="6">
                    <a-input placeholder="请输入脚本名称" style="vertical-align:middle;" v-model="scriptSearch.scriptName" />
                </a-col>

                <a-col class="script-select" :span="8">
                    <a-select style="vertical-align:middle;" v-model="scriptSearch.scriptType">
                        <a-select-option value="">不选择</a-select-option>
                        <a-select-option value="0">数据库脚本</a-select-option>
                        <a-select-option value="1">redis</a-select-option>
                        <a-select-option value="2">minio</a-select-option>
                        <a-select-option value="3">xxljob</a-select-option>
                        <a-select-option value="4">rocketmq</a-select-option>
                        <a-select-option value="5">dubbo</a-select-option>
                        <a-select-option value="6">nacos</a-select-option>
                        <a-select-option value="7">nginx</a-select-option>
                    </a-select>
                </a-col>
                <a-col :span="2">
                    <a-button @click="search" type="primary">搜索</a-button>
                </a-col>
            </a-row>
            <a-table size="small" :columns="columns" :dataSource="dataSource" :pagination="false">
                <template slot="action" slot-scope="text, record">
                    <span>
                        <button style="border: none;background:none" @click="addDwonScript(record)">
                            <span class="iconfont icon-roundadd" style="color:#284f84;font-size: 20px;"></span>
                        </button>
                    </span>
                </template>
            </a-table>
            <div style="text-align: right;margin-top:10px">
                <a-pagination size="small" @change="onShowPageChange" v-model="pagination.current"
                    :total="pagination.totalCount" :page-size="5" />
            </div>
            <div class="btnGroup">
                <a-button @click="hanCancel">取消</a-button>
                <a-button @click="hanOK" :loading="isLoading" type="primary">下载</a-button>
            </div>

        </a-modal>
    </div>
</template>

<script>
import { getScriptList, genProject } from '../../../../../packages/api/manage'
export default {
    data() {
        return {
            isLoading: false,
            pagination: {
                current: 1,
                pageSize: 5,
                totalCount: 10,

            },
            middlewareType: {
                '0': '数据库脚本',
                '1': 'redis脚本',
                '2': 'minio脚本',
                '3': 'xxljob脚本',
                '4': 'rocketMq脚本',
                '5': 'dubbo脚本',
                '6': 'nacos脚本',
                '7': 'nginx脚本',
            },
            waitDownScript: [],
            visible: false,
            downloadCheckList: {
                projectEng: true,
                scriptDown: true
            },
            scriptSearch: {
                scriptName: '',
                scriptType: ''
            },
            columns: [
                {
                    title: "序号",
                    dataIndex: "index",
                    key: "index",
                },
                {
                    title: "脚本名称",
                    dataIndex: "scriptName",
                    key: "scriptName",
                },
                {
                    title: "脚本类型",
                    dataIndex: "middlewareName",
                    key: "middlewareName",

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

                },
            ],
            dataSource: {},
            searchDataSource: {},
            project: ""
        }
    },
    //生命周期 - 创建完成（访问当前this实例）
    created() {
        this.getScriptData(1, 5)
    },
    //生命周期 - 挂载完成（访问DOM元素）
    mounted() {

    },
    methods: {
        init(record) {
            this.project = record
            this.getScriptData(1, 5)

        },
        hanOK() {
            this.isLoading = true
            //构造参数
            let result = []
            this.waitDownScript.map((item, index) => {
                result.push(item.scriptId);
            })
            let resultString = result.join(',')
            // 选择了项目工程和待下载脚本
            if (this.downloadCheckList.projectEng && this.downloadCheckList.scriptDown) {
                // 选择了项目工程和待下载脚本 但是脚本没有添加
                if (this.waitDownScript.length === 0) {
                    let params = {
                        projectId: this.project.projectId,
                        downloadProjectFlag: true
                    }
                    genProject(params).then(res => {
                        this.formatProcess(res)
                    }).catch(err => {
                        this.$message.error("下载失败")
                        this.isLoading = false

                    })
                } else {
                    let params = {
                        projectId: this.project.projectId,
                        downloadProjectFlag: true,
                        scriptIds: result

                    }
                    genProject(params).then(res => {
                        this.formatProcess(res)
                    }).catch(err => {
                        this.$message.error("下载失败")
                        this.isLoading = false
                    })
                }
                // 只选择了项目工程
            } else if (this.downloadCheckList.projectEng) {
                let params = {
                    projectId: this.project.projectId,
                    downloadProjectFlag: true
                }
                genProject(params).then(res => {
                    this.formatProcess(res)
                }).catch(err => {
                    this.$message.error("下载失败")
                    this.isLoading = false

                })
                // 只选择了下载脚本
            } else if (this.downloadCheckList.scriptDown) {
                // 没勾选任何脚本
                let params = {
                    projectId: this.project.projectId,
                    downloadProjectFlag: false,
                    scriptIds: result
                }
                genProject(params).then(res => {
                    this.formatProcess(res)
                }).catch(err => {
                    this.$message.error("下载失败")
                    this.isLoading = false

                })
            }
        },
        // 返回格式处理 blob json
        formatProcess(res) {
            this.isLoading = false

            const resData = res.data
            const fileReader = new FileReader()
            fileReader.onload = () => {
                try {
                    const jsonData = JSON.parse(fileReader.result)
                    this.$message.error(jsonData.message)
                } catch (err) {
                    this.download(resData)
                }
            }
            fileReader.readAsText(resData)
        },
        // 脚本下载
        download(res) {
            let blob = new Blob([res], { type: "application/zip" });
            let url = window.URL.createObjectURL(blob)
            window.location.href = url

        },
        // 取消
        hanCancel() {
            this.visible = false
            this.isLoading = false
            this.waitDownScript = []
        },

        // 分页
        onShowPageChange(page, pagesize) {
            this.pagination.current = page
            const { scriptName, scriptType } = this.scriptSearch
            this.getScriptData(page, pagesize, scriptName !== "" ? scriptName : "", scriptType !== "" ? scriptType : "")
        },
        // 脚本请求
        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 = index + 1
                    item.middlewareName = this.middlewareType[item.middlewareType]
                })
                this.pagination.totalCount = res.result.totalCount
                this.dataSource = res.result.data
                this.searchDataSource = res.result.data
            })
        },
        // 添加脚本
        addDwonScript(record) {
            let flag = 1
            this.waitDownScript.map(item1 => {
                if (item1.scriptId === record.scriptId) {
                    flag = 0
                }
            })
            if (flag) {
                this.waitDownScript.push(record)
            }
            // this.waitDownScript.push(record)
            let result = this.dataSource
            let res = result.filter(item => {
                return item.scriptId !== record.scriptId
            })
            this.dataSource = res

        },
        // 删除已选择脚本
        deleteDownScript(item) {
            this.dataSource.push(item)
            let result = []
            this.waitDownScript.map(item1 => {
                if (item1.scriptId === item.scriptId) {
                } else {
                    result.push(item1)
                }
            })
            this.waitDownScript = result
        },
        search() {
            this.getScriptData(1, 5, this.scriptSearch.scriptName, this.scriptSearch.scriptType)
        }
    }
}
</script>
<style scoped lang="less">
.ant-select {
    width: 150px;
}

.btnGroup {
    margin-top: 20px;
    text-align: right;
}

.btnGroup button:nth-child(1) {
    color: #3894ff;
    margin-right: 20px;
}

.down-content {
    text-align: center;

    .down-content-icon {
        transform: rotate(180deg);
        display: inline-block;

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

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

.checkBtn-content {
    text-align: left;

    .checkBtn-content-icon {
        font-size: 60px;
        font-weight: bolder;
        margin-left: 440px;
    }

    .checkBtn-content-font {
        margin-left: 466px;
    }
}

.wait-content {
    width: 950px;
    height: 100px;
    overflow-y: scroll;
    // border: 1px solid red;

    .wait-content-script {
        background-color: #fafafa;
        height: 42px;
        overflow: hidden;
        width: 200px;
        border-radius: 21px;
        position: relative;
        float: left;
        margin-left: 10px;
        margin-top: 20px;

        .wait-content-script-span {
            text-align: center;
            display: inline-block;
            line-height: 42px;
        }

        .wait-content-script-span-btn {
            transform: rotate(45deg);
            display: inline-block;
            text-align: right;
            position: absolute;
            right: 0;
            top: 10px;
            vertical-align: middle;
            margin-right: 5px;

            .wait-content-script-span-btn-span {
                font-size: 20px;
                vertical-align: baseline;
                color: #284f84;

                & span {
                    font-size: 20px;
                }
            }
        }

    }
}

.search-content {
    margin-bottom: 10px;

    .search-content-font {
        text-align: left;
    }

    .search-content-span {
        vertical-align: middle;
        padding-top: 5px;
        display: inline-block;
    }

    .script-select {
        text-align: left;
        margin-left: 10px;
    }
}
</style>