<style lang="less" scoped>
    @import './BaseResource.less';
</style>

<template>
    <div class="resource-container">
        <vuescroll>
            <div class="select-wrap">
                <div class="wrap-title">
                    <span>选择资源文件<span v-if="currentNodeInfo">  ( {{ resourceList.length }} )</span></span>
                    <div>
                        <div class="select-wrap-header" v-if="!isSearchFile">
                            <Icon type="ios-menu" title="切换显示样式" style="cursor:pointer" v-show="isShowBlocks" @click="onChangeShowType('1')" />
                            <Icon type="ios-keypad" title="切换显示样式" style="cursor:pointer" v-show="!isShowBlocks" @click="onChangeShowType('0')" />
                            <Icon type="ios-search" title="搜索" style="cursor:pointer" @click="isSearchFile = true" />
                        </div>
                        <div class="ns-header-search" v-else>
                            <!-- 搜索册别部分 -->
                            <Input icon="ios-close"
                                   v-model="searchFile"
                                   placeholder="搜索册别..."
                                   autofocus
                                   style="width: 100%"
                                   @on-click="isSearchFile = false"
                                   @on-blur="isSearchFile = false"
                                   @on-change="onSearchFileChange"
                                   @on-enter="onSearchFileChange" />
                        </div>
                    </div>
                </div>
                <div class="select-content">
                    <div class="resource-left">
                        <div :class='["resource-left-item",activeIndex === 0 ? "item-active" : ""]' @click="onChangeOrigin(0)">全部</div>
                        <div :class='["resource-left-item",activeIndex === 1 ? "item-active" : ""]' @click="onChangeOrigin(1)">图片</div>
                        <div :class='["resource-left-item",activeIndex === 2 ? "item-active" : ""]' @click="onChangeOrigin(2)">视频</div>
                        <div :class='["resource-left-item",activeIndex === 3 ? "item-active" : ""]' @click="onChangeOrigin(3)">文档</div>
                        <div :class='["resource-left-item",activeIndex === 4 ? "item-active" : ""]' @click="onChangeOrigin(4)">其他</div>
                    </div>
                    <div class="resource-right">
                        <vuescroll>
                            <div :class="isShowBlocks ? 'resource-box':'resource-box-list'">
                                <div :class="isShowBlocks ? 'resource-item' : 'resource-item-list'"
                                     v-for="(item,index) in resourceList" :key="index"
                                     @click="onFileSelect(item)"
                                     :style="{backgroundColor:checkedList.map(i => i.id).indexOf(item.id) > -1 ? '#0f9272' : isShowBlocks ? '#545454' : 'transparent'}">
                                    <div class="resource-item-img" v-show="isShowBlocks">
                                        <img v-if="item.extension === 'ppt'||item.extension === 'pptx'" src="@/assets/icon/ppt50.png" width="40" />
                                        <img v-else-if="item.extension === 'doc'||item.extension === 'docx'" src="@/assets/icon/word50.png" width="40" />
                                        <img v-else-if="item.extension === 'xls'||item.extension === 'xlsx'" src="@/assets/icon/xls50.png" width="40" />
                                        <img v-else-if="item.type === 'picture'" src="@/assets/icon/icon_img.png" width="40" />
                                        <img v-else-if="item.type === 'video'" src="@/assets/icon/icon_video.png" width="40" />
                                        <img v-else-if="item.extension === 'rar'" src="@/assets/icon/zip50.png" width="40" />
                                        <img v-else src="@/assets/icon/prelearn50.png" width="40" />
                                    </div>
                                    <div class="resource-item-name">
                                        <Tooltip>
                                            <Icon :type="checkedList.map(i => i.id).indexOf(item.id) > -1 ? 'ios-checkbox-outline' : 'ios-square-outline'" v-show="!isShowBlocks"/>
                                            <p class="file-name">{{ item.fileName }}</p>
                                            <div slot="content" class="file-info">
                                                <p><span>文件名：</span>{{item.fileName}}</p>
                                                <p><span>大小：</span>{{item.size/1024 > 1024 ? (item.size/1024/1024).toFixed(1) + 'M': (item.size/1024).toFixed(1) + 'KB'}}</p>
                                                <p><span>上传时间：</span>{{new Date(item.createTime/10000).toLocaleString()}}</p>
                                            </div>
                                        </Tooltip>
                                    </div>
                                </div>
                            </div>
                        </vuescroll>
                    </div>
                </div>
            </div>
            <div class="show-wrap">
                <div class="wrap-title">
                    <span>已选资源<span v-if="currentNodeInfo">  ( {{ checkedList.length }} )</span></span>
                    <div class="wrap-btns">
                        <Button @click="onClearChecked" v-show="checkedList.length">清空</Button>
                        <Button @click="onSaveResources" :loading="isLoading">存储变更</Button>
                    </div>
                </div>
                <div v-if="checkedList.length === 0">
                    <EmptyData :top="10"></EmptyData>
                </div>
                <div class="point-box" v-else>
                    <div class="resource-item" v-for="(item,index) in checkedList" :key="index">
                        <div class="resource-item-img">
                            <img v-if="item.extension === 'ppt'||item.extension === 'pptx'" src="@/assets/icon/ppt50.png" width="40" />
                            <img v-else-if="item.extension === 'doc'||item.extension === 'docx'" src="@/assets/icon/word50.png" width="40" />
                            <img v-else-if="item.extension === 'xls'||item.extension === 'xlsx'" src="@/assets/icon/xls50.png" width="40" />
                            <img v-else-if="item.type === 'picture'" src="@/assets/icon/icon_img.png" width="40" />
                            <img v-else-if="item.type === 'video'" src="@/assets/icon/icon_video.png" width="40" />
                            <img v-else-if="item.extension === 'rar'" src="@/assets/icon/zip50.png" width="40" />
                            <img v-else src="@/assets/icon/prelearn50.png" width="40" />
                            <Icon type="md-close" class="icon-close" @click="onSpliceFile(file)"/>
                        </div>
                        <div class="resource-item-name">
                            <Tooltip>
                                <p class="file-name">{{ item.fileName }}</p>
                                <div slot="content" class="file-info">
                                    <p><span>文件名：</span>{{item.fileName}}</p>
                                    <p><span>大小：</span>{{item.size/1024 > 1024 ? (item.size/1024/1024).toFixed(1) + 'M': (item.size/1024).toFixed(1) + 'KB'}}</p>
                                    <p><span>上传时间：</span>{{new Date(item.createTime/10000).toLocaleString()}}</p>
                                </div>
                            </Tooltip>
                        </div>
                    </div>
                </div>
            </div>
        </vuescroll>

    </div>
