<template>
    <el-dialog :title=" isEdit ?'编辑':'新增'" :close-on-click-modal=" false" append-to-body
        :visible.sync="visible" class="JNPF-dialog JNPF-dialog_center" lock-scroll width="600px"
        :before-close="clearDataForm">
        <el-row :gutter="15" class="">
            <el-form ref="formRef" :model="dataForm" :rules="dataRule" size="small"
                label-width="100px" label-position="right">
                <template v-if="!loading">
                    <!-- 具体表单 -->

                    <el-col :span="24">
                        <jnpf-form-tip-item label="上级" align="left" prop="parentId"
                            v-if="!dataForm.subButtons.length">
                            <JnpfTreeSelect v-model="dataForm.parentId" :options="treeList"
                                clearable :props="treeProps" placeholder="选择上级菜单"
                                @change="treeSelectChange(arguments,'pc')" />
                        </jnpf-form-tip-item>
                    </el-col>

                    <el-col :span="24">
                        <jnpf-form-tip-item label="菜单名称" align="left" prop="name">
                            <JnpfInput v-model="dataForm.name" placeholder=" 请输入" clearable
                                :style='{"width":"100%"}'>
                            </JnpfInput>
                        </jnpf-form-tip-item>
                    </el-col>

                    <el-col :span="24">
                        <jnpf-form-tip-item label="菜单类型" align="left" prop="type"
                            v-if="!dataForm.subButtons.length">
                            <JnpfSelect v-model="dataForm.type" placeholder=" 请选择" clearable
                                @change="typeChange" :style='{"width":"100%"}' :options="typeList"
                                :props="typeProps">
                            </JnpfSelect>
                        </jnpf-form-tip-item>
                    </el-col>

                    <el-col :span="24" v-if="dataForm.type == 'miniprogram'">
                        <jnpf-form-tip-item label="菜单路径" align="left" prop="pagePath">
                            <JnpfTextarea v-model="dataForm.pagePath" placeholder="请输入"
                                :style='{"width":"100%"}' true type="textarea"
                                :autosize='{"minRows":4,"maxRows":4}'>
                            </JnpfTextarea>
                        </jnpf-form-tip-item>
                    </el-col>

                    <el-col :span="24" v-if="dataForm.type == 'view'">
                        <jnpf-form-tip-item label="菜单路径" align="left" prop="url">
                            <JnpfTextarea v-model="dataForm.url" placeholder="请输入"
                                :style='{"width":"100%"}' true type="textarea"
                                :autosize='{"minRows":4,"maxRows":4}'>
                            </JnpfTextarea>
                        </jnpf-form-tip-item>
                    </el-col>

                    <el-col :span="24" v-if="dataForm.type == 'click'">
                        <jnpf-form-tip-item label="KEY值" align="left" prop="key">
                            <JnpfInput v-model="dataForm.key" placeholder=" 请输入" clearable
                                :style='{"width":"100%"}'>

                            </JnpfInput>
                        </jnpf-form-tip-item>
                    </el-col>

                    <!-- 表单结束 -->
                </template>
            </el-form>
        </el-row>
        <span slot="footer" class="dialog-footer">
            <el-button type="info" @click="clearDataForm()"> 取消</el-button>
            <el-button type="primary" @click="confirm()" :loading="btnLoading"> 确
                定</el-button>
        </span>
    </el-dialog>
</template>

<script>

import {
    createMenuByJson2,
    getFirstMenu,
    updateMenuByJson2
} from "@/api/governmentCloud/officialAccount/menuManagement/menuManagement";


