<template>
	<div class="project-auth-manager">
		<p><b>{{$t('Creator')}}</b>:{{project.creator}}</p>
		<el-select style="width: 100%;" size="mini" v-model="operatorsExcludeCreator" filterable multiple :disabled="!editable">
			<el-option v-for="(item, index) in devPersons"
			           :key="index"
			           v-if="item.name !== project.creator"
			           :disabled="item.name === currentOperator"
			           :label="item.name"
			           :value="item.name">
			</el-option>
		</el-select>
	</div>
</template>
<script>
	import {mapState, mapGetters, mapMutations} from "vuex";
	import {playWaiting} from "../../../../utils";
	import {getDevPersons} from "../../../../api/editor";
	import {updateOperators} from "../../../../api/project";

	export default {
		name: "AuthManagerEditor",
		data() {
			return {
				devPersons: [],
				operators: [],
				operatorsExcludeCreator: [],
			};
		},
		computed: {
			editable(){
				return this.operators.includes(this.currentOperator);
			},
			...mapState({
				projectId: (state) => state.project.id,
				currentOperator: (state) => state.editor.operator,
			}),
			...mapState(['project']),
		},
		methods: {
			...mapMutations(["modifyOperators"]),
			async edit() {
				this.devPersons = await getDevPersons();
				this.operators = this.project.operators.split(',');
				this.operatorsExcludeCreator = this.operators.concat().filter(item=>item !== this.project.creator);
				this.operatorsOrigin = this.operators.concat().sort().join(',');
			},
			async save() {
				let operators = this.operatorsExcludeCreator.concat();
				operators.unshift(this.project.creator);
				let operatorsNew = operators.sort().join(',');
				if (operatorsNew === this.operatorsOrigin) {
					return;
				}

				updateOperators(this.projectId, operatorsNew)
					.then(() => {
						this.$message({
							message: this.$t("Operate success"),
							type: "success",
						});
						this.modifyOperators(operatorsNew);
					})
					.catch((e) => {
						this.$message({message: e.message, type: "error"});
					});
			},
		},
	};
</script>

<style lang="scss" scoped>

</style>
