Vue.component("httpdns-clusters-selector", {
	props: ["vClusters", "vName"],
	data: function () {
		let inputClusters = this.vClusters
		let clusters = []

		if (inputClusters != null && inputClusters.length > 0) {
			if (inputClusters[0].isChecked !== undefined) {
				// 带 isChecked 标志的完整集群列表
				clusters = inputClusters.map(function (c) {
					return {id: c.id, name: c.name, isChecked: c.isChecked}
				})
			} else {
				// 仅包含已选集群，全部标记为选中
				clusters = inputClusters.map(function (c) {
					return {id: c.id, name: c.name, isChecked: true}
				})
			}
		}

		// 无 prop 时从根实例读取所有集群（如创建应用页面）
		if (clusters.length === 0) {
			let rootClusters = this.$root.clusters
			if (rootClusters != null && rootClusters.length > 0) {
				clusters = rootClusters.map(function (c) {
					return {id: c.id, name: c.name, isChecked: false}
				})
			}
		}

		return {
			clusters: clusters,
			fieldName: this.vName || "clusterIds"
		}
	},
	methods: {
		changeCluster: function (cluster) {
			cluster.isChecked = !cluster.isChecked
		}
	},
	template: `<div>
	<div v-if="clusters.length > 0">
		<checkbox v-for="cluster in clusters" :key="cluster.id" :v-value="cluster.id" :value="cluster.isChecked ? cluster.id : 0" style="margin-right: 1em" @input="changeCluster(cluster)" :name="fieldName">
			{{cluster.name}}
		</checkbox>
	</div>
	<span class="grey" v-else>暂无可用集群</span>
</div>`
})