<template>
    <div>
        <div class="gva-search-box">
            <el-form ref="searchForm" :inline="true" :model="searchInfo">
                <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.responsible_person" 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-button size="small" icon="refresh" @click="onReset">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="gva-table-box">
            <el-table :data="tableData" border @sort-change="sortChange" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" />
                <el-table-column align="left" label="任务ID" min-width="60" prop="task_id" sortable="custom" />
                <el-table-column align="left" label="脚本名称" min-width="60" prop="name" sortable="custom" />
                <el-table-column align="left" label="负责人" min-width="60" prop="responsible_person" sortable="custom" />
                <el-table-column align="left" label="下载链接" min-width="80" prop="url" />
                <el-table-column align="left" label="版本号" min-width="60" prop="version" sortable="custom" />
                <el-table-column align="left" label="md5值" min-width="60" prop="md5_string" />
                <el-table-column align="left" label="状态" min-width="60">
                    <template #default="scope">
                        <el-switch v-model="scope.row.state" inline-prompt :active-value="1" :inactive-value="-1"
                            @change="() => { switchEnable(scope.row) }" />
                    </template>
                </el-table-column>
                <el-table-column align="left" label="创建时间" min-width="110" prop="create_time" sortable="custom" />
                <el-table-column align="left" label="更新时间" min-width="80" prop="update_time" />

            </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>
    </div>
</template>
  
<script>
export default {
    name: 'ScriptList',
}
</script>
  
<script setup>
import {
    statusChange,
    getScriptList,
} from '@/api/upload'
import {
    selectResponsiblePerson,
} from '@/api/responsiblePerson'
import { useUserStore } from '@/pinia/modules/user'
import { toSQLLine } from '@/utils/stringFun'
import warningBar from '@/components/warningBar/warningBar.vue'
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { downloadTemplate } from '@/api/excel'


const path = ref(import.meta.env.VITE_BASE_API)
const userStore = useUserStore()
const typeFiletr = (value) => {
    const target = typeOptions.value.filter(item => item.value === value)[0]
    return target && `${target.label}`
}

const statusFiletr = (value) => {
    const target = statusOptions.value.filter(item => item.value === value)[0]
    return target && `${target.label}`
}
const ResponsiblePerson = ref([])
const getResponsiblePerson = async () => {
    const table = await selectResponsiblePerson()
    if (table.code === 0) {
        ResponsiblePerson.value = table.data
    }
}
getResponsiblePerson()
const apis = ref([])

const form = ref({
    task_id: '',
    name: '',
    responsible_person: '',
    url: '',
    version: '',
    md5_string: '',
    state: '',
})
const statusOptions = ref([
    {
        value: -1,
        label: '关闭',
        type: 'wain'
    },
    {
        value: 1,
        label: '使用',
        type: 'success'
    }
])

const GamePortOptions = ref([
])

const accountTypeOptions = ref([
])

const loginMethodOptions = ref([
])


const type = ref('')


const page = ref(1)
const total = ref(0)
const pageSize = ref(10)
const tableData = ref([])
const searchInfo = ref({})

const onReset = () => {
    searchInfo.value = {}
    getTableData()
}
// 搜索
const onSubmit = () => {
    page.value = 1
    pageSize.value = 10
    searchInfo.value.task_id = Number(searchInfo.value.task_id)
    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 () => {
    const table = await getScriptList({ page: page.value, pageSize: pageSize.value, ...searchInfo.value })
    if (table.code === 0) {
        tableData.value = table.data.list
        total.value = table.data.total
        // GamePortOptions.value = table.data.option.game_port
        // loginMethodOptions.value = table.data.option.login_type
        // accountTypeOptions.value = table.data.option.account_type
        // links.value = table.data.option.game_list
        page.value = table.data.page
        pageSize.value = table.data.pageSize
    }
}

getTableData()

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

const deleteVisible = ref(false)

// 弹窗相关
const apiForm = ref(null)
const initForm = () => {
    apiForm.value.resetFields()
    form.value = {
        task_id: '',
        name: '',
        responsible_person: '',
        url: '',
        version: '',
        md5_string: '',
        state: '',
    }
}

const switchEnable = async (row) => {
    const res = await statusChange({ state: row.state, id: row.id })
    if (res.code === 0) {
        ElMessage({ type: 'success', message: `${row.state === -1 ? '停止' : '开启'}成功` })
    }
}

const links = ref([])

const querySearch = (queryString, cb) => {
    const results = queryString
        ? links.value.filter(createFilter(queryString))
        : links.value
    // call callback function to return suggestion objects
    cb(results)
}
const createFilter = (queryString) => {
    return (restaurant) => {
        return (
            restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        )
    }
}

const handleSelect = (item) => {
    form.value.game_id = item.game_id
    console.log(item)
}

const handleIconClick = (ev) => {
    console.log(ev)
}

// links.value = loadAll()

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

    .el-button {
        float: right;
    }
}

:deep(.el-tabs__nav-scroll) {
    width: 35%;
    margin: 0 auto
}

:deep(.el-tabs__nav-scroll) .warning {
    color: #dc143c;
}
</style>
  