<template>
	<div class="px-publish-view">
		<span class="px-project-name">
			{{pxProjectName}}
		</span>
		
		<div class="operate-bar">
			<el-select size="small" v-model="env" placeholder="请选择环境" @change="changeEnv">
				<el-option v-for="(item, key) in pxEnvs" :key="key" :label="item" :value="key"></el-option>
			</el-select>
			<el-select size="small" v-model="operate" placeholder="是否新增">
				<el-option v-for="(item, key) in tplOperates" :key="key" :label="item" :value="key"></el-option>
			</el-select>
			<el-select
				v-if="operate !== 0"
				size="small"
				v-model="skinId"
				placeholder="选择skinID"
				clearable
			>
				<el-option
					v-for="item in skins"
					:key="item.id"
					:label="`${item.type !== 0 ? item.name : '首页'}(${item.id})`"
					:value="item.id"
				></el-option>
			</el-select>
			<div v-if="operate === 0">
				<el-select size="small" v-model="tplType" placeholder>
					<el-option v-for="(item, key) in tplTypes" :key="key" :label="item" :value="key"></el-option>
				</el-select>
				<el-input v-model="name" size="small" class="name" placeholder="请输入皮肤名称"></el-input>
			</div>&nbsp;
			<el-popconfirm v-if="skinId || operate===0" class="save-button" @onConfirm="clickSave" placement="top"
			               :title="$t('Click save will overwrite and apply immediately', {name: this.pxProjectName, skin: operate===0 ? '' : skinName})">
				<el-button slot="reference" type="primary" size="small">{{ $t("Save") }}</el-button>
			</el-popconfirm>
			<el-button v-if="skinId && operate!==0" size="small" @click="getUrl">获取链接</el-button>
		</div>
		<div class="operate-bar" v-if="env==='prod'&&isProd">
			<div class="el-form-item el-form-item--mini" style="padding:10px 0 10px 0">
				<label class="el-form-item__label" style="width: 60px;text-align: left;padding-right:0px">QA人员:</label>
				<div class="el-form-item__content" style="margin-left: 60px;">
					<el-select class="env-select" size="mini" v-model="qa" placeholder="请选择QA人员" @change="changeQA">
						<el-option v-for="item in QAList" :key="item.id" :label="item.name" :value="item.pid"></el-option>
					</el-select>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {mapGetters} from "vuex";
	import copy from "copy-to-clipboard";
	import {
		getSkins,
		saveSkin,
	} from "../../../../src/api/polaris";
	import {pxHostMapping} from "../../../utils";
	import {getDevPersons} from "../../../api/editor";

	export default {
		name: "PublishView",
		props: {
			//tpl: String
		},
		data() {
			return {
				pxEnvs: this.$t("pxEnvs"),
				tplOperates: this.$t("tplOperates"),
				tplTypes: this.$t("tplTypes"),

				env: "dev",
				operate: 1,
				tplType: 0,

				skinId: "",
				pxProjectName: "",
				skins: [],
				pxPid: "",
				name: "",
				QAList:[],
				qa:null,
				pid:null,
				isProd:null
			};
		},
		computed: {
			skinName(){
				return this.skins.find(skin => skin.id === this.skinId).name;
			},
			...mapGetters(["options"])
		},
		methods: {
			async active(tpl) {
				this.tpl = tpl;
				this.$nextTick(this.getSkinsList);
			},
			async changeEnv(e) {
				this.skinId = "";
				this.getSkinsList();
			},
			async changeQA(e) {
				console.log(e)
				this.pid=e
			},
			async getSkinsList() {
				const {env} = this;

				const {pxEnv} = this.options;
				const pxPid = this.pxPid = pxEnv[env];

				this.QAList=await getDevPersons()
				this.QAList=this.QAList.filter((item)=>{
					return item.level==1
				})
				console.log(this.qa)
				this.qa=this.QAList[0].pid

				if (!pxPid) {
					this.$message({
						message: this.$t('Please config projectID', {env}),
						type: "error"
					});
					return;
				}
				try {
					//const data = await getSkins(pxPid, env);
					try {
						const data = await getSkins(pxPid, env);
						this.isProd=data.isProd
						this.pxProjectName = data.name;
						this.skins = data.skins;
						if (data.success !== false) {
							this.pxProjectName = data.name;
							this.skins = data.skins;
						} else {
							// 如果是测试环境，ticket过期，则重新获取ticket
							if (env === "test" && data.notLogin) {
								localStorage.setItem("ticket", "");
								this.getSkinsList(this.pxPid);
							} else if (env === "prod" && data.notLogin) {
								localStorage.setItem("prod_ticket", "");
								this.$message({
									message: this.$t('Online ticket is invalid'),
									type: "info"
								});
								this.pxProjectName = '';
								this.skins = [];
							} else {
								this.$message({
									message: data.message,
									type: "error"
								});
								this.pxProjectName = '';
								this.skins = [];
							}
						}
					} catch (e) {
						this.invalidTicketNotice();
					}
					
				} catch (e) {
					this.pxProjectName = '';
					this.skins = [];
					throw new Error(e.message);
				}
			},
			async invalidTicketNotice(){
				const {env} = this;
				this.pxProjectName = '';
				this.skins = [];
				await this.$confirm(this.$t('SSO is invalid'), this.$t('Alert'), {
					confirmButtonText: this.$t('To Verify'),
					cancelButtonText: this.$t('Close'),
				});
				window.open('/sso/login?env=' + env, '_blank');
			},
			hasIndex() {
				return this.skins.some(v => v.type === "1");
			},
			async clickSave() {
				const {
					env,
					skinId,
					tplType,
					operate,
					pxPid,
					tpl,
					name,
				} = this;
				if (operate === 1 && !skinId) {
					this.$message({message: "请选择修改的皮肤", type: "warning"});
					return;
				}
				if (operate === 0) {
					if (this.hasIndex() && tplType === 0) {
						this.$message({message: "已存在首页", type: "warning"});
						return;
					} else if (!name) {
						this.$message({message: "请输入要添加的皮肤名称", type: "warning"});
						return;
					}
				}
				// const data = {
				// 	projectId: pxPid,
				// 	type: (operate + 1).toString(),
				// 	currentHtmlType: (tplType + 1).toString(),
				// 	skinId,
				// 	tpl,
				// 	name,
				// 	env: env
				// };
				//const {html} = this.skin;
				const params = {
					projectId: pxPid,
					operate: operate + 1,
					type:(tplType + 1).toString(),
					id:skinId,
					html:tpl,
					name,
					env,
					isProd: true,
					qas: [this.qa],
					publishType: 3,
					remarks: '项目迭代',
				};
				//const {ret} = await saveSkin(data);
				const {ret} = await saveSkin(params);
				if (ret.success !== false) {
					this.$message({
						message: `操作成功`,
						type: "success"
					});
					//if (this.$parent.getTpl) this.getSkinsList(projectId);
				} else {
					this.$message({message: ret.message, type: "error"});
				}
				// 新增皮肤则重新获取皮肤列表
				if (operate !== 1) {
					// 2为修改，修改不需重新获取列表
					this.getSkinsList();
				} else if (operate !== 2) {
					this.name = "";
				}
			},
			/** 获取访问链接 */
			getUrl() {
				const {env, skinId, pxPid, skins} = this;
				let type = 1;
				skins.forEach(skin => {
					if (skin.id === skinId) {
						type = skin.type;
					}
				});
				const url = `${pxHostMapping[env]}/projectx/${pxPid}/${
					type === "1" ? "index" : skinId
					}.html`;
				copy(url);
				this.$message({
					message: "链接复制成功",
					type: "success"
				});
			},
			/*getTpl(id) {
				const {skins} = this;
				let tpl = "";
				skins.forEach(skin => {
					if (skin.id === id) {
						tpl = skin.html;
					}
				});
				this.$parent.getTpl(tpl);
			}*/
		},
	};
</script>
<style lang="scss">

</style>
