const SYS_MENU_RECOMMEND_SETTING_COMPONENT = {
    template: `
        <el-dialog title="推荐配置" :visible.sync="dialogVisible" width="50%">
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-tree ref="menuTree"
                        style="max-height: 500px;overflow-y: auto"
                        :data="menuData" 
                        :check-on-click-node="true"
                        node-key="id"
                        show-checkbox
                        @check-change="checkChange"
                        :props="defaultProps">
                        <span class="custom-tree-node" slot-scope="scope">
                            <span>{{ scope.node.label }}</span>
                        </span>
                    </el-tree>
                </el-col>
                <el-col :span="12">
                    <el-table :data="checkedNodes" max-height="500px">
                        <el-table-column type="index"></el-table-column>
                        <el-table-column label="名称" prop="name"></el-table-column>
                        <el-table-column label="图标" prop="icon">
                            <template scope="{row}">
                                <svg-icon :name="row.icon" v-if="platform==='PC'"></svg-icon>
                                <img v-else :src="row.icon" alt="" style="width: 30px;height: 30px">
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </span>
        </el-dialog>
    `,
    data() {
        return {
            platform: null,
            dialogVisible: false,
            menuData: [],
            defaultProps: {
                children: "children",
                label: "label"
            },

            checkedNodes: [],
            checkedKeys: [],

            type: '',
        }
    },
    methods: {
        onOpen(platform, type) {
            this.platform = platform
            this.type = type
            this.checkedKeys = []
            this.dialogVisible = true
            this.listTree()
        },

        listTree() {
            this.$axios.post("/platform/sys/menu/menuAll", { platform: this.platform }).then((res) => {
                if (res.code === 0) {
                    this.setTreeDisabled(res.data)
                    this.menuData = res.data
                    console.log(this.checkedKeys)
                    //设置选中的节点
                    this.$refs.menuTree.setCheckedKeys(this.checkedKeys)
                    //获取选中的节点
                    this.$nextTick(() => {
                        this.checkedNodes = this.$refs.menuTree.getCheckedNodes(true, false)
                    })
                }
            })
        },

        setTreeDisabled(data) {
            data.forEach((item) => {
                if ((this.type === 'service' && item.isRecommendService) || (this.type === 'app' && item.isRecommendApp)) {
                    this.checkedKeys.push(item.id)
                }
                if (!item.href && item.type === "menu" && this.type === 'service') {
                    item.disabled = true
                }
                if (this.type === 'app') {
                    delete item.children
                }
                if (item.children && item.children.length) {
                    this.setTreeDisabled(item.children)
                }
            })
        },

        checkChange(currObj, isChecked) {
            this.checkedNodes = this.$refs.menuTree.getCheckedNodes(true, false)
        },

        submit() {
            this.$confirm("您确定要提交吗？", "提示", {
                type: "warning"
            }).then(() => {
                this.$axios
                    .post("/platform/sys/menu/updateRecommendSetting", {
                        menuIds: JSON.stringify(this.checkedNodes.map((item) => item.id)),
                        platform: this.platform,
                        type: this.type
                    })
                    .then((resp) => {
                        if (resp.code === 0) {
                            this.checkedKeys = []
                            this.listTree()
                            this.$message.success(resp.msg)
                            this.$emit("refresh", null)
                        }
                    })
            })
        }
    },
    created() {}
}