</template>

<script>
    export default {
        props: ['volume', 'currentNode'],
        data() {
            return {
                currentVolume: null,
                currentNodeInfo: null,
                currentParams: null,
                activeIndex: 0,
                resourceList: [],
                searchList: [],
                originList: [],
                treeData: [],
                checkedList: [],
                originResourcesList: [],
                defaultProps: {
                    children: 'points',
                    label: 'name'
                },
                hasModify: false,
                isLoading: false,
                searchFile: '',
                isSearchFile: false,
                isShowBlocks: false

            }
        },

        created() {
            // 拿到当前册别信息 作为获取知识点数据参数
            this.currentVolume = this.volume
            this.currentParams = {
                subjectCode: this.currentVolume.subjectCode,
                schoolCode: this.currentVolume.schoolCode,
                period: this.currentVolume.periodCode
            }

            this.getResourceData('private')
        },
        methods: {

            /** 切换知识点数据来源 */
            onChangeOrigin(index) {
                this.activeIndex = index
                switch (index) {
                    case 0:
                        this.resourceList = this.originList
                        break
                    case 1:
                        this.resourceList = this.originList.filter(item => item.type === 'picture')
                        break
                    case 2:
                        this.resourceList = this.originList.filter(item => item.type === 'video')
                        break
                    case 3:
                        this.resourceList = this.originList.filter(item => item.type === 'document')
                        break
                    case 4:
                        this.resourceList = this.originList.filter(item => item.type === 'other')
                        break
                    default:
                        break
                }

                this.searchList = this.resourceList
            },

            /** 根据类型获取资源数据 */
            getResourceData(type) {
                let params = {
                    range: type
                }
                this.$api.teachContent.findResourceByDict(params).then(res => {
                    if (!res.error && res.result.data) {
                        this.resourceList = res.result.data
                        this.originList = res.result.data
                    } else {
                        this.$Message.warning('获取数据失败')
                    }
                })
            },

            /** 改变显示视图 */
            onChangeShowType(type) {
                this.isShowBlocks = type === '0'
            },

            /**
             * 文件点击事件
             * @param item 文件数据
             */
            onFileSelect(item) {
                const isExistIndex = this.checkedList.indexOf(item)
                if (isExistIndex > -1) {
                    this.checkedList.splice(isExistIndex, 1)
                } else {
                    this.checkedList.push(item)
                }
            },

            /** 清空已选项 */
            onClearChecked() {
                this.checkedList = []
            },

            /**
             * 移除已选项
             * @param file
             */
            onSpliceFile(file) {
                this.checkedList.splice(this.checkedList.indexOf(file), 1)
            },

            /** 搜索资源文件事件 */
            onSearchFileChange() {
                this.resourceList = this.searchList.filter(item => item.fileName.indexOf(this.searchFile) > -1)
            },

            /** 保存关联资源文件 */
            onSaveResources() {
                this.isLoading = true
                this.currentNodeInfo.resources = this.checkedList.map(item => item.id)
                 this.$api.syllabus.SaveOrUpdateAsNodes([this.currentNodeInfo]).then(res => {
                    if (!res.error && res.result.data) {
                        this.$emit("addPointsFinish", res.result.data)
                        this.isLoading = false
                    } else {
                        this.$Message.warning("获取数据失败")
                    }
                 })
            },

            /**
             * 判断两个数组是否相等
             * @param arr1
             * @param arr2
             */
            isEqual(arr1, arr2) {
                return (JSON.stringify(arr1) === JSON.stringify(arr2))
            },

            /**
             * 获取内容资源完整对象数据 ID换对象
             * @param arr 原始ID数组
             */
            getResourceObject(arr) {
                this.$api.teachContent.FindSyllabusResourceById(arr).then(res => {
                    if (!res.error && res.result.data) {
                        this.checkedList = res.result.data
                        this.originPoints = res.result.data
                    } else {
                        this.$Message.warning('获取数据失败')
                    }
                })
            }

        },
        mounted() {
        },
        watch: {
            // 监听册别数据变化
            volume: {
                handler: function(n, o) {
                    this.currentVolume = n
                    this.currentParams = {
                        subjectCode: n.subjectCode,
                        schoolCode: n.schoolCode,
                        period: n.periodCode
                    }
                },
                deep: true
            },
            // 监听册别数据变化
            currentNode: {
                handler: function(n, o) {
                    this.currentNodeInfo = n
                    this.onChangeOrigin(0)
					console.log(n)
                    if (n.resources) {
                        this.getResourceObject(n.resources) // 用ID换知识点对象数据
                        // 切换数据源时 检测当前已选项 是否要设置选中状态
                    } else {
                        this.checkedList = [] 
                    } 
                    this.originResourcesList = n.resources
                },
                deep: true
            }

        }

    }
</script>

<style>

    .resource-container .__view {
        min-height: unset !important;
    }

    .resource-container .__bar-is-vertical {
        background: transparent !important;
    }

    .resource-container .resource-right .__bar-is-vertical {
        background: #777676 !important;
    }

    .resource-container .ivu-tooltip-inner {
        background: #fff;
        padding: 15px;
        color: #808080;
    }

    .resource-container .ivu-tooltip-popper[x-placement^=bottom] .ivu-tooltip-arrow {
        border-bottom-color: #fff;
    }

    .resource-container .ivu-input {
        background: #656565;
        color: #fff;
        border: none;
        height: 34px;
    }

        .resource-container .ivu-input:focus {
            border: none;
            box-shadow: none;
        }

    .resource-container .ivu-input-icon {
        font-size: 24px;
        color: #cfc7c7;
        line-height: 36px;
        cursor: pointer;
    }
</style>
