<template>
    <div id="app">
        <el-divider content-position="left">基本信息</el-divider>
        <div class="el-main">
            <el-form label-width="150px">
                <!-- <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', '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-item label="内容类型: ">
                    <el-select v-model="data.contentType" placeholder="请选择类型">
                        <el-option label="阅读" value="reading"></el-option>
                        <el-option label="视频" value="video"></el-option>
                        <el-option label="配音" value="dubbing"></el-option>
                        <el-option label="单词书" value="wordbook"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </div>
        <el-divider content-position="left">内容数据</el-divider>
        <div class="el-main">
            <el-form ref="form" :model="data" label-width="150px">
                <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.dubbing" @change="save()"></el-input>
                    <el-button class="button-item" size="small" type="text" @click="handleClickSelectSyllabus('dubbing', '配音秀')">选择</el-button>
                    <el-button class="button-item" size="small" type="text" :disabled="data.dubbing == null" @click="handleClickViewCourseware(data.dubbing)">查看</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-item label="单词: ">
                    <el-input class="cascader-item" v-model="data.words" @change="save()"></el-input>
                    <el-button class="button-item" size="small" type="text" @click="handleClickSelectSyllabus('words', '单词')">选择</el-button>
                    <el-button class="button-item" size="small" type="text" :disabled="data.words == null" @click="handleClickViewCourseware(data.words)">查看</el-button>
                </el-form-item>

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

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

        <el-dialog :title="selectDialogTitle" :visible.sync="dialogSelectShow" width="500px">
            <div class="el-main" style="height: 300px;">
                <el-tabs v-model="currentTreeDataType" type="card" @tab-click="handleSwitchTreeDataType">
                    <el-tab-pane label="阅读" name="reading_book"></el-tab-pane>
                    <el-tab-pane label="动画" name="animation"></el-tab-pane>
                    <el-tab-pane label="配音" name="dubbing"></el-tab-pane>
                    <el-tab-pane label="单词书" name="word"></el-tab-pane>
                </el-tabs>
                <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: [],

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

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

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

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

            // 表单数据
            data: {
                contentType: null,
                images: null,
                audio: null,
                video: null,
                tutoringVideo: null,
                texts: null,
                dubbing: null,
                pointReads: null,
                words: null,
                wordGame: null,
                exerciseBook: null,
                attr: {

                }
            },

            // 路径
            pidPath: [],

            // 当前树形数据类型
            currentTreeDataType: "reading_book",

            // 选择对话框标题
            selectDialogTitle: "选择"
        };
    },
    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, name) {
            this.selectKey = key;
            this.selectDialogTitle = `选择${name}`;
            this.dialogSelectShow = true;
            const resData = await getSyllabusListById()
            this.treeListDataSaved = resData.rows;
            this.treeListData = resData.rows.map(item => item.tag == this.currentTreeDataType ? item : null).filter(item => item != null);
            // this.$getData().then(data => {
            //   this.treeListData = data.rows;
            //   console.log(this.treeListData)
            // })
        },

        handleClickViewCourseware(syllabus_id) {
            const myLocation = window.parent ? window.parent.location : window.location;
            const prefixUrl = `${myLocation.origin}/cps/make?courseId=`
            window.open(`${prefixUrl}${syllabus_id}`, '_blank');
        },

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

        // 懒加载树形列表数据
        handleLazyLoadTreeData(node, resolve) {
            if(!node.data.id) {
                return;
            }
            getSyllabusListById(node.data.id).then(data => {
                resolve(data.rows)
                // this.treeListDataSaved = data.rows;
                // resolve(data.rows.map(item => item.tag == this.currentTreeDataType ? item : null).filter(item => item != null))
            })
        },

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

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

            if(this.selectKey == 'meta') {
                const _metaData = await getFirstCoursewareBySyllId(this.data.meta);
                const metaData = JSON.parse(_metaData.data);
                for(let key in this.data) {
                    if (key == 'meta') {
                        continue;
                    }
                    this.data[key] = null;
                }

                for(let key in metaData.dataSource) {
                    if (key == 'meta') {
                        continue;
                    }
                    this.data[key] = metaData.dataSource[key];
                }
            }

            this.$setData(this.data)
            this.dialogSelectShow = false;
            this.treeListData = [];
            this.currentSelectTreeNode = null;
            this.selectKey = null;
        },

        // 切换树形数据类型
        handleSwitchTreeDataType(tab) {
            this.currentTreeDataType = tab.name;
            this.treeListData = this.treeListDataSaved.map(item => item.tag == this.currentTreeDataType ? item : null).filter(item => item != null);
        }
    }
}
</script>

<style>
#app {}

.cascader-item {
    width: 150px;
}

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

.current-selected-text {
    float: left;
    font-size: small;
}

.el-dialog__body {
    padding: 0;
}
</style>
