<template>
    <div class="bigBox">
        <MOSTY.FromPage :title="props.obj.title" @closeDialog="handleClose">
            <template #content>
                <MOSTY.Assort :title="'基础信息'" />
                <div class="fromBox">
                    <el-form ref="ruleFormRef2" :model="Fromobj" :rules="rules" :disabled="!props.obj.savebtn"
                        label-width="120px" class="demo-ruleForm" status-icon :inline="true">
                        <el-form-item label="所属分组:" prop="typeid">
                            <el-select v-model="Fromobj.typeid" style="width: 337px">
                                <el-option v-for="item in props.obj.fzList" :key="item.id" :label="item.name"
                                    :value="item.id" @click="cahngename(item)" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="模块名称:" prop="name">
                            <el-input v-model="Fromobj.name" type='text' clearable style='width:337px'></el-input>
                        </el-form-item>
                        <el-form-item label="唯一码:" prop="code">
                            <el-input v-model="Fromobj.code" type='text' clearable style='width:337px'></el-input>
                        </el-form-item>

                        <el-form-item label="模块资源:" prop="assetMd5" style="width: 100%;">
                            <MOSTY.Upload :widthNumber="435" :limit="1" :nopicer="true" :isImg="false"
                                :ShowfileList="true" v-model="Fromobj.assetMd5" :showinput="true" :delrow="delrow"
                                :isEdit="fileEdit">
                            </MOSTY.Upload>
                        </el-form-item>
                        <el-form-item label="缩略图:" prop="imageMd5" style="width: 100%;">
                            <MOSTY.Upload :width="'100%'" :limit="1" :nopicer="false" :isImg="true"
                                :ShowfileList="false" v-model="Fromobj.imageMd5" :nameshow='true'
                                :gsgfList='["png", "jpg", "jpeg", "bmp", "gif"]'>
                            </MOSTY.Upload>
                        </el-form-item>
                    </el-form>
                </div>
                <div>
                    <MOSTY.Assort :title="'模块子表'" />
                    <div>
                        <el-button class="addbtn" type="primary" @click="addzb" v-if="props.obj.savebtn">
                            <el-icon>
                                <CirclePlus />
                            </el-icon>
                            <span>新增</span>
                        </el-button>
                    </div>
                    <el-table ref="multipleTableRef" stripe :data="tableData" style="width: 100%" height="30vh" border
                        v-loading="tableloading">
                        <el-table-column label="名称" show-overflow-tooltip property="name"></el-table-column>
                        <el-table-column label="唯一码" property="code"></el-table-column>
                        <el-table-column label="操作">
                            <template #default="scope">
                                <span class="operedit" v-if="props.obj.savebtn"
                                    @click="handleCbj(scope.row, $index)"><el-icon>
                                        <EditPen />
                                    </el-icon>修改</span>
                                <el-popconfirm v-if="props.obj.savebtn" confirm-button-text="是" cancel-button-text="否"
                                    icon-color="red" title="确定要删除?" @confirm="delRow(scope.row)">
                                    <template #reference>
                                        <span class="operdel" size="small">
                                            <el-icon>
                                                <Delete />
                                            </el-icon>
                                            删除</span>
                                    </template>
                                </el-popconfirm>
                                <span class="operesee" @click="handleCbjxq(scope.row)"><el-icon>
                                        <Compass />
                                    </el-icon>查看</span>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </template>
            <template #footer>

                <el-button type="primary" @click="submitzh(ruleFormRef2)" v-loading='loadingshowzh'
                    v-if="props.obj.savebtn">
                    <el-icon>
                        <DocumentChecked />
                    </el-icon>保存
                </el-button>
                <el-button @click="handleClose">
                    <el-icon>
                        <DocumentDelete />
                    </el-icon>关闭
                </el-button>
            </template>
        </MOSTY.FromPage>
        <el-dialog v-model="dialogVisibles" :title="title" width="50%" :before-close="handleClosezb">
            <el-form ref="ruleFormRef" :model="zbobj" :rules="rules2" :disabled="!saveBtns" label-width="120px"
                class="demo-ruleForm" status-icon :inline="true" style="display: block;">
                <el-form-item label="分组名称:" prop="name">
                    <el-input v-model="zbobj.name" type='text' clearable style='width:337px'></el-input>
                </el-form-item>
                <el-form-item label="唯一码:" prop="code">
                    <el-input v-model="zbobj.code" type='text' clearable style='width:337px'></el-input>
                </el-form-item>
                <el-form-item label="资源路径:" prop="urls">
                    <el-button @click="onClickAdd" v-if='saveBtns'>添加</el-button>
                    <el-input v-for="(item, index) in zbobj.urls" :key="index" v-model="item.url" type='text' clearable
                        style='width:337px' class="mt10 mr10"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">

                    <el-button type="primary" @click="submitzb(ruleFormRef)" v-loading='loadingshowzh' v-if="saveBtns">
                        <el-icon>
                            <DocumentChecked />
                        </el-icon>
                        <span>保存</span>
                    </el-button>
                    <el-button @click="handleClosezb"> <el-icon>
                            <DocumentDelete />
                        </el-icon>
                        <span>关闭</span></el-button>
                </div>
            </template>
        </el-dialog>

    </div>
</template>

