<!--
 * @Description: 编辑用户标签组件
 * @Author: wenjing
 * @Date: 2023-06-15 11:31:00
-->
<template>
  <el-dialog title="编辑用户标签" :visible.sync="showDialog" width="85%" center 
		:before-close="handleCloseDialog" :close-on-click-modal="false" @open="handleOpenDialog">
    <!-- 用户基本信息 -->
		<div>
			<div><span class="block-name">用户基本信息</span></div>
			<div class="user-info">
				<div class="user-img">
					<img v-if="aupUser.gender === 1" src="../../assets/usertag/user-head-man.png"/>
					<img v-else-if="aupUser.gender === 2" src="../../assets/usertag/user-head-woman.png"/>
					<img v-else src="../../assets/usertag/user-head-unknow.png"/>
				</div>
				<div class="right-line">
					<div class="user-name">{{ aupUser.name }}</div>
					<div class="user-word" style="margin-top:4px;">{{ aupUser.genderText }} | {{ aupUser.age }}</div>
				</div>
				<div class="right-line">
					<div class="user-word">身份证号</div>
					<div style="margin-top:10px;">{{ aupUser.idCardNo }}</div>
				</div>
				<div class="right-line">
					<div class="user-word">电话</div>
					<div style="margin-top:10px;">{{ aupUser.mobile ? aupUser.mobile : '---' }}</div>
				</div>
			</div>
		</div>
		<div>
      <div class="list-style">
        <div><span class="block-name">标签列表</span></div>
        <!-- 新增人工标签气泡 -->
        <add-manual-tag-popup :aupUserId="aupUser.id" :manualTaglist="manualTaglist"
          @close="handleCloseManualTagPopup" />
			</div>
      <!-- 标签列表 -->
      <el-table height="400px" :data="aupUser.userTagList" :header-cell-style="{background:'#eff5f9', color:'#4b5156'}">
        <el-table-column width="20" ></el-table-column>
        <el-table-column type="index" width="50" label="序号"></el-table-column>
        <el-table-column label="标签名称" width="210">
          <template slot-scope="scope">
            <div>{{ scope.row.tag }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="subjectKey" label="画像主题"></el-table-column>
        <el-table-column prop="typeText" label="标签类型"></el-table-column>
        <el-table-column prop="tagTime" label="标记时间" width="160"></el-table-column>
        <el-table-column prop="infoSrcKey" label="信息标识"></el-table-column>
        <el-table-column prop="infoSrcName" label="信息名称"></el-table-column>
        <el-table-column prop="infoSrcTime" label="信息时间" width="160"></el-table-column>
        <el-table-column label="操作" width="60" >
          <template slot-scope="scope">
            <el-popconfirm title="确定删除当前标签吗?" @confirm="HandleDeleteUserTag(scope.row)">
              <i class="el-icon-delete" style="color:#FF4D4F" slot="reference"></i>
            </el-popconfirm>
          </template>
        </el-table-column>
        <div slot="empty" style="margin-top: 40px">
          <img src="../../assets/common/no-content.png" />
        </div>
      </el-table>
		</div>
		<div style="text-align:center; margin-top:25px">
			<el-button size="small" @click="handleCloseDialog">关 闭</el-button>
		</div>
	</el-dialog>
</template>

<script>
import AddManualTagPopup from './AddManualTagPopup.vue';

export default {
	name: 'UserTagEditorDlg',
	props: {
    showDialog: {
      type: Boolean,
      default: false
    }, 
    userInfo: {
      type: Object,
      default: {}
    }, 
    manualTaglist: {
      type: Array,
      default: []
    }
  },

  components:{
    'add-manual-tag-popup': AddManualTagPopup
  },

	data() {
		return {
      aupUser: { userTagList:[] },
      refreshParentPage: false
		}
	},

	methods: {
		//获取指定用户及其标签列表
    getAupUserWithTagList() {
      let url = this.commonUtil.fillUrlArgments(this.commonUrl.URL_GET_AUP_USER_WITH_TAG_LIST, this.userInfo.id);
      this.appAxios("GET", url).then(result => {
        if (result == null) return;
        this.aupUser = result.data;
      })
    },

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

    handleCloseManualTagPopup(reloadUserWithTags, reloadManualTags) {
      if (reloadUserWithTags) {
        this.getAupUserWithTagList();
      }
      if (reloadManualTags) {
        this.$emit("refreshManualTags");
      }
    },

    HandleDeleteUserTag(userTag) {
      let url = this.commonUtil.fillUrlArgments(this.commonUrl.URL_DELETE_AUP_USER_TAG, userTag.id);
      this.appAxios("DELETE", url).then(result => {
        if (result == null) return;
        this.getAupUserWithTagList(userTag.aupUserId);
        this.refreshParentPage = true;
      })
    },

    handleCloseDialog() {
      this.aupUser = { userTagList:[] };
      this.$emit("closeDialog", this.refreshParentPage);
    }
	},

	mounted() {
	}
}
</script>

<style scoped>
.block-name {
  font-weight: bold;
  color: #000;
  padding-left: 10px;
  border-left: 5px solid #4E7CED;
  border-radius: 2px;
}

.user-info {
  margin-top: 20px;
  background: #F5F7FA;
  padding: 15px;
  display: flex;
  color: #343434;
}

.right-line {
  border-right: 1px solid #D3D3E0;
  padding-right: 15px;
  padding-top: 5px;
  margin-right: 15px;
}

.right-line:last-child {
  border-right: none;
}

.user-name {
  color: #397AF9;
  font-size: 16px;
}

.user-word {
  color: #999999;
  font-size: 12px;
}

.user-img {
  width: 48px;
  height: 48px;
  margin-right: 20px;
}

.list-style {
  margin: 20px 0 10px;
  display: flex;
  justify-content: space-between;
}
</style>