<!--
 * @Description: 用户画像对话框组件
 * @Author: wenjing
 * @Date: 2023-06-09 10:03:00
-->
<template>
	<el-dialog title="用户画像" :visible.sync="showDialog" width="640px"
		:before-close="handleClose" :close-on-click-modal="false"	@open="handleOpenDialog">
		<el-tabs v-model="curTabName" @tab-click="handleTabClick" style="margin-top: -20px;">
			<el-tab-pane v-for="(tagDto, index) in renderTagDtoList" :lazy="true"
				:key="index" :label="tagDto.subjectName" :name="tagDto.subjectName">
				<div class="user-profile-panel" ref="xxx">
					<user-profile :tagSet="tagDto" mode="dynamic" />
				</div>
			</el-tab-pane>
		</el-tabs>
		<div style="text-align:center; margin-top:30px">
			<el-button size="small" @click="handleClose()">关 闭</el-button>
		</div>
	</el-dialog>
</template>

<script>
import UserProfile from '../../common/UserProfile.vue';

export default {
	name: "UserProfileDlg",
	props: ['showDialog', 'userInfo'],
	components: {
		'user-profile': UserProfile
	},

	data() {
		return {
			curTabName: '',
			renderTagDtoList: []
		}
	},

	methods: {
		listRenderTagDTOs() {
      let url = this.commonUtil.fillUrlArgments(
				this.commonUrl.URL_LIST_RENDER_TAG_DTOS_BY_UID, this.userInfo.id);
      this.appAxios("GET", url).then(result => {
        if (result == null) {
          return;
        }
        
				this.renderTagDtoList = result.data;
				if (this.renderTagDtoList[0]) {
					this.curTabName = this.renderTagDtoList[0].subjectName;
				}
      })
    },

		handleOpenDialog() {
			this.listRenderTagDTOs();
		},

		handleTabClick(tab) {
    },

		handleClose() {
			this.renderTagDtoList = [];
			this.$emit("closeDialog");
		}
	},

	mounted() {}
}
</script>

<style scope>
.user-profile-panel {
	margin: 0 auto;
	border: 0px solid red;
}
</style>