<template>
    <div>
        <div class="gva-search-box">
            <el-form ref="searchForm" :inline="true" :model="searchInfo">
                <!-- <el-form-item>
                    <el-select v-model="searchInfo.searchKey">
                        <el-option v-for="item in searchOptions" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </el-form-item> -->
                <el-form-item label="任务Id">
                    <el-input v-model="searchInfo.task_id" placeholder="任务ID" />
                </el-form-item>
                <!-- <el-form-item label="负责人">
                    <el-select v-model="searchInfo.user" placeholder="负责人">
                        <el-option v-for="item in ResponsiblePerson" :key="item.id" :label="item.name" :value="item.name" />
                    </el-select>
                </el-form-item> -->
                <el-form-item>
                    <el-button size="small" type="primary" icon="search" @click="onSubmit">搜索</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="gva-table-box">
            <div class="gva-btn-list">
                <el-button size="small" icon="refresh" @click="onReset">刷新</el-button>
                <el-button size="small" type="primary" icon="plus" @click="openDialog('addConf')">新增</el-button>
                <el-popover v-model="deleteVisible" placement="top" width="160">
                    <p>确定要删除吗？</p>
                    <div style="text-align: right; margin-top: 8px;">
                        <el-button size="small" type="primary" link @click="deleteVisible = false">取消</el-button>
                        <el-button size="small" type="primary" @click="onDelete">确定</el-button>
                    </div>
                    <template #reference>
                        <el-button icon="delete" type="danger" size="small" :disabled="!apis.length"
                            style="margin-left: 10px;" @click="deleteVisible = true">删除</el-button>
                    </template>
                </el-popover>
            </div>
            <el-table :data="tableData" @sort-change="sortChange" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" />
                <el-table-column align="left" label="镜像" min-width="100" prop="mirror" />
                <el-table-column align="left" label="脚本" min-width="150" prop="script" />
                <el-table-column align="left" label="克隆模式" min-width="150" prop="clone_mode" />
                <el-table-column align="left" label="模拟器类型" min-width="150" prop="simulator_type" />
                <el-table-column align="left" label="分辨率" min-width="150" prop="resolution" />
                <el-table-column align="left" label="窗口缩放" min-width="150" prop="zoom" />
                <el-table-column align="left" label="超时时间" min-width="150" prop="timeout" />
                <el-table-column align="left" label="cpu" min-width="150" prop="cpu" />
                <el-table-column align="left" label="内存" min-width="150" prop="memory_size" />
                <el-table-column align="left" label="任务id" min-width="150" prop="task_id" sortable="custom" />
                <el-table-column align="left" label="游戏id" min-width="150" prop="game_id" />
                <el-table-column align="left" label="优先级" min-width="150" prop="priority" />
                <el-table-column align="left" label="游戏类型" min-width="150" prop="game_type">
                    <template #default="scope">
                        <div>
                            {{ gameTypeFiletr(scope.row.game_type) }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column align="left" label="创建时间" min-width="150" prop="create_time" sortable="custom" />
                <el-table-column align="left" label="更新时间" min-width="150" prop="update_time" sortable="custom" />
                <el-table-column align="left" fixed="right" label="操作" width="200">
                    <template #default="scope">
                        <el-button icon="edit" size="small" type="primary" link
                            @click="editConfFunc(scope.row)">编辑</el-button>
                        <el-button icon="delete" size="small" type="primary" link
                            @click="deleteConfFunc(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="gva-pagination">
                <el-pagination :current-page="page" :page-size="pageSize" :page-sizes="[10, 30, 50, 100]" :total="total"
                    layout="total, sizes, prev, pager, next, jumper" @current-change="handleCurrentChange"
                    @size-change="handleSizeChange" />
            </div>

        </div>

        <el-dialog v-model="dialogFormVisible" :before-close="closeDialog" :title="dialogTitle">
            <el-form ref="apiForm" :model="form" :rules="rules" label-width="80px">
                <el-form-item label="游戏类型" prop="game_type">
                    <el-select v-model="form.game_type">
                        <el-option v-for="item in gameTypeOptions" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="镜像" prop="mirror">
                    <el-input v-model="form.mirror" autocomplete="off" />
                </el-form-item>
                <el-form-item label="脚本" prop="script">
                    <el-input v-model="form.script" autocomplete="off" />
                </el-form-item>
                <el-form-item label="克隆模式" prop="clone_mode">
                    <el-select v-model="form.clone_mode">
                        <el-option v-for="item in cloneModeOptions" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="模拟器类型" prop="simulator_type">
                    <el-select v-model="form.simulator_type">
                        <el-option v-for="item in simulatorTypeOptions" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="分辨率" prop="resolution">
                    <el-select v-model="form.resolution">
                        <el-option v-for="item in resolutionOptions" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="窗口缩放" prop="zoom">
                    <el-select v-model="form.zoom">
                        <el-option v-for="item in zoomOptions" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="超时时间" prop="timeout">
                    <el-input v-model="form.timeout" autocomplete="off" />
                </el-form-item>
                <el-form-item label="cpu" prop="cpu">
                    <el-select v-model="form.cpu">
                        <el-option v-for="item in cpuOptions" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="内存" prop="memory_size">
                    <el-select v-model="form.memory_size">
                        <el-option v-for="item in memorySizeOptions" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="任务id" prop="task_id">
                    <el-input v-model="form.task_id" autocomplete="off" />
                </el-form-item>
                <el-form-item label="游戏id" prop="game_id">
                    <el-input v-model="form.game_id" autocomplete="off" />
                </el-form-item>
                <el-form-item label="优先级" prop="priority">
                    <el-select v-model="form.priority">
                        <el-option v-for="item in priorityOptions" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button size="small" @click="closeDialog">取 消</el-button>
                    <el-button size="small" type="primary" @click="enterDialog">确 定</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
    
<script>
export default {
    name: 'CentralControlConf',

}
</script>
    
<script setup>
import {
    getCentralControlConfList,
    getCentralControlConfById,
    createCentralControlConf,
    updateCentralControlConf,
    deleteCentralControlConf,
    deleteCentralControlConfByIds
} from '@/api/centralControlConf'
import { toSQLLine } from '@/utils/stringFun'
//   import warningBar from '@/components/warningBar/warningBar.vue'
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
// import { isNumber } from 'lodash'

const methodFiletr = (value) => {
    const target = searchOptions.value.filter(item => item.value === value)[0]
    return target && `${target.label}`
}

const apis = ref([])
const form = ref({

})

const gameTypeFiletr = (value) => {
    const target = gameTypeOptions.value.filter(item => item.value === value)[0]
    return target && `${target.label}`
}

const searchOptions = ref([
    {
        value: 'task_id',
        label: '任务id',

    },
])

const gameTypeOptions = ref([

    {
        value: 1,
        label: '小绵羊任务'
    },
    {
        value: 2,
        label: '魅族任务'
    },
    {
        value: 3,
        label: '腾讯任务'
    },
])

const cloneModeOptions = ref([
    {
        value: '每轮克隆',
        label: '每轮克隆'
    },
    {
        value: '每3轮克隆',
        label: '每3轮克隆'
    },
    {
        value: '从不克隆',
        label: '从不克隆'
    }
])

const simulatorTypeOptions = ref([
    {
        value: '雷电模拟器4-32位',
        label: '雷电模拟器4-32位'
    },
    {
        value: '逍遥模拟器',
        label: '逍遥模拟器'
    },
    {
        value: '夜神模拟器',
        label: '夜神模拟器'
    },
    {
        value: '雷电模拟器4-64位',
        label: '雷电模拟器4-64位'
    },
    {
        value: '雷电模拟器9',
        label: '雷电模拟器9'
    },
    {
        value: '夜神模拟器9',
        label: '夜神模拟器9'
    },
])

const resolutionOptions = ref([
    {
        value: '270x480(dpi120)',
        label: '270x480(dpi120)'
    },
    {
        value: '720x1280(dpi240)',
        label: '720x1280(dpi240)'
    },
    {
        value: '720x1280(dpi320)',
        label: '720x1280(dpi320)'
    }
])

const zoomOptions = ref([
    {
        value: '是',
        label: '是'
    },
    {
        value: '否',
        label: '否'
    }
])

const cpuOptions = ref([
    {
        value: 2,
        label: '2'
    },
    {
        value: 3,
        label: '3'
    },
    {
        value: 4,
        label: '4'
    },
    {
        value: 5,
        label: '5'
    },
    {
        value: 6,
        label: '6'
    },
    {
        value: 7,
        label: '7'
    },
    {
        value: 8,
        label: '8'
    }
])

const memorySizeOptions = ref([

    {
        value: 1024,
        label: '1024'
    },
    {
        value: 2048,
        label: '2048'
    },
    {
        value: 4096,
        label: '4096'
    },
    {
        value: 8192,
        label: '8192'
    }
])

const priorityOptions = ref([
    {
        value: '高',
        label: '高'
    },
    {
        value: '中',
        label: '中'
    },
    {
        value: '低',
        label: '低'
    },
])

const type = ref('')
const rules = ref({
    mirror: [{ required: true, message: '请输入镜像名称', trigger: 'blur' }],
    script: [{ required: true, message: '请输入脚本名称', trigger: 'blur' }],
    clone_mode: [{ required: true, message: '请输入克隆模式', trigger: 'blur' }],
    simulator_type: [{ required: true, message: '请输入模拟器类型', trigger: 'blur' }],
    resolution: [{ required: true, message: '请输入分辨率', trigger: 'blur' }],
    zoom: [{ required: true, message: '请设置窗口缩放', trigger: 'blur' }],
    timeout: [{ required: true, message: '请设置超时时间', trigger: 'blur' }],
    cpu: [{ required: true, message: '请设置cpu', trigger: 'blur' }],
    memory_size: [{ required: true, message: '请设置内存大小', trigger: 'blur' }],
    task_id: [{ required: true, message: '请设置任务id', trigger: 'blur' }],
    game_id: [{ required: true, message: '请设置游戏id', trigger: 'blur' }],
    priority: [{ required: true, message: '请设置优先级占比', trigger: 'blur' }],
    game_type: [{ required: true, message: '请设置游戏类型', trigger: 'blur' }],
})

const page = ref(1)
const total = ref(0)
const pageSize = ref(10)
const tableData = ref([])
const searchInfo = ref({
    searchKey: "task_id",
})

const onReset = () => {
    searchInfo.value = {}
    getTableData()
}
// 搜索

const onSubmit = () => {
    page.value = 1
    pageSize.value = 10
    getTableData()
}

// 分页
const handleSizeChange = (val) => {
    pageSize.value = val
    getTableData()
}

const handleCurrentChange = (val) => {
    page.value = val
    getTableData()
}

// 排序
const sortChange = ({ prop, order }) => {
    if (prop) {
        if (prop === 'ID') {
            prop = 'id'
        }
        searchInfo.value.orderKey = toSQLLine(prop)
        searchInfo.value.desc = order === 'descending'
    }
    getTableData()
}

// 查询
const getTableData = async () => {
    searchInfo.value.task_id = Number(searchInfo.value.task_id)
    const table = await getCentralControlConfList({ page: page.value, pageSize: pageSize.value, ...searchInfo.value })
    if (table.code === 0) {
        tableData.value = table.data.list
        total.value = table.data.total
        page.value = table.data.page
        pageSize.value = table.data.pageSize
    }
}

getTableData()

// 批量操作
const handleSelectionChange = (val) => {
    apis.value = val
}

const deleteVisible = ref(false)
const onDelete = async () => {
    const ids = apis.value.map(item => item.id)
    const res = await deleteCentralControlConfByIds({ ids })
    if (res.code === 0) {
        ElMessage({
            type: 'success',
            message: res.msg
        })
        if (tableData.value.length === ids.length && page.value > 1) {
            page.value--
        }
        deleteVisible.value = false
        getTableData()
    }
}

// 弹窗相关
const apiForm = ref(null)
const initForm = () => {
    apiForm.value.resetFields()
    form.value = {
    }
}

const dialogTitle = ref('新增配置')
const dialogFormVisible = ref(false)
const openDialog = (key) => {
    switch (key) {
        case 'addConf':
            dialogTitle.value = '新增配置'
            break
        case 'editConf':
            dialogTitle.value = '编辑配置'
            break
        default:
            break
    }
    type.value = key
    dialogFormVisible.value = true
}
const closeDialog = () => {
    initForm()
    dialogFormVisible.value = false
}

const editConfFunc = async (row) => {
    const res = await getCentralControlConfById({ id: row.id })
    form.value = res.data
    openDialog('editConf')
}

const enterDialog = async () => {
    apiForm.value.validate(async valid => {
        if (valid) {
            switch (type.value) {
                case 'addConf':
                    {
                        form.value.timeout = Number(form.value.timeout)
                        form.value.task_id = Number(form.value.task_id)
                        form.value.game_id = Number(form.value.game_id)
                        const res = await createCentralControlConf(form.value)
                        if (res.code === 0) {
                            ElMessage({
                                type: 'success',
                                message: '添加成功',
                                showClose: true
                            })
                        }
                        getTableData()
                        closeDialog()
                    }

                    break
                case 'editConf':
                    {
                        form.value.timeout = Number(form.value.timeout)
                        form.value.task_id = Number(form.value.task_id)
                        form.value.game_id = Number(form.value.game_id)
                        const res = await updateCentralControlConf(form.value)
                        if (res.code === 0) {
                            ElMessage({
                                type: 'success',
                                message: '编辑成功',
                                showClose: true
                            })
                        }
                        getTableData()
                        closeDialog()
                    }
                    break
                default:
                    // eslint-disable-next-line no-lone-blocks
                    {
                        ElMessage({
                            type: 'error',
                            message: '未知操作',
                            showClose: true
                        })
                    }
                    break
            }
        }
    })
}

const deleteConfFunc = async (row) => {
    ElMessageBox.confirm('此操作将永久删除此配置, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    })
        .then(async () => {
            const res = await deleteCentralControlConf(row)
            if (res.code === 0) {
                ElMessage({
                    type: 'success',
                    message: '删除成功!'
                })
                if (tableData.value.length === 1 && page.value > 1) {
                    page.value--
                }
                getTableData()
            }
        })
}

</script>
    
<style scoped lang="scss">
.button-box {
    padding: 10px 20px;

    .el-button {
        float: right;
    }
}

.warning {
    color: #dc143c;
}
</style>
    