<template>
    <el-button type="primary" icon="plus" @click="addProductShow" style="margin: 20px 0 0 20px">新增</el-button>
    <div class="container">
        <el-row justify="start" style="width: 100%; height: 100%">
            <el-col :span="12" style="padding-right: 20px">
                <el-table :data="productData" border>
                    <el-table-column label="产品1" prop="productBeforeCodeName" align="center" />
                    <el-table-column label="产品2" prop="productAfterCodeName" align="center" />
                    <el-table-column label="操作" align="center" fixed="right" width="255">
                        <template #default="scope">
                            <div style="display: flex; justify-content: center;">
                                <el-dropdown @command="handleCommand">
                                    <span
                                        style="cursor: pointer;color: var(--el-color-primary);display: flex;align-items: center;font-size: 12px;">
                                        同步
                                        <el-icon>
                                            <arrow-down />
                                        </el-icon>
                                    </span>
                                    <template #dropdown>
                                        <el-dropdown-menu>
                                            <el-dropdown-item
                                                :command="{ flag: 'enable', code: scope.row.productBeforeCode }">启用
                                            </el-dropdown-item>
                                            <el-dropdown-item
                                                :command="{ flag: 'deactivate', code: scope.row.productBeforeCode }">停用
                                            </el-dropdown-item>
                                        </el-dropdown-menu>
                                    </template>
                                </el-dropdown>
                                <el-divider direction="vertical" />
                                <el-button type="primary" link size="small" @click="selectScene(scope.row.id)">选择场景
                                </el-button>
                                <el-divider direction="vertical" />
                                <el-button type="primary" link size="small" @click="editProduct(scope.row)">编辑
                                </el-button>
                                <el-divider direction="vertical" />
                                <el-button type="danger" link size="small" @click="delProduct(scope.row.id)">删除
                                </el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
    </div>

    <el-dialog v-model="showAddDialog" :title="title" width="50%" :beforeClose="handleClose">
        <el-row justify="start" style="padding: 0 10%">
            <el-col :span="6" style="text-align: center">
                <el-button type="primary" :disabled="disabled" circle style="width: 100px; height: 100px"
                    @click="selectBeforeProducts">
                    {{ beforeTitle }}</el-button>
            </el-col>

            <el-col :span="12" style="
                display: flex;
                align-items: center;
                justify-content: center;
                text-align: center;
                ">
                <div class="line-arrow">
                    <div class="line"></div>
                </div>
            </el-col>

            <el-col :span="6" style="text-align: center">
                <el-button type="primary" :disabled="disabled" circle style="width: 100px; height: 100px"
                    @click="selectAfterProducts">
                    {{ afterTitle }}</el-button>
            </el-col>
            <el-col :span="11" style="margin-top: 20px">
                <preview-product ref="previewProductBeforeRef" :code="productBeforeCode" @codeData="codeData" />
            </el-col>
            <el-col :span="2"> </el-col>
            <el-col :span="11" style="margin-top: 20px">
                <preview-product ref="previewProductAfterRef" :code="productAfterCode" @codeData="codeData" />
            </el-col>
            <el-col :span="24" style="text-align: center">
                <el-button type="primary" @click="onConfirm" style="width: 88px; margin-top: 20%">保存产品
                </el-button>
            </el-col>
        </el-row>
    </el-dialog>

    <add-product ref="addProductRef" :options="options" :productAfterCode="productAfterCode"
        :productBeforeCode="productBeforeCode" @codeChange="codeChange" />

    <enable-vue ref="enableRef" @cornData="cornData" />
</template>

<script setup lang="ts">
import { ref, computed, nextTick } from 'vue'
import {
    getPlatformProductList,
    createPlatformProduct,
    deletePlatformProduct,
    getDictItemList,
    getCommonParam,
    postCommonParam,
    productEnable,
    productDeactivate,
    productStatus
} from '@/services/api/platformProducts'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
import addProduct from './components/platformProducts/addProduct.vue'
import previewProduct from './components/platformProducts/previewProduct.vue'
import enableVue from './components/platformProducts/enable.vue'

const router = useRouter()
const options = ref([] as any) // select 数据源
const showAddDialog = ref(false)
const productAfterCode = ref() // 第一个选择产品
const productBeforeCode = ref() //  第二个选择产品
const productData = ref() // 产品数据
const productAfterData = ref()
const productBeforeData = ref()
const addProductRef = ref()
const previewProductAfterRef = ref()
const previewProductBeforeRef = ref()
const enableRef = ref()
const disabled = ref(false) // 选择产品是否禁用
const title = ref('选择产品')
const afterTitle = computed(() => {
    if (productAfterCode.value) {
        let title = ''
        options.value.map((item: any) => {
            if (productAfterCode.value === item.code) title = item.title
        })
        return title
    } else return '选择产品'
})

const beforeTitle = computed(() => {
    if (productBeforeCode.value) {
        let title = ''
        options.value.map((item: any) => {
            if (productBeforeCode.value === item.code) title = item.title
        })
        return title
    } else return '选择产品'
})

// 添加产品
let addProductShow = () => {
    disabled.value = false
    title.value = '选择产品'
    showAddDialog.value = true
}