export default {
    data() {
        return {
            visible: false,
            loading: false,
            isEdit: null,
            dataForm: {
                name: undefined,
                type: undefined,
                url: undefined,
                parentId: 0,
                pagePath: undefined,
                appId: 'wx333b02c66798fc0a',
                subButtons: []
            },
            dataValueAll: {
                name: undefined,
                type: undefined,
                url: undefined,
                parentId: 0,
                pagePath: undefined,
                appId: 'wx333b02c66798fc0a',
                subButtons: []

            },
            dataRule: {
                name: [
                    {
                        required: true,
                        message: '请输入',
                        trigger: 'blur'
                    },
                ],
                type: [
                    {
                        required: true,
                        message: '请选择',
                        trigger: 'change'
                    },
                ],
                url: [
                    {
                        required: false,
                        message: '请输入',
                        trigger: 'blur'
                    },
                ],
                pagePath: [
                    {
                        required: false,
                        message: '请输入',
                        trigger: 'blur'
                    },
                ],
                key: [
                    {
                        required: false,
                        message: '请输入',
                        trigger: 'blur'
                    },
                ]
            },
            btnLoading: false,
            noneBtnDealImg: false,
            fileList: [],

            typeList: [
                {
                    type: '小程序链接',
                    value: 'miniprogram'
                },
                {
                    type: 'H5链接',
                    value: 'view'
                },
                {
                    type: '点击',
                    value: 'click'
                }
            ],
            typeProps: { "label": "type", "value": "value" },
            treeList: [],
            treeProps: {
                value: 'id',             // ID字段名
                label: 'name',       // 显示名称
                children: 'subButtons',    // 子级字段名
            }

        }
    },
    methods: {
        init(row, isEdit) {
            this.isEdit = isEdit
            console.log(row)
            if (this.isEdit) this.dataForm = row
            getFirstMenu().then(res => {
                if (res.code == 200) {
                    this.treeList = res.data
                    this.treeList.forEach(item => {
                        item.children = JSON.parse(JSON.stringify(item.subButtons))
                        delete item.subButtons
                    })
                    this.visible = true

                } else {
                    this.$message.warning(res.msg)
                    this.visible = true

                }
            })


        },
        typeChange(e) {
            console.log(e)
            if (e == 'miniprogram') {
                this.dataRule.url[0].required = false
                this.dataRule.pagePath[0].required = true
                this.dataRule.key[0].required = false
            } else if (e == 'view') {
                this.dataRule.pagePath[0].required = false
                this.dataRule.url[0].required = true
                this.dataRule.key[0].required = false
            } else if (e == 'click') {
                this.dataRule.pagePath[0].required = false
                this.dataRule.url[0].required = false
                this.dataRule.key[0].required = true
            }
        },
        treeSelectChange(data, type) {
            console.log(data)
            console.log(type)
        },
        clearDataForm() {
            this.dataForm = JSON.parse(JSON.stringify(this.dataValueAll))
            this.visible = false
        },
        confirm() {
            if (!this.isEdit) {
                this.addMenu()
            } else {
                if (this.dataForm.type == 'view' && !this.startsWithHttps(this.dataForm.url)) {
                    this.$message.error('网页类型路径必须https://开头')
                } else {
                    let params = JSON.parse(JSON.stringify(this.dataForm))
                    delete params.index
                    delete params.createTime
                    updateMenuByJson2(params).then(res => {
                        console.log(res)
                        if (res.code == 200) {
                            this.$message.success(res.msg)
                            this.$emit('refresh')

                            this.clearDataForm()
                            this.visible = false
                        }
                    })
                }
            }
        },
        startsWithHttps(url) {
            // 使用正则表达式检查字符串是否以 "https://" 开头
            const regex = /^https:\/\//i;
            return regex.test(url);
        },
        addMenu() {
            let flag = true

            if (this.dataForm.parentId == '0' && this.treeList.length > 2) {
                this.$message.error('最多存在三个一级菜单')
                flag = false
            } else {
                this.treeList.forEach(item => {
                    if (item.id == this.dataForm.parentId && item.children.length > 4) {
                        this.$message.error('该一级菜单最多存在五个二级菜单')
                        flag = false
                    }
                })
            }




            if (flag) {
                let params = {
                    name: this.dataForm.name,
                    type: this.dataForm.type,
                    parentId: this.dataForm.parentId,
                    subButtons: []
                }
                if (this.dataForm.type == 'miniprogram') {
                    params.pagePath = this.dataForm.pagePath
                    params.appId = this.dataForm.appId
                    params.url = this.dataForm.pagePath
                }
                if (this.dataForm.type == 'view') {
                    params.url = this.dataForm.url
                }

                if (this.dataForm.type == 'click') {
                    params.key = this.dataForm.key
                }
                createMenuByJson2(params).then(res => {
                    console.log(res)
                    if (res.code == 200) {
                        this.$message.success(res.msg)
                        this.$emit('refresh')

                        this.clearDataForm()
                        this.visible = false
                    } else {
                        this.$message.warning(res.msg)
                    }
                })
            }
        }

    }
}
</script>

<style lang="scss" scoped>
::v-deep .disUoloadSty .el-upload--picture-card {
    display: none; /* 上传按钮隐藏 */
}
</style>