<template>
    <div id="app">
        <el-divider content-position="left">元数据</el-divider>
        <div class="el-main">
            <el-form label-width="120px">
                <el-form-item label="META: ">
                    <el-input class="cascader-item" v-model="data.meta" @change="save()"></el-input>
                    <el-button class="button-item" size="small" type="text" @click="handleClickSelectSyllabus('meta')">选择</el-button>
                    <el-button class="button-item" size="small" type="text" :disabled="data.meta == null" @click="handleClickViewCourseware(data.meta)">查看</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-divider content-position="left">内容数据</el-divider>
        <div v-show="data.meta" class="el-main">
            <el-form ref="form" :model="data" label-width="120px">
                <el-form-item label="图片: ">
                    <el-input class="cascader-item" v-model="data.images" @change="save()"></el-input>
                    <el-button class="button-item" size="small" type="text" @click="handleClickSelectSyllabus('images')">选择</el-button>
                    <el-button class="button-item" size="small" type="text" :disabled="data.images == null" @click="handleClickViewCourseware(data.images)">查看</el-button>
                </el-form-item>

                <el-form-item label="音频: ">
                    <el-input class="cascader-item" v-model="data.audio" @change="save()"></el-input>
                    <el-button class="button-item" size="small" type="text" @click="handleClickSelectSyllabus('audio')">选择</el-button>
                    <el-button class="button-item" size="small" type="text" :disabled="data.audio == null" @click="handleClickViewCourseware(data.audio)">查看</el-button>
                </el-form-item>

                <el-form-item label="视频: ">
                    <el-input class="cascader-item" v-model="data.video" @change="save()"></el-input>
                    <el-button class="button-item" size="small" type="text" @click="handleClickSelectSyllabus('video')">选择</el-button>
                    <el-button class="button-item" size="small" type="text" :disabled="data.video == null" @click="handleClickViewCourseware(data.video)">查看</el-button>
                </el-form-item>

                <el-form-item label="视频讲解课: ">
                    <el-input class="cascader-item" v-model="data.tutoringVideo" @change="save()"></el-input>
                    <el-button class="button-item" size="small" type="text" @click="handleClickSelectSyllabus('tutoringVideo')">选择</el-button>
                    <el-button class="button-item" size="small" type="text" :disabled="data.tutoringVideo == null" @click="handleClickViewCourseware(data.tutoringVideo)">查看</el-button>
                </el-form-item>

                <el-form-item label="文字内容: ">
                    <el-input class="cascader-item" v-model="data.texts" @change="save()"></el-input>
                    <el-button class="button-item" size="small" type="text" @click="handleClickSelectSyllabus('texts')">选择</el-button>
                    <el-button class="button-item" size="small" type="text" :disabled="data.texts == null" @click="handleClickViewCourseware(data.texts)">查看</el-button>
                </el-form-item>

                <el-form-item label="点读配置: ">
                    <el-input class="cascader-item" v-model="data.pointReads" @change="save()"></el-input>
                    <el-button class="button-item" size="small" type="text" @click="handleClickSelectSyllabus('pointReads')">选择</el-button>
                    <el-button class="button-item" size="small" type="text" :disabled="data.pointReads == null" @click="handleClickViewCourseware(data.pointReads)">查看</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div v-show="!data.meta">
            <el-empty description="请选择元数据"></el-empty>
        </div>

        <el-dialog title="选择内容" :visible.sync="dialogSelectShow" width="500px">
            <div class="el-main" style="height: 300px;">
                <el-tree :data="treeListData" :props="treeProps" @node-click="handleClickTreeNode" :lazy="true" :load="handleLazyLoadTreeData"></el-tree>
            </div>
            <div slot="footer" class="dialog-footer">
                <span class="current-selected-text">当前选择：{{ currentSelectTreeNode ? currentSelectTreeNode.name : "" }} - {{ currentSelectTreeNode ? currentSelectTreeNode.id : "" }}</span>
                <el-button @click="handleClickCancelSelect">取 消</el-button>
                <el-button type="primary" @click="handleClickConfirmSelect">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import { getSyllabusListById, getFirstCoursewareBySyllId, getPidPathName } from '@/api/syllabus'
