<template>
    <div class='app-container'>
        <el-button type="primary" icon="plus" size="small" style="margin-bottom: 20px;" @click="addStso">添加</el-button>

        <el-table :data="stsoData" border stripe>
            <el-table-column label="docType" prop="docType" align="center" />
            <el-table-column label="单据名称" prop="name" align="center" />
            <el-table-column label="单据唯一标识" prop="sFormId" align="center" />
            <el-table-column label="接收地址" prop="receiveAddress" align="center" />
            <el-table-column label="创建时间" prop="createTime" align="center" />
            <el-table-column label="操作" align="center" width="120">
                <template #default="scope">
                    <el-button type="primary" link size="small" @click="editStso(scope.row)">编辑</el-button>
                    <el-divider direction="vertical" />
                    <el-button type="danger" link size="small" @click="delStso(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog v-model="showDialog" :title="title" width="30%" :before-close="handleClose">
            <el-form :model="formData" ref="formRef" :rules="fromRules" label-width="120px">
                <el-form-item label="选择产品" width="60px">
                    <el-select v-model="formData.platformProductRelationId" clearable placeholder="请选择产品"
                        @change="selectChange">
                        <el-option v-for="item in productOptions" :key="item.id" :label="item.label"
                            :value="item.productAfterCode" />
                    </el-select>
                </el-form-item>
                <el-form-item label="同步表单" prop="commonConfigId">
                    <el-select v-model="formData.commonConfigId" class="m-2" placeholder="请选择">
                        <el-option v-for="item in commonConfigData" :key="item.id" :label="item.name"
                            :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="接收地址" prop="receiveAddress">
                    <el-input v-model="formData.receiveAddress" placeholder="请输入接收地址" />
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="handleClose">取消</el-button>
                <el-button type="primary" @click="onConfirm">确认</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang='ts'>
import { ref } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import { getStsoList, createStso, updateStso, deleteStso } from '@/services/api/stso'
import { getPlatformProductList, getCommonParamData } from '@/services/api/platformProducts'
import { getCommonConfig } from '@/services/api/systemApi/fieldConfiguration/commonConfig'

// 查询参数
const listQuery = ref({
    platformProductRelationId: 1,
    pageNo: 1, // 页码
    pageSize: 10, // 每页数量
})
const total = ref(0)
const stsoData = ref()
const formRef = ref()
const productOptions = ref(); // 产品数据源

const formData = ref({
    platformProductRelationId: '',
    commonConfigId: '', // 通用配置id
    receiveAddress: '' // 接收地址
})
// 校验规则
const fromRules = ref({
    commonConfigId: [{ required: true, message: '', trigger: 'change' }],
    receiveAddress: [{ required: true, message: '', trigger: 'blur' }],
})
const commonConfigData = ref()
const showDialog = ref(false)
const title = ref('新增')

// 添加
const addStso = () => {
    title.value = '新增'
    showDialog.value = true
}
// 添加
const editStso = (row: any) => {
    title.value = '编辑'
    formData.value = row
    showDialog.value = true
}

const selectChange = (value: string) => {
    if (value) {
        getCommonParamData(value).then((res: any) => {
            if (res.code === 200) {
                console.log(res.data);
                // formData.value.receiveAddress = res.data
            }
        })
    }
}
// 添加
const delStso = (id: number) => {
    ElMessageBox.confirm(
        '确认删除?',
        '提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            deleteStso(id).then((res: any) => {
                if (res.code === 200) {
                    initStsoList()
                    ElMessage({
                        type: 'success',
                        message: '删除成功！',
                    })
                }
            })

        })
        .catch(() => { return })
}

const onConfirm = () => {
    formRef.value?.validate((valid: boolean, fields: any) => {
        if (valid) {
            if (title.value === '新增') {
                createStso(formData.value).then((res: any) => {
                    if (res.code === 200) {
                        initStsoList()
                        handleClose()
                        ElMessage({ type: 'success', message: '添加成功！' })
                    }
                })
            } else {
                updateStso(formData.value).then((res: any) => {
                    if (res.code === 200) {
                        initStsoList()
                        handleClose()
                        ElMessage({ type: 'success', message: '修改成功！' })
                    }
                })
            }
        } else {
            console.log(fields);
        }
    })

}

const handleClose = () => {
    formData.value = {
        commonConfigId: '',
        receiveAddress: '',
        platformProductRelationId: ''
    }
    showDialog.value = false
}

// 获取通用配置id数据
const initCommonConfig = () => {
    getCommonConfig(1, 1, 10, '', 3).then((res: any) => {
        if (res.code === 200) {
            commonConfigData.value = res.data.records
        }
    })
}
initCommonConfig()

// 初始化数据
const initStsoList = () => {
    getStsoList(listQuery.value).then((res: any) => {
        if (res.code === 200) {
            stsoData.value = res.data.records
            total.value = res.data.total
        }
    })
}
initStsoList()

// 初始化产品数据
const initProduct = () => {
    getPlatformProductList().then((res: any) => {
        if (res.code === 200) {
            res.data.records.forEach((item: any) => {
                item.label = item.productAfterCodeName + '-' + item.productBeforeCodeName
            })
            productOptions.value = res.data.records
            console.log(productOptions.value);

        }
    })
}

initProduct()
</script>
 
<style lang = "scss" scoped>
</style>