<template>
	<div style="height: 100%;display: flex;flex-direction: column;">
		<el-tabs style="flex: 1;height: 0;" class="tabs" v-model="activeName">
			<el-tab-pane v-for="(group, key, index) in packageInfos" :label="$t('dependenciesTypes')[key]" :name="key" :key="key">
				<el-scrollbar v-if="editData" class="scrollbar" wrap-class="wrap-x-hidden" view-class="view package-manager">
					<div class="package-list">
						<div class="list">
							<div class="item" v-for="packageInfo in group" :key="packageInfo.id">
								<div style="flex: 1;">
									<i class="el-icon-s-cooperation"></i>
									{{packageInfo.package_id}}
								</div>
								<el-tag class="update-time" size="mini" type="success">{{$timeFormat(packageInfo.update_time)}}</el-tag>
								<el-select class="version-select" size="mini" v-model="editData[packageInfo.package_id]"
								           popper-class="version-select-popover">
									<el-option v-for="(version, index) in packageInfo.versions"
									           :key="index"
									           :value="version"
									           :label="versionLabel(packageInfo.package_id, version)"

									>
										<span class="version-label">{{ version }}</span>
										<span class="version-notice">{{ versionLabel(packageInfo.package_id, version, false) }}</span>
									</el-option>
								</el-select>
								<el-popover
									placement="left-start"
									:title="packageInfo.package_id + $t('All versions')"
									:open-delay="500"
									width="250"
									style="margin-left: 5px;"
									trigger="click">
									<div>
										<el-scrollbar style="height: 200px;" wrap-class="wrap-x-hidden" view-class="package-version-list">
											<div v-for="(version, index) in packageInfo.versions" :key="index" class="item">
												<span class="version">v{{version}}</span>
												<span class="update-time">
													<i class="el-icon-time"></i>
													{{packageInfo.update_times[index]}}
												</span>
												<br>
												<span v-if="packageInfo.remarks[index]" class="remark" v-html="translateRemark(packageInfo.remarks[index])"></span>
											</div>
										</el-scrollbar>
									</div>
									<el-button slot="reference" circle icon="el-icon-files" class="micro" plain/>
								</el-popover>
							</div>
						</div>
					</div>
				</el-scrollbar>
			</el-tab-pane>
		</el-tabs>
		<div style="margin-top: 5px;">
			<el-button size="mini" @click="applyModify" type="primary">{{$t('Apply')}}</el-button>
			<el-button size="mini" @click="resetModify">{{$t('Reset')}}</el-button>
			<el-button size="mini" @click="refresh" type="success" plain>{{$t('Refresh')}}</el-button>
		</div>
	</div>

</template>

<script>
	import {mapState, mapMutations, mapActions, mapGetters} from 'vuex'
	import {clonePureObj, playWaiting} from "../../../../utils";
	import {packageExists} from "../../../../store/modules/package";

	export default {
		name: "PackageManagerEditor",
		data() {
			return {
				activeName: 'process',
				editData: null,
			}
		},
		computed: {
			...mapState({
				dependencies: state => {
					return state.project.data.dependencies;
				},
				packageInfos: state => {
					return state.project.package.packageInfos;
				},
			}),
			...mapGetters([
				'getPackage',
			])
		},
		methods: {
			async edit() {
				this.packageMetas = await this.getAllPackageMetas();
				this.editData = clonePureObj(this.dependencies);
			},
			async save() {
				this.modifyDependencies(this.editData);
				await playWaiting(this.applyDependencies(this.editData), 'Saving…');
			},
			async applyModify() {
				await playWaiting(this.downloadDependencies(this.editData), 'Downloading…');
				await this.save();
				this.editData = null;

				this.$nextTick(async () => {
					this.packageMetas = await this.getAllPackageMetas();
					this.edit();
				});
			},
			resetModify() {
				this.edit();
			},
			async refresh() {
				await playWaiting((async()=>{
					await this.loadPackageInfos();
					await this.fillLastVersion();
				})(), 'Refreshing…');
			},
			versionLabel(packageId, version, withVersion = true) {
				let exists = packageExists(this.packageMetas, packageId, version);
				return (withVersion ? version + ' ' : '') + (!exists ? '(待下载)' : '');
			},
			translateRemark(str){
				return str.split('\n').map(item=>'·' + item).join('<br>')
			},
			...mapMutations([
				'modifyDependencies',
			]),
			...mapActions([
				'downloadDependencies',
				'applyDependencies',
				'getAllPackageMetas',
				'loadPackageInfos',
				'fillLastVersion',
			]),
		}
	}
</script>

<style scoped>

</style>