<template>
	<el-table
		:data="compares"
		stripe
		size="mini"
		height="100%">
		<el-table-column
			prop="remote.name"
			label="远程版本">
		</el-table-column>
		<el-table-column
			prop="local.name"
			label="本地版本">
		</el-table-column>
		<el-table-column
			label="操作"
			width="280px"
		>
			<template slot-scope="scope">
				<template v-if="!scope.row.resolved">
					<el-button size="mini" type="success" @click="mergeConflict('remote', scope.row)">接受远程</el-button>
					<el-button size="mini" type="success" @click="mergeConflict('local', scope.row)">接受本地</el-button>
					<el-button size="mini" type="warning" @click="mergeConflict('manual', scope.row)">手动合并</el-button>
				</template>
				<span v-else>无冲突</span>
			</template>
		</el-table-column>
	</el-table>
</template>

<script>
	export default {
		name: "ListCompareView",
		props: ['category', 'compares'],
		data() {
			return {}
		},
		mounted() {
			this.update();
		},
		watch: {
			conflicts() {
				this.update();
			},
		},
		methods: {
			update() {

			},
			mergeConflict(action, conflict) {
				this.$emit('merge-conflict', action, conflict, this.category);
			},
		}
	}
</script>

<style scoped>

</style>