// 选择前产品
const selectAfterProducts = () => {
    addProductRef.value.status = false
    addProductRef.value.type = 'after'
    addProductRef.value.showDialog = true
}

// 选择后产品
const selectBeforeProducts = () => {
    addProductRef.value.status = true
    addProductRef.value.type = 'before'
    addProductRef.value.showDialog = true
}

const codeChange = (code: string, value: string) => {
    getParam(code, value)
}

const getParam = (code: string, value: string) => {
    if (code === 'after') {
        getCommonParam(value).then((res: any) => {
            if (res.code === 200) {
                previewProductAfterRef.value.widgetForm = res.data
                previewProductAfterRef.value.previewVisible = true
                productAfterCode.value = value
            }
        })
    } else {
        getCommonParam(value).then((res: any) => {
            if (res.code === 200) {
                previewProductBeforeRef.value.widgetForm = res.data
                previewProductBeforeRef.value.previewVisible = true
                productBeforeCode.value = value
            }
        })
    }
}

// 获取间隔时间
const cornData = (data: string) => {
    productEnable(data).then((res: any) => {
        if (res.code === 200) {
            ElMessage({ type: 'success', message: '启动成功' })
        }
    })

}

// 获取保存数据
const codeData = (code: string, data: any) => {
    console.log(
        code,
        data,
        productBeforeCode.value,
        productAfterCode.value,
        'data'
    )
    if (code === productBeforeCode.value) productBeforeData.value = data
    else productAfterData.value = data
}

const handleCommand = (data: any) => {
    switch (data.flag) {
        // 启用同步
        case "enable":
            productStatus(data.code).then((res: any) => {
                if (res.code === 200) {
                    enableRef.value.formData.cronExpression = res.data.cronExpression
                }
            })
            enableRef.value.formData.code = data.code
            enableRef.value.showDialog = true
            break;
        // 停用同步
        case "deactivate":
            ElMessageBox.confirm('确认停用?', '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                productDeactivate(data.code).then((res: any) => {
                    if (res.code === 200) {
                        ElMessage({ type: 'success', message: '停用成功' })
                    }
                })
            }).catch(() => {
                return
            })
            break
        default:
            break;
    }
}

// 选择场景
const selectScene = (id: string) => {
    sessionStorage.setItem('platformProductRelationId', id)
    router.push({ path: '/manage/fieldConfiguration' }) //调用router.push()
}

// 编辑产品
const editProduct = (row: any) => {
    showAddDialog.value = true
    disabled.value = true
    title.value = '编辑产品'
    productAfterCode.value = row.productAfterCode
    productBeforeCode.value = row.productBeforeCode
    nextTick(() => {
        previewProductBeforeRef.value.previewVisible = true
        previewProductAfterRef.value.previewVisible = true
        getParam('after', row.productAfterCode)
        getParam('before', row.productBeforeCode)
    });
}

// 删除产品
const delProduct = (id: number) => {
    ElMessageBox.confirm('确认删除?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
    })
        .then(() => {
            deletePlatformProduct({ id }).then((res: any) => {
                if (res.code === 200) {
                    init()
                    ElMessage({
                        type: 'success',
                        message: '删除成功！',
                    })
                }
            })
        })
        .catch(() => {
            return
        })
}

const onConfirm = () => {
    if (!productAfterCode.value && !productAfterCode.value)
        return ElMessage({ type: 'warning', message: '产品不能为空' })
    let data = {
        productAfterCode: productAfterCode.value,
        productBeforeCode: productBeforeCode.value,
    }
    previewProductAfterRef.value.handleGetData()
    previewProductBeforeRef.value.handleGetData()
    setTimeout(() => {
        saveCommonParam(productBeforeCode.value, productBeforeData.value)
        saveCommonParam(productAfterCode.value, productAfterData.value)
        if (title.value === '选择产品') createPlatformProduct(data).then((res: any) => {
            if (res.code === 200) {
                init()
                handleClose()
                ElMessage({ type: 'success', message: '保存成功' })
            }
        })
    }, 1000)
}

const saveCommonParam = (code: string, data: any) => {
    postCommonParam({ code, data }).then((res: any) => {
        if (res.code === 200 && code === productAfterCode.value && title.value === '编辑产品') {
            handleClose()
            ElMessage({ type: 'success', message: '保存成功' })
        }
    })
}

// 查询字典项
const initDictItemList = () => {
    getDictItemList({ pageNo: 1, pageSize: 999 }).then((res: any) => {
        if (res.code === 200) {
            options.value = res.data.records
        }
    })
}
initDictItemList()

// 初始化数据
const init = () => {
    getPlatformProductList().then((res: any) => {
        if (res.code === 200) {
            productData.value = res.data.records
        }
    })
}

init()

const handleClose = () => {
    productAfterCode.value = ''
    productBeforeCode.value = ''
    productBeforeData.value = ''
    productAfterData.value = ''
    previewProductAfterRef.value.previewVisible = false
    previewProductBeforeRef.value.previewVisible = false
    showAddDialog.value = false
}
</script>

<style lang="scss" scoped>
.container {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.line-arrow {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 50px;
    width: 100%;

    .line {
        width: 100%;
        border: 1px solid #dcdfe6;
    }

    .arrow {
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-left: 10px solid #dcdfe6;
    }
}
</style>
