<template>
    <div class="default-main">
        <TableHeader :showReset="false">
            <template #select>
                <el-radio-group v-model.trim="tableStore.table.params.versionType" @change="tableStore.index()">
                    <el-radio-button label="web" value="WEB" />
                    <el-radio-button label="app" value="APP" />
                </el-radio-group>
            </template>
            <template #operation>
                <el-button type="primary" icon="el-icon-Plus" @click="addMenu">新增版本</el-button>
            </template>
        </TableHeader>
        <Table ref="tableRef">
            <template v-slot:columns>
                <vxe-column field="androidPath" title="Android路径" minWidth="250px"
                    v-if="tableStore.table.params.versionType == 'APP'"></vxe-column>
                <vxe-column field="iosPath" title="IOS路径" minWidth="250px"
                    v-if="tableStore.table.params.versionType == 'APP'"></vxe-column>
            </template>
        </Table>
        <el-dialog width="500px" v-model.trim="dialogVisible" :title="dialogTitle">
            <el-form :inline="false" :model="form" ref="formRef" label-width="auto" class="form-one" :rules="rules">
                <el-form-item label="版本号" prop="appVersion">
                    <el-input maxlength="32" show-word-limit v-model.trim="form.appVersion" placeholder="请输入版本号" />
                </el-form-item>
                <el-form-item label="整改内容">
                    <el-input show-word-limit maxlength="300" type="textarea" v-model.trim="form.content"
                        placeholder="请输入整改内容" />
                </el-form-item>
                <el-form-item label="发布类型">
                    <el-select v-model.trim="form.sev" placeholder="请选择发布类型">
                        <el-option label="优化" :value="0" />
                        <el-option label="bug调整" :value="1" />
                    </el-select>
                </el-form-item>
                <el-form-item label="版本类型">
                    <el-select v-model.trim="form.versionType" placeholder="请选择版本类型">
                        <el-option label="web" value="WEB" />
                        <el-option label="app" value="APP" />
                    </el-select>
                </el-form-item>
                <el-form-item label="Android路径" prop="androidPath" v-if="form.versionType == 'APP'">
                    <el-input v-model.trim="form.androidPath" placeholder="请输入Android路径" />
                </el-form-item>
                <el-form-item label="IOS路径" prop="iosPath" v-if="form.versionType == 'APP'">
                    <el-input v-model.trim="form.iosPath" placeholder="请输入IOS路径" />
                </el-form-item>
            </el-form>

            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="submit">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted, provide } from 'vue'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import { ElMessage } from 'element-plus'
import { addVersion, updateVersion, deleteVersion } from '@/api/systerm'
import router from '@/router/index'
const dialogVisible = ref(false)
const dialogTitle = ref('新增版本')
const isEdit = ref(false)
const form = ref({
    id: '',
    appVersion: '',
    content: '',
    versionType: '',
    sev: '',
    androidPath: '',
    iosPath: ''
})
const rules = {
    appVersion: [{ required: true, message: '请输入版本号', trigger: 'blur' }],
    androidPath: [{ required: true, message: '请输入Android路径', trigger: 'blur' }],
    iosPath: [{ required: true, message: '请输入IOS路径', trigger: 'blur' }]
}
const formRef = ref()
const tableStore = new TableStore({
    url: '/cs-system-boot/appVersion/getAllData',
    method: 'POST',
    showPage: false,
    paramsPOST: true,
    column: [
        {
            title: '序号',
            width: 80,
            formatter: (row: any) => {
                return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
            }
        },
        { title: '版本号', field: 'versionName', width: '150' },
        { title: '创建时间', field: 'createTime', width: '220', sortable: true },
        {
            title: '发布类型',
            field: 'sev',
            formatter: row => {
                return row.cellValue == 0 ? '优化' : 'bug调整'
            },
            width: '150'
        },
        { title: '整改内容', field: 'content', minWidth: '250' },
        {
            title: '操作',
            fixed: 'right',
            align: 'center',
            width: '180',
            render: 'buttons',
            buttons: [
                {
                    name: 'edit',
                    title: '编辑',
                    type: 'primary',
                    icon: 'el-icon-EditPen',
                    render: 'basicButton',
                    click: row => {
                        editMenu(row)
                    }
                },
                // {
                //     name: 'del',
                //     title: '删除',
                //     type: 'danger',
                //     icon: 'el-icon-Delete',
                //     render: 'confirmButton',
                //     popconfirm: {
                //         confirmButtonText: '确认',
                //         cancelButtonText: '取消',
                //         confirmButtonType: 'danger',
                //         title: '确定删除版本信息吗？'
                //     },
                //     click: row => {
                //         deleteVersion({ id: row.id }).then(() => {
                //             ElMessage.success('删除成功')
                //             tableStore.index()
                //         })
                //     }
                // }
            ]
        }
    ],
    beforeSearchFun: () => {
        // console.log("🚀 ~ tableStore.table.params", tableStore.table)
        // if (tableStore.table.params.versionType == 'APP') {
        // }
    }
})
tableStore.table.params.versionType = 'WEB'
provide('tableStore', tableStore)

onMounted(async () => {
    tableStore.index()
    // await queryByCode('Direct_Connected_Device').then((res) => {
    //     queryByid(res.data.id).then((res) => {
    //         DevTypeOptions.value = res.data
    //     })
    // })
    // tableStore.table.params.devType = ''
})
const submit = async () => {
    await formRef.value.validate()
    const request = isEdit.value ? updateVersion(form.value) : addVersion(form.value)
    request.then(() => {
        ElMessage.success(isEdit.value ? '修改成功' : '新增成功')
        tableStore.index()
        dialogVisible.value = false
        if (!isEdit.value) {
            router.go(0)
        }
    })
}
const addMenu = () => {
    isEdit.value = false
    dialogTitle.value = '新增版本'
    dialogVisible.value = true
    form.value.id = ''
    form.value.appVersion = tableStore.table.data[0]?.versionName || ''
    form.value.content = ''
    form.value.iosPath = ''
    form.value.androidPath = ''
    form.value.sev = tableStore.table.data[0]?.sev ?? 0
    form.value.versionType = tableStore.table.data[0]?.versionType || tableStore.table.params.versionType || 'WEB'
}
const editMenu = (row: any) => {
    isEdit.value = true
    dialogTitle.value = '编辑版本'
    dialogVisible.value = true
    form.value.id = row.id
    form.value.appVersion = row.versionName || ''
    form.value.content = row.content || ''
    form.value.sev = row.sev ?? 0
    form.value.versionType = row.versionType || 'WEB'
    form.value.androidPath = row.androidPath || ''
    form.value.iosPath = row.iosPath || ''
}
</script>