let id = 0;
export default {
    name: 'App',
    components: {
        HelloWorld
    },
    data() {
        return {
            // 选择内容对话框显示隐藏控制
            dialogSelectShow: false,

            // 树形列表数据
            treeListData: [],

            // 树形列表配置
            treeProps: {
                children: 'children',
                label: 'name',
                isLeaf: function (data, node) {
                    return data.has_courseware == "1";
                }
            },

            // 当前选择的树形节点
            currentSelectTreeNode: null,

            // 打开选择框选择的key值
            selectKey: null,

            // 表单数据
            data: {
                parentId: null,
                pid_path: null,
                meta: null,
                images: null,
                audio: null,
                video: null,
                tutoringVideo: null,
                texts: null,
                pointReads: null,
                cover: null,
            },

            // 路径
            pidPath: [],
        };
    },
    async created() {
        this.initData()
    },
    methods: {
        // 保存数据
        save() {
            this.$setData(this.data)
        },

        // 获取数据
        async initData() {
            const data = await this.$getData()
            if (data) {
                this.data = data;
            }
        },

        async handleClickSelectSyllabus(key) {
            this.selectKey = key;
            this.dialogSelectShow = true;
            const resData = await getSyllabusListById()
            this.treeListData = resData.rows;
            // this.$getData().then(data => {
            //   this.treeListData = data.rows;
            //   console.log(this.treeListData)
            // })
        },

        handleClickViewCourseware(syllabus_id) {
            window.open(`https://ema.iteachabc.com/cps/make?courseId=${syllabus_id}`, '_blank')
            // if (location.href.indexOf('localhost') > -1) {
            //     window.open(`https://ema.iteachabc.com/cps/make?courseId=${syllabus_id}`, '_blank')
            // } else {
            //     window.open(`./make?courseId=${syllabus_id}`, '_blank')
            // }
        },

        // 点击树形列表节点
        handleClickTreeNode(node) {
            if (node.has_courseware == "1") {
                this.currentSelectTreeNode = node;
            }
        },

        // 懒加载树形列表数据
        handleLazyLoadTreeData(node, resolve) {
            getSyllabusListById(node.data.id).then(data => {
                resolve(data.rows)
            })
        },

        // 取消选择
        handleClickCancelSelect() {
            this.dialogSelectShow = false;
            this.treeListData = [];
            this.currentSelectTreeNode = null;
            this.selectKey = null;
        },

        // 确定选择节点
        async handleClickConfirmSelect() {
            this.data[this.selectKey] = this.currentSelectTreeNode.id;
            console.log(this.currentSelectTreeNode)
            this.data.parentId = this.currentSelectTreeNode.pid;
            this.data.pid_path = this.currentSelectTreeNode.pid_path;

            const resData = await getFirstCoursewareBySyllId(this.data.meta);
            const parentData = await getSyllabusListById(this.data.parentId);
            
            for(let key in this.data) {
                if (key == 'meta' || key == 'parentId' || key == 'pid_path' || key == 'cover') {
                    continue;
                }
                this.data[key] = null;
            }

            parentData.rows.forEach(item => {
                if (item.name == "图片") {
                    this.data.images = item.id;
                } else if (item.name == "音频") {
                    this.data.audio = item.id;
                } else if (item.name == "视频") {
                    this.data.video = item.id;
                } else if (item.name == "讲解视频") {
                    this.data.tutoringVideo = item.id;
                } else if (item.name == "文字") {
                    this.data.texts = item.id;
                } else if (item.name == "点读") {
                    this.data.pointReads = item.id;
                }
            })
            this.$setData(this.data)

            this.dialogSelectShow = false;
            this.treeListData = [];
            this.currentSelectTreeNode = null;
            this.selectKey = null;
        },
    }
}
</script>

<style>
#app {}

.cascader-item {
    width: 150px;
}

.button-item {
    margin-left: 10px;
}

.current-selected-text {
    float: left;
    font-size: small;
}
</style>
