
<template>
    <div class="editor-container">
        <p>当前册别 : <span class="volume-name">{{ editVolumeItem.volumeName }}</span></p>
        <div class="fl-row-center" style="width:100%">
            <div style="width:45%">
                <p class="title">当前共编使用者</p>
                <div class="show-wrap">
                    <p v-for="(item,index) in currentList" :key="index">
                        {{item}}
                    </p>
                </div>
            </div>
            <div class="tools">
                <Button class="btn-move">移动  <Icon type="ios-arrow-forward" /></Button>
            </div>
            <div style="width:45%">
                <p class="title">选择共编使用者</p>
                <div class="show-wrap select-wrap">

                </div>
            </div>
            </div>
            <Button @click="handleSubmit" :loading="isLoading" class="btn-confirm">确认</Button>
        </div>
</template>

<script>
    export default {
        props: ['editVolume'],
        data() {
            return {
                editVolumeItem: {},
                isLoading: false,
                currentList: []
            }
        },
        created() {

        },
        methods: {
            // 提交添加
            handleSubmit() {
                this.isLoading = true
                let params = {
                    type: this.addVolumeType === 'school' ? 0 : 1,
                    schoolCode: this.originDatas.schoolCode,
                    periodCode: this.currentPeriod.periodCode,
                    subjectCode: this.formTop.subject,
                    gradeCode: this.formTop.grade,
                    semesterCode: this.formTop.semester,
                    volumeName: this.getNewVolumeName(),
                    status: 1
                }
                if (this.editVolumeItem) {
                    params.id = this.editVolumeItem.id
                    params.volumeCode = this.editVolumeItem.volumeCode
                }
                if (this.addVolumeType === 'private') {
                    params.TEAMModelId = this.$store.state.userInfo.TEAMModelId
                }
                this.$api.syllabus.SaveOrUpdateVolume(params).then(res => {
                    if (!res.error && res.result.data) {
                        this.$emit('addFinish', res.result.data.id)
                    } else {
                        this.$Message.warning('操作失败,错误代码：' + res.error.code + ',错误信息:' + res.error.message)
                    }
                    this.isLoading = false
                    this.closeModal()
                    this.editVolumeItem = {}
                }).catch(err => {
                    console.log(err)
                    this.$Message.warning('操作失败')
                    this.isLoading = false
                })
            },

            // 添加完成 关闭窗口
            closeModal() {
                this.$emit('addFinish', false)
                this.formTop.volume = ''
            }
        },
        mounted() {
        },
        watch: {

            editVolume: {
                handler(newValue, oldValue) {
                    if (newValue) {
                        this.editVolumeItem = newValue
                        console.log(newValue)
                    }
                }
            }
        }

    }
</script>

<style>
    .editor-container .volume-name{
        font-size:16px;
        margin-left:20px;
    }

    .editor-container .title {
        margin:20px 0;
    }

    .editor-container .show-wrap {
        width:100%;
        height:420px;
        background:#565656;
        border-radius:6px;
    }

    .editor-container .btn-confirm {
        width: 100%;
        height: 40px;
        margin-top:20px;
        background: rgb(11, 151, 117);
        border: none;
        color:#fff;
    }

    .editor-container .btn-move {
        width: 70px;
        height: 30px;
        background: #808080;
        border: none;
        color:#fff;
    }

    .editor-container .tools {
        margin: 0 20px;
    }

    .fl-row-center {
        display:flex;
        flex-direction:row;
        justify-content:space-between;
        align-items:center;
    }
</style>