<script setup>
import { getImgUrl } from "@/utils/tools.js"
import { reactive, ref, onMounted, getCurrentInstance, defineAsyncComponent } from "vue"
import * as MOSTY from "@/components/MyComponents/index"
import * as rule from "@/utils/rules.js"
import { ElMessage } from "element-plus"
import { postApi, getApi } from "@/api/tobAcco_api.js"
const { proxy } = getCurrentInstance()
const loadingshowzh = ref(false)
const dialogVisibles = ref(false)
const saveBtns = ref(true)
const emit = defineEmits("changePage");
const Fromobj = ref({

});
const tableData = ref([])
const title = ref('新增')
const zbobj = ref({ urls: [{ url: '' }] })
const props = defineProps({
    obj: {
        type: Object,
        default: () => { }
    }
})
const ruleFormRef2 = ref()
const ruleFormRef = ref()
const rules = reactive({
    typeid: [{ required: true, message: "请选择分值", trigger: "blur" }],
    name: [{ required: true, message: "请输入模块名称", trigger: "blur" }],
    code: [{ required: true, message: "请输入唯一码", trigger: "blur" }],
    assetMd5: [{ required: true, message: "请上传模块资源", trigger: "blur" }],
    imageMd5: [{ required: true, message: "请上传缩略图", trigger: "blur" }],
});
const rules2 = reactive({
    name: [{ required: true, message: "请输入分组名称", trigger: "blur" }],
    code: [{ required: true, message: "请输入唯一码", trigger: "blur" }],
    urls: [{ required: true, message: "请输入资源路径", trigger: "blur" }]
});
onMounted(() => {
    if (props.obj.id) {
        getxqinfo(props.obj.id)
    }
})
//获取详情
function getxqinfo(id) {
    getApi({ id }, '/mosty-base/module/getModuleInfo').then(res => {
        Fromobj.value = res
        tableData.value = res.list
        tableData.value.forEach((it, index) => {
            it.ins = index + 1
        })
    })
}
function cahngename(val) {
    Fromobj.value.typeid = val.id
    Fromobj.value.typename = val.name
}
//新增子表
function addzb() {
    zbobj.value = { urls: [{ url: '' }] }
    title.value = '新增'
    saveBtns.value = true
    dialogVisibles.value = true
}
//修改子表
function handleCbj(row) {
    zbobj.value = row
    zbobj.value.urls = zbobj.value.urls.map(item => { return { 'url': item } })
    title.value = '修改'
    saveBtns.value = true
    dialogVisibles.value = true
}

function handleCbjxq(row) {
    zbobj.value = row
    zbobj.value.urls = zbobj.value.urls.map(item => { return { 'url': item } })
    title.value = '详情'
    saveBtns.value = false
    dialogVisibles.value = true
}
//删除子表
function delRow(row) {
    tableData.value = tableData.value.filter((item) => {
        return item.ins !== row.ins;
    });
}
function handleClosezb() {
    if (saveBtns.value) {
        proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
            .then(() => {
                zbobj.value = {}
                dialogVisibles.value = false
            })
            .catch(() => {
                // catch error
            })
    } else {
        zbobj.value = {}
        dialogVisibles.value = false
    }

}
const onClickAdd = () => {

    zbobj.value.urls.push({ url: '' })
}
//新增子表 submitz
const submitzb = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            let arr = zbobj.value.urls.filter(it => { return it.url != '' })
            if (arr.length == zbobj.value.urls.length) {
                zbobj.value.urls = zbobj.value.urls.map(item => { return item.url })
                if (zbobj.value.ins) {
                    tableData.value.forEach(its => {
                        if (its.ins == zbobj.value.ins) {
                            its = zbobj.value
                        }
                    })

                } else {
                    zbobj.value.ins = tableData.value.length + 1
                    tableData.value.push(zbobj.value)
                }

                dialogVisibles.value = false
            } else {
                ElMessage.error("请输入资源路径!");
            }

        } else {
            ElMessage.error("请输入必填项!");
        }
    });
};

const submitzh = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            loadingshowzh.value = true
            Fromobj.value.assetMd5 = Fromobj.value.assetMd5 ? Fromobj.value.assetMd5.toString() : ''
            Fromobj.value.imageMd5 = Fromobj.value.imageMd5 ? Fromobj.value.imageMd5.toString() : ''
            Fromobj.value.list = tableData.value
            if (!Fromobj.value.id) {
                postApi(Fromobj.value, '/mosty-base/module/addModule').then(res => {
                    ElMessage.success("新增成功");
                    dialogVisibles.value = false
                    emit("changePage");
                }).finally(() => {
                    loadingshowzh.value = false
                })
            } else {
                postApi(Fromobj.value, '/mosty-base/module/editModule').then(res => {
                    ElMessage.success("修改成功");
                    dialogVisibles.value = false
                    emit("changePage");
                }).finally(() => {
                    loadingshowzh.value = false
                })
            }

        } else {
            ElMessage.error("请输入必填项!");
        }
    });
};
function handleClose() {
    if (props.obj.savebtn) {
        proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
            .then(() => {
                dialogVisibles.value = false
                emit("changePage");
            })
            .catch(() => {
                // catch error
            })
    } else {
        dialogVisibles.value = false
        emit("changePage");
    }

}
</script>

<style lang="scss" scoped>
.el-form {
    width: 91%;
    align-items: center;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
</style>
