<template>
  <div class="container">
    <v-header :title="title">
      <span slot="action" class="header-slot pull-right"></span>
    </v-header>
    <div class="content" ref="contentWrapper">
        <div>
            <x-button class="add-btn" plain @click.native="teacherSelectorShow = true"><i class="iconfont">&#xe862;</i> 添加分享教师</x-button>
            <div class="share-header">
                <span class="dashed"></span>
                <span class="person-count">已分享名单({{ shareList.length }}人)</span>
                <span class="dashed"></span>
            </div>
            <div class="search-ctn">
                <searchs></searchs>
            </div>
            <div class="share-list">
                <x-button class="person" v-for="(person, index) of shareList" :key="index" mini>
                    <div class="name-ctn">
                        <span class="name">{{ person.realname }}</span>
                        <!-- <i class="iconfont">&#xe827;</i> -->
                    </div>
                </x-button>
            </div>
            <teacher-selector
                :is-multiple="true"
                :userlist="shareList"
                :show="teacherSelectorShow"
                @handleSubmit="changeAndShare"
                @close="teacherSelectorShow = false"
            />
        </div>
    </div>
  </div>
</template>

<script>
import { XButton } from 'vux'
import BScroll from 'better-scroll'
export default {
    name: 'Share',
    components: {
        VHeader: () => import('@/common/header/VHeader'),
        TeacherSelector: () => import('@/common/selector/TeacherSelector'),
        Searchs: () => import('./components/Searchs'),
        XButton
    },
    data () {
        return {
            title: '分享文档',
            scroll: '',
            shareList: [],
            teacherSelectorShow: false,
            fileId: '' // 文件id
        }
    },
    created () {
    },
    mounted () {
        this.fileId = this.$route.query.file_id
        this.getShareList()
        this.$nextTick(() => {
            this.scroll = new BScroll(this.$refs.contentWrapper, {
                click: true
            })
        })
    },
    methods: {
        getShareList () {
            /* 获取该文件已经分享的名单 */
            let data = {
                file_info_id: this.fileId
            }
            this.$api.schoolBasedResourcesApi.GetFileShareInfoByFileId(data).then(res => {
                if (res.data.Status) {
                    let data = res.data.Data
                    if (data && data.teacher_user_ids) {
                        let teacherList = this.stringToUserList(data.teacher_user_ids, data.teacher_user_names)
                        this.shareList = teacherList
                    } else {
                        this.shareList = []
                    }
                }
            })
        },
        changeAndShare (list) {
            /* 选人并分享 */
            let userList = this.userListToString(list)
            let params = {
                file_info_id: this.fileId,
                teacher_user_ids: userList.userIds,
                teacher_user_names: userList.userNames
            }
            this.$api.schoolBasedResourcesApi.fileShare(params).then(res => {
                if (res.data.Status === true) {
                    this.$vux.toast.show({
                        text: '分享成功'
                    })
                    this.getShareList()
                } else {
                    this.$vux.toast.show({
                        text: res.data.ResponseError.LongMessage,
                        type: 'cancel'
                    })
                }
            })
            this.teacherSelectorShow = false
        },
        userListToString (userList) {
            /* 把分享用户数组转为字符串 */
            let data = {
                userIds: '',
                userNames: ''
            }
            for (let i = 0; i < userList.length; i++) {
                if (i === 0) {
                    data.userIds += userList[i].id
                    data.userNames += userList[i].realname
                } else {
                    data.userIds += ',' + userList[i].id
                    data.userNames += ',' + userList[i].realname
                }
            }
            return data
        },
        stringToUserList (ids, names) {
            /* 把分享用户字符串转为数组 */
            let idsStr = ids.split(',')
            let namesStr = names.split(',')
            let userList = []
            for (let i = 0; i < idsStr.length; i++) {
                userList.push({ id: idsStr[i], realname: namesStr[i] })
            }
            return userList
        }
    }
}
</script>

<style lang="less" scoped>
.content {
    padding: 0 15px;
    background: white;
    /deep/ .add-btn {
        margin-top: 20px;
        margin-bottom: 15px;
        border-style: dashed;
        color: #1890FF;
        border-color: #1890FF;
        font-size: 16px;
    }

    .share-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 20px;
        .dashed {
            flex: 1;
            border-top: 3px dashed #AAAAAA;
        }
        .person-count {
            padding: 0 10px;
            font-size: 16px;
            color: #7F7F7F;
        }
    }

    .search-ctn {
        margin-top: 15px;
    }

    /deep/ .share-list {
        margin-top: 25px;
        .person {
            margin: 16px 0;
            width: 27%;
            height: 40px;
            margin-right: 6%;
            background: #F1F5F8;
            &:after{
                border: none;
            }
            &:first-child {
                margin-top: 0;
            }
            &:active {
                background: rgb(228, 228, 228);
            }
            .name-ctn {
                display: flex;
                justify-content: space-between;
                align-items: center;
                .name {
                    padding-top: 2px;
                    font-size: 14px;
                    width: 100%;
                    overflow: hidden;
                    // text-overflow:ellipsis;
                    // white-space: nowrap;
                }
                .iconfont {
                    font-size: 17px;
                    margin-right: -10px;
                }
            }
        }
    }
}
</style>
